winter we fell's layout (p.o. ver!)

Tags:
Description:

CREDITS TO THE ACTUAL LAYOUT ITSELF !! https://layouts.spacehey.com/layout?id=26947 (JS STYLED IT AND STUFF, FEEL FREE TO REMOVE STUFF AND WHATEVER!!) dont forget to comment when using chat
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by winter we fell (caspian's #1 fan) (https://layouts.spacehey.com/layout?id=105415) -->

<style>

.profile .friends .person:first-child img:not(.icon){
content:url('https://i.pinimg.com/736x/2a/38/85/2a388537411c486ca32554f2742c10a6.jpg');
}
.profile .friends .person:nth-child(2) img:not(.icon){
content:url('https://i.pinimg.com/736x/4a/ea/bc/4aeabc0d41a32c4fceb25a704eb8b7fc.jpg');
}
.profile .friends .person:nth-child(3) img:not(.icon){
content:url('https://i.pinimg.com/736x/7b/b2/37/7bb237219c2dc84d85b97a7d2e50aa3d.jpg');
}
.profile .friends .person:nth-child(4) img:not(.icon){
content:url('https://i.pinimg.com/736x/e0/41/2c/e0412c56f6abfa3b44492f4791742d48.jpg');
}
.profile .friends .person:nth-child(5) img:not(.icon){
content:url('https://i.pinimg.com/736x/f8/af/d5/f8afd5fb3003f4a3fe5509c4242b3174.jpg');
}
.profile .friends .person:nth-child(6) img:not(.icon){
content:url('https://i.pinimg.com/736x/23/3c/37/233c37cdb4aa347f4d1fafeed80e4092.jpg');
}
.profile .friends .person:nth-child(7) img:not(.icon){
content:url('https://i.pinimg.com/736x/17/dc/ca/17dccac913eb30dace759617fae379fc.jpg');
}
.profile .friends .person:nth-child(8) img:not(.icon){
content:url('https://i.pinimg.com/736x/69/34/aa/6934aafd6d55d040249a3bb540e519cd.jpg');
}
.profile .friends .person:nth-child(9) img:not(.icon){
content:url('https://i.pinimg.com/736x/f3/4a/02/f34a02c6651f312b43dfd357ee4e4625.jpg');
</style>

<style>

/*flip profile*/

.profile{

direction: rtl;



}



.blurbs, .profile .table-section .heading, .blog-preview a, .friends, .general-info, .contact, .url-info, .details-table, .details p, .mood{

direction: ltr;



}</style>

<style>
.profile .url-info p:last-child:after {content: ""; display: block; background-image: url(https://dl.glitter-graphics.com/pub/291/291116vo8ngeelgh.gif);  width: auto; height: 29px; background-position: bottom center; background-size: 100%; background-repeat: no-repeat;}
.profile .url-info p {text-align: center;}
</style>

<div class="snowflakes">


  <div class="snowflake">


   🫧


  </div>


  <div class="snowflake">


  🫧


  </div>


  <div class="snowflake">

🫧
  


  </div>


  <div class="snowflake">


  🫧


  </div>


  <div class="snowflake">


  🫧


  </div>


  <div class="snowflake">


  🫧


  </div>


  <div class="snowflake">


    🫧


  </div>


  <div class="snowflake">

    🫧


  </div>


  <div class="snowflake">


    🫧


  </div>


  <div class="snowflake">


    🫧


  </div>


  <div class="snowflake">


    🫧


  </div>


  <div class="snowflake">


    🫧


  </div>


</div>


<style>


/* customizable snowflake styling */


.snowflake {


  color: purple;


  font-size: 1em;


  font-family: Arial, sans-serif;


  text-shadow: 0 0 5px rgba(0,0,0,0.7);


}





@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}


</style>






<style>
.profile-pic {
position: relative;
width: 183px;
filter: drop-shadow(0 0 0.25rem gray);
}
.profile-pic:after {
content: "";
background: url('https://i.pinimg.com/736x/78/b7/50/78b7502901870a83ec6b13b8c49a27eb.jpg'), linear-gradient(150deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2), 40%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.6));
background-size: contain, cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>

<style>
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 5px); }
    100%   { transform: translate(0, -0px); }   
}
.profile-pic, .profile h1{ 
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
</style>

<style>
.general-about{
  position: relative;
  margin-top: 30px;
}
.general-about .profile-pic::before{
  content: '';
  background: url('http://dl7.glitter-graphics.net/pub/474/474167l68h9nknqq.gif') no-repeat;
  background-size: 70px;
  display: block;
  width: 200px;
  height: 100px;
  z-index: 999;
  position: absolute;
  top: -22px;
  left: 108px;
}
</style>

<style>
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://external-media.spacehey.net/media/s2yk2nEsH-Dai-MAKuYosJUOoCKADok6_sjLGFe3F5Z0=/https://25.media.tumblr.com/054c287e999949f74c12ee3f8c7b2273/tumblr_mi6fw9YdRw1s5r15fo1_500.gif"); display: inline-block; content:"" }
.blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */
.general-about .profile-pic:after { background-size: cover; width: 183px; height: 160px; } /* profile */ 
</style>

<style>

main:before {
	width: 100%;
	height: 300px;
	display: block;
	content: "";
	background-image: url('https://i.pinimg.com/736x/10/a7/6c/10a76c11e042a1350c8164d47473424d.jpg');
	background-position: center center;
	background-size: cover;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}
}
</style>


