pastel coquette layout

Tags: pink, pastel, coquette, flowers, cute, kawaii, vintage, lace, layouts

Description:

[LAST UPDATE: 10/07/2024] This is very messy and im still learning how to code, but i tried to add some text as a guide so feel free to edit or to take bits of it for your layout :D please don't remove or cover credits!

If using please leave a comment! feel free to send a friend req also and if there's anything that needs to be fixed or if you have any questions just leave them below and i'll do my best to help . . ( ᵕ ᵕ ♱)ಎ

Blog optimized code (WIP!!)

<style>
/* mobile code. don't delete */
@media (max-width: 600px) {
    main{
        max-width: 90%!important;
    }
    nav .links{
       max-width: 90%!important;
       align: center !important;
       margin-left: auto !important;
       margin-right: auto !important;
}
    footer{
       max-width: 90%!important;
       margin-left: auto !important;
       margin-right: auto !important;
}
    h1{
        font-size: 30px!important;
    }
    body{
        font-size: 16px!important;
    }
    a{
        font-size: 18px!important;
    }
    body:before{
        background-size:40%!important;
    }
    .ceresites{
        z-index: 9 !important;
        width: 15% !important;
    } 
}
</style>



<style>
/* fonts */
    @font-face { font-family: "hearts"; src: url('https://dl.dropbox.com/s/1479f8x52y3z5u4/rainyhearts.ttf'); }
</style>



<style>
/*page background */
body {
        background:url('https://pbs.twimg.com/media/FA8CyU_XMAMQqZ4?format=jpg&name=240x240');
}
</style>



<style>
/* cursors (source: http://www.rw-designer.com/cursor-set/littlebunny2-mimidestino) */
a:hover{
    cursor: url('https://64.media.tumblr.com/798fb85e8334ad49beadcec5e2422e1d/e607e0ffc52ca267-19/s75x75_c1/637b1c8f639ed9cb92f23b481633f804843cfa8c.gifv'), auto; /*link select*/
}
* { 
    cursor: url('http://www.rw-designer.com/cursor-extern.php?id=94536'), auto; /*normal select*/
}
</style>


<style>
/* This is the loading image when someone clicks on your profile.
You can search for 'transparent loading screen gif' on google or giphy.com and select one that fits your style.
The background-size code will change the size of it. Remember to test it out on your phone/tablet 
and change the background-size in the mobile code.*/

body: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/tumblr_m54k7efWWw1qid2nw.gif');
	background-size: 10%;
	background-repeat: no-repeat;
        background-position:center;
        background-color: #FEF1F0;
	animation: yourAnimation 2s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</style>




<style>


a:hover{text-decoration: underline;}

h2, h3, h4, h5{color: black !important;} /* headings*/

a{color: black !important; } /* color of links */

p, b, .count {color: black !important;} /* color of text */

