Pink Layout

Tags: pink, hearts, boxes, bela

Description:

I appreciate your comments and thank you for using this layout. To prevent spam, comments are disabled as of April 12th 2024.

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

morgga 𐙚 ₊˚⊹ᡣ🪡	1712773688 using! ♡ Report Comment
Adeline!	1712710534 usingg Report Comment
Omuu	1712646088 USING XD Report Comment
M4TT3★	1712613148 Using :3 Report Comment
M4TT3★	1712613143 Using :3 Report Comment
eXa :3	1712545797 Usando >3!! Report Comment
𝓤shka	1712435433 using!! Report Comment
𝐅𝐫𝐚𝐧𝐜𝐢𝐬	1712419487 Using!! <3 Report Comment
Jay	1712418629 Using thanks! :D Report Comment
Cillan	1712392672 usee Report Comment
🍬 savvy ୨♡ৎ (oliveira)🍉	1712196963 using !!! Report Comment
bug☆	1712158282 using ty!! Report Comment
Minimegs	1712155982 usandoo Report Comment
Minimegs	1712155982 usandoo Report Comment
☆GREATMOCHA☆	1711850913 AHH i love it :] [using] Report Comment
- ̗̀⸙͎۪۫.𝚃𝚂𝚄(❗)❞	1711814534 using! Report Comment
K!rbo	1711743202 using :> Report Comment
xXKittyKatastropheXx	1711737220 using >_< Report Comment
Pink🖤✤🌸✤	1711724100 usinggg Report Comment
charyss	1711636259 I want to use this Report Comment