another layout

Tags: mlp, grimmjow, pumpkin night
Description:

Something I made
Code:

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

<style>
  @import url('https://fonts.googleapis.com/css2?family=Alkatra:wght@500&display=swap');

H1,H2,H3,H4,H5{
    font-family: 'Alkatra', cursive;
    font-size:200%;

}
a:hover{

    color: #9C3848;
    text-decoration: underline;
}
nav .links a {
   text-decoration: none;
    color: #4a3f40;
    text-shadow: 0 0 2px #4a3f40;

}
nav .links .special a {
    color: #ffffff;
    text-shadow: 0 0 2px #ffffff;;
}

p , a , label{
     font-family: 'Alkatra', cursive;
}

.count{
color:#3d6965;

}

details summary {
    cursor: pointer;
    user-select: none;
    color:#98112a;
    font-family: 'Alkatra', cursive;
}
:root {
    --logo-blue: #777e7e;
    --darker-blue: #4A3F40;
    --lighter-blue: #c4c0c1;
    --even-lighter-blue: ;
    --lightest-blue: ;
    --dark-orange: #8BA8A5;
    --light-orange: #bcd9d4;
    --even-lighter-orange: #ff000000;
}

html:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url(https://64.media.tumblr.com/cb4c7449e5632dd311fc93876eab85b7/b0af6dfc456975a8-95/s500x750/53fa788391daface4b3f7610edbb955e01b0ab30.gifv);
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 2s ease 0s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} 
}

nav .top .left .logo{
    width: 100px;
    height: 60px;
}

