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 nat ౨ৎ (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 25 comments ( View all | Add 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
Teeth	1709048447 Usin' (*´∇｀)ﾉ Report Comment
TERKENO	1706476170 using tysm Report Comment
Mitsuba	1706141453 lo voy usando Report Comment
livv	1705875695 usingg Report Comment
ghostsbbg_247	1705802552 using ( * w*)b Report Comment
fran ୭ ˚. !!	1705706999 using!!! Report Comment
Zuchini	1705704358 using <3 Report Comment
rven	1705640358 Using it, just what I was looking for. Thank you!!! Report Comment
pookiebooger	1705634150 using !!!! Report Comment