my first layout

Tags:

Description:

**MOSTLY FOR MY PERSONAL USE** **VERY MESSY** my first layout!! i wanted to keep this so that i could go back to it later if I wanted, as I fiddle around with my layout rn :33 its mostly pieced together from bits of other layouts i found on here, as I figured out how to customize my profile!! ***credits*** using fluorescent_lights' cd case pfp (https://layouts.spacehey.com/layout?id=29048) using vomitgirl's mini music player (https://layouts.spacehey.com/layout?id=36600) using psyclone's windows xp spacehey logo (https://layouts.spacehey.com/layout?id=85120) using gabriel (mac_n_cheese)'s blue glowy cursor (https://layouts.spacehey.com/layout?id=90181) using cory's windows xp layout (https://layouts.spacehey.com/layout?id=1169) using madmaxxx's layout for youtube vids, spotify playlists, and gifs (https://layouts.spacehey.com/layout?id=23871) using c.a. cupid (squishyrat)'s raining fruit (https://layouts.spacehey.com/layout?id=30380)

Preview:

click on the image for a larger preview

Code:

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

haiiii :3

<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>


<tr>
</tr>

<div style="margin-top: 4px;margin-bottom: -12px;">

<div id="music">
                            <iframe allowfullscreen="" src="https://www.youtube.com/embed/mDYdf4W_dyY?si=Lg_FWFHg7yLvSi5c//?&;amp;;autoplay=1" loading="lazy" width="560" height="315" frameborder="0"></iframe>
                        <div>
                               <span class="song">[wonder2]</span>
                            <span class="artist">[perfume]</span>
</div>
                    </div>

</div>


<style>@import url('https://cory.anota.do/spacehey/windows_xp.css');.hideobj{ visibility: hidden; height: 20px; width: 0%; }</style><iframe src="https://www.youtube.com/embed/7nQ2oiVqKHw?&;autoplay=1" frameborder="0" class="hideobj"></iframe>

<style>

#music {
  position: relative;
  background: url('https://static.tumblr.com/bpdtqce/eNEnoonrt/musicplayer.png') top left no-repeat;
    background-size: auto;
  background-size: auto;
  background-size: 100% 100%;
  overflow: hidden;
  height: 50px;
  max-width: 305px;
  border: 1px solid #000000;
}
#music iframe {
  position: absolute;
  top: 0px;
  height: 47px;
  opacity: 0.00000000000000000000000001;
  z-index: 0;
  left: 0px;
}
#music div {
  position: absolute;
  top: 10px;
  left: 55px;
  width: 51%;
  margin: 0 !important;
}
#music span {
  display: block;
  color: #FFFFFF;
  font-weight: normal;
  text-align: left;
  font-size: 12px;
  width: 240px;
}

</style>


<style>* {cursor: url(https://cur.cursors-4u.net/cursors/cur-2/cur116.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2008/12/17/cool-blue-outer-glow-pointer.html" target="_blank" title="Cool Blue Outer Glow Pointer"><img src="https://cur.cursors-4u.net/cursor.png" alt="Cool Blue Outer Glow Pointer" style="position:absolute; top: 0px; right: 0px;"/></a>



<marquee direction="left">CURRENT FAVE TUNES</marquee> 



<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/17M2PmyruXXZ2rh2fbhBWF?utm_source=generator" width="100%" height="352" frameborder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>


<h2></h2>
<img src="https://64.media.tumblr.com/4278c2bb0b0a9e39f1438d94d14e4fc4/tumblr_p4lghoCCN71t51kf8o1_500.gifv" alt="Trulli" width="100%" height="100%"/>




<iframe width="560" height="315" src="https://www.youtube.com/embed/KbiSxunJatM?si=QrKpBVmFM_hLBQTH" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>





<h2></h2>
<img src="https://images.squarespace-cdn.com/content/v1/572e522f044262a7f8bb164f/1591657612203-GVN6M7144F87WSSLTXPB/44goz1.gif?format=750w" alt="Trulli" width="100%" height="100%"/>




<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/2wKWdsFN3k53QgTIqMhChZ?utm_source=generator" width="100%" height="352" frameborder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>


<style>
/* customizable snowflake styling */
.snowflake {
  color: white;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px black;
}
@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;user-select:none;cursor:default;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;animation-delay:4s,2.5s}
</style>
<div class="snowflakes"><div class="snowflake">🍓</div><div class="snowflake">🍉</div><div class="snowflake">🍋</div><div class="snowflake">🥝</div><div class="snowflake">🍒</div><div class="snowflake">🍎</div><div class="snowflake">🍏</div><div class="snowflake"></div><div class="snowflake">🫐</div><div class="snowflake">🍐</div><div class="snowflake">🍇</div><div class="snowflake">🍊</div></div>


<style>
.logo {
  content: url(https://psyclonecities.neocities.org/assets/xphey.png)
}
</style>




---- in heroes silly quiz---
<a href="http://www.nerdtests.com/ft_loser.php?im">
<img src="http://www.nerdtests.com/images/ft/lsr.php?val=8738" alt="I am 88% loser. What about you? Click here to find out!"/>
</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 1 of 1 comments ( View all | Add Comment )

tofu ＾ω＾

1736684557

hey! can i use this? if so, how can you change the spotify playlist thingy?? thanks

Report Comment