Skull Layout

Tags: skull, black, white, bela

Description:

✧ feel free to change it up to your style.

✧ if you have any questions, comment below or in this blog post.

✧ copy and paste the code to your "about me" section.

✧ you can copy and paste the code here or here to preview it before you add it to your profile.

✧ I appreciate your comments ٩(๑❛ᴗ❛๑)۶

remember that it's against spacehey rules to hide the spacehey logo, search bar, or logout buttons in the navigation.

Preview:

click on the image for a larger preview

Code:

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

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

<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
============⚠️==========*/

/* corner skull image. hidden on mobile */
.skull {
    background: url('https://media.giphy.com/media/fUwDVUCvEw1oiIyiRK/giphy.gif') no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 0px;
    bottom: 0px;
    height: 320px;
    width: 300px;
    z-index: 1000;
    opacity: 1;
}
@media (max-width: 600px) {
.skull{display:none;}
}
</style>
<div class="skull"></div>

<style>
/* the cursor */
* { 
	cursor: url('https://img.icons8.com/offices/30/ffffff/cursor.png'), auto; 
}
</style>

<style>
/*== font-family ==*/
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Waiting+for+the+Sunrise&display=swap');
</style>

<style>
/* the header image goes here */
main:before {
	width: 100%;
	height: 100px;
	display: block;
	content: "";
    border-radius: var(--curve);
	background-image: url('https://64.media.tumblr.com/e18af65151d2e137ef614f968f30640f/tumblr_phbeydXbVr1xtzjxio1_500.gif');
	background-position: center;
	background-size: 70%;
    filter: drop-shadow(0px 0px 0px black) !important;
}
@media only screen and (max-width: 600px) {
	main:before{
	height: 200px;
	}
}
/* this is where the colors are rooted */

:root{
    --headers: #f0ece2;
    --text: #aaaaaa; 
    --names: #310a5d;
    --links: #f0ece2;
    --hover: #525252;
    --borders: 5px ridge white;
    --background_image: url('https://media.giphy.com/media/Q7WZKa3OYOMBGy0u25/giphy.gif');
    --font-family: 'Amatic SC', cursive;
    --curve: 50px;
}
/* this is where the colors for specific things are located */
h3, h4, h5{color: var(--headers) !important;text-shadow:2px 1px 3px black} /* headings*/
a{color: var(--links) !important;font-weight:1;text-shadow:1px 1px 3px black} /* 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 a p{color: var(--headers) !important;font-weight: 1!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;} /* aboutme & want2meet headings */
.blurbs .heading {display:none;} /* hides the blurbs title */

.container{
    width: 60%;
    background:  url('https://media.giphy.com/media/jRB5NAJTMqIWsvYvov/giphy.gif');
    background-size: 40%;
    background-position: center;
}

/* this is where your background image ends up being styled */
body{
    background-image: var(--background_image)!important;
    background-color: black;
    background-size: 30%;
    background-position: left top;
}

/* the navigation is adjusted here */
nav{
    background-color: #040404!important;
    border: var(--borders);
    border-radius: var(--curve);
    padding: 5px;
    text-align: center;
}

nav .top, nav .links {
    background-color: transparent;
    border-radius: var(--curve);
}

/* this is the line that appears between links in the header and footer.
you can add an emoji or symbol instead of the default line it has */

nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content: " ⤫";
    color: var(--links);
}
/* this is the spacehey logo color.
you can change it at https://codepen.io/sosuke/pen/Pjoqqp */
nav img.logo{
    filter: brightness(0) saturate(100%) invert(84%) sepia(12%) saturate(11%) hue-rotate(330deg) brightness(79%) contrast(89%);!important;
}
/* the search wrapper and button */

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

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

/* the online symbol and text */

.online{color: var(--links) !important;} 
.online img{
    filter: brightness(0) saturate(100%) invert(84%) sepia(12%) saturate(11%) hue-rotate(330deg) brightness(79%) contrast(89%); !important;
}
p{
    font-family: 'Waiting for the Sunrise', cursive;	
    font-size: 14px;
    font-weight: bold;
}
/* font family for the headers, navigtion links, links, body text */
h3, h4, h5, a, nav label, .section{ 
    font-family: var(--font-family) !important;	
    font-size: 14px;
    font-weight: 1;
}
h2{
    font-family: var(--font-family) !important;	
    font-size: 20px;
    font-weight: 1;
    text-decoration: underline;
}

/* this is where your name appears */
h1{
    color: #bbbbbb;
    padding-left: 20px !important;
    padding-bottom: 2px !important;
    font-family: 'Waiting for the Sunrise', cursive;
    font-size:40px !important;
    font-weight: bold;
    text-shadow: 2px 2px 3px dimgray;
    background-color: rgba(0,0,0,0.7);
}

