Black Forest Layout!

Tags: grey, black, forest, emo, white, goth, transparent, dark

Description:

hi! today i just wanted to share this new layout i made by myself. hope u like it!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Dai, Dai. (https://layouts.spacehey.com/layout?id=98752) -->

<style>
@import url('https://fonts.cdnfonts.com/css/gotica-bastard');
</style>

<style>
body{
background-image: url("https://i.pinimg.com/736x/bb/e7/42/bbe742c899cb149fadfc5dba9117311b.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
font-family: 'GoticaBastard', sans-serif;
}     
</style>

<!-- (c) Layout created by Valentine (https://layouts.spacehey.com/layout?id=29048) -->

<style>
/* replace with cd image that has transparent background. must be 150px by 150px. */
:root {
--cd-image: url('https://fluorescent-lights.neocities.org/Digital-CD-Disk-Vector-Transparent-PNG.png');
}
.profile-pic {
position: relative;
width: 183px;
filter: drop-shadow(0 0 0.25rem gray);
}
.profile-pic:after {
content: "";
background: url('https://fluorescent-lights.neocities.org/f0rzNHe.png'), linear-gradient(150deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2), 40%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.6));
background-size: contain, cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.profile-pic:before {
content: "";
background: var(--cd-image);
position: absolute;
top: 5px;
left: -20px;
width: 150px;
height: 150px;
background-repeat: no-repeat;
z-index: -1;
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear; 
transition: left ease 0.5s;
}
.profile-pic:hover:before {
left: -75px;
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
.profile-pic .pfp-fallback {
float: right;
width: 163px;
height: 160px;
border: none;
}
.general-about .profile-pic img {
max-width: inherit;
}
</style>

<!-- (c) Layout created by ༺♱𝔠𝔞𝔰𝔰♱༻ (https://layouts.spacehey.com/layout?id=94975) -->

<style>

.logo {

content:url("https://i.postimg.cc/KcpspwmY/2024-01-10-12l-Kleki-removebg-preview-1.png");

}

</style>

<!-- (c) Layout created by tokyo (https://layouts.spacehey.com/layout?id=98493) -->

   


    
    
    <style>
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        .vinyl-container {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 50px auto;
        }

        .vinyl {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #111;
            border: 10px solid #444;
            position: absolute;
            animation: rotate 5s infinite linear;
        }

        .center-hole {
            width: 40px;
            height: 40px;
            background-color: #111;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
        }

        .cover-container {
            width: 80%;
            height: 80%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            overflow: hidden;
            border-radius: 50%;
        }

        .cover {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
            animation: rotate 5s infinite linear;
        }

        .cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        .cover-hole {
            width: 20px;
            height: 20px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 3;
        }
    </style>


    <div class="vinyl-container">
        <div class="vinyl">
            <div class="center-hole"></div>
        </div>
        <div class="cover-container">
            <div class="cover">
                <div class="cover-hole"></div>
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPcMDgwaNszIfomlkjsgH8EA8omqiuRio7eQ&usqp=CAU" alt="Portada del disco"/>
            </div>
        </div>
    </div>
<style>




<style>
    img:hover{
          transform: scale(1.1); 
          transition: transform .2s; 
        
    }
    
</style>


<style>
/*YOU CAN REMOVE THIS FOR A MORE.. NOSTALGIC LOOK.*/
body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(18, 20, 20, 0) 50%, rgba(50, 50, 50, 50) 20%), linear-gradient(90deg, black, black, black);
z-index: 2;
background-size: 100% 2px, 3px 100%;
opacity: 10%;
pointer-events: none;
}
</style>
<style>
:root{
  --light-gray: black;
  --gray:grey;
  --dark-gray: black;
  --darker-gray: black;
  --logo-blue: grey;
  --darker-blue: black;
  --lighter-blue: ;
  --even-lighter-blue: #393b38;
  --lightest-blue: linear-gradient(lightgray, white, #696969);
  --red: black;
  --dark-orange:;
  --light-orange: linear-gradient(lightgray, white, #696969) ;
  --even-lighter-orange:  linear-gradient(lightgray, white, #696969);
  --strange-yellow:  linear-gradient(lightgray, white, #696969);
  --green:  linear-gradient(lightgray, white, #696969);
  --light-green: #E6F8DD;
  --medium-green: #A0C99C;
  --dark-green: #059669;

  accent-color: black;
  accent-color: black;
}
</style>
<style>
/* links in the navigation bar @ the top */
nav{ 
font-size: 17px !important;
font-family:'GoticaBastard', sans-serif;
text-shadow: 1px 1px black;
text-transform:none;
padding-left:3px;
text-align: center;
}
</style>

<style>
 /* Chrome, Edge, and Safari */
	*::-webkit-scrollbar {width: 8px;}

	*::-webkit-scrollbar-track {background: black;}
	
	*::-webkit-scrollbar-thumb {
		background-color: #635d52;
		border-radius: 10px;
		border: 3px solid #696969;
	}
</style>
<style>
.profile .table-section .heading{
color: black;
}
</style>

<style>
main{
background: transparent;
</style>

<style>
DIV.blog-preview{
        text-align: center;
        border: ridge 3px white;
        background-image: linear-gradient(#616362, lightgray);
        border-radius: 5px;
         box-shadow: 2px 5px 5px white;
        
    }
</style>


<style>/* Custom Profile Headers */
.contact .heading{ font-size:0; }
.contact .heading:before{ content: "Contact Me "; font-size:.9rem; font-weight: bolder; }

.w-40 .table-section:nth-last-child(2) .heading h4{ font-size:0;}
.w-40 .table-section:nth-last-child(2) .heading:before{content: "My Taste"; font-size:.9rem; font-weight: bolder; color: white; }

.w-40 .table-section:last-child .heading h4{ font-size:0; }
.w-40 .table-section:last-child .heading:before{ content: "me."; font-size:.9rem; font-weight: bolder; }

.blog-preview h4{ font-size:0; }
.blog-preview h4 a{font-size:.8rem;margin-left:5px; }
.blog-preview h4:before{ content: "Blog Entries "; font-size:.9rem; font-weight: bolder; }

.blurbs .heading{ font-size:0; }
.blurbs .heading:before{ content: "Personality"; font-size:.9rem; font-weight: bolder; }

.blurbs .inner .section:nth-child(1) h4{ font-size:0; }
.blurbs .inner .section:nth-child(1) h4:before{ content: "About Me:"; font-size:.9rem; }

.blurbs .inner .section:nth-child(2) h4{ font-size:0; }
.blurbs .inner .section:nth-child(2) h4:before{ content: "Who I'd Like To Meet:"; font-size:.9rem; }

.friends .heading{ font-size:0; }
.friends .heading:before{ content: "Friends."; font-size:.9rem; font-weight: bolder;}

.friends#comments .heading{ font-size:0; }
.friends#comments .heading:before{ content: "Leave Me A Comment "; font-size:.9rem; font-weight: bolder;}

<style>
.contact .inner a img {
    font-size: 0;
}
.contact .inner a img:before {
    font-size: 1em;
    display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
	/* Add to Friends */
	content: url("https://xyz.crd.co/assets/images/gallery01/6eed6c87.gif?v=4ca63763")
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* Add to Favorites */
	content:url("https://xyz.crd.co/assets/images/gallery13/7a76fa8c.gif?v=4ca63763")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content:url("https://xyz.crd.co/assets/images/gallery01/6eed6c87.gif?v=4ca63763")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward to Friend */
	content:url("https://xyz.crd.co/assets/images/gallery13/7a76fa8c.gif?v=4ca63763")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content:url("https://xyz.crd.co/assets/images/gallery01/6eed6c87.gif?v=4ca63763")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content:url("https://xyz.crd.co/assets/images/gallery13/7a76fa8c.gif?v=4ca63763")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* Add to Group */
	content:url("https://xyz.crd.co/assets/images/gallery01/6eed6c87.gif?v=4ca63763")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content:url("https://xyz.crd.co/assets/images/gallery13/7a76fa8c.gif?v=4ca63763")
}
</style>

<style>
.contact .inner{
background: linear-gradient(lightgray, white, #696969);
}

.url-info{
background: linear-gradient(lightgray, white, #696969);
}
.profile .blurbs .section h4 {
color: white;
}

.profile .mood p {
color:white;
}
.profile .mood a{
color: white
}
.general-about .details p {
color: white;
}
</style>

<style>/* Profile Name Header */
	@import url('https://fonts.cdnfonts.com/css/old-london');
	.profile .left h1{ font-family: 'Old London', sans-serif; font-size: 38px; color: #9a9c9a; text-align: center; overflow-wrap: break-word; text-shadow: 3px 3px 3px white;}
</style>
<style>

.profile .table-section .heading {
color: white;
}
</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 163 comments ( View all | Add Comment )

☆Gl0wSt1ck☆	1784239183 Using! Added a few personal touches though! :))) Report Comment
iiisj	1783249125 usinh Report Comment
soulagent	1783110677 using!! Report Comment
⁺‧₊˚ ཐི⋆𝔐𝔞𝔳𝔦𝔰⋆ཋྀ ˚₊‧⁺	1782077499 hey guys like nothing about this is working for me 3 Report Comment
Clicky910 !!	1781153551 using! Report Comment
Koileespwn	1778000067 using1!1!!;DD Report Comment
Odysseus	1771832041 Using! Looks so cool :) Report Comment
⸸ rev ⸸	1771445078 using! <3 Report Comment
Kakau	1770118721 Using!! Report Comment
⛧мαтѕυ	1768099815 using! ty Report Comment
mikey melancholy ⚰︎	1767999524 ill b using !! :^) Report Comment
nocturnalreptile	1767707695 using Report Comment
Triz 𓆩ꨄ︎𓆪	1767495215 using! Report Comment
JustBleph	1767388549 using! Report Comment
Hayden X﹏X	1767068689 Using! Report Comment
lucy.is.dead! ¡(★✦)!	1767068227 usinnggg Report Comment
Minttu	1764111265 using Report Comment
Damian website	1762110600 using :3 Report Comment
calebe	1760405281 using Report Comment
K0T3Y!?	1759373302 using Report Comment