Esther

Tags: orphan, animation, black and white, simple, loop, ayanayana, esther coleman
Description:

This is a layout I designed for my own personal use. I hope you find it enjoyable. Change whatever you want to change I cant stop you.
Preview:

click on the image for a larger preview
Code:

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

<style>
/* customizable snowflake styling */
.snowflake {
  color: white;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px black;
}
@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;user-select:none;cursor:default;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%;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;animation-delay:4s,2.5s}
</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>
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
        content: " ୨୧ ";
        color: #000;
    }
    
    body {
        background-image: url(https://i.pinimg.com/originals/bc/b6/b2/bcb6b2b757cdd33c24f2ea62a0baa11e.gif);
        background-size: cover;
        background-attachment: fixed;
    }
    
a:hover{
 cursor: url('https://external-media.spacehey.net/media/s6rl8pclY7DDunCpW9Dilx_i8_U618PDAm6u3qxen7js=/https://ani.cursors-4u.net/symbols/sym-8/sym734.cur'), auto !important;
}
* {
 cursor: url('https://external-media.spacehey.net/media/s6rl8pclY7DDunCpW9Dilx_i8_U618PDAm6u3qxen7js=/https://ani.cursors-4u.net/symbols/sym-8/sym734.cur'), auto;

}
    nav .top {
        background-image: url('https://i.pinimg.com/originals/44/b2/3f/44b23f87b68078aee729a57b4c00e8c3.gif');
        background-size: 490px;
        padding: 30px;
        background-position: center;
        border-radius: 30px;
        border-style: none;
        border-color: black;
        box-shadow: 0px 0px 0px;
        color: white;
    }  

    .logo{
  /* 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); }

}

.links .special a:link, .links .special a:visited  {
  color: white;
}

.links .special a:hover {
  color: white;

}

nav .links li .icon {

content: url(https://external-media.spacehey.net/media/s-JA4tJb_Af7H-0mW20kGznLFiJM3G-Mh7TNhTW6RkYE=/https://64.media.tumblr.com/98e291cd983e6b7fb37b61c404d5d50a/01bdc18c1e0b80e3-76/s75x75_c1/71596e651e215e5a72b8e8f6177d8ae9fb675a41.gif);

width: 20px;

height: 20px;

margin: 3px;

filter: hue-rotate(330deg) drop-shadow(1px 1px black);

}
    .profile {
        background-image: transparent;
        background-size: cover;
        background-attachment: fixed;
        border-radius: 20px;
        border-style: none;
        border-color: black;
        box-shadow: 0px 0px 0px;

    }
    
    main {
        background-color: transparent;
 color: white;
        text-shadow: 2px 2px 2px white;

    }
    
   .profile h1{
font-size: 30px !important;
line-height: 0.9em;
 letter-spacing: 0.02em;
 text-transform:bold !important;
 text-shadow: 0px 0px 6px ;
  @import url('https://fonts.googleapis.com/css2?family=Bad+Script&family=Bungee+Hairline&family=Dancing+Script&display=swap');
font-weight:normal;
text-align: centre;
  animation: color-change 2s infinite;
}

@keyframes color-change {
  0% { color: black; }
  50% { color: grey; }
  100% { color: white; }

}

    nav .links {
        background-color: transparent;
        text-shadow: 0px 0px 5px white; !important
    }
    
    .profile-pic {
        border-style: none;
        border-color: white;
        box-shadow: 0px 0px 10px;
        border-radius: 7px;
        overflow: hidden;
        animation-name: example;
        animation-iteration-count: infinite;
        animation-duration: 1.4s;

    }

 .general-about .profile-pic img {
content: url(https://i.pinimg.com/originals/d1/76/b9/d176b9d2114a457e22e6273f5adf1835.gif);

}   
    .profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border-color: black;
        border-style: none;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0px 0px 5px;

}

.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: url("https://external-media.spacehey.net/media/sG-bjiLPmaTk-sLoJXbxHrC-o-o9PkPWNDIw-Hujtc58=/https://64.media.tumblr.com/61325b836af8f0e96f110fcedfb2b664/30a9643db7bb9dec-db/s75x75_c1/2f0f07f921533cef3db0e2b89a44336b8b4645bb.gif")

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {

/* Add to Favorites */

content:  url("https://external-media.spacehey.net/media/sG-bjiLPmaTk-sLoJXbxHrC-o-o9PkPWNDIw-Hujtc58=/https://64.media.tumblr.com/61325b836af8f0e96f110fcedfb2b664/30a9643db7bb9dec-db/s75x75_c1/2f0f07f921533cef3db0e2b89a44336b8b4645bb.gif")
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {

/* Send Message */

content:   url("https://external-media.spacehey.net/media/sG-bjiLPmaTk-sLoJXbxHrC-o-o9PkPWNDIw-Hujtc58=/https://64.media.tumblr.com/61325b836af8f0e96f110fcedfb2b664/30a9643db7bb9dec-db/s75x75_c1/2f0f07f921533cef3db0e2b89a44336b8b4645bb.gif")

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {

/* Forward to Friend */

content:   url("https://external-media.spacehey.net/media/sG-bjiLPmaTk-sLoJXbxHrC-o-o9PkPWNDIw-Hujtc58=/https://64.media.tumblr.com/61325b836af8f0e96f110fcedfb2b664/30a9643db7bb9dec-db/s75x75_c1/2f0f07f921533cef3db0e2b89a44336b8b4645bb.gif")

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {

/* Instant Message */

content:   url("https://external-media.spacehey.net/media/sG-bjiLPmaTk-sLoJXbxHrC-o-o9PkPWNDIw-Hujtc58=/https://64.media.tumblr.com/61325b836af8f0e96f110fcedfb2b664/30a9643db7bb9dec-db/s75x75_c1/2f0f07f921533cef3db0e2b89a44336b8b4645bb.gif")

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {

/* Block User */

content:   url("https://external-media.spacehey.net/media/sG-bjiLPmaTk-sLoJXbxHrC-o-o9PkPWNDIw-Hujtc58=/https://64.media.tumblr.com/61325b836af8f0e96f110fcedfb2b664/30a9643db7bb9dec-db/s75x75_c1/2f0f07f921533cef3db0e2b89a44336b8b4645bb.gif")

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {

/* Add to Group */

content:  url("https://external-media.spacehey.net/media/sG-bjiLPmaTk-sLoJXbxHrC-o-o9PkPWNDIw-Hujtc58=/https://64.media.tumblr.com/61325b836af8f0e96f110fcedfb2b664/30a9643db7bb9dec-db/s75x75_c1/2f0f07f921533cef3db0e2b89a44336b8b4645bb.gif")

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {

/* Report Profile */

content:  url("https://external-media.spacehey.net/media/sG-bjiLPmaTk-sLoJXbxHrC-o-o9PkPWNDIw-Hujtc58=/https://64.media.tumblr.com/61325b836af8f0e96f110fcedfb2b664/30a9643db7bb9dec-db/s75x75_c1/2f0f07f921533cef3db0e2b89a44336b8b4645bb.gif")

    
}   
    table.details-table td {
        background-color: transparent !important;
        box-shadow: 0px 0px 3px black;
        border-radius: 6px;
    }
    
    .heading {
        margin-top: 3px;
        margin-bottom: 4px;
        background-color: transparent !important;
        color: white !important;
        border-bottom: 2px dashed;
    }
    
    .container {
        border-radius: 5px 5px 0 0;
        margin-top: 15px;
    }
    
    footer {
        border-radius: 5px;
        border-style: none;
        border-color: black;
        box-shadow: 0px 0px 10px black;
        background-image: url('https://i.pinimg.com/originals/f3/67/71/f36771be1b10ecd6684f07b6a5293e06.gif');
        display: block !important;
    }
    
    table.comments-table td {
        background-color:  transparent !important;
        border-style: none;
        box-shadow: 0px 0px 10px;
        overflow: hidden;
        padding: 5px;
    }
    
    .comments-table td:first-child img {
        width: 80px;
        border-radius: 8px;
        border-style: dashed;
        border-color: black;
        overflow: hidden;
        box-shadow: 0px 0px 10px white;
        animation-name: example;
        animation-iteration-count: infinite;
        animation-duration: 1.4s;
    }
    
    .profile .friends .person img {
        border-radius: 8px;
        border-style: none;
        border-color: black;
        box-shadow: 0px 0px 10px white;
        animation-name: example;
        animation-iteration-count: infinite;
        animation-duration: 1.4s;
    }
    
    .blog-preview p {
        font-size: 1.3rem;
        background-color: transparent;
        border-style: dashed;
        box-shadow: 0px 0px 5px;
        padding: 10px;
animation: color-change 3s infinite;

}

@keyframes color-change {
  0% { color: black; }
  50% { color: grey; }
  100% { color: white; }

    }

.online { visibility: hidden; } .online img { content: url("https://dl.glitter-graphics.com/pub/157/157641b27q8mcaol.gif"); 
animation-name: blink; 
 animation-iteration-count: infinite;
        animation-duration: 4s;
visibility: visible; height: 30px; width: 90px;
     
    }
    
    .profile .blurbs .section h4 {
        margin: 0;
        color: white;
        text-shadow: 2px 2px 2px white;
    }
    
    a {
        color: white;
        text-shadow: 0px 0px 10px white; !important
        text-decoration: none;
    }
    
    a:hover {
        animation:blinkingText 1s infinite;
    }
    
    @keyframes blinkingText{
        0%{     color: black;    }
        50%{    color: grey; }
        100%{    color: white; }
}
     
    .comments-table td:first-child {
        background-image: url('https://i.pinimg.com/564x/de/67/0b/de670bca254a5105aef2d46bbba4e91f.jpg');
        background-size: 250px;
        background-position: absolute;
    }
    
    .count {
        color: black;
        text-shadow: 2px 2px 2px black;
    }
    
    .details-table td:first-child {
        background: transparent;
        color: white;
        text-shadow: 1.3px 1.3px 0px white;
        font-weight: bold;
        width: 33%;
    }

    .profile-info {
        background-image: url('https://i.pinimg.com/564x/7a/52/1b/7a521bcece311a7938a5b8b9c814e251.jpg');
        background-size: 150px;
        border: none;
        box-shadow: 0px 0px 10px white;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 5px;
        margin-bottom: 10px;
    }

    .profile .friends .person p {
        color: white;
        text-shadow: 1px 1px 0px none;
        font-weight: bold;
        width: 100%;
        word-break: break-word;
        font-size: 100%;
        text-align: center;
  animation: color-change 2s infinite;

}

@keyframes color-change {
  0% { color: black; }
  50% { color: grey; }
  100% { color: white; }

    }
    
    @keyframes example {
0% {
transform:translate(0px,0.3px);
}
8% {
    transform:translate(0px,0.5px);
}

16% {
    transform:translate(0px,1px);
}

24% {
    transform:translate(0px,1.5px);
}

32% {
    transform:translate(0px,2px);
}

40% {
    transform:translate(0px,2.5px);
}

48% {
    transform:translate(0px,3px);
}

56% {
    transform:translate(0px,3.5px);
}

64% {
    transform:translate(0px,3px);
}

72% {
    transform:translate(0px,2.5px);
}

80% {
    transform:translate(0px,2px);
}

88% {
    transform:translate(0px,1.5px);
}

96% {
    transform:translate(0px,0.5px);
}

100% {
    transform:translate(0px,0.3px);
}

</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/j6Xk7Rx-1vY//?&;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">


<style></style></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 )