✧*̥˚ Fae *̥˚✧'s profile picture

Published by

published
updated

Category: Web, HTML, Tech

Steal my style! (Layout Code)

<style>

@import url('https://fonts.googleapis.com/css2?family=Playwrite+US+Trad:wght@100..400&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');




/*  CODED BY 'RUNNINGFROMLIONZ LYTS' @ SpaceHey  */

/*  spacehey dot com slash runningfromlionzlyts  */



/* background of the page (i.e. left and right of your profile) */

body {

  height:100%;

margin-top:0px;

text-align:justify; 

color: #543546 !important; 

font-family: "Poppins", serif;

  font-weight: 500;

font-size: 16px;

letter-spacing: .2px; 

line-height: 14px; 

background-color: #a268a2;

background-image:url("https://i.ibb.co/DRppw9m/Pixiv-ID-17988973.jpg"); 

background-size: cover;

background-attachment: fixed; 

background-position: center; 

background-repeat: no-repeat;

}


main:before {

width: 100%;

height: 300px;

margin-top: -7px;

display: block;

content: "";

background-image: url('https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExZ3JscjV6OXVjbmdrc2hjMDdpdDVwenJiNnpyODg2ZDR6cGZ0ZXBoOCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/1zJVCFayH2SZ2/giphy.webp');

background-position: center center;

background-size: cover;

border-bottom: 3px #c69cc6 solid;

}

@media only screen and (max-width: 600px) {

main:before{

height: 200px;

}

}




img {

  width: auto;

  height: auto;

}


b {

  color: #a268a2;

  font-family: "Poppins", serif;

  font-weight: 700;

  font-size: {text:Font Size}; 

  text-transform: uppercase;

  letter-spacing: 0px;

}


i {

  font-family: "Poppins", serif;

  font-weight: 400;

  color: #5a97d4;

  letter-spacing: 0px;

}


u {

  color: #91bae3;

text-decoration-style: wavy;

}


