Black layout

Tags: simple, black, gray, bela

Description:

Simple black layout :)

✧ feel free to change it up to your style.

✧ feel free to use as a base for creating your own layout if you want.

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

✧ don't feel pressured to send an add lol its not a requirement.

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

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

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

Preview:

Layout Screenshot

Code:

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

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

/*=== cursors ===*/
a:hover{
    cursor: url('https://cur.cursors-4u.net/cursors/cur-10/cur966.cur'), auto;
}
body {
    cursor: url('https://cur.cursors-4u.net/cursors/cur-10/cur970.cur'), auto;
}
</style>

<style>

/*=== font style ===*/
@font-face { font-family: "ElegantTypewriter-L3Pa3"; src: url('//dl.dropbox.com/s/uw4ksded848qvrq/ElegantTypewriter-L3Pa3.ttf'); }
@font-face { font-family: "IMFeDPsc28P"; src: url('//dl.dropbox.com/s/u1nn1w6mox63rej/IMFeDPsc28P.ttf'); }
</style>

<style>

/*=== layout details ===*/

:root{
     --headers: Darkgray;
     --text: DarkGray;
     --names: Gainsboro;
     --links: DimGray;
     --hover: whitesmoke;
     --borders: 4px inset #221F1F !important;
    
     --background_image: url('https://i.pinimg.com/originals/4f/07/61/4f07618e6737f672bedccccd4ed06f16.jpg');
    
     --font-family: "ElegantTypewriter-L3Pa3";
     --mynamesize: 30px;
     --transparency: .55;
     --curve: 0px;
     --hue: 0deg;
     --simple_bg: #ffffff;
}
main .left{
    padding-right: 20px;
}
.url-info{display:none !important;} /* to hide the url */
.blurbs .heading{display:none !important;} /* to hide the blurbs heading */
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{color: var(--text) !important;} /* color of text */
h1, .friends a p{color: var(--names) !important;} /* color of names, and friends counter */
h1, .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;text-align:center;} /* aboutme & want2meet headings */
.section{color: var(--text) !important;} /* sometimes <p> is broken by embeds maybe. */
.comment-reply:not(:first-child){border-top: 3px double var(--links);} /* line in bewtween comment replies*/
.count{color:Gainsboro;}

/*=== text decoration ===*/
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;
}

/*=== font family ===*/
a, p, nav label, .section{
    font-family: var(--font-family) !important;	
    text-shadow: 0px 0px 0px black !important;
    font-size: 14px;
}
h2, h3, h4, h5, DIV.mood > P:nth-child(1) > B, P:nth-child(2) > B{
    font-family: "IMFeDPsc28P";
    text-shadow: 0px 0px 0px black !important;
    letter-spacing: .3px;
    font-size: 16px;
}

/*=== padding and margin ===*/
.icon{border:none !important;}
.blurbs{margin-top:10px !important;margin-bottom:30px !important}
.friends{margin-top:-10px !important;margin-bottom:30px !important}
.profile-info{border-radius: var(--curve) !important;}
.comment-replies{border:5px inset var(--links);}
.comments-table{border-radius: var(--curve) !important;border:none !important;}
.table-section{padding-bottom:7px !important;margin-top:30px!important}
#comments{margin-top:5px !important;padding-bottom:5px !important}
.details p:last-child{color:var(--links) !important; filter: brightness(95%);}
.mood{margin-top:20px;}
.blog-preview{margin-top:30px;}
.mood, .blog-preview{margin-bottom: 30px;}
.table-section, .blurbs, .friends{margin-bottom: 30px !important;}
.friends{margin-top: 10px!important;}

/*=== background image ===*/
body {
    background-image: var(--background_image) !important;
    background-color: black ;
    background-repeat: repeat;
    background-size: contain;
}

/*=== navigation ===*/
/*=== change logo color at https://codepen.io/sosuke/pen/Pjoqqp ===*/
nav{
    background: url('https://cdn.wallpapersafari.com/80/17/TZxt1s.jpg');
    background-size: cover;
    border: var(--borders);
    border-radius: var(--curve);
}
nav .top {
    background: rgba(0,0,0,0.0);
}
nav .top a{
    color: var(--links)!important;
}
nav .links {
    background: transparent!important;
    background-size: 100%100%!important;
    text-align: center;
    font-size: 14px;
}
nav img.logo{
    filter: brightness(0) saturate(100%) invert(42%) sepia(0%) saturate(0%) 
    hue-rotate(10deg) brightness(96%) contrast(89%); !important;
}
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content: " ⋮ ";
    color: var(--text);
}

