idk man it's a green layout

Tags: green, light, layout

Description:

a bit more complex than my last layout, wasn't gonna release it cuz the code's messy but i like it too much not to
custom interests, animated pfp, custom online gif and custom scrollbar

credit isn't necessary, just don't claim as your own

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by johnny (https://layouts.spacehey.com/layout?id=93304) -->

@font-face {
src: url(https://dl.dropbox.com/scl/fi/2o9jsm2m2eqgb7j47j1n5/MS-Sans-Serif.ttf?rlkey=dne9omazv21w5gosune5bhoja&dl=0);
font-family: pixel;
}

.container {
margin: 10px auto;
width: 760px;
}

body {
font-family: pixel;
}

p {
font-size: 105%;
}

.profile h1 {
position: relative;
bottom: -.45em;
font-size: 200%;
}

.profile h1::first-letter{
color: #86a63c;
font-size: 130%;
text-transform: uppercase;
text-shadow: 0 2px #000, 0 -2px #000, -2px 0 #000, 2px 0 #000;
margin-right: 2.5px;
}

h2, h3, h4 {
font-size: 125%;
}

a {
color: #86a63c;
transition: .2s;
}

a:hover {
color: #86a63c;
font-size: 110%;
text-transform: uppercase;
text-decoration: none;
}

nav .top {
background: #000;
padding: 10px;
box-shadow: inset 0 0 2px .5px rgb(255,255,255);
border: 1.5px grey solid;
border-radius: 5.5px;
margin-bottom: .3em;
}

nav .links {
padding: 5px 13px;
background: url(https://images.unsplash.com/photo-1614200224807-3c89f0726861?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) center;
background-size: 810px;
box-shadow: inset 0 0 2px .5px rgb(255,255,255);
border: 1.5px grey solid;
border-radius: 5.5px;
margin-bottom: .8em;
}

nav .links a, nav .top, footer .links a {
text-transform: lowercase;
text-shadow: none;
font-size: 110%;
}

nav .links a:hover, nav .top a:hover {
color: #fff;
text-decoration: none;
text-transform: uppercase;
}

footer .links a:hover {
text-transform: uppercase;
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
content:"";
margin-right: 3px;
margin-left: 3px;
}

main {
box-shadow: inset 0 0 1px .5px rgb(0,0,0,.3);
border: 1.5px grey solid;
border-radius: 5.5px;
padding: 0 8px;
}

.profile .contact, .profile .url-info, .profile .table-section, .profile .blurbs, .profile .friends {
border: 1.5px grey solid;
border-radius: 5.5px;
}

.profile .contact .heading, .profile .table-section .heading, .profile .blurbs .heading, .profile .friends .heading, .url-info {
padding: 4px 9px;
background: url(https://images.unsplash.com/photo-1614200224807-3c89f0726861?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) center;
background-size: 810px;
text-transform: lowercase;
font-size: 110%;
color: #fff;
box-shadow: inset 0 0 2px .5px rgb(255,255,255);
border-radius: 5.5px 5.5px 0 0;
border-bottom: 1.5px grey solid;
}

.profile .blurbs .section h4 {
text-transform: lowercase;
color: #000;
font-size: 130%;
}

.details-table td:first-child, .comments-table td:first-child {
box-shadow: inset 0 0 2px .5px rgb(255,255,255);
border: 1.5px grey solid;
border-radius: 5.5px;
padding: 2px 4px;
background: url(https://images.unsplash.com/photo-1614200224807-3c89f0726861?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) center;
background-size: 810px;
}

main .right .profile-info {
box-shadow: inset 0 0 2px .5px rgb(255,255,255);
border: 1.5px grey solid;
border-radius: 5.5px;
padding: 2px 4px;
background: url(https://images.unsplash.com/photo-1614200224807-3c89f0726861?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) center;
background-size: 810px;
}

.comments-table td:first-child a, .details-table td:first-child a, main .right .profile-info a {
color: #fff;
}

main .right .profile-info a {
text-transform: lowercase;
}

main .right .profile-info a:hover {
text-transform: uppercase;
}

.count {
color: #86a63c;
}

.friends-grid {
display: flex;
max-width: 425px;
overflow-x: auto;
}

.friends {
position: relative;
top: -.8em;
}

#comments.friends {
margin-top: .8em;
}

.comments-table td, .details-table td {
background: #fff;
padding: 6px;
}

.friends .friends-grid .person p {
position: relative;
top: .4em;
color: #000;
}

.comment-replies {
padding-right: 4px;
padding-left: 4px;
border-top: 1.5px grey solid;
}

.comments-table td:first-child a {
position: relative;
top: .6em;
font-size: 113%;
}

.comments-table td:first-child img:not(.icon) {
position: relative;
top: -5px;
width: 100px;
height: 100px;
}


/* animated pfp */

.general-about .profile-pic img {
width: 140px;
height: 140px;
border: 1.5px #000 solid;
border-radius: 50%;
animation: roll 2s infinite ease;
}

@keyframes roll {
0% { transform: rotate(4deg); }
50% { transform: rotate(-8deg); }
100% { transform: rotate(4deg); }
}

/* end of pfp */


.friends .heading a, .url-info a {
color: #fff;
transition: .2s;
}

.friends .heading a:hover {
color: #fff;
font-size: 87%;
}

.profile .friends .person img:not(.icon), .comments-table td:first-child img:not(.icon) {
border: 1.5px #000 solid;
padding: 2px;
border-radius: 50%;
background: #fff;
transition: .2s;
}

.profile .friends .person img:not(.icon):hover, .comments-table td:first-child img:not(.icon):hover {
animation: roll2 3s infinite linear;
}

@keyframes roll2 {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg); }
}

.general-about .details {
position: relative;
top: 5px;
}


/* custom online */

.online {
visibility: hidden;
}

.online img {
content: url(http://www.myspacegens.com/images/online_now/onlinenow.gif);
animation-name: none;
visibility: visible;
}

/* end of online */


/* custom scrollbar */

::-webkit-scrollbar {
width: 8px;
height: 8px;
}

::-webkit-scrollbar-track {
background: #e3e3e3;
border-radius: 5px;
}

::-webkit-scrollbar-thumb {
background: #86a63c;
border-radius: 5px;
}

/* scroll end */


/* custom interests */

:root {
--topic1: "general";
--topic2: "music";
--topic3: "media";
--topic4: "books";
--topic5: "pet(s)";
--topic6: "characters";
 }

.table-section:not(:last-child) .details-table tr td:first-child p{
color:transparent !important;
text-shadow: none !important;
letter-spacing: -100px;
}

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after {
    content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after {
    content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after {
    content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after {
    content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after {
    content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after {
    content: var(--topic6);
}
.details-table tr td:first-child p::after{
   color: var(--links) !important;
   letter-spacing: normal !important;
   text-shadow: 2px 2px #fff !important; /* CHANGE COLOR OF INTEREST LABELS HERE */
   filter: brightness(95%) !important;
}

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

batsu 🍔𓋹	1728753212 nvm it doesnt work :< Report Comment
batsu 🍔𓋹	1728753073 possibly using!! Report Comment
angry bosnian dude	1718608092 It doesn’t work <:( Report Comment
Pink_flower_666	1715446107 No funciona Report Comment
lesboguy	1708629624 using, yay :) Report Comment
Sam	1707393985 Using :) Report Comment
ev	1706870507 using! :D Report Comment
robin!.*☆	1705719087 using :3 Report Comment
skibiditoiletking69	1705498303 using!! Report Comment
Cass	1704947463 Using ty! Report Comment
rightshift	1704775595 using Report Comment
ANGEL	1704468215 Using Report Comment
Gr4mshy	1704381975 Using Report Comment
acinonyx	1704020528 using !!!!!!1!1 :3 Report Comment