In Case You Dont Know
I Use This Y2K Theme for My Spacehey Account (Because all the Other Themes Have an Awkward Post 9/11 Feel to It)
I Want to Use A Link to A 90s Dance Station (FM 101 The Planet) to play
When You Enter My Site
(The Station is Only Really Available in Canada Right Now But i Managed to Find FM 101s Main Stream Link to Use in Here)
I Want to Have This on my Site to Add to the Experience That 1 Youtube Video or Spotify Playlist Wont Do
But When i Try to Add the Code to Add the Station
The Player Doesn't Work and When i Try to Edit The Code, The Stations Stream Link Vanishes
This is The Only True Y2K Theme That Exists
I Tested it in Codepen and It Works Fine
So IDK Why It Doesn't Work in the Main Spacehey Page
Heres The Source Code In Case Your Wondering
--------------------------------------------------------------------------------------------------------------------
<!-- (c) Layout created by emo.rat (https://layouts.spacehey.com/layout?id=3462) -->
<style>
.section {
text-align: center;
}
.container {
width: 950px;
max-width: 100%;
margin: 0 auto 10px;
}
h2 {
font-size: 2.5em;
margin: 0;
}
.online{
content:url(https://media.discordapp.net/attachments/783779926062268478/863162272897040404/on2.gif?width=125&height=48);
}
a {
color: #f7f334;
text-decoration: none;
}
.general-about .profile-pic img {
max-width: 160px;
max-height: 160px;
border-radius: 25px;
border: solid white 3px;
border-right: solid 7px;
border-bottom: solid 15px;
}
.profile .blurbs .section h4 {
margin: 0;
color: #33da97;
}
body {
/* background: url(https://pbs.twimg.com/media/E5ZxOBsXwAAizJD?format=jpg&name=large); */
background-size: cover;
background-attachment: fixed;
background-position: center;
text-transform: lowercase;
background-blend-mode: overlay;
background-color: #25025d;
font-family: 'Fredoka One', cursive;
}
nav {
margin-bottom: 48px;
}
nav .top {
background: #53263900;
padding: 15px 10px 14px 10px;
display: flex;
color: black !important;
}
nav .top .center form {
margin-top: -2px;
width: 100%;
color: white;
}
nav .links {
background-color: #a2a2a2;
padding: 3.5px 16px 5.5px 16px;
text-align: center;
position: fixed;
top: 0px;
left: 0;
width: 100%;
margin: 0px;
z-index: 9;
}
nav .links a {
text-decoration: none;
color: white;
font-size: 0.98em;
}
nav .top a {
text-decoration: none;
color: white;
}
nav .top .left .logo {
width: 165px;
height: 42px;
position: fixed;
top: 0px;
left: 0;
z-index: 10;
border-radius: 6px;
background-color: #a2a2a2;
border: solid 6px #00000000;
block-size: 66px;
}
nav .top {
display: flex!important;
opacity: 1!important;
position: fixed;
top: 0px;
right: 0;
padding: 6px;
z-index: 10;
}
.profile .friends .person img:not(.icon) {
max-width: 95px;
max-height: 95px;
display: block;
border-radius: 22px;
margin: 0 auto;
border: solid white 3px;
border-right: solid 7px white;
border-bottom: solid 15px white;
}
.mood:after {
content: url(https://media.discordapp.net/attachments/783779926062268478/864632650958635048/dismissysthing.png?width=350&height=120)
}
.profile .blurbs .heading, .profile .friends .heading {
background: #f7f335;
color: rgb(0 0 0 / 90%);
padding: 2px 7px;
border-radius: 40px;
}
.profile .friends .person p {
color: #baddff;
font-weight: bold;
width: 100%;
word-break: break-word;
font-size: 100%;
text-align: center;
}
.profile .friends .person {
width: 105px;
display: inline-block;
padding: 5px;
margin: 0 3px 10px 3px;
}
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
background: #6d0fb9;
color: white;
padding: 2px 7px;
border-radius: 0px 14px;
}
.details-table td:first-child {
background: #ffdbdb00;
color: #290973;
font-weight: bold;
width: 33%;
}
.details-table td {
background: #000438;
vertical-align: top;
}
.details-table td * {
border-radius: 25px;
}
.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
width: 100%;
border: 2px solid #ffffff;
border-left: 11px solid;
margin: 10px 0;
border-right: 7px solid;
border-radius: 0px 20px;
}
main, footer {
background: #51007991;
color: white;
padding: 6px 6px;
font-size: 75%;
border-radius: 48px;
border: solid white 6px;
border-right: solid 13px;
border-bottom: solid 30px;
}
.table-section:not(:last-child) .details-table tr td:first-child p {
color: transparent !important;
text-shadow: none !important;
letter-spacing: -100px;
}
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after {
content: "general";
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after {
content: "musics";
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after {
content: "movies";
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after {
content: "tv";
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after {
content: "books";
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after {
content: "games";
}
.table-section:not(:last-child) .details-table tr:nth-child(7) td:first-child p::after {
content: "music box";
}
.table-section:not(:last-child) .details-table tr:nth-child(8) td:first-child p::after {
content: "random";
}
.details-table tr td:first-child p:after {
color: white;
letter-spacing: normal !important;
filter: brightness(100%) !important;
}
main .left, main .right {
padding: 10px;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 10px);
}
</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
</style>
<style>
.comments-table td, .music-table td {
background: #4b0d99c7;
vertical-align: top;
}
.comments-table td:first-child, .music-table td:first-child {
background: #5e0d9980;
text-align: center;
font-weight: bold;
width: 38%;
}
.comments-table td:first-child img:not(.icon), .bulletin-table td:first-child img:not(.icon) {
width: 130px;
max-width: 100%;
max-height: 200px;
border-radius: 22px;
margin: 0 auto;
border: solid white 3px;
border-left: solid 7px white;
border-right: solid 15px white;
}
.profile-info {
display: flex;
background: #4912a0;
align-items: center;
justify-content: center;
padding: 15px 5px;
margin-bottom: 10px;
background-size: 100% 100%;
border-radius: 25px;
border: solid white 4px;
border-right: solid 8px;
border-left: solid 18px;
}
.mood:before {
background-image: url(https://media.discordapp.net/attachments/783779926062268478/863140205099220992/Animal-Crossing.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
height: 100px;
width: 100px;
content: " ";
transform: rotate(-57deg) scale(2.2) translateX(-3.6em) translateY(-0.7em);
position: absolute;
z-index: -1;
}
.general-about:before {
background-image: url(https://media.discordapp.net/attachments/783779926062268478/866673035481317386/Y2K_Aesthetic_Institute_BLM_on_Twitter.png?width=760&height=1333);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
height: 100px;
width: 100px;
content: " ";
transform: rotate(0deg) scale(1) translateX(7em) translateY(-4.5em);
position: absolute;
z-index: 0;
pointer-events: none;
}
.profile h1 {
font-size: 7.2em;
margin: 0 0 10px 0;
font-family: 'Fredoka One', sans-serif;
font-weight:normal;
font-style:normal;
text-shadow: 4px 4px #aa4dfe;
}
.profile .left h1:before {
background-image: url(https://media.discordapp.net/attachments/783779926062268478/862928667385266206/y2ktest2.gif);
background-size: contain;
background-repeat: no-repeat;
display: block;
height: 108%;
width: 100%;
left: 0px;
top: 0;
content: " ";
transform: scale(1);
position: fixed;
z-index: -1;
}
.profile .left h1:after {
background-image: url(https://media.discordapp.net/attachments/783779926062268478/865057349009276928/jojo.gif);
background-size: cover;
background-repeat: no-repeat;
display: block;
height: 26%;
width: 100%;
left: 0px;
bottom: 0px;
content: " ";
transform: scale(1);
position: fixed;
z-index: -3;
}
iframe {
border-radius: 0px 35px !important;
opacity: 95%;
}
</style>
<!-- (c) Layout created by lua (https://layouts.spacehey.com/layout?id=2529) -->
<style>
.audio {
border: 1px solid;
background: #f3f3f3;
position: absolute;
top: 0;
left: 0;
margin: 10px;
padding: 5px;
}
</style>
<div class="audio">Music Powered By: FM 101 The Planet!<br/>
<audio controls="">
<source src="https://c9.radioboss.fm:18130/stream" type="audio/mpeg">
Your browser does not support the audio element.
</source></audio>
</div>