black and white forest layout

Tags: black, white, dark, forest, landscape, nature, gloomy, simple, layout, greyscale

Description:

please comment if used !! no credit needed but it is appreciated:)

Preview:

click on the image for a larger preview

Code:

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

<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/73/2c/09/732c09169383f6b9094d35a3f4de342a.jpg) no-repeat fixed;
background-size: cover;
text-transform: lowercase;
}

nav .top{
margin-top: 10px;
background: url(https://i.pinimg.com/564x/5a/2e/43/5a2e436be6d6f7a9d42de62202e31d7f.jpg);
background-size: cover;
    background-position-y: center;
border: 1px solid white;
border-radius: 5px;
box-shadow: 0 0 8px white;
}

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 .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/83/db/b6/83dbb678c05d144ad491517113ba8e8c.jpg);
    border: 1px solid white;
    box-shadow: 0 0 10px white;
    border-radius: 8px;
    color: white;
    text-shadow: 1px 1px black;
}



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: #6da5ac;
    text-decoration: none;
    font-style: italic;
}

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

.comments-table td, .music-table td {
    background: #403f43;
    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;
}

.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: #29282b;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    width: 33%;
    box-shadow: 0 0 10px #ffffff, inset 3px 5px #5d5b68, inset -7px -9px #151617;
    padding: 11px;
}

.details-table td {
    background: #403f43;
    vertical-align: top;
    border-radius: 8px;
    box-shadow: 0 0 10px #ffffff, inset 5px 6px #cecaea61, inset -5px -7px #2a2a2e;
    padding: 14px;
}

.profile-info{
background: url(https://i.pinimg.com/564x/59/49/85/59498522322ca36103b706ab9b904984.jpg);
    background-position: center;
    border: 1px solid white;
    border-radius: 8px;
    box-shadow: 0 0 10px white;
}

.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 rgba(0,0,0,.3);
    background-color: black;
}

::-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: grayscale(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 1455 comments ( View all | Add Comment )

kazı	1769574005 usando Report Comment
sp1r4lD	1769477155 Using! Report Comment
rickk	1769469530 using Report Comment
Pawwz	1769462402 Using wow Report Comment
Vampieメ	1769459406 using! Report Comment
Clvicle	1769412612 Using! this layout is so cool and pretty :3 p.s. I love the rest of ur profile hehe Report Comment
𝕵𝖆𝖎𝖒𝖊 ⋆.˚✮⋆	1769407681 Using Report Comment
v1ct0r	1769375641 using Report Comment
✰kuniiiiii☆	1769292785 Usando Report Comment
🖇️Star*⁠.⁠✧	1769275908 Usando! Report Comment
xhrtz4sxra	1769204382 using! Report Comment
ghost	1769194434 using ty Report Comment
ꀤ꒒꒒ꀤ 击	1769185892 using! Report Comment
delphiumSource2012	1769150993 using!! Report Comment
bella	1769138274 using :) Report Comment
Izalith	1769130852 using Report Comment
⊹₊⟡⋆ᴄ4ᴍɪʟᴀ₊˚⊹♡	1769022266 usiing Report Comment
Patricia	1769009208 using Report Comment
☕	1768941151 using Report Comment
Zaza	1768864464 using Report Comment