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

lmk if you run into any problems/need help with smth

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

lesboguy	1708629624 using, yay :) Report Comment
Sam	1707393985 Using :) Report Comment
ev	1706870507 using! :D Report Comment
robin/cole!.*☆	1705719087 using :3 Report Comment
skibiditoiletking69	1705498303 using!! Report Comment
Cass	1704947463 Using ty! Report Comment
LiveLeakPopStar	1704775595 using Report Comment
ANGEL	1704468215 Using Report Comment
Gr4mshy	1704381975 Using Report Comment
𓎟 feli	1704020528 using !!!!!!1!1 :3 Report Comment