pink/black gloomy layout

Tags: black, pink, dark, forest, transparent, nature, gloomy, simple, layout, glowy

Description:

comment if used :) requested by pat !!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ray ☆ 🍉 (https://layouts.spacehey.com/layout?id=101635) -->

<style>

@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');
.profile h1 { font-family: 'UnifrakturMaguntia'; text-align: center; font-size: xx-large; color: white; text-shadow: 2px 2px black; }

body{
background: url(https://i.pinimg.com/564x/db/95/11/db9511ef11d4cdb91e1bbf981b8c5150.jpg) no-repeat fixed;
background-size: cover;
text-transform: lowercase;
background-position-y: bottom;
}

nav .top{
margin-top: 10px;
background: url(https://i.pinimg.com/564x/18/70/da/1870da4b734db9f02f32a9d3b3ed8fff.jpg);
    background-size: cover;
    background-position-y: 210px;
    border: 1px solid white;
    border-radius: 5px;
    box-shadow: 0 0 8px white;
    filter: hue-rotate(17deg) brightness(1.5);
}

nav .top .left .logo {
    width: 165px;
    height: 42px;
    filter: drop-shadow(2px 4px 6px black);
}

button, input {
    overflow: visible;
    background: white;
    color: black;
    border: none;
    box-shadow: 0 0 5px white;
    border-radius: 5px;
}

nav .links {
    background-color: transparent;
    padding: 3.5px 16px;
    text-align: center;
    margin-top: 10px!important;
    margin-bottom: 10px!important;
}

nav .links a {
    text-decoration: none;
    color: white;
    text-shadow: 0 0 2px #000000, 0 0 2px #000000, 0 0 2px #000000, 0 0 2px #000000, 0 0 2px #000000, 0 0 2px #000000;
    font-size: max(0.98em, 12px);
}

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


nav .links .special a {
    color: white;
}

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

main{
background: url(https://i.pinimg.com/564x/32/63/8e/32638e4bf9b58ac4d90b88273015d153.jpg);
    border: 1px solid white;
    box-shadow: 0 0 10px white;
    border-radius: 8px;
    color: white;
    text-shadow: 1px 1px black;
    background-position-x: center;
    filter: hue-rotate(45deg);
}

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

footer {
    text-align: center;
    font-size: 70%;
    margin: 10px 0 10px;
    padding: 10px 5px;
    background-color: transparent;
    color: white;
}

a {
    color: white;
    text-decoration: none;
}

a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {
    color: #e1478a;
    text-decoration: none;
    font-style: italic;
}

.comments-table td:first-child, .music-table td:first-child {
    background: #d6a7d2;
    text-align: center;
    font-weight: bold;
    width: 38%;
}

.comments-table td, .music-table td {
    background: #eec0e7;
    vertical-align: top;
}

.profile .blurbs .heading, .profile .friends .heading {
    background: white;
    color: black;
    border-radius: 8px;
    padding: 2px 7px;
    box-shadow: 0 0 10px white, 0 0 5px white;
}

.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
    width: 100%;
    border: none;
    margin: 10px 0;
}

.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {
    background: white;
    color: black;
    padding: 2px 7px;
    box-shadow: 0 0 5px white, 0 0 10px white;
    border-radius: 8px;
}

.url-info{
background: url(https://i.pinimg.com/736x/49/44/4e/49444e0f534948988175a097a2ac4c76.jpg);
    height: 256px;
    font-size: 0px;
    background-size: cover;
    border-radius: 8px;
    border: 1px solid white !important;
    box-shadow: 0 0 11px 4px white;
    filter: hue-rotate(343deg);

}

.icon, .award img {
    display: inline-block;
    height: 1.4em;
    width: 1.4em;
    aspect-ratio: 1/1;
    margin: 0 0.05em 0 0.1em;
    vertical-align: -0.3em;
    color: rgba(0,0,0,0);
    filter: brightness(10);
}

.details-table td:first-child {
    background: #d6a7d2;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    width: 33%;
    box-shadow: 0 0 10px #ffffff, inset 3px 5px #f1d6e3, inset -7px -9px #b170b3;
    padding: 11px;
}

.details-table td {
    background: #eec0e7;
    vertical-align: top;
    border-radius: 8px;
    box-shadow: 0 0 10px #ffffff, inset 5px 6px #ffffff61, inset -5px -7px #ab68af;
    padding: 14px;
}

.profile-info{
background: url(https://i.pinimg.com/736x/0d/b2/0d/0db20d1d8fd3b3741426d6bcc8094383.jpg);
    background-position-y: -104px;
    height: 120px;
    border: 1px solid white;
    border-radius: 8px;
    box-shadow: 0 0 10px white;
    background-size: cover;
}

.profile .blurbs .section h4 {
    margin: 0;
    color: white;
    text-transform: uppercase;
}

.count {
    color: white;
}

.profile .friends .person p {
    color: inherit;
    font-weight: bold;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 100%;
    text-align: center;
}

img.pfp-fallback {
    border: 1px solid white;
    box-shadow: 0 0 10px white;
    border-radius: 8px;
}

::-webkit-scrollbar {
    width: 12px;
    background-color: #fff;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgb(102 0 0 / 30%);
    background-color: #eca4bb;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #fff;
}

.profile .friends .person img:not(.icon), .comments-table td:first-child img:not(.icon) {
    max-width: 95px;
    max-height: 95px;
    display: block;
    margin: 0 auto;
    filter: sepia(1) hue-rotate(255deg) brightness(1.1);
}

.online {
    color: #0C8C00;
    font-weight: bold;
    font-size: 95%;
    filter: saturate(0) brightness(10);
}

body::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgb(15 18 82 / 48%) 50%, rgb(0 0 0 / 0%) 50%);
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
    animation: float 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 8px);
}
100% {
transform: translate(0, -0px);
}

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

xXGrapeJellyXx	1757543905 using XD Report Comment
∘₊✧sophie✧₊∘	1757467145 Does anyone know how to get rid of the greenish tint on this layout? You can see the tint whenever you put a stamp or something similar 3 Report Comment if it looks pinkish or makes yellow things look green its the filter, its one of the few first things in the code, if you remove the filter i think it wile go away by Kyle XP; 1757521809; Report
⌣ ﹒vin	1757423496 using!! Report Comment
inkii !! :3	1757402711 tysmmm!!! im gonna use this Report Comment
Cass Caines left Toe nail	1757369607 THANK YOU SO MUCH!!!!! USING!! Report Comment
Cass Caines left Toe nail	1757369601 THANK YOU SO MUCH!!!!! USING!! Report Comment
KageMochii	1757286112 usingg < 3 Report Comment
R ! <3 T	1757263202 using ! Report Comment
shizoneko	1757209806 used Report Comment
harleigh	1757194607 usinggg Report Comment
شَـهْد جوزِيف ✟	1757147180 using Report Comment
st★r⋆°.☾⋆.ೃ࿔*:⋆	1757141077 using but modifying a bit! :D Report Comment
ℜ𝔢𝔡 ℨ𝔬𝔪𝔟𝔦𝔢	1757124163 Usingg Report Comment
Dwight!	1757105622 Using! I love this smm!! Report Comment
EL <3333	1757070121 USING TYSMMM!!! Report Comment
magical kitty!!!	1756932164 tyyy Report Comment
teia	1756930690 using ^.^ Report Comment
Batzy	1756883996 USINGG!!! Super cute!! Report Comment
Freakyma	1756867817 Using!!! Report Comment
༚ཻ*⋆Ⲃⲇⲉⳗⲓ❳ ₊˚.༄	1756855369 Using! Report Comment