therealmizuki🇻🇪🕊️'s profile picture

Published by

published
updated

Category: Web, HTML, Tech

dark layout x_x

Preview:

The stamp you see besides the profile pic (the online image) is customizable, as well as banner! You can change them to whatever you want!

You can also change the red color from the links and the buttons!

To stop the sliding animation on the navigation bar, DELETE the last part of the code, marked in red.

Code:

<style>

:root{

--online-image: url(''); /* Change the online image here!*/

--banner-image: url(''); /* Change the banner image here!*/

--change-color: #FF0000; /* Set a color for your profile links, buttons, etc! Default is red. */

}

.container{width: auto; margin-top: 4px; padding: 16px;} .profile h1, .details-table td:first-child, nav .top, nav .links li, .edit-info, .comments-table td:first-child, .heading{border: solid 2px #fff!important; padding: 11px!important; background:linear-gradient(180deg, #777 0%, #222 48%, #000 92%)!important; color: #fff!important; box-shadow: 0px 0px 9px #000 inset;} nav .links{background: #0000; padding: 16px 5px;} footer, body{color: #fff; background: #000;} a{color: var(--change-color);} .comments-table td, .comments-table, .details-table td, .details-table{background: #0000; color: white; border: none;} button{background:linear-gradient(180deg, color-mix(in srgb, var(--change-color) 100%, #101010 6%) 0%, color-mix(in srgb, var(--change-color) 100%, #101010 62%) 48%, color-mix(in srgb, var(--change-color) 80%, #000010 100%) 92%)!important; color: #fff!important; padding: 5px 9px; box-shadow: 0px 0px 4px color-mix(in srgb, var(--change-color) 80%, #000010 100%) inset; border: ridge 2px color-mix(in srgb, var(--change-color) 80%, #000010 100%); border-radius: 3px;} #q{background: linear-gradient(180deg, white 0%, #ddd 100%); border: solid 1px #555; border-radius: 3px;}
.profile .contact, .profile .url-info, .profile .table-section{border: none!important;}
nav .links li::after{content: none!important;}
.comments-table td:first-child p{background: linear-gradient(180deg, #000 0%, #333 100%);margin-right: 16px !important;margin-left: 16px !important;padding: 4px;border: solid 1px #fff;text-shadow: 0px 0px 3px #000;border-radius: 5px;color: var(--change-color);}
.comments-table td:first-child img:not(.icon){width: 111px;border: solid 1px #000; box-shadow: 0px 0px 20px #777c;}
.profile-info a, .profile-info p{color: #0000!important; font-size:0%!important;}
.profile-info{background:var(--banner-image); background-size: cover; padding: 90px 0;background-position: center;margin-left: auto;margin-right: auto;width: 80%;}
@media (min-width: 30em){.col.w-40 {width: 33%;}}
main{border: solid 2px #fff!important; padding: 22px!important; background:#000!important; color: #fff!important;}
body{--lighter-blue:#000;}
.logo{filter: drop-shadow(0px 0px 4px #000) filter: drop-shadow(0px 0px 2px #000);}
.online img{content:var(--online-image); animation: none; height: auto!important;}
.online{font-size:0;}

nav .links{min-height: 1.4em;animation: slide 32s linear infinite;animation-play-state: running;-webkit-animation-play-state: running;}
@keyframes slide{0%{transform: translateX(95%);}100%{transform: translateX(-95%);}
nav{overflow: hidden;
white-space: nowrap;}


</style>


4 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )