Addams family layout

Tags: layout, addams family
Description:

This layout comes with music and a loading screen. The music is at the very bottom and the loading screen is at the very top
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by 𝖑𝖊𝖘-𝖇𝖊𝖊-𝖎𝖓_𝖈𝖚𝖕𝖈𝖆𝖐𝖊<3 (https://layouts.spacehey.com/layout?id=92791) -->

<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url('https://66.media.tumblr.com/db369886604d6ceceac3a3ba3ff0c348/tumblr_pz4zp4V8Q81se4d0po1_500.gif');

background-size: cover;

background-repeat: no-repeat;

background-position:center;

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

pointer-events: none;}

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

</style>

<style>
  body {
    background-image: url('https://images8.alphacoders.com/129/thumb-1920-1290536.jpg');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
  }

</style>

<style>
  main {
    background-color: rgba(4, 67, 137, 0.5);
    color: #2F2235;
  }

  boarder-radius: 5px;

</style>

<style>
  footer {
    background-image: url('https://static1.colliderimages.com/wordpress/wp-content/uploads/2021/08/the-addams-family-1991-social.jpeg');
    background-repeat: repeat;
    background-size: contain;
    padding: 10px 5px;
    margin: 10px 0 10px;
  }

</style>

<style>
  .profile .contact .heading,
  .profile .table-section .heading,
  .setting-section .heading,
  .home-actions .heading {
    background: #BB8588;
    color: #564592;
    text-align: center;
  }

</style>

<style>
  .profile .contact,
  .profile .url-info,
  .profile .table-section,
  .setting-section,
  .home-actions {
    border-style: dotted;
    border-color: #724CF9;
  }

</style>

<style>
  .url-info {
    background-image: url('https://i.pinimg.com/564x/b0/8c/54/b08c54f5260233370273b4efa4f3404a.jpg');
    background-repeat: no-repeat;
    background-size: 100% 150%;
  }

</style>

<style>
  .container {
    border-radius: 10px;
    margin-top: 10px;
    border: 5px dotted;
    border-color: rgba(4, 67, 137, 0)
  }

</style>

<style>
  @keyframes float {

      0% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
	50% {
		box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
		transform: translatey(-20px);
	}
	100% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
  }

  .general-about .profile-pic img  {
    animation: float 6s ease-in-out infinite ;
  }

</style>

<style>
  .general-about .profile-pic img {
    clip-path: polygon(31% 1%, 68% 0, 88% 33%, 68% 100%, 33% 100%, 12% 34%);
  }

</style>

<style>
@import url('https://fonts.googleapis.com/css?family=Creepster');
h1{
  font-family: 'Creepster';
  font-size: 2.5em !important;
}
</style>

<style>
@import url('https://fonts.googleapis.com/css?family=Creepster');
main{
  font-family: 'Creepster';
  font-size: 80% !important;
}
</style>

<style>
@import url('https://fonts.googleapis.com/css?family=Creepster');
nav{
  font-family: 'Creepster';
  font-size: max(72%, 12px) !important;
}
</style>

<style>
.online{content: url('http://www.myspacegens.com/images/online_now/39.gif');}
</style>

<style>
h4, h1, p{
text-align: center;
}
</style>

<style>
a, p {
  color: #3c0858;
}
</style>

<style>
.contact {
  background-image: url('https://i.gifer.com/origin/d5/d5ef1e48cedba7aa6c3b03c30a3148af.gif');
  background-size: 300px;
}
</style>

<style>
.profile .blurbs .heading, .profile .friends .heading {
  background: #332c25;
  color: #ff0000;
  text-align: center;
}
</style>

<style>
*{
    box-sizing: border-box;
    border-radius: 3px;
  }
</style>

<style>
  .profile .friends .person img:not(.icon) {
     border-radius: 50px;
}
   .profile .friends .person p {
    color: #ff0000;
}
</style>

<style>
@-webkit-keyframes spaceboots {
	0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
	10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
	40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
	50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
	100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
 .profile .friends .person img:not(.icon):hover,
 .profile .friends .person img:not(.icon):focus {
	-webkit-animation-name: spaceboots;
	-webkit-animation-duration: 0.8s;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}
</style>

<style>
/* 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>
  .details-table td:first-child {
    background-color: #e282ff;
} 
  .details-table td {
   background-color: #f3b0f8;
}
</style>

<style> 
  nav .links { 
   background-color: #960303;
   text-align: center;
}
</style>

<style>
  nav .top {
   background-image: url(' https://i.pinimg.com/564x/cf/15/7b/cf157b541e3883261b4b81c051be43e5.jpg');
}
</style>


<iframe width="0" height="0" src="https://www.youtube.com/embed/IokBKvFiCvM/?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</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

Displaying 0 of 0 comments ( View all | Add Comment )