.profile .friends .person p{color: #e2a99c !important;} /* color of names and friends counter */

nav label{color: black !important;} /* color of search */

.section h4 {color: #c2c9a7 !important;} /* aboutme & want2meet headings */

.blurbs .heading {display:none;} /* hides the blurbs title. if you want it to show, replace with the code: color: var(--headers) !important;  */


nav .top{
        background-color: transparent !important;
        border: none;
        margin: 30px 0;
        color: black;
}


.logout-btn, .logout-form {
        font-family: hearts;
        text-decoration: underline;
        background-color: none !important;
        border: none !important;
        color: black !important;
        display: inline-block;
        font-size: 1.1em !important;
}


nav .links{
        background-color: transparent !important;
        border: 10px solid black;
        border-image: url("https://foollovers.com/mat/baf/frill/fr32-015-a.gif") 9 fill round;
        font-family: hearts;
        text-align: center;
        margin-bottom: 10px !important;
}

nav .top a, nav .links a{
        background: transparent !important;
        color: black;
        text-shadow: none !important;
        text-decoration: none !important;
        font-size: 1.5em;
}


/* this is the line that appears between links in the nav bar and footer.
you can add an emoji or symbol instead of the default line it has */

nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
        content: " ♡ " !important;
        color: black;
}


/* this is the spacehey logo color. to change the color refer to https://codepen.io/sosuke/pen/Pjoqqp and replace the filter property values */

nav img.logo{
        filter: invert(61%) sepia(7%) saturate(2917%) hue-rotate(315deg) brightness(111%) contrast(90%);
        width: 165px !important;
        height: 42px;
}


main{
        background-color: white;
        background-image: url('https://colorate.azurewebsites.net/SwatchColor/FFFFFF');
        background-size: 1000%;
        background-repeat: no-repeat;
        border: 9px solid;
        border-image: url("https://64.media.tumblr.com/6f0c2efb2b0902a5907c60c9d1dcad9e/9b9e0ed89a039867-11/s75x75_c1/90da82e9674eafbcc1f84f71303f353726a700b5.pnj") 8 fill round;
        width:810px;
        height:480px;
        overflow-y: scroll;
        margin: auto;
        background-color: white;
}

/* blog tittle */
h1{
        text-shadow: -1px 0 #7e6446, 0 1px #7e6446, 1px 0 #7e6446, 0 -1px #7e6446, 0 0;
        color: white;
        font-family: "hearts";
        font-style: italic;
        font-size:50px!important;
        font-weight: bold;
        text-align: center;
        text-transform: lowercase;
}

/* this are the scrollbars. i recommend u do NOT edit this part if ur a coding noob (like me)!! (source: https://ishimori.crd.co/) */

::-webkit-scrollbar {
width: 16px
}
 
::-webkit-scrollbar:horizontal {
height: 17px
}
 
::-webkit-scrollbar-corner {
background: #eee
}
 
::-webkit-scrollbar-track:vertical {
background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%)
}
 
::-webkit-scrollbar-track:horizontal {
background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%)
}
 
::-webkit-scrollbar-thumb {
border: 1.5px solid #888;
border-radius: 3px;
box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
background-color: #eee;
}
 
