scene/emo black and red checker layout

Tags: emo, scene, scemo, red, black, 2000s, simple, glitter

Description:

UPDATE!! fixed unintended icon shrinking (dont ask bc idk how i did that). if you're using this code from before Apr 29 2024, use this one instead! or remove ".icon" from the code labelled "/* makes it so tables, comments, url, and contact sections have no border */"

my first ever spacehey layout! i'm probably changing mine soon so i thought i'd clean up the code (it was a DISASTER OMFG XD) and label everything. i learned a lot of coding from studying website and layout code, so i thought i'd give back by labeling everything all nice. also makes it easier to edit if you want to :)

anyways, feel free to use this, change up bits and pieces if you want, and all that. all i ask is that you don't remove my signature and website link if you're using the majority or all of my code instead of just for studying, thx. feel free to comment bc i'd love to know if anyone actually ends up using this, but no pressure.

lastly, i don't claim this code to be perfect. it probably has some weird bugs n shit since it's the first thing i ever made in HTML/CSS. but it functions at least lololol XD

k thx byee

tl;dr: if you use this keep my name and website link, comment if you want

Preview:

click on the image for a larger preview

Code:

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

<style>
/* your starting style tag, which is how you start any profile layout or CSS generally */

html{
scrollbar-color: red black;
}
/* changes scrollbar color */

.contact .heading{ 
font-size:0; 
}
.contact .heading:before {
    content: "talk 2 me!";
    font-weight: bold;
    font-size: 13px;
    color: white;
}
/* edits the text in ur add to friends section */


.profile {
color:red;
border:0px none;
font-family: "Courier New", monospace;
font-size:12px;
 }
/* determines some base stuff. in order: */
/* border 0px none specifies no border around the body of your profile */
/* then you have font family and size which specifies which font */


main {
  background-color:black;
  border:0px none;
}
/* the background color of your whole account, and border 0px for no border around your profile body */

body {
    background: url(https://64.media.tumblr.com/6e833566d3b9742e8deb8e2b708d39b9/tumblr_pwz869HF0G1yqu9ybo2_r1_400.gifv);
}
/* background gif, so the cool glittery checker pattern */
/* honestly you should probably reupload the image to imgur and use that link so it doesn't get removed lmao */


h1{   
color: white; 
text-shadow: 2px 2px 0px red;
}
/* changes all text with the h1 (header 1) tag */
/* in this case, this just edits how your name appears at the top of your profile */


.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
  background-color: #121212;
  color:white;
  text-shadow:1px 1px 0px red;
}
/* adds cool red text shadow to sub headers, so stuff like Interests and Blurbs and all that */
/* each comma seperates a different sub heading */


.friends:not(#comments) {
  background:black;  
}
/* changes the background color of your friends list */
.friends .inner .friends-grid .person p{
	color:white;
}
/* changes friends list name color */

.friends .inner .friends-grid .person p:hover{
	color:red;
}
/* changes friends list name color on hover */


.profile .friends td {
  background: black;
} 
/* makes your profile comments section black and not orange */


.logo {
    background: #ff214e;
}
/* changes the color of the spacehey logo */

nav{
background-color:#ff214e;
}
/* changes the color of the navbar */
nav ul{
background:none !important;
}
/* overrides light blue navbar color */


.top{
background:#ff214e !important;
}
/* changes the color of the stuff above the navbar, !important is to override blue color */
/* i find it looks nicer when this matches the color of .logo, but idk if you add a border to the logo it might look nice? idk i just coded it */


.profile .table-section .details-table td {
  background-color:#121212 ;
  color: red;
}
/* background color and font color for your interests and links tables */


.profile .blurbs .heading, .profile .friends .heading, .blog-preview h4 {
  background-color: #121212;
  color: white;
  text-shadow:1px 1px 0px red;
}
/* changes subheaders (blurbs, latest blog entries, etc) to white text with red shadow */
/* why is the blog preview different? it's totally not bc i couldn't figure out how i formatted the other headers /sarc */


.online { 
visibility: hidden; 
} 
.online img { content: url("http://www.myspacegens.com/images/online_now/55.gif"); 
	animation-name: none; 
	visibility: visible; 
	height: 20px; 
	width: 80px; 
}
/* replaces default online icon with cooler green day american idiot one */


.friends th, tr, .friends td, th, #comments, main, .comments-table, .friends, .profile-info, .table, .table-section, .contact, .url-info, .mood, .blurbs, .blog-preview, .details, .profile-pic img{
border: 0px !important;
padding: 5px;
outline: none !important;
}
/* makes it so tables, comments, url, and contact sections have no border */

.friends#comments .inner .comments-table .comment-replies {
	border: black solid !important;
}
/* makes replies not have a white border */

.profile-pic img{
	filter:grayscale(50%);
	transition-duration:2s;
}
.profile-pic img:hover{
	filter:grayscale(0%);
	transition-duration:2s;
}
/* hover fx for profile pic, optional */


footer{
    background-color: black;
    color:red;
    padding:5px;
}
/* changes spacehey footer colors (the gray box that says brought to u by tibush or smthn XD) */


a {
color:white;
text-shadow:1px 1px 0px red;
}
/* changes link color from ugly blue to white with red shadow */


/* hey, if ur reading this dont delete this line or i'll be miffed lmfao, it doesn't even affect ur layout at all smfh */
/* just maybe if this helped,, visit my website OMG 2003 at https://xx2003xx.neocities.org/ */
/* or don't. im not ur mom */
/* - XxLie_AbilityxX */

/* anyways, this tag below closes off all that CSS and coding junk. basically, put it at the end so everything actually shows up */
</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 23 comments ( View all | Add Comment )

Moonie	1715360065 Using Report Comment
Chromio	1715350956 using! Report Comment
vyn	1715313483 using Report Comment
Trevogi_ICH	1715285056 Using (!) Report Comment
Geekatr0n	1715187262 Using! Report Comment
hoshi	1715131466 using :3 Report Comment
HEE HEE	1715126912 using Report Comment
xxballinnnnxxx	1715103440 BALLINNNNNN Report Comment
catraven	1715075798 using with a few color changes (i hope thats okay) Report Comment totally ok!! tysm!! X3 by XxLie_AbilityxX; 1715091648; Report it looks super cool btw!!:00 by XxLie_AbilityxX; 1715091697; Report
Maizuu	1715053415 using!! Report Comment
Noire	1715047813 using !! ^^ Report Comment
Matthew :3	1715013741 Using!! o_0 Report Comment
Ashlynn	1714979997 Using Report Comment
Solei	1714977330 using Report Comment
@MAXINNE !!	1714837875 using !! Report Comment
maggoteatz	1714777965 using !!!! Report Comment
★ ︴CHR1Z 🧪♱ೄྀ	1714653947 using!!1! Report Comment
K4RRI	1714571236 using! Report Comment
STANLEY 𖦹	1714499270 using!! Report Comment
Jude >_<	1714483541 using !!!!! Report Comment