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

dennydenmark	1784530751 using :p Report Comment
Katkagrr	1774811229 used the background for my profile, it's amazing! Report Comment
TRIPLESIX	1771385113 Usinggg Report Comment
ReVerSe	1771079685 USINGGG Report Comment
ReVerSe	1771079685 USINGGG Report Comment
Billy Boy :3	1766713138 USSINGGG<3 Report Comment
𝙳'𝙰𝙽𝙳𝚁𝙴 𝙳𝙴𝙴𝙿𝙲𝚄𝚃	1761214481 USINGGG <3 Report Comment
HamMer <3	1760038093 Using Report Comment
Alexandra ^,…,^	1759325005 usingg!! Report Comment
hydrargyrum	1758651730 AWESOME using Report Comment
tweek	1756980353 usingg Report Comment
Xuie	1740131636 Using Report Comment
Xuie	1740131632 Using Report Comment
✰DIDI★	1737479399 USING Report Comment
why you did that	1735446854 using, i love this 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