pink genderfluid layout

Tags: pink, pride, genderfluid, animated, wip, oc

Description:

this is a wip its kinda based on my oc the background is animated and the code is mostly labelled the outlines of the friends profiles stopped working randomly which is weird idk abt that? anyways comment using if ur using it and maybe add me :) also if anyone figures out how to change the comments colour let me know ive tried literally everything TnT

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ali3n 1nvad3r :0 (en/de)  (https://layouts.spacehey.com/layout?id=103437) -->

<style>

/*FONT */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap')

body{  font-family: "Space Mono", monospace;
  font-weight: 600;
  font-style: normal;
}

h1, h2, h3, h4 {  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-style: normal;
}

/* NAVIGATION BAR */
.top{
background-color: palevioletred !important;
}
.links{
background-color: lightpink !important;
}


/* BANNER */
main:before {
	width: 100%;
	height: 140px;
	display: block;
        color: white;
	content: " UPLOAD A DIFFERENT FLAG ON THE NEXT LINE AND PUT TEXT HERE";
     background-image: url('https://i.pinimg.com/236x/ee/8d/20/ee8d202fc800d302ab2f7b2a5d516014.jpg');              
     background-position: center center
     background-size: 300px ;
}

/* PROFILE PIC */
.general-about .profile-pic {
    display:block;
    float: left;
    height: 160px;
    border: lightpink double 5px;
    border-style: groove;
}


/*BACKGROUND*/
body {
     background-image: url("https://i.pinimg.com/originals/cf/40/4a/cf404a796c7c2b9c6eff91748f7a2902.gif");
    background-size: 700px
}
.profile {
   background-color: palevioletred ;
   color: lightpink;
   text-shadow: 2px 2px 10px black;
}

/* heading size*/
h1,h2,h3,h4,h5{
  font-size: 130%; 
}

/*HEADING COLOURS*/
  .profile .blurbs .heading,
  .profile .friends .heading{
   background-color: palevioletred;
   color: palevioletred;
}
  .profile .contact .heading,
  .profile .table-section .heading{
   background-color: lightpink;
   color: black
}


.count {
    color: white



/*FOOTER*/
footer {
    background-image: url(https://i.pinimg.com/564x/8b/c1/07/8bc107b985b5876d988b4a0b0de5bdac.jpg);
    color: black;
    height: 170px;
    background-size: cover;
}


.profile .friends .person img:not(.icon){
     border: 4px groove lightpink;
}


/* INTERESTS TABLE*/

:root {
    --topic1: "rawr"; 
    --topic2: "music";
    --topic3: "movies ";
    --topic4: "television";
    --topic5: "books";
    --topic6: "my back hurts";

 }

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
   color:var(--links) !important;
   letter-spacing:normal !important;
   text-shadow: 2px 2px darkviolet !important; /* CHANGE COLOR OF INTEREST LABELS HERE */
   filter: brightness(95%) !important;
}

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
    content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
    content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
    content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
    content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
    content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
    content: var(--topic6);
}
</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.