Pink Round Layout

Tags: pink, round, simple, bela

Description:

If you have any questions, please comment below or go to my blog here.

Image Credits —

⇘ Body Background: https://www.wallpapertip.com/wmimgs/65-656879_pale-pink-aesthetic-backgrounds.jpg

⇘ Navigation and other boxes background: https://64.media.tumblr.com/92a1887f1a0c9e24fa499d854387eec6/tumblr_ny6nheWsdm1uhrjdjo3_500.gif

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Bela 🔊⬆ (https://layouts.spacehey.com/layout?id=1527) -->

<style> 

/*==========⚠️==========
* for colors go to https://htmlcolorcodes.com/color-names
* for fonts go to https://fonts.google.com
* for cursors go to https://icons8.com , https://custom-cursor.com , https://www.cursors-4u.com
============⚠️=======*/

/* cursors */
a:hover{
    cursor: url('https://cur.cursors-4u.net/symbols/sym-2/sym187.png'), auto;
}
* {
    cursor: url('https://ani.cursors-4u.net/symbols/sym-9/sym829.png'), auto;
}
</style>

<style>

/* font style */
@font-face { font-family: "Macondo-Regular"; src: url('//dl.dropbox.com/s/bb6f0lsfy48oqp3/Macondo-Regular.ttf'); }
@font-face { font-family: "TextMeOne-Regular"; src: url('//dl.dropbox.com/s/ob6fg25uw67e72i/TextMeOne-Regular.ttf'); }
</style>

<style>

/* layout details */

:root{
     --headers: Peru;
     --text: Peru;
     --names: Pink;
     --links: RosyBrown;
     --hover: deeppink;
     --borders: 10px double pink !important;
     --background_image: url('https://www.wallpapertip.com/wmimgs/65-656879_pale-pink-aesthetic-backgrounds.jpg');
     --font-family: "TextMeOne-Regular";
     --curve: 50px;
}

.url-info{display:none !important;} /* to hide the url */
.blurbs .heading{display:none !important;} /* to hide the blurbs heading */
h3, h4, h5, .url-info b{ color: var(--headers) !important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
a:hover{color: var(--hover) !important;} /* color of links on hover */
p, h2{color: var(--text) !important;} /* color of text */
h1, .friends a p{color: var(--names) !important;} /* color of names, and friends counter */
h1, .friends a:hover p{color: var(--hover) !important;} /* color of names on hover */
nav label{color: var(--links) !important;} /* color of search */
.section h4 {color: var(--headers) !important;text-align:center;} /* aboutme & want2meet headings */
.section{color: var(--text) !important;} /* sometimes <p> is broken by embeds maybe. */
.comment-reply:not(:first-child){border-top: 3px solid var(--links);} /* line in bewtween comment replies*/
.count{color:var(--links);}
a, p{padding-left: 5px;margin:1px;}
.mood, DIV.friends:nth-child(3){margin-bottom:10px;}

/* text decoration */
a:hover,
a:active,
.blog-entry .kudos-btn:hover,
.blog-entry .kudos-btn:active{
    text-decoration: underline;
    text-decoration-style: wavy;
}
.logout-btn:hover,
.logout-btn:active{
    text-decoration: underline;
    text-decoration-style: wavy;
}
nav .top a:hover{
    text-decoration: underline;
    text-decoration-style: wavy;
}
nav .links a:hover{
    text-decoration: underline;
    text-decoration-style: wavy;
}

/* font family */
a, p, nav label, .section{
    font-family: var(--font-family) !important;	
    text-shadow: 0px 0px 0px black !important;
    font-size: 12px!important;
}
h2, h3, h4, h5, DIV.mood > P:nth-child(1) > B, P:nth-child(2) > B{
    font-family: "Macondo-Regular";
    text-shadow: 0px 0px 0px black !important;
    letter-spacing: .3px;
    font-size: 16px!important;
}

/* padding and margin */
.icon{border:none !important;}
.profile-info{border-radius: var(--curve) !important;}
.comment-replies{border:3px solid var(--links);border-radius:var(--curve);}
.comments-table{border-radius: var(--curve) !important;border:none !important;}
#comments{margin-top:5px !important;padding-bottom:5px !important}
.details p:last-child{color:var(--links) !important; filter: brightness(95%);}
table.details-table{padding: 5px;}
.blog-preview p{padding:5px;}


/* background image */
body {
    background-image: var(--background_image) !important;
    background-color: black ;
    background-repeat: repeat;
    background-size: contain;
}

/* navigation */
/* change logo color at https://codepen.io/sosuke/pen/Pjoqqp */
nav{
    background: url('https://64.media.tumblr.com/92a1887f1a0c9e24fa499d854387eec6/tumblr_ny6nheWsdm1uhrjdjo3_500.gif');
    background-size: contain;
    border: var(--borders);
    border-radius: var(--curve);
    padding:5px;
}
nav .top {
    background: rgba(0,0,0,0.0);
}
nav .top a{
    color: var(--links)!important;
}
nav .links {
    background: transparent!important;
    background-size: 100%100%!important;
    text-align: center;
    font-size: 12px;
}
nav img.logo{
    filter: brightness(0) saturate(100%) invert(76%) sepia(9%) saturate(942%) hue-rotate(314deg) brightness(80%) contrast(86%); !important;
}
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content: " ∷";
    color: var(--links);
}

/* color the search bar and button */
.search-wrapper input[type=text] {
    background-color: rgba(0, 0, 0, 0.0) !important;
    border: 2px solid var(--links) !important;
    color:DarkGray !important;
    border-radius: 10px !important;
}
button{
    border-radius: 10px !important;
    border: 0px solid DarkGray!important;
    font-family: var(--font-family) !important;
    background-color:rgba(0, 0, 0, 0.0) !important;
    color:var(--links)!important;
}

/* online icon and color */
.online{color: var(--links) !important;} 
.online img {
    filter: brightness(0) saturate(100%) invert(76%) sepia(9%) saturate(942%) hue-rotate(314deg) brightness(80%) contrast(86%); !important;
}

/* profile name */
h1{
    padding-left: 30px !important;
    font-family: "Macondo-Regular";
    font-size:30px !important;
    color: var(--headers)!important;
}

/* profile info */
.profile-info{
    background: url('https://64.media.tumblr.com/92a1887f1a0c9e24fa499d854387eec6/tumblr_ny6nheWsdm1uhrjdjo3_500.gif');
    background-size: contain;
    border: var(--borders)!important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
}
.profile-info .inner{
    font-weight: bold;
    text-align: center;
}

/* contact */
.contact {
    background: url('https://64.media.tumblr.com/92a1887f1a0c9e24fa499d854387eec6/tumblr_ny6nheWsdm1uhrjdjo3_500.gif');
    background-size: contain;
    border-radius: var(--curve) !important;
    padding: 5px !important;
    border: var(--borders) !important;
}
.contact .inner a img {
    font-size: 0;
}
.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: "🌸"
	
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add to favorites */
	content: "🌸"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "🌸"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward to friend */
	content: "🌸"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant message */
	content: "🌸"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block user */
	content: "🌸"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add to group */
	content: "🌸"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report user */
	content: "🌸"
} 


