dark layout w/ a hint of gold typa thing

Tags: black, gold, dark, black, simple

Description:

sorry that i wasn't able to make any sort of layouts recently, got busy in school and i go outside too. but since i have no school tomorrow then i could probably create more layouts! feel free to suggest me ideas please. Comment when using and credit me when using this as base.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by tilapia (https://layouts.spacehey.com/layout?id=26484) -->

<style>
    body{
        background-color: black;
        background-attachment: fixed;
        background-image: url('https://wallpaper-mania.com/wp-content/uploads/2018/09/High_resolution_wallpaper_background_ID_77700439824.jpg');
        background-size: 1000px;
        
        
    }
    MAIN{
        background-color: transparent;
    }
    main .left{
        background: linear-gradient(to top, black ,#171717, #25200e);
        border-top: solid #373014 5px;
        box-shadow: 0px 0px 20px #655825;
        border-radius: 20px;
    }
    main .right{
        background-color: transparent;
        border-radius: 20px;
    }
    .profile .blurbs .heading{
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        background: linear-gradient(to bottom left, black ,#25200e, black);
        border-top: ridge #25200e 8px;
        border-bottom: ridge black 8px;
        text-align: center;
        color: white;
        margin-left: 20px;
        width: 700px;
        transform: rotate(3deg);
        box-shadow: 0px 0px 10px white;
    }

</style>

<style>
    .profile h1{
        text-align: center;
        text-shadow: 0px 0px 15px white ;
        font-size: 50px;
        color: white;
        
    }
    
    .profile .friends .person img:not(.icon){
        filter: brightness(130%) contrast(140%) grayscale(80%);
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
           animation: blink .1s infinite;
           box-shadow: 0px 0px 15px white;
           border: solid white 1px;
    }
@keyframes blink {
  0% {
    opacity: 90%;
       
    }
    
    
</style>

<style>
    .profile .friends .heading{
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        background: linear-gradient(to bottom left, black ,#25200e, black);
        border-top: ridge #25200e 8px;
        border-bottom: ridge black 8px;
        text-align: center;
        color: white;
        margin-left: 20px;
        width: 700px;
        box-shadow: 0px 0px 10px white;
    }
    
</style>

<style>
    .profile .friends .heading{
            
    animation-name: floating;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 5px); }
    100%   { transform: translate(0, -0px); }   
    
}
        .profile .blurbs .heading h4{
    animation: blink .1s infinite;
    }
@keyframes blink {
  0% {
    opacity: 80%;
        
        
    }
    
</style>

<style>
    .container{
        width: 1200px;
    }
    
</style>

<style>
    @import url('https://fonts.googleapis.com/css2?family=Gruppo&display=swap');
a{
    font-family: 'Gruppo', cursive;
    font-size: 15px;
    color: white;}

p{
  font-family: 'Gruppo', cursive;
  font-size: 15px;
  color: white;
}
h1,h2,h3,h4,h5{
  font-family: 'Gruppo', cursive;
  font-size: 20px;  
  color: white;
  text-shadow: 0px 0px 15px white;}
  
  a{
        
    color: white;
  
  
    
</style>
<style>
    main .left{
        animation-name: floating;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 5px); }
    100%   { transform: translate(0, -0px); }   
    
}
    }
    
    
</style>


<style>
    .blurbs .heading
    { 
    animation-name: floating;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out
    margin-left: 30px;
    margin-top: 5px;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 5px); }
    100%   { transform: translate(0, -0px); }   
    
}
        .profile .blurbs .heading h4{
    animation: blink .1s infinite;
    }
