bug bites layout (synonyms for heartache)

Tags: silly
Description:

idk, saving it here
but u can use this if u want 2! :-D
Code:

<!-- (c) Layout created by 🐧; 311/Tavish (https://layouts.spacehey.com/layout?id=29878) -->

<div style="">
<div style="float: ; &#10;max-height: 500px; &#10;position: fixed; &#10;right: -350px; &#10;top: -10px; &#10;z-index: 600;"><img src="https://i.ibb.co/BfjpX9k/36182-BA1-43-EB-41-F2-8834-DE61-CC0-BA76-F.png" width="200" height="200"/>
</div>

<style>
.profile h4 {
  color: #000000!important;
}
@keyframes spin {
    100% {
        transform: scale(2,1) rotate(100deg);
    }
    100% {
        transform: scale(1.2,1.2) rotate(10deg);
    }
    100% {
        transform: scale(1,1) rotate(10deg);
    }
}
.profile .col h1 {
  font-size: 0px !important;
  animation: spin -100s infinite;
}
</style>

<style>
.logo {
content:url("https://i.ibb.co/1q4jSWc/A1-D7-F96-F-7925-47-DF-9230-E54-E636-A796-F.png");
}
</style>

<style>

.profile-info{

    border: medium var(--darker-blue) outset !important;

    font-family: header, monospace !important;

    background-image: url("https://i.ibb.co/4Kb0PYG/11-C20-A3-A-1808-4110-8-C0-F-D08-CF39-A9-A3-A.png") !important;

    background-repeat: no-repeat;

    height: 150px;

    color: transparent;

    background-color: var(--darker-blue);

    border: medium var(--darker-blue) outset !important;

    background-size: cover;

   }

  .profile-info .inner{

      background: none !important;

      border: none !important;

    }

</style>

<div style="">
<div style="float: ; &#10;max-height: 500px; &#10;position: fixed; &#10;right: -350px; &#10;top: -10px; &#10;z-index: 600;"><img src="https://i.ibb.co/BfjpX9k/36182-BA1-43-EB-41-F2-8834-DE61-CC0-BA76-F.png" width="200" height="200"/>
</div>

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

<style>
/* replace with cd image that has transparent background. must be 150px by 150px. */
:root {
--cd-image: url('https://i.imgur.com/pxu4FCF.png');
}
.profile-pic {
position: relative;
width: 183px;
filter: drop-shadow(0 0 0.25rem gray);
}
.profile-pic:after {
content: "";
background: url('https://i.imgur.com/f0rzNHe.png'), linear-gradient(150deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2), 40%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.6));
background-size: contain, cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.profile-pic:before {
content: "";
background: var(--cd-image);
position: absolute;
top: 5px;
left: -20px;
width: 150px;
height: 150px;
background-repeat: no-repeat;
z-index: -1;
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear; 
transition: left ease 0.5s;
}
.profile-pic:hover:before {
left: -75px;
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
.profile-pic .pfp-fallback {
float: right;
width: 163px;
height: 160px;
border: none;
}
.general-about .profile-pic img {
max-width: inherit;
}
</style>

<style>
.col.w-40.left {
transform: skewY(6deg);
}

.col.right {
transform: skewY(-12deg);

}

</style>

<style>main:before {
	width: 100%;
	height: 125px ;
	display: block;
	content: "";
	background-image: url('https://i.ibb.co/N3rmnWf/BE8-CFF7-D-7130-4516-8390-804-BE348-A064.png');
	background-position: center center;
	background-size: cover;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}
}</style>

<style>
.online{content:url("https://external-media.spacehey.net/media/ssva6qHoAeLaBXlIBfUSVtpMCs0pB-g9KUIS69pemK1c=/https://resource.crd.co/assets/images/gallery01/c2712e6e_original.gif?v=496fd52d");
}
</style>

<style>
main {
background: #540707;
border: groovy;
}