strong {

  letter-spacing: .5px;

  background-image: linear-gradient(180deg, #5a97d4, #c69cc6);

  background-clip: text;

  -webkit-background-clip: text;

  color: #5a97d4;

font-family: "Playwrite US Trad", serif;

  font-weight: bold;

}


sup {

  font-size: 9px;

  letter-spacing: 1px;

  color: ######;

  line-height: 7px;

}


em {

  font-family: "Poppins", serif;

  font-weight: 400;

  color: #101010;

  letter-spacing: 1px;

  font-style: italic;

  font-weight: bold;

  text-align: justify;

}


small {font-size:8px; line-height:8px; letter-spacing:0px; text-transform: uppercase;}

big {font-family:arial black; color:{color:text}; word-spacing: normal;}


h1 {

font-size: var(--mynamesize) !important;

line-height: 4px;

font-family: "Playwrite US Trad", serif;

font-weight: 250;

text-transform: none;

letter-spacing: -1.5px;

color: #5a97d4;

text-align:center;

line-height: 10px;

padding:1px;

margin-top:1px;

margin-bottom:3px;

margin-left:1px;

margin-right:1px;

text-shadow: 0 0 0px ######;

border: 0px;

background: #c1d4f1;

background-image:url("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");

background-position: center;

}


h2 {

font-size: var(--mynamesize) !important;

line-height: 4px;

font-family: "Playwrite US Trad", serif;

font-weight: 400;

text-transform: none;

letter-spacing: -1.5px;

color: #a268a2;

text-align:center;

line-height: 10px;

padding:1px;

margin-top:1px;

margin-bottom:3px;

margin-left:1px;

margin-right:1px;

text-shadow: 0 0 0px ######;

border: 0px;

background: #e8cbe5;

background-image:url("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");

background-position: center;

}


/* IF YOU WANT TO ADD YOUR OWN 'ABOUT ME' HEADER JUST PUT THE 'h1' and '/h1' html before or after whatever sentence when editing your profile */


.blurbs { 

  font-size: 18px;

  text-align: center;

  line-height: 16px;

  text-transform: none;

  font-family: "Poppins", serif;

  font-weight: 400;

}


.blurbs {

    overflow: scroll;

    height: 550px; !important;

}


.blurbs::-webkit-scrollbar {

  display: none;

}


.blurbs {

  -ms-overflow-style: none;  /* IE and Edge */

  scrollbar-width: none;  /* Firefox */

}


.blurbs{margin-top:10px !important; margin-bottom:10px !important;}


.section h4{display:none}


.blurbs .heading{display:none !important;}


.mood{text-transform: lowercase; !important; color:#543546; letter-spacing: 0px; font-style: none; font-family: "Poppins", serif;

  font-weight: 500;}


.online {

  content: url("http://www.myspacegens.com/images/online_now/5.gif"); 

  visibility: visible; 

  float: center;

}


.count {

  color: #91bae3;

}


.heading {

  padding: 3px 0px !important;

  margin-bottom: 5px;

  border-bottom: 2px solid ######;

}


.general-about {

  background: transparent;

  font-family: "Poppins", serif;

  font-weight: 400;

  text-transform: none;

  text-align: center;

  font-size: 12px;

  letter-spacing: 0px;

  height: auto !important;

  padding: 8px 8px 4px!important;

  line-height: 14px;

  margin-bottom: 10px;

  margin-top: 10px;

}


.general-about {

  background-image: linear-gradient(60deg, ######, ######);

  background-clip: text;

  color: #543546;

  -webkit-background-clip: text;

}


.blog-entry {

  text-align: center;

  margin-bottom: 0px;

}


.blog-preview {

  float: center;

  text-align: center;

  padding: 2px 0px 2px!important;

  background: #ebf3ff;

    letter-spacing: 0px;

    font-size: 11px;

    text-transform: uppercase;

    line-height: 10px;

border: 2px #c1d4f1 solid;

  color: #91bae3;

}


.blog-preview {

    overflow: scroll;

    height: 60px; 

    width: 97%;

    margin-left: 7px;

}


.blog-preview::-webkit-scrollbar {

  display: none;

}


.blog-preview {

  -ms-overflow-style: none;  /* IE and Edge */

  scrollbar-width: none;  /* Firefox */

}


/* your profile itself. main does not encompass the header/footer, which I prefer to leave alone */


main {

  background-color: #faf7fb;

  color: var(--light-orange);

  border-bottom: 10px solid #c69cc6;

border-right: 3px solid #c69cc6;

border-left: 3px solid #c69cc6;

  padding-bottom: 0px;

}


/* links within main. */

a, a:link, a:visited, a:active {

  font-family: "Poppins", serif;

  font-weight: 500;

  font-size: 10px;

  color: #c69cc6;

  text-transform: uppercase;

  letter-spacing:0px; 

}


a:hover {

  color: #5a97d4;

  text-transform: uppercase;

  font-weight: none;

  text-decoration: none;

}


a.two, a.two:link, a.two:visited, a.two:active {

  font-size: 18px;

  font-weight: normal;

  color: #5a97d4;

  letter-spacing:-1px; 

  line-height: 20px;

}


a.two:hover {

  color: #5a97d4;

  text-transform: uppercase;

  font-weight: none;

  text-decoration: none;

}


/* color/style of borders around tables on the left */

.profile .contact, .profile .table-section, .profile .url-info {

  border: none;

}


/* colors for the table headings on the left */

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {

  background: #c69cc6;

  color: #a268a2;

  font-family: "Playwrite US Trad", serif;

  font-weight: 200;

  font-size: 18px;

  text-transform: none;

  text-align: center;

}



.contact {

  background-color: #e8cbe5;

  line-height: 5px;

padding: 10px;

}


.profile .left .table-section:last-child .details-table tbody {

display: flex;

}


.profile .left .table-section:last-child .details-table tbody tr {

display: flex;

}


.profile .left .table-section:last-child .details-table tbody tr td {

width: 100%!important;

}


.profile .contact .f-row{

text-align: center;

height: 5px;

}


.profile .contact .heading {

display: center!important;

text-align: center;

padding: 4px 0px 4px!important; 

        margin-bottom: 20px;

width: 100%;

line-height: 9px;

}


.profile .contact .f-row .f-col {

width: 80%!important

}


.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a, .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a, .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a, .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a, .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a, .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a, .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a, .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a {

font-size: 0;

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:after, .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:after, .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:after, .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:after, .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:after, .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:after, .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:after, .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:after {

font-size: 11px;

transition: all .3s;

        line-height: 5px;

  padding: 0px 15px 0px 0px;

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:hover:after, .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:hover:after, .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:hover:after, .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:hover:after, .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:hover:after, .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:hover:after, .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:hover:after, .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:hover:after {

transform: scale(2);

opacity: 1

}


.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:after {

content: "ADD ME"

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:after {

content: "FAVORITE"

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:after {

content: "MESSAGE"

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:after {

content: "FORWARD"

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:after {

content: "IM"

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:after {

content: "BLOCK"

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:after {

content: "GROUPS"

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:after {

content: "REPORT"

}


.music {

  position: fixed;

  width: 60px;

  height: 20px;

  bottom: 5%;

  right: 0%;  

  opacity: .5;

    -webkit-filter: invert(1) saturate(50%) hue-rotate(220deg) grayscale(100%);

    filter: invert(1) saturate(50%) hue-rotate(220deg) grayscale(100%);

}


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

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

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




footer {

   background: rgba(0.0, 0.0, 0.0, 0.0) !important;

   display: block !important;

   text-transform: uppercase;

   color: ######;

  line-height: 0px;

  padding-top: 0px;

}


.col.w-40.left :nth-child(7) {

text-align: left;

}


:root {

  --dark-orange: transparent;

  --light-orange: #543546;

--mynamesize: 22px;

--curve: 15px;

}


code{  word-break: break-all !important;}


.table-section:not(:last-child) .details-table tr td:first-child p{color: #1c1c1c; text-shadow: none !important; height: auto; text-transform: uppercase; font-size: 10px;}


.details-table tr td:first-child p::after{

  color:#543546 !important;

  letter-spacing:normal !important;  line-height: 14px;

  font-size: 11px;

   text-shadow: 0px 0px transparent !important;

   filter: brightness(95%) !important;

margin-top: 5px;  margin-bottom: 5px;

}


/* colors for left table cell background */

.profile .table-section .details-table td {

  background-color: #faf7fb;

  color: #543546;

    text-align: center;

}


nav .top {

  background: transparent;

  background-image: url(" XXXXXXXXXXXXXXXXXXXXXXXXXXXXX ");

  background-position: center;

}


  nav .links li:not(:last-child)::after,

  footer .links li:not(:last-child)::after {

    color: transparent;

  }


nav ul.links a {

  color: #543546;

  letter-spacing: 2px;

  font-size: 8px;

}


nav ul.links a {

text-shadow: none;

}


nav .links {

  color: #543546 !important;

  text-align:center;

  background-color: #c69cc6;

  letter-spacing:0px;

  padding-top: 10px;

}


nav .links a:hover {

  color: #c1d4f1;

  text-transform: uppercase;

  font-weight: none;

  text-decoration: none;

transition: all .3s;

}


.profile .friends .person img {

}


.online{

  color: #543546!important;  

}


.profile .left .table-section:last-child .details-table tbody {display:flex;}

.profile .left .table-section:last-child .details-table tbody tr{display:flex;flex-direction:column;flex:1;line-height:0;}

.profile .left .table-section:last-child .details-table tbody tr td{width:100%!important;text-align:center;background:none;}

.profile .left .table-section:last-child .details-table tbody tr td p a{font-size:0;transition:all .3s}

.profile .left .table-section:last-child .details-table tbody tr td p img{font-size:18px;opacity:1;transition:all .3s;height:auto;margin:0 auto;}

.profile .left .table-section:last-child .details-table tbody tr td p a:hover img{opacity:1;transform:scale(1.2);z-index:10;}


/* headings on the right */

.profile .blurbs .heading, .profile .friends .heading {

  background-color: #c1d4f1;

  color: #91bae3;

font-size: 18px;

  font-family: "Poppins", serif;

  font-weight: 300;

  letter-spacing: -1px;

  text-transform: lowercase;

  text-align: center;

  padding: 5px;

  border-bottom: solid 0px ######;

  border-left: solid 0px ######;

  border-right: solid 0px ######;

}


.profile .friends .comments-table td {

  background: #e8cbe5 !important;

  letter-spacing: 0px;

  font-size: 10px;

  text-transform: uppercase;

  border: 0px solid #c69cc6;

}


.comments-table td:first-child img{

}



.comments-table td{

background: #e8cbe5;

color: #a268a2;

}


.comments-table td:first-child{

background-color: #e8cbe5;

}


.comments-table {

  border: 0px solid #c69cc6;

}


.comment-replies {

  background: #c1d4f1;

  border: 2px solid #91bae3;

  letter-spacing: 0px;

  font-size: 10px;

  text-transform: uppercase;

}


.comments {

  height: 150px;

}


.friends {

    overflow: scroll;

    height: 200px; 

}


.friends::-webkit-scrollbar {

  display: none;

}


.friends {

  -ms-overflow-style: none;  /* IE and Edge */

  scrollbar-width: none;  /* Firefox */

}


/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/special/spe-3/spe302.ani), url(https://cur.cursors-4u.net/special/spe-3/spe302.png), auto !important;} /* End https://www.cursors-4u.com */


/*  CODED BY 'RUNNINGFROMLIONZ LYTS' @ SpaceHey  */

/*  CODED BY 'RUNNINGFROMLIONZ LYTS' @ SpaceHey  */

/*  CODED BY 'RUNNINGFROMLIONZ LYTS' @ SpaceHey  */

/*  spacehey dot com slash runningfromlionzlyts  */


table, th, td {

border: 0px solid;

}


.url-info{display: none !important;}


:root {


--topic1: "moves & shows";

--topic2: "music";

--topic3: "hobbies";

--topic4: "blinkies";

--topic5: "stamps";

--topic6: "quote";


}


.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 black !important; 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); }


.table-section:nth-last-child(2) .details-table tr:nth-child(4){display:none;}

.table-section:nth-last-child(2) .details-table tr:nth-child(5){display:none;}


.movies {

opacity: 0.6;

border-radius: 5px;

border: 2px #C69CC6 solid;

}


</style>


<a class="two" href="https://spacehey.com/lionzlyts" target="_blank"><div style="position:fixed; top:0; left: 0; z-index: 9; width: 50px; height: 50px;">/𝕷𝖎𝖔𝖓𝖟</div></a>



0 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )