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

Kathleen :P	1742670364 Usingg!! Report Comment
Kathleen :P	1742670364 Usingg!! Report Comment
lizz	1742662300 usingg Report Comment
Homuncolus707	1742651170 using Report Comment
sweet.nightmare	1742646730 using Report Comment
VanillaCoffee	1742499967 Using !! Report Comment
Melody	1742495396 using Report Comment
HunHon3y	1742478759 Unsing ty :3 Report Comment
Jade	1742435580 usinggg^^^ Report Comment
Beth (she) ★	1742396233 using :^ Report Comment
katerina ☆	1742292913 using Report Comment
Z@_ll0	1742233357 Using Report Comment
brookeisdivine	1742223285 Using Report Comment
Cory	1742197921 USING! Report Comment
skellie_t0n	1742182602 using <33 tysm !! Report Comment
bloodywaves	1742166626 using:3 Report Comment
𝄞 arch3ry ࣪ ִֶָ☾.	1742072351 USINGG!! ITS SO PRETTY TwT Report Comment
ang3licabsol	1742069183 gonna use this thanks so much! ^^ <3 Report Comment
Squidy	1742014427 Using ^^ Report Comment
♡	1741818706 using Report Comment