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 24 comments ( View all | Add 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
HYDE	1705466478 <33333 Report Comment