simple black glossy layout

Tags: dark, black, simple, glossy, gloss

Description:

self explanatory, it's super simple. it has a floating animation and custom interest titles. 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=93010) -->

<style>
body {
background: #000;
font-family: arial;
}

h1, h2, h3, h4, h5 {
color: #fff !important;
}

p {
color: #fff;
}

.container {
margin: 8px auto;
animation: floating 3s infinite ease-in-out;
}

@keyframes floating {
0% { transform: translate(0,  0px); }
50%  { transform: translate(0, 10px); }
100%   { transform: translate(0, -0px); }    
}

a {
color: #fff;
transition: .2s;
}

a:hover {
color: #fff;
font-size: 105%;
text-transform: uppercase;
text-decoration: none;
cursor: cell;
}

.count {
color: #fff;
font-size: 110%;
}

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

nav .top .right a {
text-shadow: none;
}

nav {
margin: auto;
width: 760px !important;
}

nav .top {
background: linear-gradient(180deg, rgb(200,200,200) 0%, rgb(0,0,0) 20%);
box-shadow: inset 0 0 2px 1px rgb(200,200,200);
border: 1.5px #000 solid;
filter: drop-shadow(0 0 1px #fff);
padding: 12px 8px;
border-radius: 5px;
}

nav .links {
margin-top: .6em;
margin-bottom: 1em;
background: linear-gradient(180deg, rgb(200,200,200) 0%, rgb(0,0,0) 24%);
box-shadow: inset 0 0 2px 1px rgb(200,200,200);
border: 1.5px #000 solid;
filter: drop-shadow(0 0 1px #fff);
padding: 6px 8px;
border-radius: 5px;
}

main {
margin: auto;
width: 760px;
padding: 8px;
background: linear-gradient(180deg, rgb(200,200,200) 0%, rgb(0,0,0) .6%);
box-shadow: inset 0 0 2px 1px rgb(200,200,200);
border: 1.5px #000 solid;
filter: drop-shadow(0 0 1px #fff);
border-radius: 5px;
}

footer {
background: none;
}

.general-about .profile-pic img {
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
border: 2px solid #000;
filter: drop-shadow(0 0 3px #fff);
}

.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
border: none;
}

.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading, .profile .blurbs .heading, .profile .friends .heading, .url-info {
background: linear-gradient(180deg, rgb(200,200,200) 0%, rgb(0,0,0) 30%);
box-shadow: inset 0 0 2px 1px rgb(200,200,200);
border: 1.5px #000 solid;
filter: drop-shadow(0 0 1px #fff);
border-radius: 5px;
padding: 5px 10px;
}

.details-table td:first-child, .comments-table td:first-child {
background: linear-gradient(180deg, rgb(200,200,200) 0%, rgb(0,0,0) 3%);
box-shadow: inset 0 0 2px 1px rgb(200,200,200);
border: 1.5px #000 solid;
filter: drop-shadow(0 0 1px #fff);
border-radius: 5px;
}

.comments-table td:first-child img:not(.icon) {
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
border: 2px solid #000;
filter: drop-shadow(0 0 3px #fff);
}

.profile .friends .person img {
display: inline-block;
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
border: 2px solid #000;
filter: drop-shadow(0 0 3px #fff);
}

.profile .friends .person img:not(.icon) {
transition: .4s;
}

.profile .friends .person img:not(.icon):hover {
transform: scale(.9) rotate(10deg);
transform-origin: 50% 50%;
}

.details-table td, .comments-table td, table.comments-table {
background: #000;
border: none;
}

.details-table td {
  color: #fff;
}

.profile .friends .person p, .comments-table td:first-child p {
color: #fff;
}

.comment-replies {
border: none;
border-top: 1px #fff solid;
margin-top: 5px;
padding-left: 3px;
padding-right: 3px;
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{
content: " × ";
color: #fff;
}

footer .links a, footer .copyright a {
text-shadow: none;
color: #fff;
}

footer .links a, nav .links a {
text-transform: lowercase;
}

footer .links a:hover {
font-size: 105%;
text-transform: uppercase;
text-decoration: none;
}

button {
background: linear-gradient(180deg, rgb(200,200,200) 0%, rgb(0,0,0) 25%);
border: 1px #fff solid;
border-radius: 3px;
color: #fff;
padding: 2px 6px;
text-transform: lowercase;
}

button:hover {
text-transform: uppercase;
cursor: cell;
}

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

::-webkit-scrollbar-track {
background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
background: #888;
}

::-webkit-scrollbar-thumb:hover {
background: #555;
}

/* custom interest titles */

: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;
}
</style>

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

RANCID >_< !	1714537021 usingg! Report Comment
Dick son	1713142731 using Report Comment
isaiah	1712939548 lov this sm... using Report Comment
♪ COSMO/OREL ♪	1712841326 using Report Comment
numanuma64	1712511575 using! but changing it a lil bit Report Comment
◠◠　　　e﹒　Niko ㅤֺㅤOte 　　ৎㅤㅤֺㅤ	1712445728 using Report Comment
SafeInSanity	1712017210 Cool .. love it! 👍 Report Comment thanks! by jono; 1712089044; Report
Stan	1711753318 using! Is there a way to get rid of the border around the interest tabs (the bits that say media, tv, books, ect)? Report Comment here's the code i did cuz i'm bad at explaining: .details-table td:first-child { border: 0!important; background: #000; } by jono; 1712014438; Report Thank you! by Stan; 1712027542; Report
sonico🍙	1711508602 using :3🍙 Report Comment
L3n	1711221074 Using!! Report Comment
- [Silver.]★	1710990606 ussing!! Report Comment
frogbert	1710273558 using ! Report Comment
REMAKIJG PAGE!!!! HEHE	1710090201 using!!! Report Comment
Wade	1709799559 Using. Report Comment
ki	1709243982 usingg!! Report Comment
s0urp4tch1e_	1708893267 using Report Comment
br4in3at3r	1708781387 using Report Comment
rem	1708729520 using :D Report Comment
ANDRE \| he / him	1708639016 usingg meepmeep Report Comment
yve	1708525661 using!!! Report Comment