@keyframes blink {
  0% {
    opacity: 80%;
    
</style>

<style>
    .profile h1
    
    {
    animation: blink .1s infinite;
    }
@keyframes blink {
  0% {
    opacity: 70%;


    }
    
    
</style>

<style>
    .profile .blurbs .section h4{
        color: white;
        text-align: center;
        
    }
    .general-about .profile-pic img{
        border-top-left-radius: 20px;
        border-bottom-right-radius: 20px;
        border: solid white 1px;
        box-shadow: 0px 0px 15px white;
        filter: brightness(120%) contrast(90%) grayscale(80%);
        margin-top: 10px;
        margin-left: 15px;
    }
    
</style>

<style>
    img:hover{
          transform: scale(1.1); 
          transition: transform .2s; 
        
    }
    
    nav .top{
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: ridge gray 3px;
        background: linear-gradient(to bottom left, black ,#25200e, black);
        margin-bottom: 20px;
        box-shadow: 0px 0px 10px white;
        
    }
    
    nav .links{
        background: linear-gradient(to bottom right, black ,#25200e, black);
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: ridge gray 3px;
        margin-bottom: 20px;
        box-shadow: 0px 0px 10px white;
        text-align: center;
        font-size: 15px;
        
    }
     a:hover{
        
    color: gray;
   transform: scale(1);
  transition: all 0.3s ease-in-out 0.1s;
         
     }
    .links a:hover{

    color: white !important;
    background-color: black;
    text-shadow: 0px 0px 10px white;}
    
    .profile .friends .inner{
        text-align: center;
        margin-top: 20px;
        margin-left: 50px;
    }
    
    .count{
        color: white;
    }
    
    [id='q']{
        background-color: black;
        box-shadow: 0px 0px 10px gray;
        border: none;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        background: linear-gradient(to top, black ,#171717, #25200e);
        border: solid black 2px;
    }
    
    
.logo {
   content: url(https://media.discordapp.net/attachments/1064462871947378729/1075953717519589426/spaceheylogo_1.png?width=180&height=48);
   size: 20px;
   filter: brightness(50%) grayscale(30%);
}
.profile .contact{
    border: none;
}

.profile .contact .heading{
    border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        background: linear-gradient(to bottom left, black ,#25200e, black);
        border-top: ridge #25200e 8px;
        border-bottom: ridge black 8px;
        box-shadow: 0px 0px 10px white;
}

.icon{
    content:url(https://www.freeiconspng.com/thumbs/orb-png/orb-png-11.png);
    filter: grayscale(100%) brightness(50%);
}

.profile .url-info{
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    background: linear-gradient(to bottom left, black ,#25200e, black);
        border-top: ridge #25200e 8px;
        border-bottom: ridge black 8px;
        border-left: none;
        border-right: solid #25200e;
        box-shadow: 0px 0px 10px white;
        
}

.profile .table-section .heading{
    
    background: linear-gradient(to bottom left, black ,#25200e, black);
        border-top: ridge #25200e 8px;
        border-bottom: ridge black 8px;
        border-left: none;
        border-right: solid #25200e;
        box-shadow: 0px 0px 10px white;
        border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-bottom: 10px;
    
}

.profile .table-section{
    border: none;
    margin-bottom: 20px;
}

.profile .mood{
    margin-bottom: 15px;
    margin-top: 15px;
}

.general-about{
    background: linear-gradient(to bottom left, black ,#25200e, black);
        border-top: ridge #25200e 8px;
        border-bottom: ridge black 8px;
        border-left: none;
        border-right: solid #25200e;
        box-shadow: 0px 0px 10px white;
        border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-bottom: 10px;
    height: 200px;
    
}

.details-table td {
    background-color: black;
    border: ;
}

table.details-table{
    
    background-color: black;
}

.comments-table td{
    background-color: transparent;
    border: none;
    
}
table.comments-table{
    border: none;
    
}
.comments-table td *{
    border-radius: 20px;
    text-align: center;
    
}

.profile .friends .person p{
    color: white;
}
</style>

<style>
    :root {
    --light-orange: ;
       --even-lighter-blue: black;
</style>

<style>
main:before {
width: ;
height: 150px;
display: block;
content: "";
background-image: url('https://media.sketchfab.com/models/687e0c65c4654d89b1cd6d17eb428aee/thumbnails/227cc852460b4e91831ec36837d1c0c7/b6d3602bf9114405984d1ca740cbff4c.jpeg');
background-position: center;
background-size: 950px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px ;
margin-bottom: 20px;
margin-top: 10px;
border: ridge gray 3px;
box-shadow: 0px 0px 10px white;
filter: brightness(130%) contrast(140%) grayscale(80%);
}
@media only screen and (max-width: 600px) {
main:before{
height: 200px;

    
    
}

</style>

<style>
    main{
    animation-name: floating;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out
    margin-left: 30px;
    margin-top: 5px;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 5px); }
    100%   { transform: translate(0, -0px); }   
    
}
    
</style>

<style>

/* LISTENING TO BULLETS ON REPEAT WHILE DOIN' ALL THIS SHIT. FEEL FREE TO REMOVE THIS SMALL MESSAGE OF MINE. */
body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: black;
z-index: 2;
background-size: 100% 2px, 3px 100%;
opacity: 30%;
pointer-events: none;
}
</style>

<style>
  .profile .mood:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 428px;
  background-image: url(https://i.pinimg.com/564x/e4/55/93/e455937d73130101dc5c42f7a1b8377c.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  align-content: center;
  border-radius: 10px;
  border: ridge white 3px;
  margin-left: 13px;
  margin-top: 10px;
  margin-bottom: 10px;
  box-shadow: 0px 0px 10px white;
  filter: sepia(100%) hue-rotate(19deg) saturate(50%) brightness(40%) contrast(150%);
  
</style>

<style>* {cursor: url(https://cur.cursors-4u.net/others/oth-7/oth692.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/11/25/dimension-pointer.html" target="_blank" title="Dimension Pointer"><img src="https://cur.cursors-4u.net/cursor.png" alt="Dimension Pointer" style="position:absolute; top: 0px; right: 0px;"/></a>


<style>
    .profile .profile-info {
	background: linear-gradient(to bottom left, black ,#25200e, black);
	border: ridge gray 2px;
	border-top-right-radius: 20px;
	border-bottom-left-radius: 20px;
	text-align: center;
	box-shadow: 0px 0px 10px white;
}
    
    
</style>
<style>
.links .special a:link, .links .special a:visited  {
  color: white;
}

.links .special a:hover {
  color: gray;
}
</style>
<style>
/* REMOVE THIS IF YOU WANT YOUR IMAGE NOT TO HAVE THE SAME COLOUR AS THE WHOLE LAYOUT. */
    img{
        filter: sepia(100%) hue-rotate(19deg) saturate(50%) brightness(80%) contrast(150%);
    }
    
</style>
<style>

.online{content:url("https://i8.glitter-graphics.org/pub/769/769008u5kw9iin2y.gif");
     filter: sepia(100%) hue-rotate(19deg) saturate(50%) brightness(80%) contrast(150%);
height: 30px;
    
    
    
}

</style>

<style>
             ::-webkit-scrollbar {
    width: 3px;
    height: 10px;
    }

    ::-webkit-scrollbar-thumb {
    background: black
    }

    ::-webkit-scrollbar-track {
    background: linear-gradient(to bottom left, black ,#25200e, black);
    }
    
    footer{
        background-color: transparent;
</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 122 comments ( View all | Add Comment )

Athoth08	1715847582 Using Report Comment
Mr.Sweet:□	1715797630 Using! Report Comment
STECL00000	1715533330 юзаю Report Comment
lay	1715351042 USING! Report Comment
JEFF / DAMIEN !	1714844721 tryin this out Report Comment
nightandlove	1713742412 tryin this outt ^_^ Report Comment
proxyi	1713634142 using Report Comment
nonamo	1713067918 tryhing this 1 out Report Comment
val	1712967859 usando Report Comment
☆ hdi ☆	1712850646 using Report Comment
Heavener	1712176779 Absolutely using, exactly what I was looking for Report Comment
Mikannn	1711985893 Using!! Report Comment
lucius / jon	1711836784 using ^_^ Report Comment
blliu3636	1711310680 using Report Comment
M4RESR41LR0AD	1711232177 using !! Report Comment
charb	1710558753 usghin Report Comment
@ Victor.	1710381484 USING!!!! Report Comment
mercy4atlas	1710219249 usinggg !1 Report Comment
⋆aiden	1710205841 using as base :p Report Comment
☆ALYX☆	1710188791 using :) Report Comment