/*=== color the search bar and button ===*/
.search-wrapper input[type=text] {
    background-color: rgba(0, 0, 0, 0.0) !important;
    border: 2px solid var(--links) !important;
    color:DarkGray !important;
    border-radius: 10px !important;
}
button{
    border-radius: 10px !important;
    border: 0px solid DarkGray!important;
    font-family: var(--font-family) !important;
    background-color:rgba(0, 0, 0, 0.0) !important;
    color:var(--links)!important;
}

/*=== online icon and color ===*/
.online{color: var(--links) !important;} 
.online img {
    filter: brightness(0) saturate(100%) invert(42%) sepia(0%) saturate(0%)
    hue-rotate(10deg) brightness(96%) contrast(89%); !important;
}

/*=== profile name ===*/
h1{
    padding-left: 30px !important;
    font-family: "IMFeDPsc28P";
    font-size:30px !important;
    margin-top: -10px!important;
    color: DarkGray!important;
}

/*=== profile info ===*/
.profile-info{
    background: url('https://cdn.wallpapersafari.com/80/17/TZxt1s.jpg');
    background-size: cover;
    border: var(--borders)!important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
    margin-top: 30px;
}
.profile-info .inner{
    font-weight: bold;
    text-align: center;
}

/*=== contact ===*/
.contact {
    background: url('https://cdn.wallpapersafari.com/80/17/TZxt1s.jpg');
    background-size: cover;
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--borders) !important;
}
.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: "✢"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add to favorites */
	content: "⇢"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "☏"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward to friend */
	content: "⤇"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant message */
	content: "✎"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block user */
	content: "⌧"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add to group */
	content: "⇔"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report user */
	content: "⊗"
} 


/*=== images ===*/
main{
    background: transparent;
    padding: 6px 0px;
    background-size: 100%;
    background-position: center;
}
.profile-pic img{
    outline:none !important;
    border: var(--borders)!important;
    filter:hue-rotate(var(--hue)) drop-shadow(0px 0px 0px black)!important;
}
.profile .friends .person img{
    transform: skew(0deg, 0deg);
    border-radius: 10px;
    border: var(--borders) !important;
    filter:hue-rotate(var(--hue)) drop-shadow(0px 0px 0px black) !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;
    filter: hue-rotate(var(--hue)) drop-shadow(0px 0px 0px black) !important;
    border-radius: var(--curve) !important;
}

/*=== box color for interests and social media. change 0.0 to 0.5 to see a difference ===*/
:root{--box_color_and_seethru: rgba(0, 0, 0, 0.0);}

/*=== interest table background color. replace transparent with any color to see the change ===*/
td {
    background-color: transparent!important;
}
hr{
    border: 2px inset #221F1F;
    background: #221F1F;
}

/*=== boxes ===*/
.heading, .url-info, .blurbs, .friends, .table, .table-section, footer{
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--borders) !important;
}
.friends, .blurbs{
    background: url('https://cdn.wallpapersafari.com/80/17/TZxt1s.jpg');
    background-size: cover;
}
.mood, .blog-preview{
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--borders) !important;
}
.mood, .blog-preview {
    text-align: center;
    background: url('https://cdn.wallpapersafari.com/80/17/TZxt1s.jpg');
    background-size: cover;
    border: var(--borders) !important;
}
.table-section{
    border:var(--borders) !important;
    background: url('https://cdn.wallpapersafari.com/80/17/TZxt1s.jpg');
    background-size: cover;
    border-radius: var(--curve) !important;
}
.heading{
    background:transparent!important;
    padding-bottom: 4px !important;
    background-size:100%100%!important;
    text-align: center;
    border:none!important;
}
.comments-table td {
    background-image: url('') !important;
    background-size: cover;
}
.comments-table td:first-child{
    background: url('')!important;
    background-size: 50%!important;
}
.comments-table td:first-child img {
    border: var(--borders);
/* you can clip images at https://bennettfeely.com/clippy and add the code here */
}

