Edited Layout Code ;; 🦴🎀

( this layout was originally made by @shelbz but I edited it a little bit )



<!-- (c) Layout created by ꜱʜᴇʟʙᴢ (https://layouts.spacehey.com/layout?id=516) -->


<style>

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');


@keyframes blur {

    0% {text-shadow: 4px 4px 3px #caa6b9;}

    50% {text-shadow: 4px 4px 3px #976280;}

    100% {text-shadow: 4px 4px 3px #caa6b9;}

}


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


@keyframes fade {

    0% {opacity: 100%;}

    25% {opacity: 50%;}

    50% {opacity: 0%;}

    75% {opacity: 50%;}

    100% {opacity: 100%;}

    

}


body:before {

content: " ";

height:0vh;

width: 0vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url('https://31.media.tumblr.com/801bd46e408a5ea1c2658fc48eebde25/tumblr_mr0tjzH05B1rgyoe1o1_500.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;} } 


body {

    background-image: url('https://www.transparenttextures.com/patterns/outlets.png');

background-color: #ed96c7;

font-family: 'IBM Plex Mono', monospace;

}


main:before {

background-image: url('https://64.media.tumblr.com/3a892bff5082b05787a15ea229e233e5/tumblr_inline_nrbk3qT8it1txlwvy_500.gifv');

    background-position: center;

    background-size: cover;

    display: block;

    content: "";

    width:  0%;

    height: 0px;

}


.profile .contact:after {

background-image: url('https://giffiles.alphacoders.com/183/183361.gif');

    background-position: center;

    background-size: cover;

    display: block;

    content: "";

    width: 100%;

    height: 200px;

}

.profile .contact {

border-style: none;

}


main {

    background-color: #fbdcec;

}


nav .top, nav .links, footer {

     background-color: #fbdcec;

}

.profile h1 {

    color: black;

    animation-name: blur;

    animation-duration: 4s;

    animation-fill-mode: forwards;

    animation-iteration-count: infinite;

    animation-timing-function: linear;

}

#comments:before {

    background-image: url('https://i.pinimg.com/originals/2b/a9/28/2ba9283975495897d1f4cb46c97f7dda.gif');

    background-position: center;

    background-size: cover;

    display: block;

    content: "";

    width: 100%;

    height: 250px;

    margin: 3px;

}


.profile .contact .heading, .profile .blurbs .heading, .profile .friends .heading, .profile .table-section .heading {

    background-color: #976280;

    border-style: groove;

    border-color: #c17ba3;

}


.profile .table-section, .profile .url-info {

    border-style: none;

}


.details-table td:first-child, .comments-table td:first-child {

    color: white;

    background-color: #976280;

}


.details-table td, .comments-table td {

    color: black;

    background-color: #c17ba3;

    border-style: none;

}


.profile .blurbs .heading h4, .profile .friends .heading h4 {

    color: white;

}


.profile .blurbs .section h4 {

    color: black;

}

.details-table {

    padding: 0px;

    margin: 0px;

}


.comments-table  {

    border-style: none;

}


.count {

    color: #976280;

}


a, .profile .friends .person p{

    color: black

}


a:hover, .profile .friends .person p:hover {

    color: #ffaddf;

}


.profile .contact .inner .icon {

    

        content: url('https://i.imgur.com/ZJsLNJq.png');

        animation-name: fade;

        animation-duration: 4s;

    animation-fill-mode: forwards;

    animation-iteration-count: infinite;

    animation-timing-function: linear;

}


button {

    color: white;

    background-color: #976280;

    border-style: groove;

border-color: #c17ba3;

font-family: 'IBM Plex Mono', monospace;

}

button:hover {

 background-color: #ffaddf;

 color: black;

border-color: #c17ba3;

font-family: 'IBM Plex Mono', monospace;

}


.comment-replies {

 border-width: 1px;

border-color: #ffaddf;   

       


}

</style>


0 Kudos

Comments

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