russian war winter layout

Tags: winter, snow, army, white, cute, silly, layout, dark

Description:

(Click to show.) A Layout inspired by the cold russian city and the cold "aesthetic" hovering around it. a creepyish form that has a custom grid (credit to Nole for the grid), should work on your profile, blog and bulletins! Please comment if using or if there's a issue with the layout I should know about. x_X! Thank you for all the recent support aswell ( ◜‿◝ )♡ Dms are open

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Sam  (https://layouts.spacehey.com/layout?id=98725) -->

<style>

}

::-webkit-scrollbar {
width: 10px;
height: 10px;
}

::-webkit-scrollbar-track {
background-image: url("https://i.pinimg.com/564x/9f/5d/cb/9f5dcbef535e7114e21a3e8d6d51ed79.jpg ");
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
background-image: url("https://i.pinimg.com/564x/d6/2e/3e/d62e3e91b8685fd8397c64d991f04884.jpg ");
border-radius: 10px;
}

l::-webkit-resizer {
width: 16px;
height: 16px;
background-color: #cccccc;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==");
background-position: bottom right;
background-repeat: no-repeat;
image-rendering: pixelated;
</style><style>
     body {
      background: url(https://i.pinimg.com/564x/2d/60/7c/2d607cc2ca66d617f091bc1e35eeea4c.jpg )  no-repeat fixed; background-size:cover;

}

main {
background: rgba(98,101,84,0.7);
color: white;
border: solid 3px white;
border-top: none;
text-align: left;
}


nav .top{
background: #626554;
color: white;
border: solid 3px white;
border-bottom: none;
}

nav .links{

background: #626554;
color: white;
border: solid 3px white;
font-size: smaller;
text-align: left;
}

footer{
background: #626554;
color: white;
border: solid 3px white;
font-size: smaller;
text-align: centre;
}

nav .links a{
text-shadow: none;

}
a{
color: white;
}

a:hover, nav .links a:hover, nav .top a:hover, button:hover{
color: white !important;
text-decoration-style: underline !important;
}

button{
color: white !important;
background: none;
border: none;
}
.count{
color: white;
}

:root {

--logo-blue: white;

--darker-blue: white;

--lighter-blue: none;

--even-lighter-blue: none;

--lightest-blue: none;

--dark-orange: white;

--light-orange: none;

--even-lighter-orange: none;

--green: white;

}


.contact .inner a img {

font-size: 0;

}



}
.general-about{
position: relative;
margin-top: 30px;
}

}