nav .links .icon {
    vertical-align: -0.41em;   
content:url(https://pixels.crd.co/assets/images/gallery18/1adc55ca.gif?v=9b219e01);

}
.logo{
content: url(https://64.media.tumblr.com/50717c3927405256f36dd27e2f14622a/89e747e795b63bd3-1c/s540x810/9ca39e63f25aba9bef557fedcc794b97e5314c88.gifv);
}
.logo:hover{
  animation:spinhover .5s infinite linear;
}
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content:url(https://pixels.crd.co/assets/images/gallery50/6abab03a.gif?v=9b219e01);
    content-size:5px;
}

button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
    background-color: #8ca8a5;
    border-color: #8ca8a5;
    color: #ffffff;
    font-family: 'Alkatra', cursive;
}

input{
 background-image:url();
background-size:cover;
background-position:center;
color:white;
}
Main:before{
    width: auto;
    margin-bottom: 10px;
    border: 2px solid #275B7E;
    height: 200px;
    display: block;
    content: "";
    background-image: url(https://64.media.tumblr.com/c57961c59375f2e260dc9f58c732aa95/42cdb5a020c6a3f4-f2/s1280x1920/dabcc52acf8f689786852c1abe12666003611cb7.pnj);
    background-position: center center;
    background-size: cover;
}

body{
background-image:url(https://i.pinimg.com/564x/c1/c1/c6/c1c1c63781b82b015131e6aa25f8ae79.jpg);
}

main{
background-color:transparent;
}

.col.left:before {
    content: "";
    white-space: pre-wrap;
    display: block;
    height: 34px;
    width: px;
    background-image: url(https://64.media.tumblr.com/7321c8981a505ae1b008017bc3a0c7bc/0a1ade8b361ff34b-e6/s640x960/d1e69da28a5047bfc7f39228a0fa53c8ec6a4b90.pnj);
    background-repeat: no-repeat;
    background-size: 300px;
    background-position-x: center;
}

main .left, main .right {
    padding: 10px;
    background-color: white;
}
.general-about .profile-pic img {
   -webkit-mask-image: url(https://png.pngtree.com/png-vector/20220428/ourmid/pngtree-smooth-glossy-heart-vector-file-ai-and-png-png-image_4557871.png);
   -webkit-mask-size: 100%;
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-position: center;
   transform: scale(1.025,1.025);
   position: relative;
   top: -2em;
}

.general-about .profile-pic img:hover{
animation:spinhover 4s infinite linear;
}
.icon{
display:none;
}

.online img{
content:url(https://64.media.tumblr.com/ffec40bc0624c14bdb95924481fdfb43/5c1add402b9fc5ae-81/s500x750/d8c30db1098b6e89fb6c25716c20ad264665e475.gifv);
position:center;
Animation:none;
height:20%;
width:20%;
}

.online{
    color:pink;
    font-family: 'Alkatra', cursive;
}

.mood:after {
content:"";
border-radius:50px;
white-space: pre-wrap;
display: block;
height: 34px;
width: px;
background-image: url(https://64.media.tumblr.com/7321c8981a505ae1b008017bc3a0c7bc/0a1ade8b361ff34b-e6/s640x960/d1e69da28a5047bfc7f39228a0fa53c8ec6a4b90.pnj);
background-repeat:no-repeat;
background-size: 300px;
background-position-x: center;
margin: 5px;
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
    content: url(https://pixels.crd.co/assets/images/gallery05/71018225.gif?v=9b219e01);
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
    content: url(https://pixels.crd.co/assets/images/gallery02/88488dee.gif?v=9b219e01);
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
    content: url(https://pixels.crd.co/assets/images/gallery02/f354904b.gif?v=9b219e01);
}.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
    content: url(https://pixels.crd.co/assets/images/gallery02/eb638353.gif?v=9b219e01);
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
    content: url(https://pixels.crd.co/assets/images/gallery05/2cac36f2.gif?v=9b219e01);
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
    content: url(https://pixels.crd.co/assets/images/gallery20/94707c3b.gif?v=9b219e01);
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
    content: url(https://pixels.crd.co/assets/images/gallery20/09da210b.gif?v=9b219e01);
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
    content: url(https://pixels.crd.co/assets/images/gallery06/902ddb74.gif?v=9b219e01);
}

.details-table td {
    background-color: ##ffffff;
    box-shadow: 1px 1px 1px 1px #c4c0c1 ;
}
.col.left:after {
    content: "";
    white-space: pre-wrap;
    display: block;
    height: 34px;
    width: px;
    background-image: url(https://64.media.tumblr.com/aebf46c47d76937aa60a7612ff146760/f5cf6f39d5a64467-c6/s500x750/8dd9b47d764a738191aeeacee8d61b0dd0042add.gifv);
    background-repeat: no-repeat;
    background-size: 300px;
    background-position-x: center;
}

.profile-info{
    border: 2px solid rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
    margin-bottom: 10px;
    border-width: 10px;
    border-style: solid;
    border-image: url(https://img1.picmix.com/output/stamp/normal/8/8/9/0/570988_d209f.png) 8 fill round;
    width: 100%;
    height: 100%;
}

.blog-preview:before {
    content:"";
   border-radius:5px;
   white-space: pre-wrap;
    display: block;
    height: 70px;
    width: 480px;
    background-image: url(https://64.media.tumblr.com/c13880c0149bbda16134630461944450/59788dea9a74ea5f-54/s640x960/4c11bbd7ae372bdc68fa3f206f15ab41b146835a.pnj);
    background-repeat:no-repeat;
    background-size: 80%;
    background-position-x: center;
    margin-bottom: -60px;
}

.profile .friends .person img:not(.icon) , .comments-table td:first-child img:not(.icon){
 -webkit-mask-image: url(https://pngimg.com/d/heart_PNG699.png);
   -webkit-mask-size: 100%;
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-position: center;
   transform: scale(1.025,1.025);
   position: relative;
   top: -0.25em;
   
}
.profile .friends .person img:not(.icon):hover{
    animation:spinhover 2s infinite linear;

}
@keyframes spinhover{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}
div#comments:before {
  width: auto;
    margin-bottom: 10px;
    height: 250px;
    display: block;
    content: "";
    background-image:url(https://64.media.tumblr.com/d42cf4dedac062cd95ab83a3446989a2/0302d0dfa9dce473-48/s540x810/4d3164027f22ba2ad569b976793820420f390877.gifv);
    background-position: center center;
    background-size: cover;
    background-repeat:no-repeat;
    
}

Main:after{
width: auto;
    margin-bottom: -16px;
    height: 350px;
    display: block;
    content: "";
    background-image: url(https://64.media.tumblr.com/e1dc6c7238b754ca3ca72effed1cd87c/tumblr_noiu6uCgXJ1urr5czo2_1280.png);
    background-position: center center;
    background-size: cover;
    background-repeat:no-repeat;
}

footer {
    text-align: center;
    font-size: 70%;
    margin: 10px 0 10px;
    padding: 10px 5px;
    background: #e8e8e8;
}

footer:after{
    content: "";
    border-radius: 5px;
    white-space: pre-wrap;
    display: block;
    height: 40px;
    width: 999px;
    background-image: url(https://external-media.spacehey.net/media/s6_6TzhFhN_5Mx5vTFRA9kv20zTTwGCf1TrUWWKD6Lt8=/https://kanaya.crd.co/assets/images/gallery04/317541c2.gif?v=068b3f1b);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position-x: left;
    margin-bottom: -25px;
}
 .profile{
        
    direction: rtl;
    
    }
    .blurbs{
    
    direction: ltr;
        
    }
    .blog-preview{
        
    direction: ltr;
        
    }
    .friends{
    
    direction: ltr;
        
    }
    .general-info{
        
    direction: ltr;
        
    }
    .contact{
        
    direction: ltr;
    
    }
    .url-info{
        
    direction: ltr;
        
    }
    .details-table{
        
    direction: ltr;
        
    }
    .profile .table-section .heading{
    
    direction: ltr;
        
    }
    .details p{

    direction: ltr;

   }
   .mood{

       direction: ltr;

   }

div.grimmjow{
      background: url(https://external-media.spacehey.net/media/sS7IVh1OTdgPU6FneWTXPXpfU59nFIEmlWOJ8k6Hln6g=/https://cdn130.picsart.com/351113055040211.png?to=crop&type=webp&r=1456x1456&q=85);
    background-size: 350px!important;
    position: fixed;
    left: -5px;
    bottom: 20px;
    height: 380px;
    width: 300px;
    z-index: 100;
    z-index: 100;
    opacity: 100%;
    background-repeat:no-repeat;
    }
div.pumpkin{
background: url(https://i.postimg.cc/wTww15vq/Screenshot-2023-05-17-at-5-28-38-PM.png);
       background-size: 100%!important;
       position: fixed;
    right: 120px;
    bottom: 90px;
    height: 450px;
    width: 170px;
    z-index: 100;
    opacity: 100%;
    background-repeat:no-repeat;
}
</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 0 of 0 comments ( View all | Add Comment )