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 25 comments ( View all | Add 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
々 MΛƧƬΣЯƧΉIƬ (my day is ruined)	1736260152 Using Report Comment
Popbal	1736010698 THANKS YALL WHO USE THIS LAYOUT I APPRECIATE YOU <33333 !!!!!! Report Comment
Lulu ₍ᐢ⑅ᐢ₎	1735720791 using Report Comment
Celty	1735004273 using Report Comment
vee	1731117989 using Report Comment
bettalanez	1730771189 using !! Report Comment
lidnis <3	1730395845 usingg )) Report Comment
valeria	1728938087 Using Report Comment
kaotic_egg	1724252849 using Report Comment
#Rottinggodness༄	1722872794 Using Report Comment
eli ︻┻┳══━一	1720077602 usiingg Report Comment
lukitaaaq	1717108943 using !!! Report Comment
XxBloodRat_69xX	1716764278 Using Report Comment