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

ILUVZ0MB1ZZ	1714836064 usingggg<3 although i know nooothing about coding, any help for changing the font? its hard to read 4 me ~_~ Report Comment
Mary	1714668640 using Report Comment
u_lest	1714627143 usando!!! Report Comment
Xx_Saori_xX	1713578078 so cute Report Comment
stumblebum3	1712602995 using!! ty<3 Report Comment
RottenBoy✰	1712295208 using Report Comment
EDEN	1711691075 using <3 thank u for cute code Report Comment
Zpaceboy	1711657104 Using thx!!!! Report Comment
𝔉𝔞𝔫𝔱𝔞𝔰𝔪𝔞	1711562659 using <3 Report Comment
Scott	1711309222 Using Report Comment
Moon_Malice ★	1711242158 using!! Report Comment
¿¡GH0ST?!(o_O)	1711016533 Using Report Comment
girlbandgroupie	1710962091 using Report Comment
Valentino	1710888998 usingg Report Comment
Mr Rob Graves	1710811875 Using Report Comment
Noodle	1710723800 Using! Report Comment
Layto	1710469735 usingg Report Comment
ִ ۫ ✦ ivan ◞ ₊ ✩	1710453795 using !! Report Comment
༺♱𝔍𝔢𝔰𝔰♱ ༻	1710444113 using! Report Comment
Nova	1710294235 Thank you!! Report Comment