Evanescence/Avril Layout

Tags:
Description:

Sup!! This is the layout im using right now, but! I'm going to change it in a minutes anyways so, feel free to use it and change whatever you like from it! Have fun
Preview:

click on the image for a larger preview
Code:

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

<style>

    a {
        color: blue;
        text-shadow: 0px 0px 10px blue; !important
        text-decoration: none;
    }
    
    a:hover {
        animation:blinkingText 1.2s infinite;
    }
    
    @keyframes blinkingText{
        0%{     color: blue;    }
        50%{    color: black; }
        100%{    color: blue; }
}
     
    
    .contact:after {
        width: 98%;
        height: 167px;
        display: block;
        content: "";
        background-color: transparent;
        background-image: url('https://i.pinimg.com/originals/1f/12/68/1f12685bbaf9bb4d0f286914fac6cd2e.gif');
        background-position: center;
        opacity: 70%;
        background-size: 402px;
        border-style: double;
        border-color: black;
    }


    .profile {
        background-image: url(https://i.pinimg.com/originals/85/f1/50/85f150ab5e2a8128ec0bbc359cb7ce16.gif);
        background-size: 3200px;
        position: center;
        border: 3.5px double black;
        border-width: 5px;
        border-radius: 20px;
        box-shadow: 0px 0px 10px black;
        display: block;
    }
    
    .profile {
        border-color: black;
        animation-name: flash_border;
        animation-duration: 10s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 1.4s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 2s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
      }

@keyframes flash_border {
  0% {
    border-color: blue;
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: blue;
  }
}

@-webkit-keyframes flash_border {
0% {
    border-color: blue;
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: blue;
  }
}

@-moz-keyframes flash_border {
0% {
    border-color: blue;
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: blue;
  }
}

    body {
        background-image: url(https://i.pinimg.com/736x/87/58/e4/8758e4c01b687d44fe295cd3475c5645.jpg);
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
    }
    
    main {
        background-color: transparent;
        color: white;
    }
    
    :root {
        text-shadow: 1px 1px 0px blue;
        --logo-blue: ;
        --darker-blue: ;
        --lighter-blue: ;
        --even-lighter-blue: ;
        --lightest-blue: ;
        --dark-orange: ;
        --light-orange: ;
        --even-lighter-orange: ;
        --green: ;
    }
    
    nav .top {
        background-image: url('https://i.pinimg.com/564x/0f/4d/80/0f4d80963dd2712be6da957ef78d9fab.jpg');
        height: 300px;
        background-size: 809px;
        background-position: top;
        border-radius: 5px;
        position: relative;
        border: 3.5px double black;
        border-width: 5px;
        border-radius: 20px;
        box-shadow: 0px 0px 10px black;
        display: block;
    } 
    
    nav .top {
        border-color: black;
        animation-name: flash_border;
        animation-duration: 10s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 1.4s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 2s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }
    
    nav .links {
        background-color: ;
        border-radius: 30px;
        height: 33px;
    }
    
    .profile-pic {
        border-style: double;
        border-color: black;
        box-shadow: 0px 0px 7px blue;
        border-radius: 3px;
        overflow: hidden;
        animation-name: example;
        animation-iteration-count: infinite;
        animation-duration: 0.8s;
    }

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

    table.details-table td {
        background-color: black !important;
    }
    
    .heading {
        padding: 5px 0 !important;
        margin-top: 15px;
        margin-bottom: 15px;
        background-color: transparent !important;
        color: white !important;
        border-bottom: 1px dashed blue;
    }
    
    .container {
        border-radius: 0px 0px 0 0;
        overflow: hidden;
        margin-top: 20px;
        padding: 20px;
    }

    footer {
        border-radius: 2px;
        background:  black!important;
        display: block !important;
        position: relative;
        border: 3.5px double black;
        border-width: 5px;
        border-radius: 20px;
        box-shadow: 0px 0px 10px black;
        display: block;
    }

    footer {
        border-color: white;
        animation-name: flash_border;
        animation-duration: 10s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 1.4s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 2s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }
    
    table.comments-table td {
        background-color:  black!important;
    }
    
    .comments-table td:first-child img {
        width: 80px;
        border-radius: 4px;
        border-style: double;
        border-color: black;
        border-width: 3px;
        box-shadow: 0px 0px 7px red;
        animation-name: example;
        animation-iteration-count: infinite;
        animation-duration: 0.8s;
    }

    .profile .friends .person img {
        border-radius: 4px;
        border-style: double;
        border-color: black;
        box-shadow: 0px 0px 7px blue;
        animation-name: example;
        animation-iteration-count: infinite;
        animation-duration: 0.8s;
    }

    .blog-preview p {
        font-size: 1.2rem;
    }

    .online {
        color: blue;
        font-weight: bold;
        font-size: 98%;
    }
    

    .online img {
        content: url(https://i.pinimg.com/originals/24/dd/ac/24ddac1b5729ade3ee260e7961e4516e.gif);
        height: 2.9em;
        margin-right: 5px;
        animation-name: blink;
        animation-iteration-count: infinite;
        animation-duration: 1s;
    }

    .icon, .award img {
        content: url(https://i.pinimg.com/originals/24/dd/ac/24ddac1b5729ade3ee260e7961e4516e.gif);
        display: inline-block;
        height: 2.0em;
        width: 1.8em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
        color: rgba(0,0,0,0);
    }

    .profile .blurbs .section h4 {
        margin: 0;
        color: white;
    }
    

     .comments-table td:first-child {
        background-image: url('https://i.pinimg.com/originals/29/7d/41/297d418fe2bdc0c40f0404a829c292df.gif');
        background-size: 400px;
        padding: 10px;
    }

    .count {
        color: blue;
        text-shadow: 0px 0px 3px lighter-blue;
    }

    .details-table td:first-child {
        background: var(--even-lighter-blue);
        color: blue;
        text-shadow: 0px 0px 3px blue;
        font-weight: bold;
        width: 33%;
    }

    .profile-info {
        background-image: url('https://i.pinimg.com/originals/29/7d/41/297d418fe2bdc0c40f0404a829c292df.gif');
        background-size: 500px;
        border: 2px double black;
        box-shadow: 0px 0px 7px blue;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 5px;
        margin-bottom: 10px;
    }

    .profile .friends .person p {
        color: blue;
        text-shadow: 0px 0px 3px blue;
        font-weight: bold;
        width: 100%;
        word-break: break-word;
        font-size: 100%;
        text-align: center;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/0G3_kG5FFfQ?&;amp;;autoplay=1&;loop=1&;controls=1" title="" frameborder="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" loading="lazy">
</iframe>

<div style="float:  ; height: 100; position: fixed; left: 2px; bottom: 0px; z-index: 20; width: 300px; height: 250px;;"><a href="https://www.youtube.com/watch?v=VT1-sitWRtY"><img src="https://m.media-amazon.com/images/I/81dtE0LVeYL.png" alt="Listen here to Avril Lavigne!"/></a></div>

<img src="https://i.ibb.co/kqbBy6L/d5k0svm-ac5c1813-ffb0-4f74-a610-b26d821e94c9.gif" width="150" height="20"/>
<img src="https://i.ibb.co/ZhpTmnj/button-jane-the-killer-fan-by-frozenstrike-d670oyi-375w-2x.png" width="150" height="20"/>
<img src="https://i.ibb.co/Xj1vqPw/button-eyeless-jack-fan-by-frozenstrike-d67safj-375w-2x.png" width="150" height="20"/>
<img src="https://i.ibb.co/F00YRqy/ticci-toby-fan-button-by-dersedragon-d960p4x-375w-2x.png" width="150" height="20"/>
<img src="https://i.ibb.co/1rhqJLM/commmsion-creepy-sally-fan-button-by-tytrance-d64fsao-375w-2x.png" width="150" height="20"/>
<img src="https://i.ibb.co/Sd70d14/laughing-jack-fan-button-by-n4ds-d96joe8-375w-2x.png" width="150" height="20"/>

<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url(https://i.pinimg.com/originals/5f/02/68/5f0268521704e6d839db017755b5db17.gif);

background-size: cover;

background-repeat: no-repeat;

background-position:center;

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

pointer-events: none;}

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

</style>

<div style="float:  ; max-height: 100px; position: fixed; left: 13px; top: 12px; z-index: 200;">
<img src="https://pngimg.es/d/avril_lavigne_PNG36.png" height="100"/></div>
<style></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 1 of 1 comments ( View all | Add Comment )
᭄ꦿ ❀	1719264814 usando! Report Comment