Ginger Snaps

Tags: helena, ginger snaps, movie, animation

Description:

A movie layout! Includes an entrance effect, background effect, animation throughout the page, and custom contact box. All I ask in return is to send me a friend request if you use this layout. If we are already friends, you are the real MVP!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ⸸Ꭰҽąէհჯ_ჯᎠɾҽąʍҽɾ⸸ (https://layouts.spacehey.com/layout?id=194) -->

<style>body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url('https://i.imgur.com/tvZCnCR.gif');
	background-size: cover;
	background-repeat: no-repeat;
	animation: yourAnimation 3s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }  
</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Potta+One&display=swap');
h1, h2, h3, h4 {font-family: 'Potta One', sans-serif; font-color: #febcd0;}
</style>

<style>
.profile-info {
border: 1px solid rgb(212, 182, 1);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
padding: 15px 5px;
margin-bottom: 10px;
background-image:url(https://i.imgur.com/ihpvb9R.gif);
background-position: center;

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%) }
}



main:before {
 border-radius: 20px;
 width: 100%;
 height: 300px;
 display: block;
 content: "";
 background-image: url('https://i.imgur.com/nCEZHdO.gif');
 background-position: center center;
 background-size: cover;
 </style>

<style>

    :root {
        --logo-blue: rgb(254, 188, 208, 0);
        --darker-blue: #febcd0;
        --lighter-blue: rgba(254, 188, 208, 0);
        --even-lighter-blue: #febcd0;
        --lightest-blue: #febcd0;
        --dark-orange: #febcd0;
        --light-orange: #febcd0;
        --even-lighter-orange: #febcd0;
        --green: #febcd0;
    }

    * {
        font-family: monospace;
        font-size: 10px;
        font-color: #febcd0;
    }
  
 .contact {
  border-radius: 20px;
  background: url(https://i.imgur.com/hmQbHMk.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 5px;
  width: 0px;
  height: 0px;
   color:#febcd0;

}

    
    
    

    body
        {background: url("https://i.imgur.com/7NdohW9.jpg")
        no-repeat fixed; background-size:cover;
        
        }
    .url-info{display:none !important;}

     }

    .blog-preview p {
        background-color: none;
        padding: 5px 10px;
        border-radius: 10px;
        color: #febcd0;
    }

    .blog-preview p a{
        color: #febcd0!important;
    }

    .blog-preview p a:hover,
    .blog-preview p a:active,
    .blog-preview p a:focus{
        color: white!important;
    }

    nav {
        border-radius: 20px;
        background-image: url("https://i.imgur.com/EzJw4ec.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-color: transparent;
        overflow: hidden;
    }

    .profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border: none;
    }

    table.details-table {
        border-collapse: collapse;
    }

    table.details-table td {
        background-color: transparent !important;
    }

    .profile-pic {
        border-radius: 20px;
        overflow: hidden;
    }

    .heading {
        padding: 5px 0 !important;
        margin-top: 15px;
        margin-bottom: 10px;
        background-color: transparent !important;
        color: #febcd0 !important;
        border-bottom: 2px solid;
    }

    main {
        border-radius: 20px;
        background: rgba(153, 26, 64, 0.40) !important;
        font-color: #febcd0;
        font-size: 12px;
    }

    .container {
        border-radius: 20px;
        overflow: hidden;
        margin-top: 30px;
        padding: 10px;
        font-color: #febcd0;
        font-size: 12px;
    }

    footer {
        border-radius: 20px;
        background-image: url("https://i.imgur.com/lgqlLxM.jpg");
        background-position: center;
        background-repeat: no-repeat;
        display: block !important;
    }

    table.comments-table td {
        background-color: white !important;
    }

    .comments-table td:first-child img {
        width: 80px;
        border-radius: 500px;
    }

    .profile .friends .person img {
        border-radius: 20px;
    }
    
     table.comments-table td {
        background-color: rgb(254, 188, 208) !important;
    }

    .blog-preview p {
        font-size:12px;
    }
    
    table.comments-table{
display: block;
height: 220px!important;
overflow-y: scroll;
}


    a.addme {
        font-size: 10px;
        font-weight: bold;
        margin-bottom: 15px;
        display: block;
    }

</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.