html:after {
animation: grain 8s steps(10) infinite;
background-image: url(https://s.studiobinder.com/wp-content/uploads/2020/08/What-is-Film-Grain-Film-Grain-Example.jpg);
content: "";
height: 300%;
left: -50%;
opacity:.1;
position: fixed;
top: -110%;
width: 300%;
pointer-events:none;
}
@keyframes grain {
0%, 100% { transform:translate(0, 0) }
10% { transform:translate(-5%, -10%) }
20% { transform:translate(-15%, 5%) }
30% { transform:translate(7%, -25%) }
40% { transform:translate(-5%, 25%) }
50% { transform:translate(-15%, 10%) }
60% { transform:translate(15%, 0%) }
70% { transform:translate(0%, 15%) }
80% { transform:translate(3%, 35%) }
90% { transform:translate(-10%, 10%) }
}
</style>

<style>
}
.profile {
  display: grid;
  grid-template:
    "left"
    "right";
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
/* normally the width is 40%, try changing back to see why this
doesn't look good */
.profile div.col.w-40 {
  width: 100%;
}

/* left column */
.col.w-40 {
  grid-area: left;
  display: grid;
  grid-template:
    "general-about contact"
    "header  table1 "
    "url-info table2 "
    "mood     table2 ";
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

/* Your title/Name */
h1 {
  grid-area: header;
}

/* Your picture/online status */
.general-about {
  grid-area: general-about;
}
/* Mood/blog/pics */
.mood {
  grid-area: mood;
}
/* contact */
.contact {
  grid-area: contact;
}
/* spacehey URL */
.url-info {
  grid-area: url-info;
}
/* General/Music/etc */
.table-section:first-of-type {
  grid-area: table1;
}
/* The other table */
.table-section:last-of-type {
  grid-area: table2;
}

/* right column stuff */
/* right */
.col.right {
  grid-area: right;
  display: grid;
  grid-template:
    "blurbs blog-preview"
    "blurbs friends"
    "comments comments"
    "comments comments";
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
/* contains "View Blog" Button */
.blog-preview {
  grid-area: blog-preview;
}

/* contains about me */
.blurbs {
  grid-area: blurbs;
}
/* Friends pictures grid */
.friends:not(#comments) {
  grid-area: friends;
}

/* comments */
#comments {
  grid-area: comments;
}

/* clears margins making grid-gaps more uniform
" > *" selects all child elements */
.profile > *,
.col.w-40 > * .col.right > *,
.profile .blurbs,
.profile .contact,
div.col.w-40.left div.table-section,
div.col.w-40.left div.url-info {
  margin: 0px;
}</style>

<style>
  
nav .links li:not(:last-child)::after {

content: url("https://external-media.spacehey.net/media/sFMUCOCYwF42iYHmLhKkr4anpUJo9eChzGtptILoguMw=/https://pixels.crd.co/assets/images/gallery60/bbcbc07c.gif?v=379361a4 ");

}
  
.verified-info .icon.verified{
content:url(https://external-media.spacehey.net/media/sFMUCOCYwF42iYHmLhKkr4anpUJo9eChzGtptILoguMw=/https://pixels.crd.co/assets/images/gallery60/bbcbc07c.gif?v=379361a4);
}
  
a .icon {
    content:url(https://external-media.spacehey.net/media/sFMUCOCYwF42iYHmLhKkr4anpUJo9eChzGtptILoguMw=/https://pixels.crd.co/assets/images/gallery60/bbcbc07c.gif?v=379361a4 );
}
  
nav .links a, nav .links li .special a{
text-shadow: none;
}

</style>

<style>


.logo{content: url(https://i.postimg.cc/VLzhJkc0/image.png);width: 165px !important;height: 42px !important;}

</style>
<style>
* {cursor: url(https://cur.cursors-4u.net/others/oth-4/oth338.cur), auto !important;}<a href="https://www.cursors-4u.com/cursor/2009/04/04/soldier-in-the-army-3.html" target="_blank" title="Soldier In The Army With Sniper Rifle"><img src="https://cur.cursors-4u.net/cursor.png" alt="Soldier In The Army With Sniper Rifle" style="position:absolute; top: 0px; right: 0px;"/></style><style>
.online { .online img { content: url("https://i5.glitter-graphics.org/pub/2115/2115985y3s1mnzx94.gif"); animation-name: none; visibility: visible; height: 43px; width: 90px; }
}
.general-about .online {
  display: flex;
  align-items: center;
}

.general-about .online::before {
  content: "";
  background: url("https://i.postimg.cc/ZRpTPBPL/348472f664f8a8ef951945cff20831dd.png ") center center no-repeat;
  background-size: contain;
  height: 2rem;
  width: 2rem;
  margin-right: 5px;
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(1, 0, 0, 1);
  animation-duration: 2s;
}

.general-about .online img {
  display: none;
}

</style>
<style>main:before {
	width: 100%;
	height: 300px ;
	display: block;
	content: ""; 
	background-image: url(' https://i.postimg.cc/zBbcYXMy/2024-02-02-046-Kleki.png ');
	background-position: center;
	background-size: cover;
}
@media only screen and (max-width: 500px) {
	main:before{
		height: 200px;
	}
}</style>
<style>
.profile .url-info p:last-child:after {content: ""; display: block; background-image: url( https://i.pinimg.com/564x/68/77/f9/6877f9917b3f0ddaa7ed8f3bc769b48e.jpg );  width: auto; height: 250px; background-position: top center; background-size: 100%; background-repeat: no-repeat;}
.profile .url-info p {text-align: center;}
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 82 comments ( View all | Add Comment )

(working on profile) paawpaan☆	1762266891 usingg Report Comment
𝖗0𝖆𝖉𝖐𝖎𝖑𝖑	1762245166 using!! love it!! Report Comment
ayako	1761530051 usando Report Comment
fr33xp.xen	1760809516 using Report Comment
ℳ𝒾𝒶	1757311238 Using Report Comment
ℳ𝒾𝒶	1757311237 Using Report Comment
dayll	1756415894 Using Report Comment
m3t	1756070809 using Report Comment
mo1.ra	1755572784 Using ☆:.｡. o(≧▽≦)o .｡.:☆ Report Comment
mo1.ra	1755572783 Using ☆:.｡. o(≧▽≦)o .｡.:☆ Report Comment
+Trig+	1754578434 Using :] Report Comment
𝄞♰ 𓏼 ᴀsᴘᴇɴ ◞	1753834918 С использованием! Report Comment
Pilulariuz	1753270389 using!!! Report Comment
leukOtom3	1752513978 NOT USING BUT I LOVE THE IDEA SM Report Comment
timik	1752315639 using! Report Comment
sacredflesh	1752293371 using Report Comment
Li ?!	1750991649 using! Report Comment
Führer	1746717023 using Report Comment
sidney ♫⃠	1746672732 using! Report Comment
mikepilled	1745803657 Using Report Comment