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 vince (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 239 comments ( View all | Add 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
Cyph3rAth	1752586773 using! Report Comment
fallen angel☆	1752435637 using it but for testing Report Comment
ax	1752348113 using Report Comment
7xrtsa	1752148871 using Report Comment
ashe	1751517252 using!!! Report Comment
jay	1751495421 using:P Report Comment
vani	1751370774 using Report Comment
...★•MIDNIGHT•★...	1750893809 Using!!!! Report Comment
☆ ace ☆	1750603842 using Report Comment