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

toxicawaste	1780310814 will be using thanks! Report Comment
「 gray 」 ‏‏	1778871398 is there as way to remove the animation? Report Comment
matt	1778722774 using Report Comment
༺ ωєη∂у ༻	1777611399 using thank u Report Comment
Destructive Dylan ♫⃠	1777424183 using Report Comment
arcueidbrunestudbiggestfan	1776529330 Using!! Report Comment
arcueidbrunestudbiggestfan	1776529328 Using!! Report Comment
li ﹅ --- WIP	1776517020 this is sooo perfect, using :pp Report Comment
mymy⋆˚࿔	1775493070 using!!xx :1 Report Comment
Luxten	1775362266 using Report Comment
Zn2Fe(PO4)2•4H2O⊹ ࣪ ˖	1773746974 usingg Report Comment
chlebak	1773563304 using!!!!!!!!!! Report Comment
𓏲🍡⁎⁺˳˓. 𝒮𝒶𝓂𝒾 . 𓄹 ࣪˖ !!⁺◟	1773547645 Using uwu Report Comment
Norton	1773303756 using Report Comment
( ˶ˆᗜˆ˵ )	1771514460 using. bless u Report Comment
Finn	1771265824 Awesome Report Comment
nyokara ^_^	1770687932 ur a god Report Comment
🦇 ALIEN 击	1770445809 using :3 ty Report Comment
Harry Warden	1770317692 Using Report Comment
robb ⚔️	1769820615 will be using this, thanks! looks so cool. Report Comment