Nostalgic Halloween layout

Tags: halloween, nostalgic, nostalgiacore, orange, purple, green, black, white, holiday
Description:

I know Halloween just passed but... Comes with: Autoplaying music (This is Halloween), Loading screen, Custom logo, Custom contact icons, Custom online now icon, Custom cursor, Creepster font, Falling pumpkins, Custom icons on the header
Preview:

click on the image for a larger preview
Code:

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

<style>
  
body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url(https://64.media.tumblr.com/57a73ba5a4dfbeaf987221cbe3390d5b/8e39d408ac89b03a-ee/s400x600/1392274d14e315226cf71eac57a9ed94e83ad068.gifv);

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 1s ease 4s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 



  
.logo {

content:url("https://i.ibb.co/wMK77hk/image.png");

}
  

main:before {
width: 100%;
height: 300px;
display: block;
content: "";
background-image: url('https://i.pinimg.com/564x/1b/6e/8e/1b6e8e186c6657a3267c40fdb35e8983.jpg');
background-position: center bottom;
background-size: cover;
background-repeat: no-repeat;
}
@media only screen and (max-width: 600px) {
main:before{
height: 600px;
}
}
  
.general-about{
  position: relative;
  margin-top: 30px;
}
.online {
    content: url(https://ct.pimp-my-profile.com/online/online6ru2lv.gif);
}

html,body {cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsSAAALEgHS3X78AAAAtklEQVQ4jbWSwQnCQBBFc8vFFqzAixUINhI8eUshFmAzYi324CHgbeUvPPkZZ4MoBj67M/Pf3yVs1/37223X5Sf4qwBAaTz05eMgjI/budxPmwpL2qu3GKSBjJLfwOXzFJ4uQ9X1uKq1Vm6jPfO3EBUOySSQACkGvwIcZsht4qnRV0Pi6Riy2ntpwLjvmwDCMwtQUw3WDABy7+w/xBDkdQp7AAMA31O7L32FDH2NvcVn3XqFLfAJLoBpFuysaKgAAAAASUVORK5CYII='), 
auto;}

a:hover{cursor:
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAZCAYAAAAv3j5gAAAAAXNSR0IArs4c6QAAAIRlWElmTU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABIAAAAAQAAAEgAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABqgAwAEAAAAAQAAABkAAAAA+FOh2QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDYuMC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KGV7hBwAAAetJREFUSA3tk7FLQlEUxs97omK6qoWhg5AgShmGkFODo6FD/R8OtTkINbYa4SAiLg1tLS3h0iIEkVTU0GBgk0tDafZO3xEf+ApLTbcOfNx7Lvd9v3sO5xH9xzQ6oKoq67Lb7TwNT91D0TeyCmRH02gO+xfoADJbLNTpdAz3cDx2GAwEtAVQBDYWqAs9QkeqSpqmGe7ieKxQB2+L2TEOpBpxtUHb5+e0C7g8AunEYQCJi4LXX2F971vebWzQ5sUFFYvFP8G+gaSqU0CakF7Czfo6hUIhKpfLf4L1325c0Dregw6hWq3GZayiSqXSm0zj7d+zbxUNflJD8gZdra3RyvU1mbGPRqNUKpXGrmwoCG1TzmD8AH1AEqv392S1Wikej1OhUBgLNhQkxq+AnWB9grrdLl0uLckx2Ww2SiQSlM/nR4b9CBLTZ8D2MYmNRoOWb2/liBRFIYfDQclkknK53EiwX0FiLJOYSqWo2WwSM0tO7XabWq1Wr1KfzzcSTLxGCvlpq9Uq1+t1zmazvenDcLDH42Gv1zvRNA4FCyyTybDJZOr9ZpJHViKALXIwGJw+bPAlAguHwzw/v8CxWGy6sEGQ7AUmFblcLsZEzh4WCATY6XRyOp2ePczv97Pb7Z4tSG+jtPJre//ziTrwCcORstUPY3vxAAAAAElFTkSuQmCC'),
auto;}

body{
  background: url(https://i.pinimg.com/564x/62/76/f6/6276f6ea9f99b82b6df3b93608b272b0.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

main{
  background: black;
  color: white;
}

.friends{
  color: #ff7000;
  background: black
}

table.comments-table{
  color: white;
  background: transparent;
  display: block;
  border: transparent;
}
  
.comments-table td:first-child {
background: transparent;
}

.profile .blurbs{
  background: transparent;
  display: block;
}

.profile .mood{
}

a:hover{
  color: white;
}
a{
  color: white;
}

nav .top{
  background: #00cc00;
}

nav .links{
  background: #ff7000;
}

.nav .top , nav .links{

text-align: center;

}
  
nav .links a:hover {
color: white;
}
  
nav .links li:not(:last-child)::after {

content: url("https://gifcity.carrd.co/assets/images/gallery02/73df5495.gif?v=dbe39dbe");

}
  
nav .links a, nav .links li .special a{
text-shadow: none;
}
  
.person p, .count {
color: #00cc00 !important;
}
  
.profile-info {
    border: transparent;
}

footer{
  background: #70f;
  color: white;
}

:root {
--logo-blue: white;
--darker-blue: white;
--lighter-blue: #70f;
--even-lighter-blue: #ff7000;
--lightest-blue: #00cc00;
--dark-orange: white;
--light-orange: #70f;
--even-lighter-orange: black;
--green: black;
}
  
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #00cc00; 
}

::-webkit-scrollbar-thumb:hover {
  background: #ff7000; 
}
  
/* contact icons */
.contact .inner a img {
font-size: 0;
}
.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 favorite */
content: "🎃"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "🎃"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward 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 2 group  */
content: "🎃"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "🎃"
}
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Creepster');
body
{
    font-family: 'Creepster', cursive; font-size:150%;     
    -webkit-font-smoothing: none !important;                               
}
  
.logout-btn{
font-family: 'Creepster', cursive;
}
</style>

<div class="snowflakes">
<div class="snowflake"><img src="https://gifcity.carrd.co/assets/images/gallery02/7c097900.gif?v=dbe39dbe"/></div>
<div class="snowflake"><img src="https://gifcity.carrd.co/assets/images/gallery02/7c097900.gif?v=dbe39dbe"/></div>
<div class="snowflake"><img src="https://gifcity.carrd.co/assets/images/gallery02/7c097900.gif?v=dbe39dbe"/></div>
<div class="snowflake"><img src="https://gifcity.carrd.co/assets/images/gallery02/7c097900.gif?v=dbe39dbe"/></div>
<div class="snowflake"><img src="https://gifcity.carrd.co/assets/images/gallery02/7c097900.gif?v=dbe39dbe"/></div>
<div class="snowflake"><img src="https://gifcity.carrd.co/assets/images/gallery02/7c097900.gif?v=dbe39dbe"/></div>
<div class="snowflake"><img src="https://gifcity.carrd.co/assets/images/gallery02/7c097900.gif?v=dbe39dbe"/></div>
</div>

<style>
    @-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>
  
<iframe width="0" height="0" src="https://www.youtube.com/embed/97Tt_Oz8ilI?loop=1&autoplay=1&controls=0&start=0&playlist=97Tt_Oz8ilI&" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="">
</iframe>
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

Comments disabled.