Layout published by daniel

published 1696817124
updated 1697223762

Add to Favorites

View Layouts

View Profile

Report Layout

w98 cd player

Tags: embed, youtube, music, cd player, windows 98, retro

Description:

have you ever gone "i need more useless stuff on my profile!"?

well, i also went "which useless thing do i waste my time on?" so here's a windows 98 inspired overcomplicated cd player!!! icould have just taken a screenshot and plastered it across a div but i had to Do it entirely

preview

CD Player

Disc View Options Help

[00] 00:00

▶

❚❚

◼

❚◄◄

◄◄

►►

►►❚

❚ ►

Artist:

Title:

Total Play: 00:00 m:s

Track: 00:00 m:s

THE!!!!!!!:

includes yt embed. if you already have one delete it

it's not really functional... i mean you can click the buttons for brain tickling but that's it ! it doesn't control the music playing i wish i could do that

check the customization in the code to change your artist name and song title ! also your cover art : 3

oh it's of course defaulted to deftones btw

credits

credits for the styling goes to 98.css by jdan ^_^

Preview:

click on the image for a larger preview

Code:

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

<!--------- CD Player Code Start --------->
<!--------- MUSIC PLAYER ITSELF, CHANGE EMBED URL TO VIDEO URL OF YOUR SONG --------->
<iframe width="0" height="0" src="https://www.youtube.com/embed/KvknOXGPzCQ//?&;amp;;autoplay=1&;loop=1&" title="music" frameborder="0" allow="autoplay;" loading="lazy"></iframe>
<style>
/* customization. change your artist, title and album cover respectively */
:root {
--artist:"Deftones";
--title:"Be Quiet And Drive (Far Away)";
--albumcover: url(https://m.media-amazon.com/images/I/81BbQMTakEL._UF1000,1000_QL80_.jpg);
}

/* the code itself */
.status-bar,.title-bar,.title-bar-controls{display:flex}.window,p#butt{background:silver;margin:auto}p#text,p#text2{box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;box-sizing:border-box;margin-block:3px}p#butt,p#text,p#text2{box-sizing:border-box}p#label,p#text,p#text2{margin-block:3px}.status-bar,.title-bar-text,.toptoptop,p#butt,p#label,p#text2{user-select:none}@font-face{font-family:"Pixelated MS Sans Serif";font-style:normal;font-weight:400;src:url(https://unpkg.com/98.css@0.1.20/dist/ms_sans_serif.woff) format("woff");src:url(https://unpkg.com/98.css@0.1.20/dist/ms_sans_serif.woff2) format("woff2")}@font-face{font-family:"Pixelated MS Sans Serif";font-style:normal;font-weight:700;src:url(https://unpkg.com/98.css@0.1.20/dist/ms_sans_serif_bold.woff) format("woff");src:url(https://unpkg.com/98.css@0.1.20/dist/ms_sans_serif_bold.woff2) format("woff2")}.window{text-shadow:none;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff;padding:3px}.window img{filter:none!important}.window *{-webkit-font-smoothing:none;font-family:"Pixelated MS Sans Serif",Arial;font-size:11px;text-shadow:inherit}.title-bar{align-items:center;background:linear-gradient(90deg,navy,#1084d0);justify-content:space-between}.title-bar-text{color:#fff;font-weight:700;letter-spacing:0;margin-right:24px;line-height:15px}.title-bar-controls p#butt{display:block;min-height:14px;min-width:16px;padding:0}.title-bar-controls p#butt:active{padding:0}.title-bar-controls p#butt:focus{outline:0}.title-bar-controls p#butt.minimize{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 0h6v2H0z'/%3E%3C/svg%3E");background-position:bottom 3px left 4px;background-repeat:no-repeat}.title-bar-controls p#butt.maximize{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='%23000'/%3E%3C/svg%3E");background-position:top 2px left 3px;background-repeat:no-repeat}.title-bar-controls p#butt.close{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0V0z' fill='%23000'/%3E%3C/svg%3E");background-position:top 3px left 4px;background-repeat:no-repeat;margin-left:2px}.status-bar{gap:1px;margin:0 1px}p#butt{white-space:nowrap;}.buttontos,p#butt,p#label,p#text,p#text2{display:inline-block}.status-bar-field{box-shadow:inset -1px -1px #dfdfdf,inset 1px 1px grey;flex-grow:1;margin:0;padding:2px 3px}.window-body{margin:8px}p#butt{border:none;border-radius:0;min-height:23px;min-width:75px;padding:6px 12px 0;text-shadow:0 0 #222;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf;color:#000}p#butt:active{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey;text-shadow:1px 1px #222}p#butt:focus{outline:#000 dotted 1px;outline-offset:-4px}p#butt::-moz-focus-inner{border:0}.toptoptop{text-align:left;margin-top:-3px!important;margin-bottom:5px!important;margin-inline:0px!important;}.toptoptop span{border:1px solid silver;padding:2px 4px}.toptoptop span:hover{border-top:1px solid #fff;border-left:1px solid #fff;border-bottom:1px solid gray;border-right:1px solid gray}.toptoptop span:focus{border:1px inset #fff}.window{color:#000!important;font-family:"Pixelated MS Sans Serif"!important}p#text:active{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h16v17H0V0zm1 16h14V1H1v15z' fill='gray'/%3E%3Cpath fill='silver' d='M1 1h14v15H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 7H5v1h1v1h1v1h1v1h1v-1h1V9h1V8h1V7z' fill='%23000'/%3E%3C/svg%3E")}p#text{background-color:#fff;padding:4px;width:85%;text-align:left;font-size:12px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E");background-position:top 2px right 2px;background-repeat:no-repeat}p#text.artist:after{content:var(--artist)}p#text.title:after{content:var(--title)}p#text2:before{content:"";display:block;position:absolute;top:1px;left:1px;background:var(--albumcover);width:98%;height:96%;opacity:.5;background-size:cover;background-position:center;z-index:-1}p#text2{position:relative;padding:13px 4px;width:54%;font-size:20px;text-align:center;color:olive;background:#000;z-index:999}#butt,p#label{font-size:12px}p#label{width:fit-content;margin-right:5px}.ahhh{text-align:right}.title-bar{padding:2px}.title-bar-text img{vertical-align:bottom;margin-inline:2px}.buttontos{width:45%;height:54px;vertical-align:top;text-align:center}#butt{color:#000;text-shadow:1px 1px #fff;line-height:10px}#butt:not(:first-child){text-indent:-5px;font-weight:700}#butt:nth-child(3) span{display:block;transform:translate(2px,-2px) scale(1.2)}#butt:not(:first-child,:nth-child(2),:nth-child(3)){text-indent:-8px;font-weight:700;letter-spacing:-4px;font-size:10px}#butt:nth-child(8){text-indent:-8px;font-weight:700;letter-spacing:-1.5px;white-space:nowrap;text-shadow:none;transform:translateY(1px)}#butt:nth-child(8) span{display:block;transform:rotate(-90deg) translate(2px,0) scaleY(1.4);color:#000}.title,.artist{height:23px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:20px!important;vertical-align: bottom;}</style><div class="window" style="width:320px"><div class="title-bar"><div class="title-bar-text"><img src="https://images2.imgbox.com/42/89/JIRoQjUo_o.png"/>CD Player</div><div class="title-bar-controls"><p id="butt" class="minimize"></p><p id="butt" class="maximize"></p><p id="butt" class="close"></p></div></div><div class="window-body"><p class="toptoptop"><span><u>D</u>isc</span> <span><u>V</u>iew</span> <span><u>O</u>ptions</span> <span><u>H</u>elp</span></p><p id="text2">[00] 00:00</p><div class="buttontos"><p id="butt">▶ </p><p id="butt" style="min-width:20px;max-width:20px;margin-inline:0px">❚❚ </p><p id="butt" style="min-width:20px;max-width:20px"><span>◼</span> </p><p id="butt" style="min-width:20px;max-width:20px;margin-top:5px">❚◄◄ </p><p id="butt" style="min-width:20px;max-width:20px;margin-top:5px;margin-left:0px">◄◄ </p><p id="butt" style="min-width:20px;max-width:20px;margin-top:5px;margin-left:0px">►► </p><p id="butt" style="min-width:20px;max-width:20px;margin-top:5px;margin-left:0px">►►❚ </p><p id="butt" style="min-width:20px;max-width:20px;margin-top:5px;margin-left:0px"><span>❚ ►</span></p></div><div class="ahhh"><p id="label"><u>A</u>rtist:</p><p id="text" class="artist"></p><p id="label">Title:</p><p id="text" class="title"></p></div></div><div class="status-bar"><p class="status-bar-field">Total Play: 00:00 m:s</p><p class="status-bar-field">Track: 00:00 m:s</p></div></div>
<!--------- CD Player Code End --------->

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

abby	1767461382 usingg!! Report Comment
mili	1767455086 using xx Report Comment
𝖺𝗅𝖾𝗑	1767452400 using!! Report Comment
ʚ💤 L1ZZY 💤ɞ	1767445357 using :3 Report Comment
Sopv	1767433473 thx using Report Comment
hanni	1767427522 can someone givee me a link or sum for coding music on this on crap dude Report Comment
Mangoz.silly.	1767421434 Using Report Comment
alexxx <3	1767419145 prob using xx Report Comment
alice yoake	1767398983 usin~! Report Comment
𝚒𝚕𝚒	1767388709 ima use this! Report Comment
⚡️🪲!!!JAGGER!!!🪲⚡️	1767377274 Using Report Comment
Emo4life_13	1767376309 Using Report Comment
WILLy	1767357039 USINGG !! Report Comment how to use it im new in this by KaulitzTR4P; 1767363341; Report So, first you want to copy the code that the person made, then you want to go to edit my profile, you can pick any of the blurbs. I'd personally use my music blurb, just cause I like to have everything organized. Then you just paste the code in, change the embedded music to whatever you want and voila! If you don't know how to embed the music here's a stupid easy tutorial https://www.youtube.com/watch?v=wZnxkqFnoQc by ꒰୨୧◞ 。Cyro⠀.ꨄ༘; 1767365768; Report
JURNEE :D	1767331142 using!!! Report Comment
brimwnc	1767329586 using Report Comment
sonya060707	1767327584 Using! Report Comment
Milenaa XD	1767327584 using Report Comment
Dirtbag_Pivozavr	1767305217 using Report Comment
Lyla Nash	1767298393 using, thanks Report Comment
Yuri°❀⋆.ೃ࿔*:･ ᖭི༏ᖫྀ	1767289971 Using Report Comment