/* the hr code.
the hr is the horizontal line when you want to 
separate important info or add a break in your paragraphs*/

hr{
    height:1px;
    background: dimgray;
    border: none;
}
.friends .heading a.more{
    padding-right: 15px;
}
/* this is where you adjust the borders and background */
.blurbs, .mood, .friends, .contact, .profile .table, .blog-preview, .profile .table-section{
    border-radius: var(--curve) !important;
    padding: 5px !important;
    border: var(--borders) !important;
    background-color: #040404!important;
}
.mood, .blog-preview, .friends{
    text-align: center;
    margin-bottom: 10px;
}
/* your interest and comments table row background color */
td{
    background-color: transparent!important;
}

/* the middle section of your profile background color*/
main{
    background: transparent;
    border-radius: var(--curve) !important;
    border: transparent !important;
    outline: none !important;
}

.table-section{
    border:none !important;
    background-color:var(--box_color_and_seethru)!important;
    border-radius: var(--curve) !important;
}
.heading{
    background: none !important;
    text-align: center;
}

/* this is the box that says "Edit Info" when you're logged in,
and to your friends it says "Profile Name is your friend". */

.profile-info {
    background-image: url('');
    background-size: cover;
    border: var(--borders) !important;
}

/* adjusting images borders and adding styling if you want to */
.profile-pic img{
    outline:none !important;
    border-radius: var(--curve) !important;
}
.friends-grid{
    text-align: center;
}
.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;
}

/* margin and padding */

h2, h3, h4, h5, p{padding-left:5px !important;}
.icon{border:none !important;}
.profile-info{border-radius: var(--curve) !important;}
.comment-replies{border:5px ridge #aaaaaa;}
.comment-reply:not(:first-child){border-top: 2px solid var(--links);} /* line in between comment replies*/

/* for this box, you can add an image of your choice. it's right under the contact box. */
.url-info{
    background: url('https://steamuserimages-a.akamaihd.net/ugc/687153778006583012/AA7B806B91F4A2BD04304AF73D54F0D8A09B39A7/');
    background-position: center;
    border: var(--borders)!important;
    border-radius: var(--curve);
    height: 200px;
}
.url-info p{
    opacity: 0.0;
}

/* this is the comments table scroll code. 
you can delete this if you don't want a scroll box */

.comments-table {
    border: none!important;
    outline: none !important;
    padding: 10px;
    margin: 1px;
    border-radius: 0px;
}

/* this styles the first column */
.comments-table td:first-child{

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

.comments-table td{
    background-image: url('');
    background-size: cover;
    background-position: center;
    border-top: 2px solid black;
    border-bottom: 1px solid dimgray;
    border-left: 2px solid black;
    border-right: 2px solid black;
}

footer{
    background: transparent;
    padding: 15px;
}
footer .links, footer p, footer p:nth-child(2) > I{
    margin-top: 0px;
}
</style>

<style>
/* Scrollbar styles */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    border-radius: var(--curve);
    width: 2px;
    border: 1px solid dimgray;
}
::-webkit-scrollbar-thumb {
    background: #f0ece2; 
    border-radius: var(--curve);
}
::-webkit-scrollbar-thumb:hover {
    background: gray;  
}
</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 16 of 16 comments ( View all | Add Comment )

KeepingTime	1669845661 This is a very nice layout, planning on using it once December is over! Good job! Report Comment
Max	1658484356 love this one!! Report Comment
Darcky	1650077212 muchas gracias!!! Report Comment
Wettwesu	1636515898 Genial! Report Comment
Perfsect	1635658683 your layout is lit thank you so much for making it and sharing with us Report Comment Thank you! I appreciate it by Bela; 1635665118; Report
Kasper	1632107974 I love it!! Report Comment
unit0209	1631891783 so cool, thank you :) Report Comment
Ricardo Omar	1631810613 Me encanta Report Comment
Ink	1623941546 This is hella cool, thanks for making this! :D Report Comment
Zuzu	1622107931 I Love It Report Comment
Katie	1616643636 ❣ love it ❣ Report Comment
Sleepy	1615869353 absolutely love it Report Comment thanks! :) by Bela; 1616304137; Report
PuchoAlmighty A.K.A ThyGod666 🤘🇵🇷	1614935621 I like it! Report Comment
lauryn	1614796328 I LOVE THIS SO MUCH THANK YOU Report Comment you're welcome!!! ^^ by Bela; 1616304337; Report
.raynbow_dash.	1614697949 thanks for the html tips i use this as a ref Report Comment
Bree	1614149299 Simple, cute, minimalistic. Much love thank you! Report Comment thank you I appreciate it! and you're welcome! :D by Bela; 1614150920; Report

Layout published by Bela