2010s green layout

Tags: green, y2k, 2000s, layout, xbox, cyber

Description:

Animation intro at the beginning + autoplay music. Lmk if you use this layout.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by natasza 𝜗𝜚 (https://layouts.spacehey.com/layout?id=95345) -->

<style>
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url('https://media.tenor.com/KsoQXHJ_AVwAAAAd/xbox-xbox360.gif');
	background-size: cover;
	background-repeat: no-repeat;
background-position:center;
	animation: yourAnimation 6s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 


:root {

        --logo-blue: #(17963d);

        --darker-blue: #(color number);

        --lighter-blue: #(color number);

        --even-lighter-blue: #(color number);

        --lightest-blue: #(color number);

        --dark-orange: #(color number);

        --light-orange: #(color number);

        --even-lighter-orange: #(color number);

        --green: #(color number);

    }

body

        {background-image: url(https://files.catbox.moe/uyon5u.jpg); no-repeat fixed; background-size:cover;

}

main {

  background-color: transparent;

  color: white;





/*Interests Scrollbox*/
    .profile .table-section {
        display: block;
        height: 500px;
        width: AUTO;
        overflow-y: scroll;
        font-size: 12px;
        border: dotted 0px!important;
        border-right: none!important
}

/* colors for the table headings on the left */
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
     background-image: linear-gradient(darkgreen, green);
     color: black;
}

/* edit profile / user is your friend */
.profile-info {
    background-color: #ff0099;
    background-image: linear-gradient(ghostwhite, gainsboro, gainsboro, gainsboro);
    border: 3.5px solid rgba(0, 0, 0, );
    border-radius: 6px;
    box-shadow: 0px 0px 14px black;
}

/* colors for table cell background (by default spacehey has a separate color for :first-child) */
.profile .table-section .details-table td {
     background-color: #ff0099;
     background-image: linear-gradient(ghostwhite, gainsboro, gainsboro, gainsboro);
     border: 2px solid darkgrey;
     border-radius: 3px;
     color: black;
}

/* friends comments - friend's name */
.comments-table td:first-child{
    background-image: linear-gradient(green, darkgreen)
}

/*friends comments- comment */
.comments-table td {
    background-image: linear-gradient(ghostwhite, gainsboro, gainsboro, gainsboro);
}

table.comments-table {
   border: 3px solid black;
   border-radius: 6px;
}

/* interests and links */
.profile .table-section {
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border: 3.5px solid rgba(0, 0, 0);
    border-radius: 6px;
    box-shadow: 0px 0px 14px black;
}

/* headings on the right */
.profile .blurbs .heading, .profile .friends .heading {
     background-image: linear-gradient(darkgreen, greenyellow);
     color: black;
}

<style>* {cursor: url(https://cur.cursors-4u.net/holidays/hol-1/hol31.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2005/10/25/hol31.html" target="_blank" title="Zombie Hand"><img src="https://cur.cursors-4u.net/cursor.png" alt="Zombie Hand" style="position:absolute; top: 0px; right: 0px;"/></a>

<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>

<style>
    img{
          filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(60deg) contrast(150%);
    }
</style>

<style>
.online {content:url('https://media.discordapp.net/attachments/1100566960267329586/1189346233173684224/1875472vceo5izu22.gif?ex=659dd3fe&is=658b5efe&hm=4b3e72ece8c9c588a23fb401cc425432cbed3f353294b542221fafdf5a1348b9&'); background-repeat: no-repeat; background-position: -15% 75%; z-index: 2; 
}
</style>

<style>

table.comments-table{
display: block;
height: 400px!important;
overflow-y: scroll;
}

</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/ZPIfhxvKh4E?feature=shared//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">

</iframe>

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

Azzy (⁠≧⁠▽⁠≦⁠)	1760923117 Using! :3 Report Comment
ִֶָ. ..𓂃 Natalia ࣪ ִֶָ🦇་༘࿐	1759190157 Using Report Comment
cal☆	1758727763 using! Report Comment
Storkasaurus	1757213161 usin' Report Comment
Millicent	1756844062 usinggggg Report Comment
foreidie	1754076158 using! Report Comment
emocatluvr	1753402280 using, ty! Report Comment
Roachh	1751491885 usinggg!!! Report Comment
Roachh	1751491879 usinggg!!! Report Comment
deerdoom	1751438983 using Report Comment
pollygone	1748541014 using : ) Report Comment
Jtenyqrtr_1	1745489112 using Report Comment
Lem	1744860829 Using Report Comment
zombieXD	1743905742 using Report Comment
slbstmord	1743458156 usingg Report Comment
Fallon Oney	1743066459 using Report Comment
𖤐⭒๋࣭ ⭑ valentine	1743041662 using Report Comment
carlossolis.http.com	1741161656 using Report Comment
naott	1739835560 this is cool i'll be using it Report Comment
Zephyr	1738597509 using Report Comment