( 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>
Comments
Displaying 0 of 0 comments ( View all | Add Comment )