cyber blue forest layout

Tags: blue, cyber, dark, forest, landscape, nature, gloomy, simple, layout, retro

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 ☆ 🍉 (yuri lover ⚢) (https://layouts.spacehey.com/layout?id=40946) -->

<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 #91cbd2; }

body{
background: url(https://i.pinimg.com/originals/7a/88/96/7a8896d4f88094a6d3728dfb95b55290.jpg);
background-size: cover;
text-transform: lowercase;
}

nav .top{
margin-top: 10px;
background: url(https://i.pinimg.com/originals/e7/e7/b4/e7e7b408233c3604138aec598a7505f7.jpg);
background-size: cover;
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 #5ab9c7, 0 0 2px #5ab9c7, 0 0 2px #5ab9c7, 0 0 2px #5ab9c7, 0 0 2px #5ab9c7, 0 0 2px #5ab9c7;
    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: powderblue;
}

main{
background: url(https://static.displate.com/1200x857/displate/2016-07-10/15d9d1844059bad9e41ccaca3828b006.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: powderblue;
    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: #7fbcc4;
    text-align: center;
    font-weight: bold;
    width: 38%;
}

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

.profile .blurbs .heading, .profile .friends .heading {
    background: white;
    color: powderblue;
    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: powderblue;
    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: #7fbcc4;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    width: 33%;
    box-shadow: 0 0 10px #7FBCC4, inset 2px 2px #acdee4, inset -2px -2px #40767d;
}

.details-table td {
    background: #b0e0e6;
    vertical-align: top;
    border-radius: 8px;
    box-shadow: 0 0 10px #b0e0e6, inset 2px 2px #d8f7fb, inset -2px -2px #6fadb6;
}

.profile-info{
background: url(https://i.pinimg.com/564x/8a/b2/c7/8ab2c74e27ab1205bfa1eb3d13a074f7.jpg);
    background-position: center;
    filter: contrast(0.7) brightness(1.3);
    border: 1px solid white;
    border-radius: 8px;
    box-shadow: 0 0 10px white;
}

.profile .blurbs .section h4 {
    margin: 0;
    color: #8dccd4;
}

.count {
    color: #8dccd4;
}

.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: powderblue;
}

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

.online {
    color: #0C8C00;
    font-weight: bold;
    font-size: 95%;
    filter: hue-rotate(61deg) brightness(2) contrast(0.5);
}

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

twylor :P	1732659308 using!!1! so cute! Report Comment
mivie	1732619128 Using! Report Comment
keiko	1732461196 using!! Report Comment
Huntsman207	1732361481 Using!! Report Comment
Devyankee	1732289190 Using <3 Report Comment
✦ !! vaelen	1732169929 usingg Report Comment
Paget :P	1732136154 Totally using!! So pretty Report Comment
mattie	1731906702 Using! Report Comment
𓏵⠀⠀⠀𓉸⠀⠀⠀Michael ⠀⠀⠀ ᛝ	1731865899 Using Report Comment
🪦☄️Taxpayer☄️🪦	1731865484 Using Report Comment
Weird0!! (0_o)	1731800899 Using! Report Comment
Millennium	1731534845 using ☆〜（ゝ。∂） Report Comment
Smolbean1794	1731417084 Using Report Comment
kiki	1731370850 using !!! Report Comment
valkyrie	1731360388 using!!11!!1!!1!!! Report Comment
valkyrie	1731360386 using!!11!!1!!1!!! Report Comment
zemora	1731194990 using! Report Comment
lusliode	1731113751 using Report Comment
Tatiana	1730936509 usando Report Comment
Alexia :D	1730831840 Using Report Comment