Pink Layout

Tags: pink, hearts, boxes, bela

Description:

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

Image Credits —

⇘ Body Background: https://i.imgur.com/6zCbRs2.png

⇘ Online Code: https://dl.glitter-graphics.com/pub/272/272679lz7b9hcea1.gif

Preview:

click on the image for a larger preview

Code:

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

<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/cursors/cur-7/cur668.cur'), auto;
}

* {
    cursor: url('https://cur.cursors-4u.net/cursors/cur-7/cur671.cur'), auto;
}

</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Gotu&display=swap');
</style>
<style>
:root {
    --headers: #ec5a5a;
    --text: pink;
    --names: #ec5a5a;
    --links: pink;
    --hover: #f3d7d7;
    --borders: 1px solid #f3d7d7 !important;
    --background_image: url("https://i.imgur.com/6zCbRs2.png");
    --font-family: 'Gotu', sans-serif;
    --curve: 0px;
    --simple_bg: #ffffff;
}

main .left {
    padding-right: 20px;
}

.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 */
.comment-reply:not(:first-child) {border-top: 3px double hotpink;} /* line in between comment replies*/
.count {color: #f3d7d7;}

/* 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 */

h2, h3, h4, h5, a, p, nav label, .section {
    font-family: var(--font-family) !important;
    font-size: 12px!important;
}

/* padding and margin */

.icon {
    border: none !important;
}

.blurbs {
    margin-top: 10px !important;
    margin-bottom: 30px !important
}

.friends {
    margin-top: -10px !important;
    margin-bottom: 30px !important
}

.profile-info {
    border-radius: var(--curve) !important;
}

.comment-replies {
    border: 5px dotted pink;
}

.comments-table {
    border-radius: var(--curve) !important;
    border: none !important;
}

.table-section {
    padding-bottom: 7px !important;
    margin-top: 30px!important
}

#comments {
    margin-top: 5px !important;
    padding-bottom: 5px !important
}

.details p:last-child {
    color: var(--links) !important;
    filter: brightness(95%);
}

.mood {
    margin-top: 20px;
}

/* background image */

body {
    background-image: var(--background_image) !important;
    background-color: white !important;
    background-repeat: repeat;
    background-size: 120px;
}

/* navigation */

/* change logo color at https://codepen.io/sosuke/pen/Pjoqqp */

nav {
    background: white;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #f6e3e3;
    margin-bottom: 30px;
    border: var(--borders);
}

nav .top {
    background: rgba(0, 0, 0, 0.0);
}

nav .top a {
    color: pink!important;
}

nav .links {
    background: transparent!important;
    text-align: center;
}
nav .links a{
text-shadow:none;
}

nav img.logo {
    filter: brightness(0) saturate(100%) invert(76%) sepia(42%) saturate(432%) hue-rotate(305deg) brightness(104%) contrast(105%);
    !important;
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: " | ";
    color: var(--headers);
}

/*============= color the search bar and button ===================*/

.search-wrapper input[type=text] {
    background-color: rgba(0, 0, 0, 0.0) !important;
    border: 2px solid pink !important;
    color: pink !important;
    border-radius: 0px !important;
}

button {
    border-radius: 0px !important;
    border: 0px solid pink!important;
    font-family: var(--font-family) !important;
    background-color: rgba(0, 0, 0, 0.0) !important;
    color: pink!important;
}

/*============= online icon  ===================*/

.online {
    content: url(https://dl.glitter-graphics.com/pub/272/272679lz7b9hcea1.gif);
}

/*============= profile name ===================*/

h1 {
    padding-left: 20px !important;
    font-family: 'Gotu', sans-serif;
    font-size: 25px !important;
    margin-top: -10px!important;
    color: var(--links)!important;
}

/*============= box shadows ===================*/

.mood, .blog-preview, .contact {
    margin-bottom: 30px;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #f6e3e3;
}

.table-section, .blurbs, .friends {
    margin-bottom: 30px !important;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #f6e3e3;
}

.friends {
    margin-top: 10px!important;
}

.profile-info {
    background: white;
    border: var(--borders)!important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
    margin-bottom: 30px;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #f6e3e3;
}

.profile-info .inner {
    font-weight: bold;
    text-align: center;
}

.contact {
    background: white;
    padding: 20px;
    margin-bottom: 40px!important;
}

main {
    background: transparent;
    padding: 6px 0px;
}

.profile-pic img {
    outline: none !important;
    border: none!important;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #f6e3e3;
}

.friends-grid img {
    outline: none !important;
    filter: opacity(90%) !important;
    border-radius: var(--curve) !important;
}

td {
    background-color: transparent!important;
}

hr {
    border-top: 1px solid pink;
}

.heading, .url-info, .blurbs, .friends, .table, .table-section, footer {
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--borders) !important;
}

.friends, .blurbs {
    background: white;
}

.mood, .contact, .blog-preview {
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--borders) !important;
}

.mood, .blog-preview {
    text-align: center;
    background: white;
    border: var(--borders) !important;
}

.table-section {
    border: var(--borders) !important;
    background-color: white!important;
    border-radius: var(--curve) !important;
}

.heading {
    background: transparent!important;
    padding-bottom: 4px !important;
    background-size: 100%100%!important;
    text-align: center;
    border: none!important;
}

.comments-table {
    display: block;
    height: 500px!important;
    overflow-y: scroll;
    border: var(--borders) !important;
    outline: none !important;
    border: none!important;
}

.comments-table td {
    background-image: url('') !important;
    background-size: cover;
    border: var(--borders);
}

.comments-table td:first-child img {
    /* you can clip images at https://bennettfeely.com/clippy and add the code here */
}

footer {
    color: var(--text);
    text-align: center;
    font-size: 60%;
    margin: 10px 0 10px;
    padding: 10px 5px;
    background: white;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #f6e3e3;
}

</style>
<style>
/* Force scrollbars onto browser window */

/* Scrollbar styles */

::-webkit-scrollbar {
    width: 5px;
    height: 12px;
}

::-webkit-scrollbar-track {
    border-radius: 0px;
    width: 2px;
    border: 1px dotted hotpink;
}

::-webkit-scrollbar-thumb {
    background: pink;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
    background: hotpink;
}

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

Atsushi Nakajima	1696108633 using!! Report Comment
Shroomy kitty	1696104815 using Report Comment
Applsauz	1696029642 Most likely using atm Report Comment
Applsauz	1696029641 Most likely using atm Report Comment
whippingcrram	1695564404 Lemme use it! 💝 Report Comment
Mrissi Neko ˶ᵔ ᵕ ᵔ˶	1695451461 Thank you! I’m using it🩷 Report Comment
~Star!~	1695299391 USINGGGGGGG Report Comment
Ethan	1695247031 usinggg Report Comment
mimi ♪	1695174067 using!!! ^^ Report Comment
luchien!	1695066479 ooo using! :3c Report Comment
MoonPop! — 🌒☁️★	1694867099 Using! Report Comment
Lynn	1694729779 Using! (On blog entries) Report Comment
Raj!!★	1694641172 Using!! Even thoufh it doesnt fit me still using :3 Report Comment
freya	1694564317 this is amazing wnsnshsh!!! Report Comment
Christopher	1694095285 Loves it! 💖 Report Comment
Flora	1693987338 Using:) Report Comment
Wingdings!(≧▽≦)	1693860353 using :3 Report Comment
StarJuice	1693810432 Using ^-^ Report Comment
melanovia	1693628506 using! Report Comment
spamfromokki !!	1693606560 Ill be using this! Thank you!! Report Comment