little basic black layout I have :3

basic black layout :3

so creds to : I forgot and I feel bad :((

but I added a banner just change the URL link to your own banner 

here's the layout code :

<style>

html {

filter: grayscale(100%);

}

</style>

<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;

}

.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: "actual things abt me";

    --topic2: "music genres";

    --topic3: "media";

    --topic4: "movies";

    --topic5: "tv shows";

    --topic6: "video games";

 }

.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;

}

<!-- banner replace url with your own banner -->

main:before {

width: 100%;

height: 200px;

display: block;

content: "";

background-image: url('https://i.pinimg.com/736x/9f/57/2d/9f572d5d78e59810d595a99d2f694399.jpg');

background-position: center center;

background-size: cover;

}

@media only screen and (max-width: 600px) {

main:before{

height: 200px;

}

}

</style>