Mad Max Layout

Tags: mad max, bela
Description:

If you have any questions, please comment below or go to my blog here.

Image Credits —

⇘ Background: https://i.pinimg.com/564x/c0/ed/e1/c0ede13c38bf8423c538ce734d356a8b.jpg
Preview:

click on the image for a larger preview
Code:

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

<style>
/*==========⚠️==========
* for colors go to https://htmlcolorcodes.com/color-names
* for fonts go to https://fonts.google.com
* for cursors go to https://icons8.com , https://custom-cursor.com , https://www.cursors-4u.com
============⚠️==========*/
a:hover{
    cursor: url('https://img.icons8.com/fluent/30/000000/skull.png'), auto;
}

* {
    cursor: url('https://img.icons8.com/fluent/30/000000/skull.png'), auto; 
}
</style>

<style>
/*importing the font-family */
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap');

</style>

<style>

:root{
    --headers: #ecab0e;
    --text: #ecab0e; 
    --names: black;
    --links: #ecab0e;
    --hover: #c7ad5d;  
    --background_image: url('https://i.pinimg.com/564x/c0/ed/e1/c0ede13c38bf8423c538ce734d356a8b.jpg');
    --font-family: 'Permanent Marker', cursive;
    --curve: 5px;
}
.container{
    width: 580px;
}

body {
    background-image: var(--background_image)!important;
    background-attachment: fixed;
    background-size: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-color: black;
}  
/*change the color to transparent if you want to */
nav .top {
    background-color: rgba(0, 0, 0, 0.0);
    filter:drop-shadow(2px 2px 6px black) !important;
}
nav .links {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: var(--curve);
    margin-bottom: 0px;
    filter:drop-shadow(2px 2px 6px black) !important;
}

nav img.logo{
    filter: brightness(0) saturate(100%) invert(67%) sepia(64%) saturate(619%) hue-rotate(358deg) brightness(95%) contrast(95%) !important;
}

/* color the search bar */

.search-wrapper input[type=text] {
    background-color: transparent !important;
    width: 70px;
    border: 2px solid var(--links) !important;
    color:var(--links) !important;
    border-radius: var(--curve) !important;
}

button{
    border-radius: var(--curve) !important;
    border: 2px solid var(--links) !important;
    font-family: var(--font-family) !important;
    background-color: transparent !important;
    color:var(--links) !important;
}

footer {
    background-color: rgba(0, 0, 0, 0.1);
}

