Steam punk madness

Tags: steampunk, goth, punk, karategoddess, layouts

Description:

Steam punk madness is for girls punks in the steam punk anyone who is out of the ordinary can like this or uses to feel free to add or comment On me .

Preview:

click on the image for a larger preview

Code:

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

<style>

@import url('https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&family=Allerta+Stencil&family=Amita&display=swap');

.profile {
  font-family: 'Allerta Stencil', sans-serif;  
}

.profile .left h1 {
	
    font-family: 'Amita', cursive;
	line-height:1em;
	
}

.profile .contact .heading h4, .profile .table-section .heading h4, .profile .blurbs .heading h4, .profile .friends .heading h4, .blog-entry .comments .heading h4, .bulletin .comments .heading h4, .home-actions .heading h1, .statistics .heading h4 {
    font-family: 'Akaya Kanadaka', cursive;
	line-height:1em;
	text-shadow: 0 0 7px black;
	font-size:2em;
	color:#FF8C00;
	
}

.profile-info {
	background: var(--pdg_profileInfo);
	background-size: cover;
	background-position: center;
	color:#FF8C00 ;
	padding:6em 0;
    border-radius: 15px 15px 15px 15px;
}

nav .top {
    background: rgba(0,0,0,0.0);
    color:#FF8C00 ;
}
nav .top a{
    color:#FF8C00 !important;
}
nav .links {
    background: transparent!important;
    background-size: 100%100%!important;
    text-align: center;
}
nav .links a{
    color:#FF8C00 !important;
}
#q, button {
color: #FF8C00	;
background-color: black ;
border: 1px solid #FF8C00;
font-family: inherit;
}

nav img.logo{
    filter: brightness(0) saturate(100%) invert(67%) sepia(69%) saturate(619%) hue-rotate(355deg) brightness(90%) contrast(99%); !important;
}



:root {
        --dark-orange: #333;
        --light-orange: #181818;
        --pageTexture: url(none);
        --yourBackground: url(https://i.ibb.co/7Jvw0J0/8-DB25-B6-C-7-A2-B-4-D2-A-872-C-667-A7-F7-ED2-FE.jpg);
        --hover: #BDB76B;
        --links: #FF8C00;
        --pdg_blurbSticker: url(none);
        --pdg_profileInfo: url(https://i.ibb.co/vXN0Sdv/A3-ECC623-D538-41-EC-ADBE-E0-AE566-FC083.jpg);
    }
    
    a{color: var(--links) !important;}
    a:hover{color: var(--hover) !important;}
    
    a:hover,
a:active,
.blog-entry .kudos-btn:hover,
.blog-entry .kudos-btn:active{
text-decoration: underline;
text-decoration-style: wavy;
}
.logout-btn:hover,
.logout-btn:active{
text-decoration: underline;
text-decoration-style: wavy;
}
nav .top a:hover{
text-decoration: underline;
text-decoration-style: wavy;
}
nav .links a:hover{
text-decoration: underline;
text-decoration-style: wavy;
}
    
    body {
	background-image: var(--yourBackground);
	background-size: cover;
	background-attachment: scroll;
	background-position:center;
	no-repeat fixed;
    background-color: darkorange;

}

.profile .right .blurbs:after {
	background-image: var(--pdg_blurbSticker);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	height: 100px;
	width: 100px;
	content: " ";
	transform: rotate(-4deg) scale(2) translateY(-2rem);
	position: absolute;
	right: 0;
	z-index: -1;
}

 main {
        border-radius: 0 0 15px 15px;
        background: #00000066; !important;
        backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
    }
  html:before {
	display: block;
	position: fixed;
	pointer-events: none;
	content: " ";
	height: 100vh;
	width: 100vw;
	top: 0;
	left: 0;
	right: 0;
	background-image: var(--pageTexture);
	background-size: cover;
	background-attachment: fixed;
	background-position:center;
	opacity: .9;
	z-index: 25;
}  
    .blog-preview p {
        background-color: black;
        padding: 5px 15px;
        border-radius: 15px;
        color:#FF8C00;
    }
    .blog-preview p a{
        color: #c00!important;
    }
    .blog-preview p a:hover,
    .blog-preview p a:active,
    .blog-preview p a:focus{
        color: white!important;
    }
    nav {
        border-radius: 15px 15px 0 0;
        overflow: hidden;
    }
    .profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border: none;
    }
    table.details-table {
        border-collapse: collapse;
    }
    table.details-table td {
        background-color: transparent !important;
    }
    .profile-pic {
        border-radius: 500px;
        overflow: hidden;
    }
    .heading {
        padding: 5px 0 !important;
        margin-top: 15px;
        margin-bottom: 10px;
        background-color: transparent !important;
        color: black !important;
        border-bottom: 2px solid;
    }
    
    .container {
        border-radius: 15px 15px 0 0;
        overflow: hidden;
        margin-top: 30px;
        padding: 10px;
    }
    footer {
        border-radius: 15px;
        background: #00000066; !important;
        display: block !important;
    }
    table.comments-table td {
        background-color: #00000066; !important;
    }
    .comments-table td:first-child img {
        width: 80px;
        border-radius: 500px;
    }
    .profile .friends .person img {
        border-radius: 500px;
    }
    .blog-preview p {
        font-size: 1.4rem;
    }
    a.addme {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 15px;
        display: block;
    }
    
    .comments-table, .details-table {
	border: 1px solid #00000066;
	border-collapse: separate;
	border-spacing: 0 .5em;
}

h1, h2, h3, h4, h5,a, p, nav label, .section {color:#FF8C00 ;}

.profile .left h1 {
	text-transform: capitalize;
	font-size: 3rem;
	color:#FF8C00 ;
	text-shadow: 3px 3px 0 black;
}

.contact .inner a img {
    font-size: 0;
}
.contact .inner a img:before {
    font-size: 1em;
    display: block;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
	/* add to friends */
	content: "\2795"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add to favorites */
	content: "\2b50"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "\1F4ac"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward to friend */
	content: "\23e9"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant message */
	content: "\1F4f1"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block user */
	content: "\274c"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add to group */
	content: "\1F465"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report user */
	content: "\1f5e3"
}

.profile .blurbs .section h4 {
	color:#FF8C00 ;
}




</style>

<style>

.online{content:url(https://media.giphy.com/media/U6XeP6CglHZ2CXXfaB/giphy.gif?cid=ecf05e47ocdaf0afcj4aab0sx7sfizjrgmfpkah9029s3v3e&rid=giphy.gif&ct=s);
    width: 55px;
    height: 55px;
}
</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.