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 145 comments ( View all | Add 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
⦻Leo meow꩜	1755037125 USSINGGG Report Comment
M1cha	1753862721 using Report Comment
Thea	1753639282 using Report Comment
rei	1752608260 usingg Report Comment
Darcey	1751850998 using Report Comment
☆Caroline☆	1750963863 Usingg Report Comment
Saphirr :3	1750740410 using Report Comment
Atsu <3	1750396822 usingg Report Comment
DarlingNyoka	1749796979 Usinggggg Report Comment
Simon	1749509276 Using Report Comment
leia	1749379036 using :D Report Comment
EDD_BONES	1749102732 usingg ^_^ Report Comment