bonbonribbon layout ૮₍ ˶ᵔ ᵕ ᵔ˶ ₎ა

Tags: layout, layouts, cute, pastel, pink, ribbon

Description:

Layout of bonbonribbon !! shes criminally underrated so i HAD to do this.... i edited this layout : https://layouts.spacehey.com/layout?id=4336 to make this !! ^.^ ‎ if anything doesnt work/look right pls lmk !! ‎ comment if using !! :D /nf

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Ren/Digi (https://layouts.spacehey.com/layout?id=95463) -->

<style>
/* mobile code. don't delete */
@media (max-width: 600px) {
    main{
        max-width: 100%!important;
    }
    h1{
        font-size: 30px!important;
    }
    body{
        font-size: 16px!important;
    }
    a{
        font-size: 18px!important;
    }
body:before{
background-size:20%!important;
}
}
</style>

<style>
/* START HTTP://WWW.CURSORS-4U.COM */ * {CURSOR: URL( https://cur.cursors-4u.net/nature/nat-10/nat991.cur), AUTO !IMPORTANT;} /* END HTTP://WWW.CURSORS-4U.COM */
</style>

<style>

/* fonts */

@import url('https://fonts.googleapis.com/css2?family=Dekko&family=Patrick+Hand+SC&family=Shantell+Sans&display=swap');

</style>

 

<style>

:root{

    --headers: #88468a;

    --text: #975499;
  
    --names: #a15fa3;

    --links: #833e85;

    --font-family: "Shantell Sans";

}

 

a:hover{text-decoration: none;text-shadow: 0px 0px 5px;}

h2,h3,h4,h5{color: var(--headers) !important;} /* headings*/

a{color: var(--links) !important;} /* color of links */

p, b, .count {color: var(--text) !important;} /* color of text */

.profile .friends .person p{color: var(--names) !important;} /* color of names and friends counter */

nav label{color: var(--links) !important;} /* color of search */

.section h4 {color: var(--headers)!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;  */

 

 

body{

    background-image: url(https://i.pinimg.com/originals/9f/23/2c/9f232c276cf5ebaac95091184cb482f5.jpg);

    background-position: center ;

    background-size: cover ;

}

.container{

    width: 100%;

}

 

/*remove text shadow*/

nav .links a, nav .links li .special a{

    text-shadow: none;

}

 

main{

    background-image: url(https://i.pinimg.com/originals/3f/5a/6e/3f5a6ef15d9d920982b54ce704a022a7.jpg);

    background-size: 100%100%;

    background-repeat: no-repeat;

    border-radius:7px;

    border: 5px solid #b070b3;

    width:700px;

    height:600px;

    overflow-y: scroll;

    margin: auto;

    background-color: white;

    background-position: center ;

    background-size: cover ;

  
}
  nav img.logo{
  height:50px!important;
   width:140px!important;
  }
  
/*hovr animations*/
.img, .friends img{
  overflow: hidden;
  margin: auto;
  transition: all 0.5s;

}

.friends img:hover{
  transform: scale(1.010);
  filter: blur(2px);

}

h1{

    color: #833e85;

    font-family: var(--font-family) ;

    font-size:35px!important;

    font-weight: 1;

    text-align: left;

    text-transform: uppercase;

  

}
 
 h4{

    color: #833e85;

    font-family: var(--font-family) ;

    font-size:20px!important;

    font-weight: 3;

    text-align: center;

    text-transform: uppercase;

 

}
 
h3{

    color: #833e85;

    font-family: var(--font-family) ;

    font-size:15px!important;

    font-weight: 3;

    text-align: center;

    text-transform: uppercase;

  }

/* comment section icon */

.comments-table td:first-child img:not(.icon) { -webkit-mask-image: url(https://64.media.tumblr.com/9c93df2a47ec2fe3ca75307000c565eb/e25352d4f9ac015a-83/s2048x3072/0c5f8d9115263e84b403fe609f1c998270c51794.pnj);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}


/* friends icon */

.profile .friends .person img:not(.icon) { -webkit-mask-image: url(https://64.media.tumblr.com/9c93df2a47ec2fe3ca75307000c565eb/e25352d4f9ac015a-83/s2048x3072/0c5f8d9115263e84b403fe609f1c998270c51794.pnj);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}
  

nav{

    background-color: transparent;

    border: none;

    margin-bottom: 50px;

}

nav .top{

    background: transparent;

    color:var(--links);

}

nav .top a, nav .links a{

    color: var(--text);

}

nav .links{

    background-color: transparent;

    text-align: center;

}

 

/* this is the line that appears between links in the header 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: "꒰ა ☆ ໒꒱";

    color: var(--headers);

}



/* the search wrapper and button */

 

.search-wrapper input[type=text] {

    background-color: transparent !important;

    border: 1px solid var(--links) !important;

    color:var(--links) !important;

}

 

button{

    border: 0px solid var(--links) !important;

    font-family: "Patrick Hand SC";

    background-color: transparent !important;

    color:var(--links) !important;

    font-size: 16px!important;

}

button:hover{

    text-shadow: 0px 0px 0px white;

}

/* the online symbol and text */

 

.online{

    color: var(--links) !important;

    text-transform: lowercase;

    text-align: right;

}

.online { visibility: hidden; } .online img { content: url("https://dl.glitter-graphics.com/pub/157/157641b27q8mcaol.gif"); animation-name: none; visibility: visible; height: 20px; width: 40px; }

  

}
 

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

 
h2,h5{

    font-family: "Dekko";

    font-size: 20px!important;

    font-weight: normal;

    font-style: bold;

    text-transform: uppercase;

    letter-spacing: .7px;
  
  

}


a{

    font-family: var(--font-family) !important;        

    font-size: 18px!important;

    font-weight: 1;

}

p,b, nav label, .table-section{

    font-family: "Patrick Hand SC";

    font-size: 16px!important;

    font-weight:normal;

    letter-spacing: 1px;
  
    color:var(--text) !important;
}
 

/* the hr code.

the hr is the horizontal line when you want to

separate important info or add a break in your paragraphs*/

 

hr{

    height:1px;

    background: var(--links);

    border: none;

}

 

/* this is where you adjust the borders and background */

.contact{

    border:none!important;

    background-color: transparent!important;

    padding:6px;

    margin-bottom: 30px!important;

}

.mood{

    border:none;

    background-color: transparent!important;

    text-align: center;

    padding:5px;

}

.icon{

    border:none !important;

    font-size: 12px!important;

}

.comment-replies{

    border:none!important;

    

}

.comment-reply:not(:first-child){

    border-top: 2px solid var(--headers);

}

 

 

td{

    background-color: transparent!important;

}

/* the interest table */

.table-section{

    border:none !important;

    background-color:transparent!important;

    text-align: center;

}

.details-table{

    border:none;

    background-color: transparent!important;

    padding:10px;

    border-spacing: 0px 10px;

}

.details-table td{

    display:flex;

    flex-direction:column;

}

.details-table td:first-child{

    width:100%;

  text-align:center;

}

 

/* the about me section */

.profile .blurbs .section:not(:nth-child(2)){

    border:none;

    background-color: transparent!important;

    padding:10px;

}

 

/* the who I'd like to meet section */

.profile .blurbs .section:nth-child(2){

    border:none;

    background-color: transparent!important;

    padding:10px;

}

 

/* the friends section only */

.friends{

    border:none;

    background-color: transparent!important;

    text-align: center;

    padding:10px;

}

 

/* the comments section only */

#comments{

    border:none;

    background-color: transparent!important;

    text-align: center;

    padding:10px;

}

 

.heading, .blog-preview h4, .section h4{

    background: none !important;

    text-align: center;

}

 

/* the 'edit profile/Name is Your friend' section */

.profile-info {

    border:none;

    background-color: transparent!important;

    text-align: center;

    padding:10px;

}

 

/* adjusting images borders and adding styling if you want to */

.general-about{

    background-color: transparent;

    padding-bottom: 0px; /* adjust this to fit your profile photo */

   

}

.blog-preview{

    border:none;

    background-color:transparent!important;

    text-align: center;

    padding:10px;

}

 

/* you can remove text-align:center; if you don't want your friends to be centered */

.body{

    text-align: center;

}
  
  
.logo {

content:url("https://i.ibb.co/SXpnzLY/bonbonribbon.png");

}
 
  /* this adds space between sections */

.friends, .mood, .general-about .details,

.blog-preview, .profile .blurbs .section:nth-child(2),

.profile .blurbs .section:not(:nth-child(2)){margin-bottom: 30px!important;}


.url-info{display:none;}

 
.comments-table {

    border-spacing: 10px;

    border:none;

}

.comments-table td{

    border:2px solid transparent;

}

.comments-table td:nth-child(2) p{

    font-style: italic;

}

footer{

    margin-top:10px;

    background-color: transparent;

    border: none;

    text-align: middle;

}

footer .links{

    margin-top: 0px;

    text-align: middle;

}

.award {
  display: none;
}
 


/* this is the custom contact code */

.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/30e91db4c509b5a5d8793c9b8b047cc8/657c0e494ff6cc23-2b/s75x75_c1/e8162aadb33aa1e968e68c861fbe26e2acf15267.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/30e91db4c509b5a5d8793c9b8b047cc8/657c0e494ff6cc23-2b/s75x75_c1/e8162aadb33aa1e968e68c861fbe26e2acf15267.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/30e91db4c509b5a5d8793c9b8b047cc8/657c0e494ff6cc23-2b/s75x75_c1/e8162aadb33aa1e968e68c861fbe26e2acf15267.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/30e91db4c509b5a5d8793c9b8b047cc8/657c0e494ff6cc23-2b/s75x75_c1/e8162aadb33aa1e968e68c861fbe26e2acf15267.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/30e91db4c509b5a5d8793c9b8b047cc8/657c0e494ff6cc23-2b/s75x75_c1/e8162aadb33aa1e968e68c861fbe26e2acf15267.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/30e91db4c509b5a5d8793c9b8b047cc8/657c0e494ff6cc23-2b/s75x75_c1/e8162aadb33aa1e968e68c861fbe26e2acf15267.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/30e91db4c509b5a5d8793c9b8b047cc8/657c0e494ff6cc23-2b/s75x75_c1/e8162aadb33aa1e968e68c861fbe26e2acf15267.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/30e91db4c509b5a5d8793c9b8b047cc8/657c0e494ff6cc23-2b/s75x75_c1/e8162aadb33aa1e968e68c861fbe26e2acf15267.gifv)"";

           font-size: 14px;

           color: var(--text);

}

</style>

 

<style>

::-webkit-scrollbar {

    width: 5px;

    height: 10px;

}

::-webkit-scrollbar-track {

    border: 1px solid #b070b3;

}

::-webkit-scrollbar-thumb {

    background: #b070b3;

}

::-webkit-scrollbar-thumb:hover {

    background: #b070b3; 

}
  
  .general-about{
  position: relative;
  margin-top: 15px;
}
.general-about .profile-pic::before{
  content: '';
  background: url('https://vignette.wikia.nocookie.net/hellokitty/images/7/73/Sanrio_Characters_Bonbonribbon_Image005.png/revision/latest?cb=20170402183244') no-repeat;
  background-size: 70px;
  display: block;
  width: 200px;
  height: 100px;
  z-index: 999;
  position: absolute;
  top: -22px;
  left: 108px;
}

</style>


  <div class="snowflakes">
<div class="snowflake"><img src="https://pixels.crd.co/assets/images/gallery15/9b85a5d4.gif?v=1987e5e0?ex=655e4e3b&is=654bd93b&hm=d84c1ac56f41c3052a16c76dd1e22492263fa11f27cdbf01019f2b58be6f5dee&"/></div>
<div class="snowflake"><img src="https://pixels.crd.co/assets/images/gallery15/9b85a5d4.gif?v=1987e5e0?ex=655e4e3b&is=654bd93b&hm=d84c1ac56f41c3052a16c76dd1e22492263fa11f27cdbf01019f2b58be6f5dee&"/></div>
<div class="snowflake"><img src="https://pixels.crd.co/assets/images/gallery15/9b85a5d4.gif?v=1987e5e0?ex=655e4e3b&is=654bd93b&hm=d84c1ac56f41c3052a16c76dd1e22492263fa11f27cdbf01019f2b58be6f5dee&"/></div>
<div class="snowflake"><img src="https://pixels.crd.co/assets/images/gallery15/9b85a5d4.gif?v=1987e5e0?ex=655e4e3b&is=654bd93b&hm=d84c1ac56f41c3052a16c76dd1e22492263fa11f27cdbf01019f2b58be6f5dee&"/></div>
<div class="snowflake"><img src="https://pixels.crd.co/assets/images/gallery15/9b85a5d4.gif?v=1987e5e0?ex=655e4e3b&is=654bd93b&hm=d84c1ac56f41c3052a16c76dd1e22492263fa11f27cdbf01019f2b58be6f5dee&"/></div>
<div class="snowflake"><img src="https://pixels.crd.co/assets/images/gallery15/9b85a5d4.gif?v=1987e5e0?ex=655e4e3b&is=654bd93b&hm=d84c1ac56f41c3052a16c76dd1e22492263fa11f27cdbf01019f2b58be6f5dee&"/></div>
<div class="snowflake"><img src="https://pixels.crd.co/assets/images/gallery15/9b85a5d4.gif?v=1987e5e0?ex=655e4e3b&is=654bd93b&hm=d84c1ac56f41c3052a16c76dd1e22492263fa11f27cdbf01019f2b58be6f5dee&"/></div>
<div class="snowflake"><img src="https://pixels.crd.co/assets/images/gallery15/9b85a5d4.gif?v=1987e5e0?ex=655e4e3b&is=654bd93b&hm=d84c1ac56f41c3052a16c76dd1e22492263fa11f27cdbf01019f2b58be6f5dee&"/></div>
</div>

<style>
    @-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>
.profile .mood p:last-child:after {content: ""; display: block; background-image: url(https://64.media.tumblr.com/c587e85c8ba896a0d57420e49da61648/99b04fede59ebd18-99/s400x600/4504a9af52353820d28af85ab607df648bc9d8c4.gifv);  width: auto; height: 34px; background-position: top center; background-size: 100%; background-repeat: no-repeat;}
.profile .url-info p {text-align: center;}
</style>

<style>
/*lace*/
.profile-pic img{
border-width: 12px;
border-style: solid;
border-image: url('https://i.ibb.co/qpwLbqW/g-TFIwd-W-d.webp') 11 fill round;

}

</style>

<style>
li.active .icon { content:url('https://64.media.tumblr.com/48043eac86f2a9ffe96157b51254d4ad/abdf8facc3599652-ad/s75x75_c1/42f47da1b814b932a83a152f9e376f741c411d76.gifv'); width: 20PX;height: 20px;}
</style>

<style>
/*heart overlay*/
html:before {
  animation: grain 30s steps(10) infinite;
  background-image: url(https://img1.picmix.com/output/stamp/normal/6/4/2/6/1896246_c6324.gif);
  content: "";
  height: 300%;
  opacity: .10;
  position: fixed;
  top: 0%;
  width: 300%;
  pointer-events:none;
}

div.col h1:before{
  content: url(https://64.media.tumblr.com/8b1b4ee64d93398a2ef87a24d2712928/1e9ba0e90a2a12e6-17/s75x75_c1/70afc000d030dbf0e7b4fc8ddd7e9beca80d7cf3.gifv);}  
  
  .icon {
content: url("https://64.media.tumblr.com/16abea9c180b127b37d0c9c9a170c2eb/ffa1be8d21436169-88/s75x75_c1/a0cf3d4af797af2ba659c90c9b122075f81c5c94.pnj");}
  

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

✧𝓡𝓸𝓬𝓱𝓮𝓵𝓵𝓮✧	1738431681 UUSING Report Comment
zuh	1737881581 usingg ! Report Comment
DARLA	1734271572 using!! Report Comment
mari ^_<	1732346418 USING Report Comment
🌟 Saki/Kiz (Janebug)	1727051165 Using! Report Comment
Denis/Asher	1726939226 using Report Comment
Lottie Lolpop ू♡	1721558747 using! Report Comment
Σ(･o･;)Momo!1!	1712223314 Cutest thing ever O em gee using Report Comment
leons boyfriend	1711366996 USING <33 Report Comment
Kwitty⭐️	1711295824 Tysm USing Report Comment
galaxyy!	1708113251 using!!! x3 Report Comment so happy that you are yayy! ^.^ by Ren/Digi; 1708117789; Report
iris	1708110078 using!! Report Comment yayaayy!! :)) by Ren/Digi; 1708117770; Report
t00ki <3	1706381986 usinggg Report Comment yaayy! :D by Ren/Digi; 1706474684; Report
vicky🌸	1706286484 the colors all together are so cute i love this :D Report Comment thank you so mucchh :)) by Ren/Digi; 1706286660; Report ofc!! it reminds me of fairy kei i love it by vicky🌸; 1706287068; Report
Fumiko4444	1706224399 Using! Report Comment yaayyy!! :DD by Ren/Digi; 1706286670; Report
Miumuu	1706213630 Usando :3 Report Comment yaay!! by Ren/Digi; 1706218157; Report
Miumuu	1706213625 Usando :3 Report Comment
NANA	1705846026 <333 i love it Report Comment thank youu ! :)) by Ren/Digi; 1705858319; Report Holii amigamos? vi que eres fan de Tommy y yo también la sigo, así como Nana<3 by Strawberries and cream ʕ•ᴥ•ʔ; 1705962310; Report
haruu はる	1705801273 usando :3 Report Comment yippeeee !! (^ω^) by Ren/Digi; 1705802795; Report Holiii, amigamos? Vi tu foto de Tommy y ahhh, también la sigo<3 by Strawberries and cream ʕ•ᴥ•ʔ; 1705961883; Report
marfyaleatorio	1705781856 usando!! ^⁠_⁠^ Report Comment yaaayyy !! x3 by Ren/Digi; 1705782005; Report