Space (hey) Layout

Tags: space, dark

Description:

made this thing for myself, but now you can have it too just beware because the code is quite a mess but i'll try to make sense out of it if you need any help with a layout or whatever, try texting me if there's any problem in the code, also try texting me

Preview:

click on the image for a larger preview

Code:

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

<style>

/* these are the fonts used */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zeyada&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&family=Pirata+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Road+Rage&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Redacted+Script:wght@300&display=swap');



h1{font-family: 'Road Rage', sans-serif;
color:white;}

.profile .blurbs .section h4 {color:#ff8eff;}

.profile h1 {text-align:center;
font-size:40px}


body{font-family:'Cutive Mono', monospace;
background:url(https://64.media.tumblr.com/6fa9ad9f859cf058bfe19a2536b0aa11/tumblr_pkv647vWBM1xp1j77o1_540.gif);
background-size:cover;
cursor:url("http://www.rw-designer.com/cursor-set/windows-7-aero-1"),auto;}

.comment-replies {border: 1px dotted white;}

div.inner b {animation: glow 1s ease-in-out 0s infinite ;}

.profile{background:black;
color:white;
padding:20px;
animation: mover 5s ease-in-out 0s infinite alternate;}

div.top{background:black;
border:1px dashed white;
border-radius:30px;
margin:20px;
animation: moverss 5s ease-in-out 0s infinite alternate;}

footer{background:black;
color:white;
animation: movers 5s ease-in-out 0s infinite alternate;}

main{background:black;}

.links{background-image: linear-gradient(white, black, white);
border-radius:20px;
animation: movers 5s ease-in-out 0s infinite alternate;}

p.online{color:white;
font-family: 'Zeyada', cursive;}

div.contact{background:black;
color:white;}

img.pfp-fallback{filter: drop-shadow(0px 0px 30px white) invert(5%);
animation: spin 1s ease-in-out 0s infinite alternate;
border:3px solid black;}

img.pfp-fallback:hover{filter: drop-shadow(0px 0px 10px magenta) invert(5%);}

.profile .contact{border: 2px solid #ffffff;}

.profile .contact .heading{border: 1px solid #ffffff;
background:black;}

.profile .url-info{border: 2px solid #ffffff;}

.profile .table-section{border: 2px solid #ffffff;
background:black;}

.profile .table-section .heading{border: 1px solid #ffffff;
background:black;}

td{border: 1px solid #ffffff;
background:black;
padding:0px;}

p{background:black;
color:white;}

.details-table td p{text-align:center;}

.details-table td:first-child{background:black}

.details-table td{background:black;}

a{color:magenta;}

.profile .blurbs {border:1px solid white;}

.profile .blurbs .heading{background:black;
border-bottom:1px dotted white;}

.profile .friends{border:1px solid white;}

.profile .friends .heading{background:black;
border-bottom:1px dotted white;}

.profile .friends .person p:hover {color:white;
filter: drop-shadow(0px 0px 5px white);}

h4{color:white}

main .right {border:1px dashed white;}


main .left {border: 1px dashed white;}


.comments-table td, .music-table td {background:black;}

.comments-table td:first-child, .music-table td:first-child {background:black;}

@keyframes spin {
    from {
        transform:rotateY(0deg) translateY(10px);
    }
    to {
        transform:rotateY(180deg) translateY(-10px);
    }
}



@keyframes mover{
    from {
        transform:translateX(60px);
    }
    to {
        transform:translateX(-60px);
    }
}

@keyframes movers{
    from {
        transform:translateX(25px);
    }
    to {
        transform:translateX(-25px);
    }
}


@keyframes moverss{
    from {
        transform:translateX(15px);
    }
    to {
        transform:translateX(-15px);
    }
}

@keyframes glow{
  0%   {background-color: red;}
  14%  {background-color: yellow;}
  28%  {background-color: blue;}
  42% {background-color: green;}
  56%   {background-color: red;}
  70%  {background-color: yellow;}
  84%  {background-color: blue;}
  100% {background-color: green;}
</style>


/*this makes it play music */

<iframe width="0" height="0" src="https://www.youtube.com/embed/OW9sFOw_8zo//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>

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 )

sogg	1746273860 using!!! Report Comment
𝘮𝘢𝘰𝘴 𓆩♡𓆪	1744958484 using for my diary blog ^^ Report Comment
★彡[ᴠɪᴠɪ]彡★	1744753249 using! <3 Report Comment
★彡[ᴠɪᴠɪ]彡★	1744753249 using! <3 Report Comment
Mar	1743299794 Using :) Report Comment
frushi	1741105174 I think I will use it Report Comment
Kyle :3	1739090995 using Report Comment
FIZZY !	1739080123 Using!! Report Comment
CESAR!1!	1737892220 using Report Comment
Aveloveline	1737312046 using Report Comment
hor66	1736627630 using!! Report Comment
Popbal	1736010698 THANKS YALL WHO USE THIS LAYOUT I APPRECIATE YOU <33333 !!!!!! Report Comment
baby Lo ₍ᐢ⑅ᐢ₎	1735720791 using Report Comment
Celty	1735004273 using Report Comment
vee	1731117989 using Report Comment
bettalanez	1730771189 using !! Report Comment
lidniz	1730395845 usingg )) Report Comment
valeria	1728938087 Using Report Comment
kaotic_egg	1724252849 using Report Comment