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

phob	1773992800 using ^^ Report Comment
Idonteveneatcottagecheese	1773967880 Using bht editing! Report Comment
Wild Deer	1773808626 I'VE BEEN LOOKING FOR THIS FOR AGES!! USING IT! <3 Report Comment
Ryleigh˚.🦴 ᵎᵎ	1773640883 yippe using Report Comment
𝔯𝔬𝔯𝔶	1773551209 using again!!!! Report Comment
Winnie	1773521201 Used! Report Comment
mells	1773509640 using! thank you Report Comment
Party Poison	1773428689 using thxxxss Report Comment
J4NKLES	1773423281 using :P Report Comment
lambfever	1773382886 using this!! thank you for this amazing layout! <3 Report Comment
𐔌𝙎𝙏𝙊𝙉𝙀𝙍 𝘽𝙐𝘿┆ 🚬❗	1773318433 It looks cool, but I just wanted the retro effect. that would look great too. Report Comment
𝙏𝙧𝙞𝙣𝙞𝙩𝙮ᶻ 𝗓 𐰁 .ᐟ	1773131843 using!! Report Comment
Tiny 🍓!☆	1773107347 Usando!! Report Comment
Sanan	1773089411 usinggg!! Report Comment
geolufish	1773003089 Using Report Comment
ヽ( ´O｀)ゞ	1772974062 using ty Report Comment
Bwoman	1772947517 using Report Comment
Miss.Velour	1772924766 using! Report Comment
Ell10t!	1772838258 Usingggg Report Comment
Ell10t!	1772838244 Usingggg Report Comment