/*=== footer ===*/
footer{
    color:red;
    text-align: center;
    font-size: 60%;
    margin: 10px 0 10px;
    padding: 10px 5px;
    background: url('https://cdn.wallpapersafari.com/80/17/TZxt1s.jpg');
    background-size: cover;
}
</style>

<style>
/*=== Force scrollbars onto browser window ===*/
body {
    margin-bottom: 10%;
}
/*=== Box styles ===*/
.myBox {
    border: none;
    padding: 5px;
    font: 24px/36px sans-serif;
    width: 200px;
    height: 200px;
    overflow: scroll;
}
/*=== Scrollbar styles ===*/
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    border-radius: 0px;
    width: 1px;
    border: 5px inset DimGray;
}
::-webkit-scrollbar-thumb {
    background: DimGray;
    border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
    background: DarkGray;
}
</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 27 comments ( View all | Add Comment )

Kay	1614630314 Thanks for this! 💜 Report Comment
Aubzikins	1614604418 Aww yay thanks!!! Report Comment
Carol	1614313600 Thanks Report Comment
Amanda Martinez	1614231622 I love it! I just added a sparkly background. But this layout is my favorite! Report Comment thank you It looks good with that background ^^ by Bela; 1614234253; Report
⛧⸸𝔏𝔲𝔠𝔦𝔣𝔢𝔯𝔦 𝔅𝔞𝔭𝔥𝔬𝔪𝔢𝔱⸸⛧ (She/Her)	1614182669 Very nice Report Comment thank you! by Bela; 1614234151; Report You're welcome by ⛧⸸𝔏𝔲𝔠𝔦𝔣𝔢𝔯𝔦 𝔅𝔞𝔭𝔥𝔬𝔪𝔢𝔱⸸⛧ (She/Her); 1614258206; Report
Mvs∆	1614172740 Just what I was looking for, thank you!!!!!! Report Comment you're welcome! by Bela; 1614234136; Report
Ian Moone	1613938255 I am enjoying it. Report Comment I'm glad! by Bela; 1614234111; Report
Rich09	1613856557 definitely wanna use this I just don't know how to do it help would be appreciated Facebook was my first social media. Report Comment You just have to copy and paste the code into your About Me section. Super simple. by Forrest Orta; 1613881459; Report
Brian Fallus	1613854196 My favourite color of the rainbow 🖤 Report Comment mine too! glad you like it by Bela; 1613883518; Report
𝕻𝖊𝖗𝖘𝖊𝖕𝖍𝖔𝖓𝖊	1613850161 this is awesome. thanks!! Report Comment you're welcome! by Bela; 1613883498; Report
Rosemary	1613786614 Thank you for the awesome layout! I love it! Report Comment thank you, I appreciate it! by Bela; 1613788148; Report
The Yokeleys	1613709583 I am going to use this. Simple and clean. I had the original Myspace and used to make my own layouts. I cannot remember my coding and html. I used to have all kinds of awesome things on my profile. Gotta learn all over again. Any pointers. Send my way. lol Report Comment glad you're enjoying it. I'm sure you'll remember more as time goes. If you're looking for resources, this is a good blog to look at. by Bela; 1613788116; Report Oh awesome! thank you. by The Yokeleys; 1613790528; Report
Murgatroyd	1613685345 MVP you are. Thanks! Report Comment you're welcome and thanks!! ^^ by Bela; 1613690532; Report
🔆Snails	1613628778 Thank you for this! Report Comment you're welcome! by Bela; 1613632568; Report
Makayla Raniere	1613620156 Thank you Report Comment thanks by Bela; 1613620691; Report
TraeTrae	1613603092 Love this layout Report Comment thanks! by Bela; 1613604146; Report
HELLY STILETTO	1613602540 Thank you! Report Comment you're welcome! by Bela; 1613602882; Report
JukeBoxJoints	1613600883 Love it Report Comment appreciate it ! ^^ by Bela; 1613601643; Report
Regan Vargas	1613587800 Appreciate your layout, thank you! Report Comment You're welcome! by Bela; 1613588639; Report
Garrim	1613484639 Very, very nice! Report Comment Thank you 😊 by Bela; 1613503805; Report