purple layout version

Tags: purple, box, hearts, 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=461) -->

<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: #927fbf;
    --text: #4f3b78;
    --names: #927fbf;
    --links: #927fbf;
    --hover: #9a0f98;
    --borders: 1px solid #927fbf !important;
    --background_image: url("https://i.imgur.com/6zCbRs2.png");
    --font-family: 'Gotu', sans-serif;
    --curve: 0px;
}

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: #4f3b78;}

/* 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: 3px double #4f3b78;
}

.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: #200f21 !important;
    background-repeat: repeat;
    background-size: 120px;
}

/* navigation */

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

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

nav .top {
    background: rgba(0, 0, 0, 0.0);
    color: var(--headers);
}

nav .top a {
    color: #4f3b78!important;
}

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

nav img.logo {
    filter: brightness(0) saturate(100%) invert(56%) sepia(68%) saturate(261%) hue-rotate(217deg) brightness(84%) contrast(85%)!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 #4f3b78 !important;
    color: pink !important;
    border-radius: 0px !important;
}

button {
    border-radius: 0px !important;
    border: 0px solid #4f3b78!important;
    font-family: var(--font-family) !important;
    background-color: rgba(0, 0, 0, 0.0) !important;
    color: #4f3b78!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) #000000;
}

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

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

.profile-info {
    background: #200f21;
    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) #000000;
}

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

.contact {
    background: #200f21;
    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) #000000;
}

.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: #200f21;
}

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

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

.table-section {
    border: var(--borders) !important;
    background-color: #200f21!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: #200f21;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #000000;
}

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

/* Scrollbar styles */

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

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

::-webkit-scrollbar-thumb {
    background: #4f3b78;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4f3b78;
}

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

Yvette/Sierra (autoplay)	1699881755 using Report Comment
☆Madi☆	1697046086 usinggg Report Comment
taurtis xp	1694715021 using !!! Report Comment
goofy vincent :3	1693866109 using. Report Comment
HERO !	1690355927 using !! Report Comment
abby 💊	1686854692 using ♡ Report Comment
Comet	1686378646 Thx for the layout <3 Report Comment
♱ ⋆⁺₊ Maeve ♱	1682805930 Using <3 Report Comment
WeirdKit_1K	1681327888 using! Report Comment
orion	1674500464 using! thank u! Report Comment
Cyrus	1669942793 Using this!! Thank you!! Report Comment
mumbojayjumbo	1667325896 totally using thank you Report Comment
Mvltiwonder	1659713965 thank you, im using this Report Comment
professionaloss	1650414251 so pretty! i love it! Report Comment
Bugz!!	1647560505 ty!! Report Comment
jojo not cool	1638891698 ty Report Comment
Bearyyy :)	1638220970 Thank you! :) Report Comment
Meggon Betts	1637013261 Thanks. Used :) Report Comment
Moonpie_Mom4life	1635921893 Thank you !! Report Comment
Mia	1615843177 Thank you!! (: Report Comment