Black and Red Space Themed Layout

Tags: red, space, black, simple

Description:

this is my FIRST layout ive ever made!!! :D i was originally just making one for myself but i dont think ill use it :P [ 5/3/24 update: fixed broken background image link]

Preview:

click on the image for a larger preview

Code:

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

<style>
:root {
    --topic1: "general"; 
    --topic2: "music";
    --topic3: "movies";
    --topic4: "televison";
    --topic5: "books";
    --topic6: "extra";
    


 }

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
   color:var(--links) !important;
   letter-spacing:normal !important;
   text-shadow: 2px 2px red !important; /* CHANGE COLOR OF INTEREST LABELS HERE */
   filter: brightness(95%) !important;
}

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
    content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
    content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
    content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
    content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
    content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
    content: var(--topic6);
}
</style>

<style>

@import url('https://fonts.googleapis.com/css2?family=Iceland&display=swap');

body{
background-image:url(https://cur.glitter-graphics.net/pub/3682/3682035w0b32lim7w.gif);
background-attachment: fixed;
}

main{
background: transparent;
}

p{
color: red;
}

nav .top{
background-color: transparent;
margin: 1em 0;
}

nav .links{
background: rgba(255, 5, 0, 0.8);
background: linear-gradient(0deg, rgba(255, 5, 0, 0.8) 0%, rgba(255, 0, 0, 0.61) 18%, rgba(255, 0, 0, 0.61) 38%, rgba(5,2,9,0.7) 59%, rgba(255, 0, 0, 0.61) 83%, rgba(255, 0, 0, 0.61) 100%);
border: 1px solid #000000;
box-shadow: inset 0px 0px 5px #000000;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: 1em 0;
}

nav .links li::after{
display: none;
}

.profile h1{
font-family: 'Iceland', cursive;
color: red;
font-size: 50px;
text-shadow: 0px 0px 5px #000000;
}

.profile .general-about{
padding: 1em;
color: red;
text-shadow: 2px 3px 5px black;
}

.profile-pic img{
border: 2px solid #ff1100;
box-shadow: 0px 0px 10px #dc8383;
}

.online{
color: red;
font-family: 'Iceland', cursive;
text-shadow: 0px 0px 5px #dc8383;
font-size: 20px;
margin: 0;
padding: 0;
}

.online img{
content: url(https://external-media.spacehey.net/media/ssq25KcUI9PeuVEjroQhZ3fhhjKxRSjtzisv9DOjD99Y=/https://cur.glitter-graphics.net/pub/3163/3163017de4f56qdbw.gif);
animation: none;
padding: 0;
margin: 0;
}

.profile .profile-info{
color: black;
text-shadow: 2px 3px 5px red;
background: rgba(255, 0, 0, 0.61);
background: linear-gradient(0deg, rgba(27, 0, 0, 0.61) 0%, rgba(87, 0, 0, 1) 18%, rgba(87,1,0,0.5) 38%, rgba(80,0,0,1) 59%, rgba(20, 0, 0,1) 83%, rgba(87, 0, 0,1 ) 100%);
border: 1px solid red;
box-shadow: inset 0px 0px 5px red;
}

.profile .contact .heading,
.profile .table-section .heading{
font-family: 'Iceland', cursive;
font-size: 30px;
background-color: transparent;
color: red;
text-shadow: 2px 3px 5px black;
}

.profile .contact, 
.profile .table-section,
.profile .url-info{
background: rgba(255, 0, 0, 0.61);
background: linear-gradient(0deg, rgba(27, 0, 0, 0.61) 0%, rgba(87, 0, 0, 1) 18%, rgba(87,1,0,0.5) 38%, rgba(80,0,0,1) 59%, rgba(20, 0, 0,1) 83%, rgba(87, 0, 0,1 ) 100%);
border: 1px solid red;
box-shadow: inset 0px 0px 5px red;
}

table.details-table td {
background-color: transparent !important;
color: red !important;
text-shadow: 2px 3px 5px black;
}

.profile .mood{
color: red;
text-shadow: 2px 3px 5px black;
}

.profile .url-info{
color: black;
text-shadow: 2px 3px 5px black;
}

.profile .blog-preview{
color: red;
text-shadow: 2px 3px 5px black;
}

.profile .blurbs .heading,
.profile .friends .heading{
font-family: 'Iceland', cursive;
font-size: 30px;
background-color: transparent;
color: red;
text-shadow: 2px 3px 5px black;
}

.profile .blurbs,
.profile .friends{
background: rgba(255, 0, 0, 0.61);
background: linear-gradient(0deg, rgba(27, 0, 0, 0.61) 0%, rgba(87, 0, 0, 1) 18%, rgba(87,1,0,0.5) 38%, rgba(80,0,0,1) 59%, rgba(20, 0, 0,1) 83%, rgba(87, 0, 0,1 ) 100%);
border: 1px solid red;
box-shadow: inset 0px 0px 5px red;
}

.profile .blurbs .section h4{
color: black;
text-shadow: 2px 3px 5px red;
padding: 1em 0;
}

.profile .blurbs p{
color: red;
text-shadow: 2px 3px 5px black;
}

.profile .friends .friends-grid p{
color: red;
text-shadow: 2px 3px 5px black;
}
.friends .inner {
    overflow-y: scroll;
    max-height: 360px;
}
  
.profile .friends p b{
color: red;
text-shadow: 2px 3px 5px black;
}

.count{
color: black;
text-shadow: 2px 3px 5px red;
}

.profile .comments-table{
border: none;
color: red;
background-color: transparent;
box-shadow: 0px 0px 10px red;
margin: .5em 0;
}

.profile .comments-table td{
background-color: transparent;
color: red;
}

footer{
background-color: transparent;
margin: 1em 0;
color: red;
}

a{
color: red;
text-shadow: 2px 3px 5px black;
}

a:visited {
color: red;
text-shadow: 2px 3px 5px red;
text-decoration: none;
}

a:hover {
color: red;
}

nav .links a:hover{
color: 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 friend */
	content: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8opn0x-889dd96d-4f23-43a8-acd5-71733d4936fb.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvcG4weC04ODlkZDk2ZC00ZjIzLTQzYTgtYWNkNS03MTczM2Q0OTM2ZmIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.YVsQRaBRNcejOAVeS1RRKTXNhwhUJ_cWZhRpQVO96sk);
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add 2 fav */
	content: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8opn0x-889dd96d-4f23-43a8-acd5-71733d4936fb.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvcG4weC04ODlkZDk2ZC00ZjIzLTQzYTgtYWNkNS03MTczM2Q0OTM2ZmIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.YVsQRaBRNcejOAVeS1RRKTXNhwhUJ_cWZhRpQVO96sk)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* chat */
	content: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8opn0x-889dd96d-4f23-43a8-acd5-71733d4936fb.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvcG4weC04ODlkZDk2ZC00ZjIzLTQzYTgtYWNkNS03MTczM2Q0OTM2ZmIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.YVsQRaBRNcejOAVeS1RRKTXNhwhUJ_cWZhRpQVO96sk)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward */
	content: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8opn0x-889dd96d-4f23-43a8-acd5-71733d4936fb.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvcG4weC04ODlkZDk2ZC00ZjIzLTQzYTgtYWNkNS03MTczM2Q0OTM2ZmIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.YVsQRaBRNcejOAVeS1RRKTXNhwhUJ_cWZhRpQVO96sk)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant msg */
	content: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8opn0x-889dd96d-4f23-43a8-acd5-71733d4936fb.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvcG4weC04ODlkZDk2ZC00ZjIzLTQzYTgtYWNkNS03MTczM2Q0OTM2ZmIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.YVsQRaBRNcejOAVeS1RRKTXNhwhUJ_cWZhRpQVO96sk)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block */
	content: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8opn0x-889dd96d-4f23-43a8-acd5-71733d4936fb.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvcG4weC04ODlkZDk2ZC00ZjIzLTQzYTgtYWNkNS03MTczM2Q0OTM2ZmIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.YVsQRaBRNcejOAVeS1RRKTXNhwhUJ_cWZhRpQVO96sk)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add 2 group */
	content: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8opn0x-889dd96d-4f23-43a8-acd5-71733d4936fb.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvcG4weC04ODlkZDk2ZC00ZjIzLTQzYTgtYWNkNS03MTczM2Q0OTM2ZmIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.YVsQRaBRNcejOAVeS1RRKTXNhwhUJ_cWZhRpQVO96sk)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report */
	content: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8opn0x-889dd96d-4f23-43a8-acd5-71733d4936fb.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvcG4weC04ODlkZDk2ZC00ZjIzLTQzYTgtYWNkNS03MTczM2Q0OTM2ZmIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.YVsQRaBRNcejOAVeS1RRKTXNhwhUJ_cWZhRpQVO96sk)
} 

