Teardrop layout

Tags:
Description:

for fans of TD from BFDI
Code:

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

<style>
p.online {font-size: 0px;}
p.online::after{content: "☆ ONLINE";
color: white;
font-size: 10px;}

font-size: 10px;}
    </style>
<style>
    body {
       background:url(https://img.freepik.com/premium-vector/abstract-blue-vector-gradient-background-design_901408-13476.jpg) no-repeat center
fixed;
-webkit-background-size: cover
</style>


<style>
    .profile {
       
 
background:url(https://img.freepik.com/premium-photo/photo-smooth-gradient-background-square-gradient-2-colors-from-top-bottom-gradient-colorful_873925-56446.jpg);
color:white;
text-shadow: 0 0 9px black;
    }


.profile .contact, .profile .table-section, .profile .url-info, .profile .friends, .profile .blurbs, table.comments-table, DIV.blog-preview { 
  border-style:Double; 
 border-width:6px; 
 border-color:White; 
background:url(https://img.freepik.com/premium-vector/abstract-blue-vector-gradient-background-design_901408-13476.jpg);
}

/* contact icons */
.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: "⭐"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: "⭐"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "⭐"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: "⭐"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: "⭐"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: "⭐"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: "⭐"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "⭐"

}
footer {
border-radius: 15px;
background-image: 
url(https://media.tenor.com/tOtbJQS-ndEAAAAM/there-is-no-floor-cute.gif); no-repeat center
fixed;
-webkit-background-size: cover
color:White; 
}
    #music {
        position: fixed;
        bottom: 10px;
        left: 10px;
        width: 0px;
        transition: 0.5s width;
    }

    #music:hover {
        width: 0px;
}

nav .top {
        background: url("https://static.vecteezy.com/system/resources/previews/003/031/764/non_2x/blue-wide-background-with-linear-blurred-gradient-free-vector.jpg"); no-repeat center
fixed;
-webkit-background-size: cover
    }
    
    nav { background: black url(""); }

:root {
--logo-blue: White;
--darker-blue:white;
--lighter-blue:#17298f;
--even-lighter-blue:#172a99;
--lightest-blue:#112aba;
--dark-orange:white;
--light-orange:#17298f;
--even-lighter-orange:#0d195c;
--green:#0d195c;
}

iframe.spotify {
    width: 100%;
    height: 250px;
    padding: 10px;
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
}
div.ah.df.dg.dh {
    border-radius: 0 0 10px 10px;
}
div.b4.ah.dx.dy.dz.e0 {
    border-radius: 10px 0 0 0;
}
</style>

<div class="background"></div>

<style>
.friends .heading{ font-size:0; }
.friends .heading:before{ content: "Friends!!"; font-size:.8rem; font-weight:bold; 
color:White; }
}
</style>
<style>
.friends#comments .heading{ font-size:0; }
.friends#comments .heading:before{ content: "Comments!!"; font-size:.8rem; font-weight:bold;
color:White; } 
</style>
<style>
 .profile .table-section .heading h4 { font-size:0; }
.profile .table-section .heading h4:before{ content: "Interests + Socials!!"; font-size:.8rem; font-weight:bold; 
color:White; }
 </style>
<style>
    .contact .heading{ font-size:0; }
.contact .heading:before{ content: "Say Hi!!"; font-size:.8rem; font-weight:bold; 
color:White; }
}</style>
<style>
  .blurbs .heading{ font-size:0; }
.blurbs .heading:before{ content: "About Me!!"; font-size:.8rem; font-weight:bold; color:White; }
</style>

<style>
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('<style>
p.online {font-size: 0px;}
p.online::after{content: "☆ ONLINE";
color: white;
font-size: 10px;}

font-size: 10px;}
    </style>
<style>
    body {
       background:url(https://img.freepik.com/premium-vector/abstract-blue-vector-gradient-background-design_901408-13476.jpg) no-repeat center
fixed;
-webkit-background-size: cover
</style>


<style>
    .profile {
       
 
background:url(https://img.freepik.com/premium-photo/photo-smooth-gradient-background-square-gradient-2-colors-from-top-bottom-gradient-colorful_873925-56446.jpg);
color:white;
text-shadow: 0 0 9px black;
    }


.profile .contact, .profile .table-section, .profile .url-info, .profile .friends, .profile .blurbs, table.comments-table, DIV.blog-preview { 
  border-style:Double; 
 border-width:6px; 
 border-color:White; 
background:url(https://img.freepik.com/premium-vector/abstract-blue-vector-gradient-background-design_901408-13476.jpg);
}

/* contact icons */
.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: "💧"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: "💧"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "💧"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: "💧"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: "💧"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: "💧"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: "💧"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "💧"

}
footer {
border-radius: 15px;
background-image: 
url("https://pbs.twimg.com/media/GJujNI1WMAAU5mo.jpg"); no-repeat center
fixed;
-webkit-background-size: cover
color:White; 
}
    #music {
        position: fixed;
        bottom: 10px;
        left: 10px;
        width: 0px;
        transition: 0.5s width;
    }

    #music:hover {
        width: 0px;
}

nav .top {
        background: url("https://pbs.twimg.com/media/GJujNI1WMAAU5mo.jpg"); no-repeat center
fixed;
-webkit-background-size: cover
    }
    
    nav { background: black url(""); }

:root {
--logo-blue: White;
--darker-blue:white;
--lighter-blue:#17298f;
--even-lighter-blue:#172a99;
--lightest-blue:#112aba;
--dark-orange:white;
--light-orange:#17298f;
--even-lighter-orange:#0d195c;
--green:#0d195c;
}

iframe.spotify {
    width: 100%;
    height: 250px;
    padding: 10px;
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
}
div.ah.df.dg.dh {
    border-radius: 0 0 10px 10px;
}
div.b4.ah.dx.dy.dz.e0 {
    border-radius: 10px 0 0 0;
}
</style>

<div class="background"></div>

<style>
.friends .heading{ font-size:0; }
.friends .heading:before{ content: "Friends!!"; font-size:.8rem; font-weight:bold; 
color:White; }
}
</style>
<style>
.friends#comments .heading{ font-size:0; }
.friends#comments .heading:before{ content: "Comments!!"; font-size:.8rem; font-weight:bold;
color:White; } 
</style>
<style>
 .profile .table-section .heading h4 { font-size:0; }
.profile .table-section .heading h4:before{ content: "Interests + Socials!!"; font-size:.8rem; font-weight:bold; 
color:White; }
 </style>
<style>
    .contact .heading{ font-size:0; }
.contact .heading:before{ content: "Say Hi!!"; font-size:.8rem; font-weight:bold; 
color:White; }
}</style>
<style>
  .blurbs .heading{ font-size:0; }
.blurbs .heading:before{ content: "About Me!!"; font-size:.8rem; font-weight:bold; color:White; }
</style>


<style>

.general-about img {-webkit-mask-image: url(https://i.postimg.cc/yd8GJ4gY/911-sin-t-tulo-20240530202927.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}

</style>



<style>

.profile .friends .person img:not(.icon) { -webkit-mask-image: url(https://i.postimg.cc/yd8GJ4gY/911-sin-t-tulo-20240530202927.png );-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}

</style>

<style>



.comments-table td:first-child img:not(.icon) { -webkit-mask-image: url(https://i.postimg.cc/yd8GJ4gY/911-sin-t-tulo-20240530202927.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}



</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.