.online {
    content: url(hhttps://dl.glitter-graphics.com/pub/745/745449d9nv163dmu.gif);
}

/* text colors */

h1, h3, h4, h5, .url-info b{color: var(--headers) !important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
a:hover{color: var(--hover) !important;} /* color of links on hover */
p, h2, .count {color: var(--text) !important;} /* color of text */
.friends {color: var(--names) !important;} /* color of names, and friends counter */
.friends a:hover p{color: var(--hover) !important;} /* color of names on hover */
nav label{color: var(--links) !important;} /* color of search */
.section h4 {color:var(--headers)!important;filter:drop-shadow(2px 2px 2px black) !important;} /* aboutme & want2meet headings */
.section{color: var(--text) !important;} /* sometimes <p> is broken by embeds maybe. */

.blurbs .heading {
    display: none;
}

h1{
    font-family: var(--font-family);
    font-size:24px !important;
    filter: drop-shadow(1px 2px 4px black) !important;
}

h2, h3, h4, h5, a, p, nav label, .section{ 
    font-family: 'Caveat Brush', cursive;!important;	
    font-size: 13px!important;
    font-weight: 1;
}

h1, h2, h3, h4, h5, p {
    padding-left:5px !important;
}

hr {
    display:block;
    border:0px;
    height:1px;
    background-image:url('https://media.giphy.com/media/dvlCTmoA1X1cecrWiA/giphy.gif');
}

/*friends and comments box background*/
.heading, .url-info, .friends, .table, .table-section, footer{
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--borders) !important;
    background-color: rgba(0, 0, 0, 0.0); 
}
 /*mood and blog preview box background*/
.mood, .contact, .blog-preview{
    border-radius: var(--curve) !important;
    padding: 1px !important;
    border: var(--borders) !important;
    background-color: rgba(0, 0, 0, 0.6);
}

/* interest table */

td {
    background-color: transparent!important;
}

/* profile area*/

main{
    border-radius: var(--curve) !important;
    background-color:rgba(0, 0, 0, 0.0); !important;
    border: transparent !important;
    outline: none !important;
}

.table-section{
    border:none !important;
    background-color: rgba(0, 0, 0, 0.6);!important;
    border-radius: var(--curve) !important;
}
.heading{
    background-color: rgba(0,0,0,0.0)!important;
    padding-bottom: 2px !important;
}

.profile-info {
    background-image: url('https://coverfiles.alphacoders.com/427/42784.jpg');
    background-size: cover;
    border: 2px solid #ecab0e !important;
}

.profile-pic img{
    outline:none !important;
    border-radius: var(--curve) !important;
    filter: drop-shadow(1px 2px 6px black) !important;
}

.profile .friends .person img{
    transform: skew(0deg, 0deg);
}

.friends-grid img{
    outline:none !important;
    filter: opacity(90%) !important;
    border-radius: var(--curve) !important;
}

.inner img{
    outline:none !important;
    border-radius: var(--curve) !important;
}

.icon{border:none !important;}
.mood{margin-bottom 10px !important;}
.blurbs{margin-top:10px !important;}
.friends{margin-top:-10px !important;}
.profile-info{border-radius: var(--curve) !important;}
.comment-replies{border:5px dotted white;}
.comments-table{border-radius: var(--curve) !important;}
.table-section{padding-bottom:7px !important;}
#comments{margin-top:5px !important;padding-bottom:5px !important}
.details p:last-child{color:var(--links) !important;  filter: brightness(95%);}

.url-info{display:none !important;}


/* if you don't want a scroll box for the comments, delete this .comments-table code */

.comments-table {
    display: block;
    height: 500px!important;
    overflow-y: scroll;
    border: 2px solid #ecab0e !important;
    outline: none !important;
    padding: 10px;
    margin: 1px;
    filter: drop-shadow(2px 2px 6px black) !important;
}

/* this is where the background behind your friend's image appears. */
/* change background-image to background-color if you want */
/* you can change the background-size to cover */

.comments-table td:first-child{

    background-image: url('');
    background-size: cover;
    background-position: center;
}

.comments-table td:first-child img{
    clip-path: inset(16% 20% 15% 10%);
}

/* this is where their comment appears */

.comments-table td{
    background-image: url('');
    background-size: cover;
    background-position: center;
}
</style>

<style>

/* Force scrollbars onto browser window */

/* Scrollbar styles */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    border-radius: var(--curve) 
    width: 2px;
    border: 1px dotted gray;
}
::-webkit-scrollbar-thumb {
    background: #ecab0e; 
    border-radius: var(--curve) 
}
::-webkit-scrollbar-thumb:hover {
    background: black;  
}
</style>
<br/>
<div>
    <img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/dddb8beb-7509-4c66-bc59-5e64fc25d614/d8qvp2y-1982abad-6947-4f6f-a238-46ea1bdc8748.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvZGRkYjhiZWItNzUwOS00YzY2LWJjNTktNWU2NGZjMjVkNjE0XC9kOHF2cDJ5LTE5ODJhYmFkLTY5NDctNGY2Zi1hMjM4LTQ2ZWExYmRjODc0OC5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.PKt3wOZ_1TqQlfwQYn8FWJxoZ9RrDlRQ4nboUfY79Y8" width="300"/>
</div>
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 1 of 1 comments ( View all | Add Comment )
Katie
1611676342
This is incredible
Report Comment
thank you!💜
by Bela; 1611691844; Report