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

Pest. (RP ACCOUNT)	1759967661 Using. Report Comment
XxLucyLacexX	1759846682 using! Report Comment
Ryxx	1758662316 USINGGGG (THANKSSS!!) Report Comment
zera	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
lucythedarkwings	1755788149 using Report Comment
⟢ . zevin ´ཀ`	1755759918 using !!! Report Comment
♱	1755531141 might use Report Comment
Kimi	1755450507 usingg! Report Comment
Aeris ! ★	1755276266 using!! Report Comment
adibavvale	1754867474 using Report Comment
Navi	1754861885 Using! Report Comment
xX_evphoryyyc_Xx	1754850659 what is the line of code for the tilted icons? I wanted to implement only it Report Comment
W3ird0o	1753958659 using Report Comment
Ace McNut	1753312799 Using Report Comment
NotSoRandom	1753288423 using :3 Report Comment