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

Jtenyqrtr_1	1745489112 using Report Comment
Lem	1744860829 Using Report Comment
zombieXD	1743905742 using Report Comment
.	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
Onatic	1737512216 this is peak so im using Report Comment
Biggs7904	1736524217 using! Report Comment
strider	1734754798 usinggg Report Comment
Unkl3Gr4nk	1731381583 using!!! Report Comment
iPodsRlifeXOXO	1723554460 using! Report Comment
mikey	1717946046 usinggg Report Comment
evi	1714449383 usingg ! Report Comment
Shake	1713491098 using Report Comment
johnnie	1710467200 using!!! thuw iw epic Report Comment
FENG	1710079933 using Report Comment
Teeth	1709048449 Usin' (*´∇｀)ﾉ Report Comment