<div style="float:  ; max-height: 400px; position: fixed; left: 1px; bottom: 000px; z-index: 200;">
<img src="https://creep.crd.co/assets/images/gallery04/18abbab7.gif?v=9fb44b0b" height="200px"/></div>


<div style="float:  ; max-height: 400px; position: fixed; right: 1px; bottom: 000px; z-index: 200;">
<img src="https://i.scdn.co/image/ab67616d0000b273586acdba3a0ddc93693a313e" height="200px"/></div>

<style>
nav img.logo {
 
 content:url("https://1000logos.net/wp-content/uploads/2023/02/Panic-at-the-Disco-Logo-2008.png");
    }
</style>






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

<style>
img:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
} </style>

<style>
  @keyframes spin {
    100% {
      transform:rotate(360deg);
    }
  }
  
  .recordPlayer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;
  }
  .cd{
    height: 150px;
    margin-left: 55px;
    padding: 10px;
    animation: spin 1.88s linear infinite;
    position: absolute;
  }
  .cdCover {
    height: 150px;
    position: relative;
    z-index: 1;
    margin-right: 55px;
  }
</style>

<div class="recordPlayer">
  <img class="cd" src="https://64.media.tumblr.com/065dbab96e406d8a22dd100ea54ddadc/0b1e8bbe9782c000-d3/s400x600/0d950bb60429f2bd7a308af65a0d4b700a2dd1ba.pnj"/>
  <img class="cdCover" src="https://64.media.tumblr.com/ae0bb5cb965c4ea1eb2922141c1780dc/0b1e8bbe9782c000-6e/s640x960/bed105b18bd436871b06839df85a0040f34a1339.pnj"/>
</div>

<style>