/* images */
main{
    font-family:var(--font-family)!important;
    color: var(--text)!important;
    background: transparent;
    background-size: 100%;
    background-position: center;
}
.profile-pic img{
    outline:none !important;
    border: var(--borders)!important;
    filter:drop-shadow(0px 0px 0px black)!important;
    background: url('https://64.media.tumblr.com/92a1887f1a0c9e24fa499d854387eec6/tumblr_ny6nheWsdm1uhrjdjo3_500.gif');
    background-size: contain;
    padding: 5px;
    border-radius: var(--curve);
}

.profile .friends .person img{
    border: none!important;
    border-radius: var(--curve);
}
.friends-grid{
    text-align: center;
}
.friends .heading a.more{
    padding-right: 16px;
}

/* interest table background color. replace transparent with any color to see the change */
td {
    background-color: transparent!important;
}
hr{
    border: 5px solid pink;
    border-radius: 50px;
    background: pink;
}
/* boxes */
.heading, .url-info, .blurbs, .friends, .table, .table-section, footer{
    border-radius: var(--curve) !important;
    border: var(--borders) !important;
}
.friends, .blurbs{
    background: url('https://64.media.tumblr.com/92a1887f1a0c9e24fa499d854387eec6/tumblr_ny6nheWsdm1uhrjdjo3_500.gif');
    background-size: contain;
}
.mood, .blog-preview{
    text-align: center;
    border-radius: var(--curve) !important;
    border: var(--borders) !important;
}
.mood, .blog-preview {
    background: url('https://64.media.tumblr.com/92a1887f1a0c9e24fa499d854387eec6/tumblr_ny6nheWsdm1uhrjdjo3_500.gif');
    background-size: contain;
}
.table-section{
    border:var(--borders) !important;
    background: url('https://64.media.tumblr.com/92a1887f1a0c9e24fa499d854387eec6/tumblr_ny6nheWsdm1uhrjdjo3_500.gif');
    background-size: contain;
    border-radius: var(--curve) !important;
}
.heading{
    background:transparent!important;
    text-align: center;
    border:none!important;
}
.comments-table td {
    background: transparent!important;
    color:transparent!important;
    border-radius: var(--curve);
}
.comments-table td:first-child{
    background: transparent!important
}
.comments-table td:first-child img {
    border: none!important;
    border-radius: var(--curve);
/* you can clip images at https://bennettfeely.com/clippy and add the code here */
}

