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 20 of 30 comments ( View all | Add Comment )

Maria	1740936047 using! Thank you so much for making this<333 Report Comment
Sora	1738981205 super cute totallyy usingggg Report Comment
BreaJae	1736698363 Using Report Comment
BreaJae	1736698361 Using Report Comment
⊹ ׁ݂ ꒰꒰🦢 ˸ aceeee >< ⋅꒷	1734616779 usinggg Report Comment
terzarima	1731877314 using Report Comment
vic	1728841509 usingggggg Report Comment
aestreinomy	1722257347 using!! Report Comment
rainbowrot	1716903423 do you make blog layouts? Report Comment yes, here I have titled the blog css ones. by Bela; 1717568999; Report
=Sleepy-mikkii	1714437741 using! Report Comment
_Zane_XoX_🍉 (PFP iz mii:3)	1713982626 using! ^-^ Report Comment
☆.･.･:MUSTA.･.･:☆	1711780616 Using it! with some mods Report Comment
૮꒰ྀི⸝⸝> . <⸝⸝꒱ྀིა	1692762928 using! i hope you dont mind i modded it a little ^^' Report Comment
★Dog★	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