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

soph ₊˚ʚ 💙 ₊˚✧ ﾟ	1773030466 using!! ^^ Report Comment
MILO Xd	1771832041 Using! Looks so cool :) Report Comment
⸸ rev ⸸	1771445078 using! <3 Report Comment
Kakau	1770118721 Using!! Report Comment
⛧мαтѕυ	1768099815 using! ty Report Comment
𝐤𝐢𝐬𝐬𝐢𝐧𝐠 𝐢𝐧 𝐜𝐨𝐟𝐟𝐢𝐧𝐬 ⚰︎	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
Will	1759108136 using Report Comment
Cymric?Rayet?	1758960586 Using Report Comment
[̲̅a][̲̅v][̲̅y]	1758212802 can I use this pls??? Report Comment
✟𝔯𝔞𝔤𝔦𝔠	1757369926 this is rlly good, i was just wondering if u knew a way to change the spinning vinyl image. do i just copy and paste an image url in src? Report Comment nvm, i figured it out lol. using :) by ✟𝔯𝔞𝔤𝔦𝔠; 1757370193; Report what'd you do! pls lmk lol by Fleshcritter; 1758315937; Report lmk too!! by 𝓸𝓵𝓲𝔀𝓲𝓪; 1759159084; Report all u have to do is look in the code its almost like reading a book, i see im a bit late but to change vinyl look for code with title or word "vinyl" in it in your profile lay out if i can figure it out myself u can.. i believe in u. u can really take any pre made layout and customize it to be your own. just be patient and look through the code in the inspect element (look up how to do that if u don"t know how to) they main tip i can say to really customize your account is to just look at the code your put on your profile and just go from there.. its simply just trial and error by ✟𝔯𝔞𝔤𝔦𝔠; 1759188799; Report
αυƚυɱɳ ⋆.ೃ࿔*:･	1756336344 using Report Comment