/* footer */
footer{
    text-align: center;
    font-size: 60%;
    margin: 10px 0 10px;
    padding: 10px 5px;
    background: url('https://64.media.tumblr.com/92a1887f1a0c9e24fa499d854387eec6/tumblr_ny6nheWsdm1uhrjdjo3_500.gif');
    background-size: contain;
}
</style>

<style>
/* Scrollbar styles */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    border-radius: 50px;
    border: 2px solid pink;
}
::-webkit-scrollbar-thumb {
    background: RosyBrown;
    border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
    background: pink;
}
</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 18 of 18 comments ( View all | Add Comment )

leakyeyedlucy	1692762928 using! i hope you dont mind i modded it a little ^^' Report Comment
★Tomatosoup7★	1674236409 soo cute!! Report Comment
Sairuh	1664398561 Love it! Report Comment
Mia	1637010005 cuteee Report Comment
MarreFresh	1636918358 omg this is so cute!! i think im actually going to use it! but do i give credit to you in "about me"? Report Comment You dont have to! by Bela 🔊⬆; 1636920853; Report
Babygirlari173	1636728323 This is absolutely adorable omg ( ω ) Report Comment
Pynk Dyamonds Companion Sitting	1636175197 OOOOOOooooo so far, this is my favorite one for my business profile, this one will work out just great. Thank you soooo much. Report Comment you're welcome! I'm glad you like it :D by Bela 🔊⬆; 1636175258; Report
Sadashi	1634346840 CUTE!! THANKS!1 Report Comment
shortiicake	1623729801 Cute! thank you for this layout! Report Comment
Desirae Walton	1618489873 Cute Report Comment
Skye	1616943488 it's really cute!! Report Comment
MagicalBean	1614372774 Hi there :) I love this layout. I just have two questions. 1. How do I add a border/block thingy by the Status and Info next to the profile picture? How do I make the general interest block wider? My Spotify playlist doesn't show nicely in the narrow block. Report Comment
Ruthann	1614136166 I'm new here can someone help me add this cause I have no idea what I'm doing Report Comment
Debbie	1613843722 love it can you make one in purple or blue? Report Comment the colors are in the :root code, you can change them to purple there :) you can also look for purple images. I like to search for "purple aesthetic" images to find the types I like. But if you have a hard time figuring it out, let me know so I can upload a purple version. by Bela 🔊⬆; 1613886833; Report
Jen Cruz	1613605139 cuuuuuute!!!! ^_^ Report Comment thanks! :D by Bela 🔊⬆; 1613605458; Report
☾ aLe ☽	1613378295 Super cute and clean!! Just wish it was purple :) still love it! Report Comment thank you! yeah purple would look awesome! you can change the colors to purple and got to giphy.com to look for the purple backgrounds you'd like :) by Bela 🔊⬆; 1613378757; Report Will do! Thank you :) by ☾ aLe ☽; 1613380849; Report Will do! Thank you :) by ☾ aLe ☽; 1613380849; Report
Christov Bottoms	1613362003 so cute and simple in the best way! Report Comment thank you! ^^ by Bela 🔊⬆; 1613363607; Report
maggy	1613352358 THANK YOU UR AWESOME Report Comment you're welcome!! and thank you ^^ by Bela 🔊⬆; 1613353146; Report