Emo layout

Tags:
Description:

Red and black layout with a bat spacehey logo, dancing slenderman, and a gif in the corner
Preview:

click on the image for a larger preview
Code:

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

<style>/* Profile Design Info */

    :root {

        --logo-blue: #0a0a0a;

        --darker-blue: #ffff;

        --lighter-blue: #0a0a0a; 

	}



/* Profile Background CSS Code For Seamless Pattern Image */

    body

        {background: url(https://i.pinimg.com/474x/39/26/aa/3926aaa0097450e0d098563f48d3c773.jpg); /* CHANGE BACKGROUND IMAGE */

}



/* Profile Container Info */

	main {

        background:#b50b0b !important; /* CHANGE BACKGROUND COLOR OF PROFILE WHERE TEXT GOES */

        color: #0a0a0a; /* CHANGE FONT COLOR OF PROFILE TEXT */

        border-radius: 0 0 10px 10px; /* ROUND BOTTOM OF PROFILE EDGES */

    }


	.container {

        border-radius: 15px 15px 0 0;

        overflow: hidden;

        margin-top: 30px;

        padding: 10px;

    }



	* {font-family: Pacifico;} /* CHANGE FONT STYLE OF PROFILE TEXT - EXAMPLES: Monospace, Verdana, Arial, etc... */



/* Profile Footer Info*/

    footer {

        border-radius: 15px; /* ROUND EDGES OF FOOTER */

        background: #0a0a0a; /* CHANGE BACKGROUND COLOR OF FOOTER */

        color: #b50b0b!important; /* CHANGE FONT COLOR OF FOOTER TEXT */

        display: block !important;

    }


	footer .links a{color:#b50b0b  !important;} /* CHANGE FONT COLOR OF FOOTER LINKS */


    footer .links a:hover{color: #ffff !important;} /* CHANGE FONT COLOR OF FOOTER LINKS WHEN HOVERING */




	.profile .contact,

    .profile .url-info,

    .profile .table-section,

    .home-actions {

        border: double;  /* REMOVES BORDER FROM CONTACT, URL INFO, & PROFILE TABLES */

    }

</style>



<style>/*Search Users Box */

    .top input{border-radius: 15px 15px 15px 15px;} */ ROUNDS SEARCH BOX AT TOP OF PROFILE */

</style>



<style>/*Buttons */

    button{

    border-radius: 25px 25px 25px 25px !important; /* ROUNDS BUTTONS ON PROFILE, LIKE ONE BY SEARCH BAR AT TOP OF PROFILE */

	color: #HEX CODE GOES HERE; /* CHANGE FONT COLOR OF BUTTON */

	font-weight: bold; /* CHANGE WEIGHT OF FONT ON BUTTON */

    background-color: #HEX CODE GOES HERE !important; /* CHANGE BACKGROUND COLOR OF BUTTON */

	}

</style>



<style>/* Navigation Bar */

    nav {

        border-radius: 15px 15px 0 0;

        overflow: hidden;

    }

    

    nav .links a{

        color: #HEX CODE GOES HERE !important; /* CHANGE FONT COLOR OF NAVIGATION LINKS */

        text-shadow: none !important;

font-weight: bolder;

    }

    

    nav .links a:hover {color: #ff1717 !important;} /* CHANGE FONT COLOR OF NAVIGATION LINKS WHEN HOVERING */

    

    nav .links {

        text-align: center; /* CHANGE ALIGNMENT OF NAVIGATION LINKS */

        padding: 3.5px 3.5px 5.5px 3.5px;

        font-size: 70%; /* CHANGE FONT SIZE */

    }

</style>

    

<style>/* Links */

    a:hover {color: #ffff;} /* CHANGE FONT COLOR OF PROFILE LINKS WHEN HOVERING */ 

</style>



<style>/* Profile Name Header */

	@import url(https://fonts.google.com/specimen/Abril+Fatface); 

	.profile .left h1{ 

font-family: 'Abril Fatface', sans-serif; /* CHANGE FONT STYLE ACCORDING TO ONE CHOSEN FROM IMPORTED URL FONT */

font-size: 35px; /* CHANGE SIZE OF PROFILE NAME */

color: #HEX CODE GOES HERE; /* CHANGE FONT COLOR OF PROFILE NAME */

text-align: left; /* CHANGE ALIGNMENT OF PROFILE NAME */

overflow-wrap: break-word; 

}

</style>



<style>/* Profile Picture, Profile Mood, & Profile URL */

	.profile-pic {border-radius: 500px; overflow: hidden;} / *MAKES PROFILE PIC ROUND */

.profile .mood {color: #HEX CODE GOES HERE;} /* CHANGE PROFILE MOOD FONT COLOR */

.profile .url-info {color: #HEX CODE GOES HERE;} /* CHANGE PROFILE URL INFO FONT COLOR */

</style>






<style>/* Headers Colors */

    .heading {

        padding: 5px 0 !important;

        margin-top: 15px;

        margin-bottom: 10px;

        background-color: #0a0a0a !important; /* CHANGE BACKGROUND COLOR OF HEADERS */

        color: #ffff !important; /* CHANGE FONT COLOR OF HEADERS */

        text-align: left; /* CHANGE TEXT ALIGNMENT OF HEADERS */

        border-bottom: 2px double white; /* CHANGE BORDERS OF HEADERS */

border-radius: 10px 10px 10px 10px; /* ROUNDED HEADER EDGES */

    }


	.profile .blurbs .section h4{color: #HEX CODE GOES HERE; font-weight: bolder;} /* CHANGE FONT COLOR OF 'ABOUT ME', 'WHO I'D LIKE TO MEET', & PROFILE INTERESTS HEADERS, SUCH AS 'GENERAL', 'MUSIC', ETC... */

</style>



<style>/* Interests Table Info */

    table.details-table {border-collapse: collapse;} /* GETS RID OF BORDER FOR INTERESTS TABLE */

    table.details-table td {background-color: #ffff !important;} /* CHANGE COLOR OF INTEREST TABLE BACKGROUND AREAS */

.details-table td:first-child {color: #0a0a0a !important;} /* CHANGE FONT COLOR OF INTEREST TABLE TEXT */

</style>



<style>/* Blog Info */

.blog-preview h4 {color: #HEX CODE GOES HERE;} /* CHANGE FONT COLOR OF BLOG HEADER */

    .blog-preview p {

        background-color: none;

        padding: 5px 10px;

        border-radius: 10px;

        color: #HEX CODE GOES HERE; /* CHANGE FONT COLOR OF BLOG TITLES */

font-weight: bolder; /* CHANGE FONT WEIGHT */

    }


    .blog-preview p a{color: #HEX CODE GOES HERE !important;} /* CHANGE FONT COLOR OF BLOG LINKS */


    .blog-preview p a:hover,

    .blog-preview p a:active,

    .blog-preview p a:focus{

        color: #HEX CODE GOES HERE !important; /* CHANGE FONT COLOR OF BLOG LINKS WHEN HOVERING */

    }

</style>

    

<style>/* Friends Info */

    .profile .friends .heading{color: #HEX CODE GOES HERE;} 

.profile .friends{text-align: center;}

    .count {color: #HEX CODE GOES HERE;} /* CHANGE FONT COLOR OF NUMBER OF PROFILE FRIENDS */

    .profile .friends .person p{color: #HEX CODE GOES HERE !important;} /* CHANGE FONT COLOR OF FRIEND LINKS */

	.profile .friends .person img {border-radius: 500px;} /* ROUNDS FRIEND PROFILE IMAGES */



    .profile .friends .person img:not(.icon) {

        border-radius:15px; /* ROUNDS BORDER OF FRIEND PROFILE IMAGES */

        border: 2px solid rgba(255, 255, 255, 1); /* CHANGE BORDER STYLE AROUND FRIEND PROFILE IMAGES BY CHANGING RGB CODE, WHICH ARE THE FIRST THREE NUMBERS IN THE PARENTHESES */

        box-shadow: 1px 0px 7px 2px rgba(255, 255, 255, 0.71); /*CHANGE GLOW COLOR AROUND FRIEND PROFILE IMAGES BY CHANGING RGB CODE, WHICH ARE THE FIRST THREE NUMBERS IN THE PARENTHESES - CAN DELETE BOX-SHADOW CODE IF YOU DON'T WANT THERE TO BE A GLOW */

    }



/* ALLOWS THE FRIEND PROFILE IMAGE TO GET BIGGER ON HOVER */    

    .profile .friends .person img:not(.icon):hover { 

        transform: scale(1.1);

        transition: 0.5s ease;

    }

    

    .profile .friends .person img:not(.icon) {transition: 0.5s ease}

</style>



<style>/* Comments Info */

    table.comments-table td {

        background-color: #ffff !important; /* CHANGE BACKGROUND COLOR OF COMMENTS TABLE */

        border: double; /* GETS RID OF BORDER FOR COMMENTS TABLE */

    }



    .comments-table td:first-child img {

        width: 80px; /* CHANGES WIDTH OF COMMENT PROFILE IMAGES */

        border-radius: 500px; / *ROUNDS COMMENT PROFILE IMAGES */

    }


	.comments-table{

        display: block;

        height: 350px; /* CHANGE HEIGHT OF COMMENT TABLE SCROLLBOX */

        overflow-y: scroll;

        border: none;

    }

</style>



<style>/* Custom Profile Headers */

.contact .heading{ font-size:0; }

.contact .heading:before{ content: "Contact me >.<"; font-size:.9rem; font-weight: bolder; }



.w-40 .table-section:nth-last-child(2) .heading h4{ font-size:0;}

.w-40 .table-section:nth-last-child(2) .heading:before{content: "Thingz I like XD"; font-size:.9rem; font-weight: bolder; }



.w-40 .table-section:last-child .heading h4{ font-size:0; }

.w-40 .table-section:last-child .heading:before{ content: "Linkz"; font-size:.9rem; font-weight: bolder; }



.blog-preview h4{ font-size:0; }

.blog-preview h4 a{font-size:.8rem;margin-left:5px; }

.blog-preview h4:before{ content: "Blogz"; font-size:.9rem; font-weight: bolder; }



.blurbs .heading{ font-size:0; }

.blurbs .heading:before{ content: "Blurbz"; font-size:.9rem; font-weight: bolder; }



.blurbs .inner .section:nth-child(1) h4{ font-size:0; }

.blurbs .inner .section:nth-child(1) h4:before{ content: "All ab moi!!:"; font-size:.9rem; }



.blurbs .inner .section:nth-child(2) h4{ font-size:0; }

.blurbs .inner .section:nth-child(2) h4:before{ content: "Who I would enjoy befriending:"; font-size:.9rem; }



.friends .heading{ font-size:0; }

.friends .heading:before{ content: "Friendz <33"; font-size:.9rem; font-weight: bolder;}



.friends#comments .heading{ font-size:0; }

.friends#comments .heading:before{ content: "Commentz"; font-size:.9rem; font-weight: bolder;}

</style>

<style>
  
  .logo {
  
  content:url("https://media.discordapp.net/attachments/1083062800752054305/1085761642761048075/image0.jpg")
  
  }
  
  </style>



<!-- (c) Layout created by .𖥔 ݁ ˖🥩𝐆𝟎𝐫𝟑.𝐂𝟎𝐦. !!₊˚⊹ (https://layouts.spacehey.com/layout?id=84119) -->

<div style="float:  ; max-height: 300px; position: fixed; right: 1px; bottom: 5px; z-index: 200;">
<img src="https://64.media.tumblr.com/9ea8933efaa83ada4ee80b13fbfdb92c/63d31beb6e557ace-81/s250x400/dca05d8a0deb8f5adbc61da1d3c3ad9935943d48.gif" width="200" height="300"/></div>
<style>* {cursor: url(https://cur.cursors-4u.net/holidays/hol-4/hol338.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2009/10/14/tiny-skull-crossbones.html" target="_blank" title="Tiny Skull Crossbones"><img src="https://cur.cursors-4u.net/cursor.png" alt="Tiny Skull Crossbones" style="position:absolute; top: 0px; right: 0px;"/></a>

<img src="https://gothzone.neocities.org/graphics/blinkies/ibite.gif"/>

<img src="https://i4.glitter-graphics.org/pub/1487/1487314wmyxva2jyl.gif"/>

<img src="https://64.media.tumblr.com/bcffeeb557414f57aaec57402147f647/985f5dc21309b785-7f/s250x400/7644631e0be0041d767e7bfec260c289e2ef9885.gif"/>

<img src="https://64.media.tumblr.com/905ba179c45c54da156d9e09e2657ae6/7dcb197a5d41a72c-eb/s250x400/3362d5a4621acf611566c359908a8eff3b581d0f.gif"/>

<img src="https://twigbranch.carrd.co/assets/images/gallery03/d5226b0f.gif"/>

<div style="float:  ; max-height: 300px; position: fixed; left: 1px; bottom: 5px; z-index: 200;">
<img src="https://ugleeblinkie.carrd.co/assets/images/image69.gif?v01485035087951" width="500" height="300"/></div>
<img src="https://plasticdino.neocities.org/blinkie/0035-edgyred.gif"/>
<img src="http://dl7.glitter-graphics.net/pub/754/754667r8n2u197zw.gif"/>
<img src="https://plasticdino.neocities.org/blinkie/vampire.gif"/>
<img src="https://i.pinimg.com/474x/ea/5f/43/ea5f435b201002ecf5dbcc955929d99e.jpg"/>
<style>
.contact img.icon { 
 display: none; 
}

.contact{background-color: transparent !important;}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a::before{ 
 /* add to friends */
 content: " ☆ "; 
 display: inline-block; 
 width: 10px; 
 height: 10px; 
 background-size: 100% 100%;
} 
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a::before{ 
 /* add to favorites */
 content: " ☆ "; 
 display: inline-block; 
 width: 10px; 
 height: 10px;  
 background-size: 100% 100%;
} 
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before{ 
 /* send message */
 content: " ☆ "; 
 display: inline-block; 
 width: 10px; 
 height: 10px;  
 background-size: 100% 100%;
} 
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before{
 /* forward to friend */
 content: " ☆ "; 
 display: inline-block; 
 width: 10px; 
 height: 10px;   
 background-size: 100% 100%;
} 
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before{
    /* instant message */
 content: " ☆ "; 
 display: inline-block; 
 width: 10px; 
 height: 10px; 
 background-size: 100% 100%;
} 
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
    /* block user */
 content: " ☆ "; 
 display: inline-block; 
 width: 10px; 
 height: 10px; 
 background-size: 100% 100%;
} 
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
    /* add to group */
 content: " ☆ "; 
 display: inline-block; 
 width: 10px; 
 height: 10px; 
 background-size: 100% 100%;
} 
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
    /* report user */
 content: " ☆ "; 
 display: inline-block; 
 width: 10px; 
 height: 10px; 
 background-size: 100% 100%;
} 


</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 0 of 0 comments ( View all | Add Comment )