.contact .inner a img {
 font-size: 0;
}
.contact .inner a img:before {
 font-size: 1em;
 display: block
}

</style>

<style>
/* replace with cd image that has transparent background. must be 150px by 150px. */
:root {
--cd-image: url('https://fluorescent-lights.neocities.org/Digital-CD-Disk-Vector-Transparent-PNG.png');
}
.profile-pic {
position: relative;
width: 183px;
filter: drop-shadow(0 0 0.25rem gray);
}
.profile-pic:after {
content: "";
background: url('https://fluorescent-lights.neocities.org/f0rzNHe.png'), linear-gradient(150deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2), 40%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.6));
background-size: contain, cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.profile-pic:before {
content: "";
background: var(--cd-image);
position: absolute;
top: 5px;
left: -20px;
width: 150px;
height: 150px;
background-repeat: no-repeat;
z-index: -1;
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear; 
transition: left ease 0.5s;
}
.profile-pic:hover:before {
left: -75px;
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
.profile-pic .pfp-fallback {
float: right;
width: 163px;
height: 160px;
border: none;
}
.general-about .profile-pic img {
max-width: inherit;
}
</style>

<style>
h1{
animation: type 3s steps(27);
  color: transparent;
  font-size: 7px;
  white-space: nowrap;
  overflow: hidden;
  }

@keyframes type{
  0%{
    width:0ch;
  }
  
  100%{
    width:27ch;
  }
}

@keyframes blink{
  0%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:1;}
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 6px);
}
100% {
transform: translate(0, -0px);
}
</style>
<style>* {cursor: url(https://cur.cursors-4u.net/cursors/cur-2/cur117.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2008/12/17/cool-red-outer-glow-pointer.html" target="_blank" title="Cool Red Outer Glow Pointer"><img src="https://cur.cursors-4u.net/cursor.png" alt="Cool Red Outer Glow Pointer" style="position:absolute; top: 0px; right: 0px;"/></a>

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 29 comments ( View all | Add Comment )

fishy	1740131636 Using Report Comment
fishy	1740131632 Using Report Comment
✰DIDI★	1737479399 USING Report Comment
catzrcool127	1735446854 using, i love this Report Comment
ethan !	1731816126 usinggg!!! :p Report Comment
пупалупа2401	1724442380 using Report Comment
ZLEEB (STARRY) ✩ 🛸	1718763409 Using ^_^ Report Comment
nari/davey ᶻz	1705059221 USING! X3 Report Comment
Shadz	1704727152 using Report Comment
Soobinnie	1704257416 using<3 Report Comment
chaee! ✮✮✮	1704184567 usingg! :3 Report Comment
! REDOING PROFILE	1703208295 using !! Report Comment
Pawprint1	1702693238 bg doesnt work :( Report Comment should be fixed!! ^_^ by b; 1702698387; Report
catwalktragedy	1702075768 USING!! Report Comment
🐾 . . . [ Wolfboy _ Herbo ]	1701658190 using!! Report Comment
RIKA ☆ MOCA	1701089350 so cool !!! will b using !! Report Comment
V	1700353225 using!!<3 Report Comment
hex u,_u	1700106419 using >:3 Report Comment