body{
background: url(https://i.ibb.co/XzYwX3g/ezgif-4-5cb8a9dcfa.png) no-repeat fixed; 
background-size:cover;
cursor:url("https://cur.cursors-4u.net/nature/nat-11/nat1009.cur"), auto;
}

.edit-link a{
color: white;
}

nav .top .center form button, .friends button{
background: url(https://i.ibb.co/TgFVNVz/artworks-000249416011-3iwwln-t500x500.jpg);
border-radius: 5px;
color: black;
}

input{
color: white;
border: 2px solid black;
border-radius: 5px;
background: url(https://cdn.shopify.com/s/files/1/0662/0282/9034/products/moda-through-the-years-9627-16.jpg?v=1674682669);
}

p, a, b, .logout-btn, label, h4{
font-family: Lime Blossom Caps;
}

label, .logout-btn, .top a{
font-size: 14px;
}

.profile .blurbs .section h4 {
color: black;
font-size: 16px;
letter-spacing: -1px;

}

p{
font-size: 14px;
}

main {
background-image: url(https://i.ibb.co/RNkgfbT/maxresdefault-1.jpg);
border-radius: 20px;
border: 3px solid darkgoldenrod;
box-shadow: 0px 2px 4px 2px black;
}

footer{
color: black;
border-radius: 20px;
border: 3px solid darkgoldenrod;
background: url(https://i.ibb.co/X8KFk88/green-grass-under-blue-sky-vintage-retro-style-beauty-background-36013960.jpg);
box-shadow: 0px 2px 4px 2px black;
font-family: Lime Blossom Caps;
}

nav .top{
background-image: url(https://i.ibb.co/ZYmr7c6/ezgif-5-25027ece42.jpg);
border-radius: 20px;
border: 3px solid darkgoldenrod;
box-shadow: 0px 2px 4px 2px black;
}

nav .links{
background-color: transparent;
}

.profile .friends .inner{
background: url(https://upload.wikimedia.org/wikipedia/en/thumb/6/64/Nine_in_the_afternoon_cover.PNG/220px-Nine_in_the_afternoon_cover.PNG);
text-align: center;
border: 3px solid darkgoldenrod;
box-shadow: 0px 2px 4px 2px black;
border-radius: 10px;
}

.general-about .profile-pic img, .comments-table td:first-child img, .profile .friends .person img:not(.icon){
border: 10px solid transparent;
border-image: url("https://storage.needpix.com/rsynced_images/baroque-frame-1518461230BTv.jpg") 60 fill round;
box-shadow: 0px 0px 10px 0px black;
} 

.profile-info{
background: url(https://i.ibb.co/Lr6Cgqs/R-5458789-1492257167-9474.jpg);
border-radius: 10px;
border: 3px solid darkgoldenrod;
box-shadow: 0px 2px 4px 2px black;
color: transparent;
}

.profile-info a{
font-family: Lime Blossom Caps;
color: white;
}

.blog-preview{
text-align: center;
color: white;
border-radius: 10px;
background: url(https://payload.cargocollective.com/1/7/239784/4866023/19-41.jpg);
border: 3px solid darkgoldenrod;
box-shadow: 0px 2px 4px 2px black;
}

.profile .blurbs .inner{
color: black;
text-align: center;
border-radius: 10px;
background: url(https://media.istockphoto.com/id/91707849/photo/sheet-of-yellow-ruled-paper.jpg?s=612x612&w=0&k=20&c=RJAHwvSY_tJH27Wfo_xOdQOztxzlP9Xd5a1ZCw3Ued4=);
border: 3px solid darkgoldenrod;
box-shadow: 0px 2px 4px 2px black;
}

.general-about .details{
color: white;
border-radius: 10px;
background: url(https://i.ibb.co/TgFVNVz/artworks-000249416011-3iwwln-t500x500.jpg);
border: 3px solid darkgoldenrod;
box-shadow: 0px 2px 4px 2px black;
}

.bulletin .comments .inner{
color: white;
border-radius: 10px;
background: black;
}

.profile .contact {
color: white;
border-radius: 10px;
background: url(https://dirtsoilandmore.com/wp-content/uploads/sites/12/2014/02/dirt.jpg);
box-shadow: 0px 2px 4px 2px black;
}

.profile .table-section{
color: white;
border-radius: 10px;
border: 2px solid black;
background-image: url(https://cdn.shopify.com/s/files/1/0662/0282/9034/products/moda-through-the-years-9627-16.jpg?v=1674682669);
box-shadow: 0px 0px 19px 0px saddlebrown;
}

.profile .mood {
text-align: center;
color: white;
border-radius: 10px;
border: 3px solid darkgoldenrod;
box-shadow: 0px 2px 4px 2px black;
background: url(https://dirtsoilandmore.com/wp-content/uploads/sites/12/2014/02/dirt.jpg);
}

.profile .blurbs .heading, .profile .friends .heading {
text-align: center;
color: white;
border: 2px solid black;
box-shadow: 0px 2px 4px 2px black;
background: url(https://cdn.shopify.com/s/files/1/0662/0282/9034/products/moda-through-the-years-9627-16.jpg?v=1674682669);
border-radius: 5px;
}

.profile .table-section .heading, .home-actions .heading {
text-align: center;
color: white;
background: url(https://cdn.shopify.com/s/files/1/0662/0282/9034/products/moda-through-the-years-9627-16.jpg?v=1674682669);
border-radius: 5px;
}

table.comments-table{
background-color:black;
display: block;
height: 300px!important;
overflow-y: scroll;
border-radius:15px;
border-color:black;
border-width: 3px;
box-shadow: 0px 0px 19px 0px saddlebrown;
}

.url-info{
background: url(https://i.pinimg.com/736x/1d/83/ac/1d83ac509b620882a8147262a4957444.jpg);
background-position: center;
border-radius: 10px;
height: 300px;
border: 3px solid darkgoldenrod;
box-shadow: 0px 2px 4px 2px black;
}

.url-info p{
    opacity: 100;
}

.profile h1{
color: white;
text-shadow: 2px 2px 5px black;
font-size: 30px;
font-family: Lime Blossom Caps;
animation: type 3s steps(27);
white-space: nowrap;
overflow: hidden;
}

@keyframes type{
  0%{
    width:0ch;
  }
  
  100%{
    width:27ch;
  }
}

@keyframes blink{
  0%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:1;}
}

.contact .heading h4{
display:none !important;
}

.contact .heading{ 
font-size: 0.1px; 
}

.contact .heading:after{ content: url(https://i.ibb.co/41CfP7X/ezgif-1-da0de2ef6d.jpg); 
border-radius: 15px !important;
overflow:hidden;
}


.profile .contact .heading{
background: darkolivegreen;
border-radius: 5px;
}

.profile .friends p, .profile .friends .person p {
color: white;
text-shadow: 2px 3px 5px black;
font-family: Lime Blossom Caps;
font-size: 15px;
letter-spacing: -1px;
}

.comments-table td{
background: url(https://cdn.shopify.com/s/files/1/0662/0282/9034/products/moda-through-the-years-9627-16.jpg?v=1674682669);
background-position: center;
no-repeat fixed; 
background-size:cover;
}

.comments-table td:first-child{
background: url(https://i.ibb.co/PZhzfBn/ezgif-1-ccfc2dc5d3.jpg);
background-position: center;
}

.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
border: 3px solid darkgoldenrod;
box-shadow: 0px 2px 4px 2px black;
}

.profile .friends a, .details a, .blog-preview a, .profile .blurbs a{
color: gold;
}

.profile .friends a:hover, .details a:hover, .blog-preview a:hover, .profile .blurbs a:hover{
color: darkgoldenrod; 
}

.contact a, .mood a, footer a{
color: white;
}

.contact a:hover, .mood a:hover, footer a:hover{
color: darkgreen;
}

.profile .table-section a {
color: white;
}

.profile .table-section a:hover{
color: darkgreen;
}

.count{
color: yellow;
}

.details-table td, .details-table td:first-child{
background: url(https://i.ibb.co/TgFVNVz/artworks-000249416011-3iwwln-t500x500.jpg);
border-radius: 3px;
box-shadow: 0px 2px 4px 2px black;
}

.details-table td:first-child p{
color: white;
}

nav .links .special a{
color: forestgreen;
}

html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.imgur.com/QpnTsrV.jpg);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.2;
  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%) }
}

.online {
  animation: rotation 8s infinite linear;
    margin:auto;
    padding-bottom: 5px;
    content: url(https://barok.crd.co/assets/images/gallery04/4af28172.gif?v=8cc45fd0);
}



<style>
    ::-webkit-scrollbar {
    width: 8px;
    height: 10px;}

    ::-webkit-scrollbar-thumb {
    background: darkgoldenrod;}

    ::-webkit-scrollbar-track {
    background:darkolivegreen;}
</style>

<style>

li.active .icon { 
    content:url('https://i.ibb.co/pzjXHzw/ezgif-2-cb25cc3f4f.gif'); 
    }

.contact .inner a img {
display: none;
}
.contact .inner a img:before {
    font-size: 1em;
    display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
	/* Add to Friends */
	content: "🦋"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* Add to Favorites */
	content: "🌿"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "🧭"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward to Friend */
	content: "⚜️"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content: "📩"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content: "🌾"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* Add to Group */
	content: "🍂"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: "🗝️"
}

.icon, .award img {
content:url('https://media0.giphy.com/media/20KOWrJlAGHb9bDhXf/giphy.gif?cid=6c09b9529fb49b9fe20054544710aa21f33a7fe1d8971401&rid=giphy.gif&ct=s'); 
width: 20px;
height: 20px;
}

</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 0 of 0 comments ( View all | Add Comment )