Pastel Pink Layout

Tags: pink, pastel, layout, simple, clouds, blue, gif

Description:

Cloudy pastel pink layout. Anyone can feel free to use.

Preview:

click on the image for a larger preview

Code:

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

<style>

@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@700&display=swap');

body{
background-image:url(https://data.whicdn.com/images/302633783/original.gif);
height: 100%;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}

nav .top{
background-color: #FF94BB;
border-radius: 20px;
border: 2px solid #FFC3D9;
box-shadow: inset 2px 3px 5px #FFC3D9;
margin: 1em 0;
}

nav .links{
background-color: #E76292;
border-radius: 20px;
border: 2px solid #FE91B9;
box-shadow: inset 2px 3px 5px #FE91B9;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
font-style: italic;
}

nav .links li::after{
display: none;
}

main{ 
background-color: #FF94BB;
border-radius: 20px;
border: 2px solid #FFC3D9;
box-shadow: inset 2px 3px 5px #FFC3D9;
margin: 1em 0;
padding: .5em;
opacity: .9;
}

.profile h1{
font-family: 'Kalam', cursive;
color: white;
text-shadow: 1px 1px 2px #AC3862;
font-size: 25px;
}

.online{
font-family: 'Kalam', cursive;
color: white;
font-size: 20px;
text-shadow: 1px 1px 2px #AC3862;
animation-name: blink;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(1.0,0,0,1.0);
animation-duration: 2s;
}

.online img{
display: none;
}

.profile .profile-info{
border-radius: 20px;
border: 2px solid #FFC3D9;
box-shadow: inset 2px 3px 5px #FFC3D9;
text-shadow: 1px 1px 2px #AC3862;
color: white;
background-image: url(https://i.gifer.com/DXp.gif);
background-repeat: no-repeat;
background-size: cover;
}

.profile .general-about{
color: white;
font-style: italic;
text-shadow: 1px 1px 2px #AC3862;
}

.profile .blog-preview,
.profile .mood{
color: white;
font-style: italic;
}

.profile .profile-pic img{
border-radius: 20px;
box-shadow: 1px 1px 2px #AC3862;
filter: sepia(100%) hue-rotate(299deg);
opacity: .5;
}

.profile .contact .heading,
.profile .table-section .heading{
font-family: 'Kalam', cursive;
color: white;
background-color: #E76292;
border-radius: 20px 20px 0 0;
border: 2px solid #E76292;
box-shadow: inset 2px 3px 5px #FE91B9;
text-align: center;
padding: .5em;
font-size: 15px;
}

.profile .table-section,
.profile .contact,
.profile .url-info{
border-radius: 20px;
border: 2px solid #FFC3D9;
box-shadow: inset 2px 3px 5px #FFC3D9;
text-shadow: 1px 1px 2px #AC3862;
font-style: italic;
color: white;
}

table.details-table td {
background-color: transparent !important;
color: white !important;
font-style: italic !important;
}

.profile .blurbs .heading,
.profile .friends .heading{
color: white;
font-family: 'Kalam', cursive;
background-color: #E76292;
border-radius: 20px 20px 0 0;
border: 2px solid #E76292;
box-shadow: inset 2px 3px 5px #FE91B9;
text-align: center;
padding: .5em;
font-size: 15px;
}

.profile .blurbs,
.profile .friends{
border-radius: 20px;
border: 2px solid #FFC3D9;
box-shadow: inset 2px 3px 5px #FFC3D9;
text-shadow: 1px 1px 2px #AC3862;
font-style: italic;
color: white;
}

.profile .friends{
text-align: center;
}

.profile .friends-grid .person p{
color: white;
}

.profile .blurbs .section h4{
color: white;
padding: .5em;
}

.profile .comments-table{
background-color: #E76292;
border-radius: 20px;
border: 2px solid #FE91B9;
box-shadow: inset 2px 3px 5px #FE91B9;
font-style: italic;
color: white;
}

.profile .comments-table td{
background-color: transparent;
}

.profile .comments-table .comment-replies{
background-color: #E76292;
border-radius: 20px;
border: 2px solid #FE91B9;
box-shadow: inset 2px 3px 5px #FE91B9;
font-style: italic;
color: white;
}

.comments-table img,
.person img{
border-radius: 20px;
box-shadow: 1px 1px 2px #AC3862;
filter: sepia(100%) hue-rotate(299deg);
opacity: .5;
}


footer{
background-color: #E76292;
border-radius: 20px;
border: 2px solid #FE91B9;
box-shadow: inset 2px 3px 5px #FE91B9;
font-style: italic;
color: white;
}

.count{
color: #E76292;
}

a{
color: #DAEDFF;
text-shadow: 1px 1px 2px #AC3862;
}

a:visited {
color: #DAEDFF;
text-shadow: 1px 1px 2px #AC3862;
}

a:hover {
color: white;
}

a:active {
color: #DAEDFF;
text-shadow: 1px 1px 2px #AC3862;
}

nav .links a:hover{
text-decoration: underline;
color: #DAEDFF;
}

</style>

<style>* {cursor: url(https://cur.cursors-4u.net/cursors/cur-9/cur265.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/12/01/light-pink-pointer.html" target="_blank" title="Light Pink Pointer"><img src="https://cur.cursors-4u.net/cursor.png" alt="Light Pink Pointer" style="position:absolute; top: 0px; right: 0px;"/></a>

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

Glitchii_Gurll	1643220148 Thank you! this is very cute Report Comment
mikhael	1642884263 so cute ! Report Comment
bunnie	1642650275 stealin dis :3 Report Comment
Mo <3	1640023281 so adorbs Report Comment
puriinsana	1639899344 stealing this, it's really cute ^_^ Report Comment
Val	1638487507 So cute Report Comment
liliana_p	1638114467 This is absolutely lovely!! Amazing work! Report Comment
Bri.annaluvsu	1637991635 how do you add music to this layout Report Comment
Gorgeous Gravy	1637951306 very pretty thank you Report Comment
Savi	1637604542 So cute, thank you Report Comment
Tastii	1637547855 Luv it!! Report Comment
<3 bambi <3	1637530076 tysm Report Comment
Rose	1637346669 love this one :) thank you Report Comment
Angelica	1637346170 thx! love it Report Comment
Mikaaaa ️‍	1637165022 thank you its beautifullll Report Comment
hilda 🎀🩰	1637127464 Wow Report Comment
hilda 🎀🩰	1637127464 Wow Report Comment
Jazmine	1637095156 Beautiful! Thank you! Report Comment
Jazmine	1637095113 Beautiful! Report Comment
james	1637087761 cute Report Comment