:root {
--logo-blue: maroon;
--darker-blue: #EDE8E2;
--lighter-blue: maroon;
--even-lighter-blue: #972828;
--lightest-blue: #B02323;
--dark-orange: #EDE8E2;
--light-orange: maroon;
--even-lighter-orange: #EDE8E2;
--green: #972828;
</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Orbitron:wght@900&display=swap');
p{ font-family: 'Orbitron', sans-serif; 
font-size: 100%;
color: white; 
}

h1, h2, h3, h4, h5{
font-family: 'Orbitron', sans-serif;
font-size: 100%;
color: white;
</style>

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

<style> 
.contact {
        font-size: #px;
        font-family: fontfamily;
        border: groovy 30px!important;
        background-image: url("https://i.ibb.co/N3rmnWf/BE8-CFF7-D-7130-4516-8390-804-BE348-A064.png")!important;
        background: ;
        border-top: 30px;
        
    }
    .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: url("https://i.ibb.co/4j14Jny/EC59-F6-A3-72-BE-4-C20-B7-A6-B4-C3-E4898379.png")
    }
    .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	    /* add to favorites */
	    content: url("https://i.ibb.co/4j14Jny/EC59-F6-A3-72-BE-4-C20-B7-A6-B4-C3-E4898379.png")
    }
    .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	    /* send Message */
	    content: url("https://i.ibb.co/4j14Jny/EC59-F6-A3-72-BE-4-C20-B7-A6-B4-C3-E4898379.png")
    }
    .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	    /* forward to friend */
	    content: url("https://i.ibb.co/4j14Jny/EC59-F6-A3-72-BE-4-C20-B7-A6-B4-C3-E4898379.png")
    }
    .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	    /* instant message */
	    content: url("https://i.ibb.co/4j14Jny/EC59-F6-A3-72-BE-4-C20-B7-A6-B4-C3-E4898379.png")
    }
    .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	    /* block user */
	    content: URL("https://i.ibb.co/4j14Jny/EC59-F6-A3-72-BE-4-C20-B7-A6-B4-C3-E4898379.png")
    }
    .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	    /* add to group */
	    content: url("https://i.ibb.co/4j14Jny/EC59-F6-A3-72-BE-4-C20-B7-A6-B4-C3-E4898379.png")
    }
    .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	    /* report user */
	    content: url("https://i.ibb.co/4j14Jny/EC59-F6-A3-72-BE-4-C20-B7-A6-B4-C3-E4898379.png")
    } 
</style>

<style>
html::before{
	content: " ";
	width:100vw;
	height:100vh;
	display:block;
	position:fixed;
	top:0;
	left: 0;
	bottom: 0;
	right: 0;
	background-image:url();
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	z-index:100000;
	pointer-events:none;
</style>

<style>
.profile {
background-image:url();
  background-repeat: repeat;
    border-radius: 12px;
</style>

<style>
/* Transparent Lite by Twilight Sparkle! https://spacehey.com/twilight */
/* Please keep the credit and don't take credit yourself! Even if you change it, leave a mention of the base you used, all I ask (and politely, I can't stop you anyway) */
body{
  background-image:url(https://i.ibb.co/KLZrkcR/D2-E68621-E1-BF-4284-BD40-F1-DB7-D75-F8-DE.jpg); /* put your background URL here */
 
}

nav .links {
    background-color: rgba(176, 35, 35, .4); /* navbar transparency */
}

#q,
footer {
    background: 0 0; /* footer transparency */
    color: #B02323;
}

footer {
    padding: 10; /* closer footer */
}

footer .links li:not(:last-child)::after,
nav .links li:not(:last-child)::after {
    color: #972828; /* make the bars between nav items white */
}

#q {
    border: 50;
    outline: 50;
    border-bottom: 20px groovy #B02323; /* better search bar */
}

button {
    border: groovy; /* more better search bar */
}

.comments-table td:first-child {
    width: 50%; /* authors do not need to be that big, goodnight */
}</style></div>

<style>

.container {

animation: float 3s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}



.container {

animation: float 3s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

@keyframes float {

0% { transform: translate(0, 0px);

}

50% {

transform: translate(0, 8px);

}

100% {

transform: translate(0, -0px);

}

</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/fEph7LI7iCk//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe></div>
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 )