Pink Sakura Lyout

Tags: pink, sakura, tbhk, light, light pink, soft

Description:

a cute pink layout

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by jam ‧₊ ᵎᵎ 🍇 .˚✮ (https://layouts.spacehey.com/layout?id=102456) -->


<style>
@import url(https://fonts.googleapis.com/css2?family=Indie+Flower&family=Nanum+Brush+Script&family=Seaweed+Script&display=swap);
body{font-family:"Indie Flower",cursive}</style>


<style>
/* Scrollbar styles */
::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}
</style>



<style>

div.container {
    width: 850px;
    align-items: center;

}


p, ol li, ul:not(nav .links):not(footer .links) li {
    font-size: max(1em, 15px);
font-weight: 600;
}
.count {
    color: #776d63;
}
a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {
    color: #fff496;
    text-decoration: underline;
}

main .left {
    border-right: solid #ffbcd3 1px;
    padding: 40px;
    background: #FFCBDE;
    border: 2px solid #ffbcd3;
}




main {
background-color: #ffffff;
border: 5px dashed #FFCBDE; }

main, main p {
    font-family: "Indie Flower";
    font-size: 15px;
    color: #ffa0c0;
}

main:before {
background-image: url(https://i.pinimg.com/originals/b0/a0/a0/b0a0a03ef3572953f8807c4a3c9fa960.gif);
content: "";
width: 100%;
height: 120px;
display: block;
background-size: cover;
background-position: top; 
background-repeat: no-repeat; 
}

.profile h1 {
font-family: "Indie Flower", cursive;
font-size: 40px;
color: #fff;
text-shadow: 2px 3px 3px #FFCBDE;
text-align: center; 
}

.general-about {
width: 300px;
height: 180px;
margin-bottom: 8px; 
}

.profile .friends .person img:not(.icon), .comments-table td:first-child img:not(.icon) {
border: 1px solid #FFCBDE;
width: 90px;
height: 90px; 
}

body {
background-image: url("https://i.pinimg.com/564x/1e/7b/4a/1e7b4a0078d487cc0a040aead890199d.jpg");
background-size: 40%;
overflow-y: scroll; 
}
  
    
nav .top, nav .links, footer {
font-family: "Indie Flower";
font-size: 14px;
font-weight: normal;
background: #FFCBDE;
margin-top: 3px;
margin-bottom: 3px;
border: 5px dashed #FFCBDE; 
color: #ffa0c0; 
}

footer, footer p, i, p.copyright {
font-size: 14px; 
text-transform: lowercase; 
}

form>button, button {
font-family: "Indie Flower";
font-weight: bold;
color: #fff;
background-color: #FFCBDE;
border: 1px solid #fff;
text-transform: lowercase; 
}
    
[id='q'] {
border: 1px solid #fff; 
}
    
label {
font-family: "Indie Flower";
font-size: 14px;
color: #fff;
text-transform: lowercase;
font-weight: bold; 
}
   
nav .top .right, .logout-btn {
font-family: "Indie Flower";
font-size: 14px;
color: #fff;
font-weight: bold;
text-transform: lowercase; 
}
    
nav .links a, nav .links .special a {
font-family: "Indie Flower";
font-size: 14px;
font-weight: bold;
color: #fff;
text-transform: lowercase;
text-shadow: none; 
}

nav .links, footer .links {
word-spacing: 4px;
text-align: center; 
}

li.active icon {
content: url(https://64.media.tumblr.com/tumblr_lu9w9mu2Yc1qf290m.gif); 
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
content: " ❀";
font-size: 13px;
font-weight: bold;
color: #fff; 
}

 .profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {
    background: #f9bbd7;
    border: 2px solid #fcb3d1;
    color: white;
    padding: 2px 7px;
    font-family: "Indie Flower", cursive;
    font-size: larger;
    margin: -5px;
}
.profile .blurbs .section p, .profile .friends p, .blog-entry .comments p, .bulletin .comments p {
    margin: 0 0 15px 0;
    font-family: 'Indie Flower';
    text-align: left;
}
    
.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
    border: 0px solid #776d63;
    width: 100%;
    margin: 10px 0;
}
table.details-table {
    margin-top: -2px;
    width: 100%;
    border: 2px solid;
    border-color: #776d63;
}
table.details-table {
    margin-top: -2px;
    width: 100%;
    border: 2px solid;
    border-color: #fcb3d1;
}
        .details-table td:first-child {
    background: #aa9783;
    color: 000;
    font-weight: bold;
    width: 33%;
}

.details-table td {
    background: #aa9783;
    font-size: medium;
    vertical-align: top;
}

    
    .contact {
        font-size: 12px;
        font-family: "Indie Flower";
        border: solid 0px #fa90ac!important;
        background-image: url("https://64.media.tumblr.com/4a0273d84b24c94c0ce03bba5a7af363/50ee50266e3b33c6-13/s250x400/cc01367263f2a6f3eb457dce6e06a40a1eeb054d.gifv")!important;
        background-repeat: no-repeat;
        background-size: 0px;
        
    }
 .contact .inner {
    margin-top: -2px;
    line-height: 10px;
    border: 2px solid;
    border-color: #fcb3d1;
}

    .contact .inner {
        line-height: 10px;
    }
    
    .contact .inner a {
    font-weight: 600;
    font-family: 'Indie Flower';
    font-size: larger;
    }
    .contact .inner a img {
        font-size: 0;
    }
    .contact .inner a img:before {
        font-size: 1em;
        display: block
    }



 
main a {
font-size: 15px; 
text-transform: lowercase;
color: #ffa0c0; 
}

a.more {
font-family: "Indie Flower"; 
}

nav .top a { 
font-size: 14px;
color: grey; 
}

a, b, div.mood, .url-info, .table-section {
    font-family: "Indie Flower";
    font-size: 15px;
    text-transform: lowercase;
    color: #ffa0c0;
}

nav .top a {
    font-size: 14px;
    color: white;
}
    
.url-info, div.blog-preview {
    background: #FFCBDE;
    box-shadow: 0px 0px 0px #FFCBDE;
    text-align: center;
    border: 2px solid #ffbcd3;
    color: whiteblurbs; 
}


div.blog-preview h4, div.blog-preview h4 a {
    font-family: "Indie Flower", cursive;
    color: white;
    font-size: large;
}

.profile .contact .heading h4, .profile .table-section .heading h4, .profile .blurbs .heading h4, .profile .friends .heading h4, .blog-entry .comments .heading h4, .bulletin .comments .heading h4, .home-actions .heading h1, .setting-section .heading h4, .statistics .heading h4 {
    margin: 0;
    display: inline-block;
    color: white;
}
    
.profile .table-section {
border: 1px solid #FFCBDE; 
box-shadow: 0px 0px 0px #FFCBDE; 
}

.details-table td {
border: 1px solid #FFCBDE; 
}

table {
border-spacing: 4px; }
    
.profile .blurbs .heading {
    color: #ffa0c0;
    background-color: #FFCBDE;
    border: 2px solid #ffbcd3;
 }

    
.profile .friends .heading {
    border: 2px solid #ffbcd3;
    text-align: left;
    background-color: #FFCBDE;
 }

div.friends {
margin-bottom: 15px; 
}
    
table.comments-table {
display: block;
height: 400px!important;
overflow-y: scroll; 
}
    
.comments-table td {
border: 1px solid #FFCBDE; 
}

div.comment-replies {
border: 1px solid #FFCBDE;
margin-bottom: 2px; 
}
    
.profile .blurbs .section h4 {
    font-size: 15px;
    color: #ffa0c0;
    text-align: left;
    font-family: 'Indie Flower';
    margin: 0 0 15px 0;
    font-size: large;
}
.blurbs p{
text-align: center; 
}

.count{
color: #ffa0c0; 
}
    
:root {
--logo-blue: #FFCBDE;
--darker-blue: #FFCBDE;
--lighter-blue: #FFCBDE;
--even-lighter-blue: #FFCBDE;
--lightest-blue: #FFCBDE;
--dark-orange: #FFCBDE;
--light-orange: #FFCBDE;
--even-lighter-orange: #FFCBDE; 
}

.online { /*online icon*/
content: url("https://tomomi.neocities.org/pixeles/246.gif"); }

.profile-info {
font-size: 15px;
text-transform: lowercase; 
}

.profile-info {
border: 3px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.report .icon{
visibility: hidden; 
}

p.report {
background: url(http://lh3.ggpht.com/_NZJzdRm10Y0/TTSXS5yzNrI/AAAAAAAAAFY/cYCKZt7z-0k/s800/gif15.gif);
background-repeat: no-repeat;
display: inline-block; 
font-size: 80%;
text-transform: lowercase; 
}

p.report a {
font-size: 11px; 
}
}

.general-about {

    width: 300px;
    height: 180px;
    margin-bottom: 8px;

}
.details-table td {
    background: #FFCBDE;
    background: #FFCBDE;
    vertical-align: top;
    padding: 1px 12px 10px;
    border-spacing: 10px;
}


.details-table td p {
    margin: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: large;
}


.details-table {
    margin: 2px;
    border-spacing: 10px
}
.details-table td:first-child {
    background: #FFCBDE;
    color: #ffffff;
    font-weight: bold;
    width: 45%;
    font-family: "Indie Flower";
    font-size: 3.5mm;
}

</style>
<style>* {cursor: url(https://tomomi.neocities.org/5.png), auto !important;}</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>
  DIV.blog-preview:before {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 180px;
  width: 463px;
  background-image: url(https://i.pinimg.com/736x/1f/0c/a0/1f0ca0d3af1fc121bdb032a62245584f.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  align-content: center;
  border-radius: 10px;
  border: solid 3px #FFCBDE;
  margin-left: 5px;
  margin-top: 10px;
    

    DIV.blog-preview {
    text-align: center;
    text-transform: lowercase !important;
    color: #6e5e8a;
    
}



</style>

<style>
.image {
    background: url('https://66.media.tumblr.com/605736cbdc3d809b58e1751a88e4a81e/tumblr_mrcexi7CEH1rfjowdo1_500.gif') no-repeat;
    background-size: 100%!important;
    position: fixed;
    left: 0px;
    bottom: 220px;
height: 200px;
width: 200px;
    z-index: 1000;
    opacity: 100;
transform: scaleX(-1);
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>


<div style="float:  ; max-height: 300px; position: fixed; right: 0px; bottom: 220px; z-index: 100;">
<img src="https://66.media.tumblr.com/605736cbdc3d809b58e1751a88e4a81e/tumblr_mrcexi7CEH1rfjowdo1_500.gif" width="200" height="200"/></div>
<style></style>




<div class="snowflakes">
  <div class="snowflake">
  ♡
  </div>
  <div class="snowflake">
  ♡
  </div>
  <div class="snowflake">
  ♡
  </div>
  <div class="snowflake">
  ♡
  </div>
  <div class="snowflake">
  ♡
  </div>
  <div class="snowflake">
  ♡
  </div>
  <div class="snowflake">
    ♡
  </div>
  <div class="snowflake">
    ♡
  </div>
  <div class="snowflake">
    ♡
  </div>
  <div class="snowflake">
    ♡
  </div>
  <div class="snowflake">
    ♡
  </div>
  <div class="snowflake">
    ♡
  </div>
</div>
<style>
/* customizable snowflake styling */
.snowflake {
  color: #ffa0c0;
  font-size: 1em;
  font-family: "Indie Flower";
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}
</style>

<style>

/* replace with cd image that has transparent background. must be 150px by 150px. */
:root {
--cd-image: url('https://fluorescent-lights.neocities.org/Digital-CD-Disk-Vector-Transparent-PNG.png');
}
.profile-pic {
position: relative;
width: 183px;
filter: drop-shadow(0 0 0.0rem gray);

}

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

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 33 comments ( View all | Add Comment )

valeee ࣪˖ ִֶָ𐀔	1751128713 heyy!! i love this layout! how do i change the font tho?? help! Report Comment
DeadCutlet	1746823229 using! i love it! Report Comment
PinkPrimitave	1746374783 Using!!! Report Comment
askopikachu	1746353880 Usingg!! But changed some pics ^^ Report Comment
Ace	1738539591 using!! <3 Report Comment
vxl~tine	1732131898 using Report Comment
Cloud🤍☁️	1728158349 using! Report Comment
ᗰᎥᛕᗩ3ᒪᗩ!	1725726144 Using!! Report Comment
Y2kudi	1724180652 I wanna use this but how do i get JUST the background?? <3 Report Comment body { background-image: url("https://i.pinimg.com/564x/1e/7b/4a/1e7b4a0078d487cc0a040aead890199d.jpg"); background-size: 40%; overflow-y: scroll; } by jam ‧₊ ᵎᵎ 🍇 .˚✮; 1724239158; Report AHH TYSMMM <3 by Y2kudi; 1724351850; Report yw! don't forget to put < style > (without space) before it and < / style > after by jam ‧₊ ᵎᵎ 🍇 .˚✮; 1724414015; Report
pinkbladekiller	1722369698 using Report Comment
Danny!	1722127635 Using :3 Report Comment
˚₊‧꒰აmaye໒꒱ ‧₊˚	1719732448 using!! Report Comment
𖦹⋆˚✿˖°pixie☾⋆｡𖦹 °✩	1719600192 us1ng! Report Comment
Nava♡	1719551693 Using <3333 Report Comment
Ngoc🎀 (WIP)	1717430029 using Report Comment
XD	1716193146 используюю;0 Report Comment
Sleepy!!!	1715734317 Usando!!! Report Comment
ユーノイア	1715233819 используууюю Report Comment
K3TS7K8 RW@!H ^_^	1715110488 using tyy Report Comment