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

RaccoonPope	1763793292 using :P Report Comment
sillysillyariel	1763609680 using! Report Comment
?Knëwt_09	1762891184 using!! Report Comment
ZenD0ve	1762889187 Using Report Comment
Kenny	1762845471 Using Report Comment
shehana ⋆˙⟡	1762671759 Usinggg Report Comment
m3rcy33	1762607248 using! Report Comment
hespiec2007	1761633128 usinggg Report Comment
cookie!!	1761296623 usingg yuh Report Comment
Syd	1760391888 using tysm :) Report Comment
codblackops2 ⌐╦╾	1760115752 usingg Report Comment
Pest. (RP ACCOUNT)	1759967661 Using. Report Comment
XxLucyLacexX	1759846682 using! Report Comment
Ryxx	1758662316 USINGGGG (THANKSSS!!) Report Comment
дима	1758561568 using ty Report Comment
sullenstoat	1757725267 using Report Comment
englisch ist mein lieblingsfach	1757403988 Using Report Comment
Molly	1756880590 Using :) Report Comment
Finnley	1756410855 using Report Comment
☆☆HARLZZ☆☆	1756251535 usinggg!!!! Report Comment