::-webkit-scrollbar-thumb:vertical {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(90deg, #eee 45%, #ddd 0, #bbb)
}
 
::-webkit-scrollbar-thumb:horizontal {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADcSURBVChTNZBLqoUwEEQrURQUxZGCvy24ACfiityJi7tv8GauQoPxk5tquA2RQ9vVVYk6z9NZaxFFEe77htYazjk8z4MwDIVZ+rourOuKaZrwvi+WZcE8z1BKCbPPCjk4DAO2bRP1OI7wLiL6Mbd7J408z1GWpQwWRYGqqiQG+03TgMu0MacfUN4qANmn8UOv9MjW3sKaSm7iIdOSlziOQ3LScd93aPonSYK6riVLlmVo21aYfVqzND9pmqLrOlGT+76XbcxLZkb19/l3fEP+oF0cx8KMEASBsDEGX2/CgZCHkg+8AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(180deg, #eee 45%, #ddd 0, #bbb)
}
 
::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement {
display: block
}
 
::-webkit-scrollbar-button:vertical {
height: 17px
}
 
::-webkit-scrollbar-button:vertical:start:decrement {
background: white;
background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299199633141851/download.png");
background-repeat: no-repeat;
background-position: center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
 
::-webkit-scrollbar-button:vertical:start:increment {
display: none;
}
 
::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}
 
::-webkit-scrollbar-button:vertical:end:increment {
background: white;
background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299200052576387/87ae92e1-3894-4469-b1b9-aedf5f04975c.png");
background-repeat: no-repeat;
background-position: center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
 

/* font family for the headers, navigtion links, links, body text */

h2, h3, h4, h5{
        font-family: "hearts";
        font-size: 18px!important;
        font-weight: semi-bold; 
}
 
a{
        font-family: hearts !important;	
        font-size: 14px !important;
        font-weight: 1; 
}
 
p, b, nav label, .section{ 
        font-family: "hearts";
        font-size: 16px!important;
        font-weight: semi-bold; 
}


/* the online text */
.online{
        color: black !important;
        text-transform: lowercase;
        text-align: left;
} 

/* the online icon */
.online img{
        content: url("https://64.media.tumblr.com/85143b2850e75f47d3a511d07c9c3791/b71077d70ee5b59c-21/s75x75_c1/41f78bb60ed65f9a61da1116da92e70fcbbc404d.gifv") !important;
        animation-name: none;
        animation-iteration-count: infinite;
        animation-duration: 2s;
}


/* your profile picture */
.profile-pic {
        -webkit-mask-image: url(https://64.media.tumblr.com/21537f823a9682455940164951cd4f70/a13f6b3efb69d983-60/s250x400/4513c30e7c3d485e14827bda68c9750d7b2d80e4.pnj);
        -webkit-mask-size: 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        width: 160px !important;
        height: auto;
}


/* the online symbol and text */

.online{
    color: black !important;
    text-transform: lowercase;
    text-align: left;
} 
.online img{
    content: url("https://64.media.tumblr.com/85143b2850e75f47d3a511d07c9c3791/b71077d70ee5b59c-21/s75x75_c1/41f78bb60ed65f9a61da1116da92e70fcbbc404d.gifv") !important;
    animation-name: none;
    animation-iteration-count: infinite;
    animation-duration: 2s;
}



main .left{
    padding: 4px !important;
    margin: 3px !important;
    border-right: solid white 6px !important;
  }


main .right > * {
    margin: 15px auto 15px auto !important;
}


.edit-info {
    background: transparent !important;
    box-shadow: none;
    border: none !important;
    width: 100%;
    padding: none !important;
    overflow-wrap: break-word;
    word-break: break-word;
 } 

.blog-entry .profile-pic img, .bulletin .profile-pic img {
    -webkit-mask-image: url(https://64.media.tumblr.com/21537f823a9682455940164951cd4f70/a13f6b3efb69d983-60/s250x400/4513c30e7c3d485e14827bda68c9750d7b2d80e4.pnj);
    -webkit-mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    max-width: 140px !important;
    max-height: 140px !important;
} 

.icon, .award img {
    display: none !important;
    width: 0px !important;
    height: 0px !important;
}


.article .edit-info .author-details p.links a::before{
    content: url("https://64.media.tumblr.com/670f044f1a64397915f1d186aa15f094/273b4c4e0e95e923-da/s75x75_c1/57b20236c7eabe8248776f51e614a90d96c10654.gifv") !important;
}


main .right {
    background: white radial-gradient(circle at 0 0, #FCEAEF 2px, transparent 0);
    background-size: 4px 4px;
    border: white solid 5px !important;
    padding: 15px;
}

main .right > * {
    margin: 15px auto 15px auto;
}


.blog-entry .kudos-btn {
    background: none !important;
    border: none;
    padding: 0 !important;
    cursor: url("http://www.rw-designer.com/cursor-set/littlebunny2-mimidestino") !important;
    user-select: text;
    font-family: "hearts" !important;
    font-size: 1.2em !important;
    font-weight: 600 !important;
    text-decoration: none;
    color: #c2c9a7 !important;
}

/* COMMENTS  */
.profile .right .comments-table{
	      height:390px;
	      overflow-y:scroll;
	      display:block;
	      background-color: transparent !important;
	      border: none !important;
        padding: none !important;
}


.comments-table td{
        background-color: transparent !important;
        border: none !important;
}


.comments-table td:first-child img:not(.icon) {
        background-color: transparent !important;
        border: 9px solid !important;
        border-image: url(https://64.media.tumblr.com/9dfe9992a7fe8b33b574707ce2b943e7/5f3ae3c869e7ca9a-03/s250x400/a981485eb61951d58a99d20bba68b120e7794e1a.pnj) 10 round !important;
        border-image-outset: none !important;
        width: 90px;
        max-width: 100%;
        max-height: 200px;
}


.profile .right .comments-table td:nth-child(2) {
	      border: none !important;
}

.profile .right .comments-table td:nth-child(1) {
	      background-color: transparent !important;
        border: none !important;
}


.comment-replies{
	border: 0 !important;
	border-left: 5px solid #f7f3e4 !important;
}

main:not(.right) .icon {
        filter: hue-rotate(-30deg) sepia(50%) saturate(45%) !important;
        transform: scale(0.7) !important;
}


button, [type="button"], [type="reset"], [type="submit"] {
        background-color: #f7f3e4 !important;
        border: gray solid 1px;
        border-radius: 3px;
        color: black;
        text-align: center;
        font-family: 'hearts' !important;
}

footer{
        margin-top:10px;
        background-color: transparent !important;
        border: none !important;
        text-align: center;
        color: #e3dada !important;
}

footer p {
        color: #c2a9a9 !important;
}

footer a {
        color: #c2a9a9 !important;
}

footer .links li:not(:last-child)::after{
        color: #c2a9a9 !important;
}

footer .links{
        margin-top: 5px;
        text-align: center;
}

</style>

<div class="ceresites" style="float:  ; width: 6%; position: fixed; left: 10px; bottom: 10px; z-index: 9;"><a title="layout by @ceresites" href="https://spacehey.com/ceresites"><img style="width: 50%;" src="https://foollovers.com/mat/i-anira/k05-icon-rabbit.gif"/></a></div>

<style>
.ceresites{
    padding: 5px;
    bottom: 10px;
    background: transparent;
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
</style>

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ♡ emo doll ♡ (https://layouts.spacehey.com/layout?id=103282) -->

<!---
͏ ͏            ͏ ͏:¨ ·.· ¨:     (＼(＼
 ⠀⠀⠀⠀          `· .    ꒰  ◡   ◡    ꒱  :¨ ·.· ¨:
                          ꒰  ა  ᡴ  ꒱        . ·ˊ
                          ©ceresites
                          ୧⌣⌣ ⌣⌣୨
                   ♡⑅*ॱ˖•. ·͙*̩̩͙˚̩̥̩̥*̩̩̥͙·̩̩̥͙*̩̩̥͙˚̩̥̩̥*̩̩͙‧͙ .•˖ॱ*⑅♡
--->

<!--- This is the fixed version of my old layout! in my profile you can find an updated section with all my current resources and bookmarks for codes, grapichs and web materials! feel free to edit!! --->

<style>
/* mobile code. don't delete */
@media (max-width: 600px) {
    main{
        max-width: 90%!important;
    }
    nav .links{
       max-width: 90%!important;
       align: center !important;
       margin-left: auto !important;
       margin-right: auto !important;
}
    footer{
       max-width: 90%!important;
       margin-left: auto !important;
       margin-right: auto !important;
}
    h1{
        font-size: 30px!important;
    }
    body{
        font-size: 16px!important;
    }
    a{
        font-size: 18px!important;
    }
    body:before{
        background-size:40%!important;
    }
    .ceresites{
        z-index: 9 !important;
        width: 15% !important;
    } 
}
</style>



<style>
/* fonts */
    @font-face { font-family: "hearts"; src: url('https://dl.dropbox.com/s/1479f8x52y3z5u4/rainyhearts.ttf'); }
</style>



<style>
/*page background */
body {
        background:url('https://pbs.twimg.com/media/FA8CyU_XMAMQqZ4?format=jpg&name=240x240');
}
</style>



<style>
/* cursors (source: http://www.rw-designer.com/cursor-set/littlebunny2-mimidestino) */
a:hover{
    cursor: url('https://64.media.tumblr.com/798fb85e8334ad49beadcec5e2422e1d/e607e0ffc52ca267-19/s75x75_c1/637b1c8f639ed9cb92f23b481633f804843cfa8c.gifv'), auto; /*link select*/
}
* { 
    cursor: url('http://www.rw-designer.com/cursor-extern.php?id=94536'), auto; /*normal select*/
}
</style>


<style>
/* This is the loading image when someone clicks on your profile.
You can search for 'transparent loading screen gif' on google or giphy.com and select one that fits your style.
The background-size code will change the size of it. Remember to test it out on your phone/tablet 
and change the background-size in the mobile code.*/

body: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/tumblr_m54k7efWWw1qid2nw.gif');
	background-size: 10%;
	background-repeat: no-repeat;
        background-position:center;
        background-color: #FEF1F0;
	animation: yourAnimation 2s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</style>




<style>


a:hover{text-decoration: underline;}

h2, h3, h4, h5{color: black !important;} /* headings*/

a{color: black !important; } /* color of links */

p, b, .count {color: black !important;} /* color of text */

.profile .friends .person p{color: #e2a99c !important;} /* color of names and friends counter */

nav label{color: black !important;} /* color of search */

.section h4 {color: #c2c9a7 !important;} /* aboutme & want2meet headings */

.blurbs .heading {display:none;} /* hides the blurbs title. if you want it to show, replace with the code: color: var(--headers) !important;  */


nav .top{
        background-color: transparent !important;
        border: none;
        margin: 30px 0;
        color: black;
}


.logout-btn, .logout-form {
        font-family: hearts;
        text-decoration: underline;
        background-color: none !important;
        border: none !important;
        color: black !important;
        display: inline-block;
        font-size: 1.1em !important;
}


nav .links{
        background-color: transparent !important;
        border: 10px solid black;
        border-image: url("https://foollovers.com/mat/baf/frill/fr32-015-a.gif") 9 fill round;
        font-family: hearts;
        text-align: center;
        margin-bottom: 10px !important;
}

nav .top a, nav .links a{
        background: transparent !important;
        color: black;
        text-shadow: none !important;
        text-decoration: none !important;
        font-size: 1.5em;
}


/* this is the line that appears between links in the nav bar and footer.
you can add an emoji or symbol instead of the default line it has */

nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
        content: " ♡ " !important;
        color: black;
}


/* this is the spacehey logo color. to change the color refer to https://codepen.io/sosuke/pen/Pjoqqp and replace the filter property values */

nav img.logo{
        filter: invert(61%) sepia(7%) saturate(2917%) hue-rotate(315deg) brightness(111%) contrast(90%);
        width: 165px !important;
        height: 42px;
}


/* this is the white lacey container where your profile is */
main{
        background-color: white;
        background-image: url('https://colorate.azurewebsites.net/SwatchColor/FFFFFF');
        background-size: 100%100%;
        background-repeat: no-repeat;
        border: 9px solid;
        border-image: url("https://64.media.tumblr.com/6f0c2efb2b0902a5907c60c9d1dcad9e/9b9e0ed89a039867-11/s75x75_c1/90da82e9674eafbcc1f84f71303f353726a700b5.pnj") 8 fill round;
        width:810px;
        height:480px;
        overflow-y: scroll;
        margin: auto;
        background-color: white;
}

/* this is your name/username. this text has a floating effect */
h1{
        text-shadow: -1px 0 #7e6446, 0 1px #7e6446, 1px 0 #7e6446, 0 -1px #7e6446, 0 0;
        color: white;
        font-family: "hearts";
        font-style: italic;
        font-size:50px!important;
        font-weight: bold;
        text-align: center;
        text-transform: lowercase;
        animation-name: floating;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
}

@keyframes floating {
        0% { transform: translate(0,  0px); }
        50%  { transform: translate(0, 15px); }
        100%   { transform: translate(0, -0px); }    
}


/* this are the scrollbars. i recommend u do NOT edit this part if ur a coding noob (like me)!! (source: https://ishimori.crd.co/) */

::-webkit-scrollbar {
width: 16px
}
 
::-webkit-scrollbar:horizontal {
height: 17px
}
 
::-webkit-scrollbar-corner {
background: #eee
}
 
::-webkit-scrollbar-track:vertical {
background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%)
}
 
::-webkit-scrollbar-track:horizontal {
background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%)
}
 
::-webkit-scrollbar-thumb {
border: 1.5px solid #888;
border-radius: 3px;
box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
background-color: #eee;
}
 
::-webkit-scrollbar-thumb:vertical {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(90deg, #eee 45%, #ddd 0, #bbb)
}
 
::-webkit-scrollbar-thumb:horizontal {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADcSURBVChTNZBLqoUwEEQrURQUxZGCvy24ACfiityJi7tv8GauQoPxk5tquA2RQ9vVVYk6z9NZaxFFEe77htYazjk8z4MwDIVZ+rourOuKaZrwvi+WZcE8z1BKCbPPCjk4DAO2bRP1OI7wLiL6Mbd7J408z1GWpQwWRYGqqiQG+03TgMu0MacfUN4qANmn8UOv9MjW3sKaSm7iIdOSlziOQ3LScd93aPonSYK6riVLlmVo21aYfVqzND9pmqLrOlGT+76XbcxLZkb19/l3fEP+oF0cx8KMEASBsDEGX2/CgZCHkg+8AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(180deg, #eee 45%, #ddd 0, #bbb)
}
 
::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement {
display: block
}
 
::-webkit-scrollbar-button:vertical {
height: 17px
}
 
::-webkit-scrollbar-button:vertical:start:decrement {
background: white;
background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299199633141851/download.png");
background-repeat: no-repeat;
background-position: center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
 
::-webkit-scrollbar-button:vertical:start:increment {
display: none;
}
 
::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}
 
::-webkit-scrollbar-button:vertical:end:increment {
background: white;
background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299200052576387/87ae92e1-3894-4469-b1b9-aedf5f04975c.png");
background-repeat: no-repeat;
background-position: center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
 

/* font family for the headers, navigtion links, links, body text */

h2, h3, h4, h5{
        font-family: "hearts";
        font-size: 18px!important;
        font-weight: semi-bold; 
}
 
a{
        font-family: hearts !important;	
        font-size: 14px !important;
        font-weight: 1; 
}
 
p, b, nav label, .section{ 
        font-family: "hearts";
        font-size: 16px!important;
        font-weight: semi-bold; 
}


/* the online text */
.online{
        color: black !important;
        text-transform: lowercase;
        text-align: left;
} 

/* the online icon */
.online img{
        content: url("https://64.media.tumblr.com/85143b2850e75f47d3a511d07c9c3791/b71077d70ee5b59c-21/s75x75_c1/41f78bb60ed65f9a61da1116da92e70fcbbc404d.gifv") !important;
        animation-name: none;
        animation-iteration-count: infinite;
        animation-duration: 2s;
}


/* your profile picture */
.profile-pic {
        -webkit-mask-image: url(https://64.media.tumblr.com/21537f823a9682455940164951cd4f70/a13f6b3efb69d983-60/s250x400/4513c30e7c3d485e14827bda68c9750d7b2d80e4.pnj);
        -webkit-mask-size: 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        width: 160px !important;
        height: auto;
}


/* contact table */
.contact .heading{
        background-color: #eee4dc !important;
}

.contact{       
        border: 4px solid #eee4dc !important;   
        border-radius: 3px;
}

.contact img {
        filter: saturate(0%)!important;
}

/* this is the custom contact code (graphics source: https://engrampixel.tumblr.com/) */
.contact .inner a img {
        font-size: 0!important;
}

.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://64.media.tumblr.com/a5f547614d426f13d1e6b9e5aae0a74c/0943507cd3c89989-e7/s75x75_c1/9c20ed5386a6f94dcfe7f841d094a4d0906a2b78.gifv");
	font-size: 14px;
	color: var(--text);
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add to favorites */
	content: url("https://64.media.tumblr.com/eae8a023d4f2aafc6087bf89a4f348c5/273b4c4e0e95e923-f8/s75x75_c1/01b44ef36548ff7efd15d419722a910c67691b8f.gifv");
	font-size: 14px;
	color: var(--text);
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: url("https://64.media.tumblr.com/f29c98a3688b42cc1fe5a2039356b2dd/0943507cd3c89989-a9/s75x75_c1/65f84477ea238d94fc176a95afd3c43aba24ea9a.gifv");
	font-size: 14px;
	color: var(--text);
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward to friend */
	content: url("https://64.media.tumblr.com/0b9143c7669c0a8407e1b9b8bf1f9728/4508feb5373af11c-4b/s75x75_c1/c350b718cfd20e73f1689554aefe090c96231e72.gifv");
	font-size: 14px;
	color: var(--text);
}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant message */
	content: url("https://64.media.tumblr.com/bab33d69d6bc6233e0d3b7f7d8346654/273b4c4e0e95e923-ed/s75x75_c1/7d781478594fdd684d15789e4d57c58b642647da.gifv");
	font-size: 14px;
	color: var(--text);
}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block user */
	content: url("https://64.media.tumblr.com/b505e1d1d6a926e8b713462660a59fc7/35dfd6263639c3e0-6f/s75x75_c1/5d385602d987a1e35e543c973e60dc0663846a33.gifv");
	font-size: 14px;
	color: var(--text);
}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add to group */
	content: url("https://64.media.tumblr.com/702ae08487938a9ead9ef8011fd8ad9c/273b4c4e0e95e923-21/s75x75_c1/260428c66fcdcf765804040374aa27d24639f33a.gifv");
	font-size: 14px;
	color: var(--text);
}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report user */
        content: url("https://64.media.tumblr.com/9c1326c0b930d9109dc5aafd7ab29374/4508feb5373af11c-df/s75x75_c1/6cf99b7497213f5590aa54ebc1226aa2a3e28783.gifv");
        font-size: 14px;
        color: var(--text);
}


/*  url info link to profile  */
.url-info{
        border: 4px solid #dadfca !important;   
        border-radius: 3px;
        background-color: #dadfca; 
}



/*  the interest table  */
.table-section{
        border: none !important;
        background-color:transparent!important;
        text-align: left; 
}

.details-table{
        border: 4px solid #eee4dc !important;   
        border-radius: 3px !important;
        background-color: white !important;
        padding: none !important;
        border-spacing: 4px !important; 
        border-collapse: separate !important; 
}

.details-table td{
        display:default;
        background-color: #f7f3e4 !important;
        border: none !important;  
}

.details-table td:first-child{
        width: 35%;
        background-color: #f7f3e4 !important;
        text-align:left; 
}


.table-section .heading{
        background-color: #eee4dc !important;
        border: 2px solid #eee4dc !important;   
        border-radius: 3px !important;
        text-align:left; 
        margin-bottom: 4px;
}



:root {
        --topic1: "♡ General";
        --topic2: "♡ Music";
        --topic3: "♡ Movie";
        --topic4: "♡ TV";
        --topic5: "♡ Books";
        --topic6: "♡ lomls!";

 }

.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:black !important;
        letter-spacing:normal !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);
}

/* the links table */
.table-section:nth-of-type(even) td:first-child img {
        filter: none !important;
        transform: scale(0.8) !important;
}


/* that @username is your friend rectangle ;; */
.profile-info {
        border: solid #f7f3e4 2px !important;
        border-radius: 3px;
        background-color: #f7f3e4 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1px 1px !important;
        margin-bottom: 10px;
}


/* the blurbs section */
.blurbs p {
        text-align: left; 
}

.blurbs a {
        text-align: center !important;
        color: #c2c9a7 !important;
}


.section h4 {
        text-align: left !important;
}


/* blogs section */
.blog-preview {
        line-height: 0.75;
}

.blog-preview .pinned .icon {
        content: url('https://pixels.crd.co/assets/images/gallery138/3e1e41e7.gif?v=b3554822');
        width: 10px;
        height: 10px;
        filter: none !important;
        transform: none !important;
}



/* the friends section and comments lace containers (headers only) */
.friends .heading{
        background-color: transparent !important;
        border: 10px solid black;
        border-image: url("https://foollovers.com/mat/baf/frill/fr32-015-a.gif") 9 fill round;
        text-align: left;
        padding:10px;
}

/*  your friends' profile pics shape (source: https://ishimori.crd.co/#codes)  */
    .profile .friends .person img:not(.icon) {
        -webkit-mask-image: url(https://64.media.tumblr.com/a3933905fc43763b859df986790f7cfc/a13f6b3efb69d983-75/s250x400/e093c1488a8f7800c9a96a2aa980cbc6e9fece92.pnj);
        -webkit-mask-size: 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        width: 180px;
        height: auto;
}


/* COMMENTS  */
.profile .right .comments-table{
	height:390px;
	overflow-y:scroll;
	display:block;
	background-color: white;
	border: 4px solid #eee4dc !important;   
        border-radius: 3px !important;
        padding: none !important;
        border-spacing: 4px !important; 
        border-collapse: separate !important;
}


.comments-table td{
        background-color:white !important;
}


.comments-table td:first-child img:not(.icon) {
        background-color: white !important;
        border: 9px solid !important;
        border-image: url(https://64.media.tumblr.com/9dfe9992a7fe8b33b574707ce2b943e7/5f3ae3c869e7ca9a-03/s250x400/a981485eb61951d58a99d20bba68b120e7794e1a.pnj) 10 round !important;
        border-image-outset: none !important;
        width: 90px;
        max-width: 100%;
        max-height: 200px;
}


.profile .right .comments-table td:nth-child(2) {
	border: none !important;
}

.profile .right .comments-table td:nth-child(1) {
	background-color: white !important;
        border: none !important;
}


.comment-replies{
	border: 0 !important;
	border-left: 5px solid #f7f3e4 !important;
}

main:not(.right) .icon {
        filter: hue-rotate(-30deg) sepia(50%) saturate(45%) !important;
        transform: scale(0.7) !important;
}


button, [type="button"], [type="reset"], [type="submit"] {
        background-color: #f7f3e4 !important;
        border: gray solid 1px;
        border-radius: 3px;
        color: black;
        text-align: center;
        font-family: 'hearts' !important;
}

footer{
        margin-top:10px;
        background-color: transparent !important;
        border: none !important;
        text-align: center;
        color: #e3dada !important;
}

footer p {
        color: #c2a9a9 !important;
}

footer a {
        color: #c2a9a9 !important;
}

footer .links li:not(:last-child)::after{
        color: #c2a9a9 !important;
}

footer .links{
        margin-top: 5px;
        text-align: center;
}

</style>

<div class="ceresites" style="float:  ; width: 6%; position: fixed; left: 10px; bottom: 10px; z-index: 9;"><a title="layout by @ceresites" href="https://spacehey.com/ceresites"><img style="width: 50%;" src="https://foollovers.com/mat/i-anira/k05-icon-rabbit.gif"/></a></div>

<style>
.ceresites{
    padding: 5px;
    bottom: 10px;
    background: transparent;
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
</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 20 of 200 comments ( View all | Add Comment )

kristan	1731990935 pls make more xx Report Comment
kristan	1731976570 Using, thank you. Such a wonderful job. Report Comment
meowy	1731908258 using! :333 Report Comment
b4byd0llie	1731726761 i'm using this thx <3 Report Comment
ྀི♡︎softporcelain	1731568484 using and giving credit <3 Report Comment
𝐑𝐈𝐓𝐀	1731545857 using! <3 Report Comment
lacey	1731472803 usinggg <33 thank youuu Report Comment
𝐝𝐨𝐥𝐥 ♡	1731377545 using! ( ˘͈ ᵕ ˘͈♡) Report Comment
Pasta	1731325252 usingg Report Comment
Barely Legal	1731315972 Using !! Report Comment
﹒⇆﹒★ . DaNa !﹒ᶻz	1731287788 Using! Report Comment
Web	1731268436 Definitely using this! Probably for a while Report Comment
Web	1731268435 Definitely using this! Probably for a while Report Comment
naomi	1731191825 using!! Report Comment
stella	1731176096 using tyvm!! Report Comment
aneeza ᯓᡣ𐭩	1731047189 using Report Comment
⋆. 𐙚 ˚lizzy	1730994898 using!!!. Report Comment
cheez	1730617437 using !! Report Comment
lui	1730431818 using! ♡ Report Comment
nena nana	1730046873 using Report Comment