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

𝕺𝖉𝖊𝖑𝖎𝖆𝖍	1714308546 usingg Report Comment
smoorel	1713841816 usingg Report Comment
hashima..jpgϧ᱖	1712241421 usingg!!! Report Comment
andrey	1711682744 using <3 Report Comment