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 32 comments ( View all | Add Comment )

﹒ 𝓞 ⁺ 𝓐 𓏵 ⟢	1721897924 using Report Comment
كاستيلcas	1719302741 using Report Comment
𝕱𝖑𝖊𝖚𝖗𝖙⋆⭒˚.⋆🚬	1717511887 using Report Comment
ミ☢ 𝘒𝘈4𝘌𝘙𝘎𝘈.	1716861994 using! Report Comment
🍮michigan 〄◌˳˚⌖	1716831914 using Report Comment
🍮michigan 〄◌˳˚⌖	1716831914 using Report Comment
jellySkull	1716534280 using Report Comment
d5vvp	1715767748 Using. Report Comment
theo	1715441391 usingg:] Report Comment
Nono⋆ ݁.⁺｡˚	1714883296 using :3 Report Comment
xx.z0mb11_b1t3.xx	1712868990 using :D Report Comment
S1zmK	1712864696 Using!! Report Comment
nuke	1711944716 is there any way to just get the background image? Report Comment Select just the "body" part of code. by Sam; 1711975422; Report
⌖ joanne-->	1711353479 using Report Comment
Neth	1711347638 using! Report Comment
keøns	1710383328 using ! Report Comment