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

DarlingNyoka	1749796979 Usinggggg Report Comment
Simon	1749509276 Using Report Comment
leia	1749379036 using :D Report Comment
EDD_BONES	1749102732 usingg ^_^ Report Comment
maddiisnnn	1748573527 Thank you so much! Using! ദ്ദി(｡•̀ ,<)~✩‧₊ Report Comment
sweetenerstealer	1748024286 using! Report Comment
Eleoceanora	1746741315 using Report Comment
Mimi	1746377030 usinggg Report Comment
𝖏ü𝖗𝖌𝖊𝖓	1745430236 usinggg Report Comment
Antares Dødsvart	1745242722 using the background tysmm=)) Report Comment
Mandy	1744152465 usandoooo <3 Report Comment
emily	1742122977 using hehe Report Comment
Sigrid Staal Grønbech	1741465731 Usinggggggggg Report Comment
BEMSAisa	1741152321 usando! Report Comment
zee	1741120497 using Report Comment
Aroyx	1741096908 using Report Comment
Jackrabbit	1740797199 Using <3 Report Comment
saya 🦠	1740676632 using Report Comment
nouf	1739957944 using Report Comment
friki cachondo :$	1739844305 usinnnggg Report Comment