HTML, CSS and JavaScript playground

<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"/>

animation: background 40s linear infinite	
		  }
          
		  @keyframes background {
		    0% {
		      background-position:0% 0%;
		    }

100% {
		      background-position:100% 0%;
		    }
		  }
        header img {
            width: 700px;
            height: 140px;
            img-position: fixed;
        }
        .sidebar {
            width: 150px;
            height: 500px;
            padding: 20px;
            text-align: center;
            color: #80614e;
            float: left;
            border-right: ridge;
            border-width: 2px;
            border-color: light-gray;
            background-color: #ffffff;
            margin-bottom: 0;
            
    }
    .sidebar {
        float: left;
        width: 130px;
        height: 100%;
        background-color: url("https://files.catbox.moe/gngivr.gif");
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 0px;
        padding: 10px;
    }
        #sidebar img {
            width: 100%;
            height: auto;
            margin-bottom: 5px;
        }
    .sidebar-description {
        margin-top: 10px;
        background-color: #fff;
        padding: 5px;
        border-radius: 4px;
    }
    .navigation {
        margin-top: 10px;
        text-align: center;
        list-style-type: none; 
        padding-left: 0; 
    }
    .navigation li {
        margin-bottom: 5px;
        position: relative;
        padding-left: 30px; 
        line-height: 20px; 
    }
    
    .navigation a {
        display: inline-block;
        padding: 5px;
        text-decoration: none;
        color: auto;
        font-weight: 400;
    }

.content {
        margin-left: 150px; 
        padding: 12px;
    }
    .cake {
        background-color: #fff;
        padding: 10px;
        border-radius: 5px;
    }
    .cake-header {
        font-size: 14px;
        font-weight: bold;
        padding: 2px;
        margin-bottom: 4px;
        background-color: #ffe6e6;
        border-radius: 5px;
        
    }
    .footer {
        height: 36px;
        background-color: white;
        clear: both;
    }
    marquee {
            width:100%;
            height:60px;
            padding:0px;
            border-top: ridge;
            border-bottom: ridge;
            border-width: 2px;
            background: #ffffff ;

}

</style>
</head>
<body>
<div class="top-bar"></div>
<div class="container">
    <div class="header">
    <img src="https://files.catbox.moe/p9v4l5.png" alt="header img">
    </div>
    <div class="sidebar">
        <img src="https://files.catbox.moe/gngivr.gif" alt="Sidebar Image">
        <div class="sidebar-description">
            <p>Description here</p>
        </div>
        <div class="navigation">
            <a href="abt">about me.</a>
            <br>
            <a href="diary">my diary.</a>
            <br>
            <a href="photo-diary">photo diary.</a>
            <a href="media-log">media log.</a>
            <a href="chocomeFM">chocomeFM.</a>
            <a href="spaceheylink">my tumblr.</a>
        </div>
    </div>

<div class="content">
        <div class="cake">
            <div class="cake-header">how chocome came to be !</div>
            <p> <img src="https://files.catbox.moe/fu1qbb.gif" style="float:left; margin-right:6px; margin-bottom: 0px;"> welcome to my sweet world ! chocome ! (≧ヮ≦) i've created this site as a way to talk freely abt all of the things tht i like n enjoy. i've always like the idea of having my own little personal space on the web that would just be 100% me, y'know? i've always loved the vibe of old / indie web stuff so i decided to start learning a bit more about how to code, and here we are ! since i'm still learning lots, this site will constantly be updated + under construction :33c ! i hope that you will enjoy your little visit @ chocome ! yaay ! ☆*:.｡. o(≧▽≦)o .｡.:*☆ </p>
            
        </div>
    </div>

<div class="footer">
         <center>copyright © 2024 chocome, all rights reserved
      <br>made with love ♪<br>
    </div>
  
</div>

<script src="//glen-players.gitlab.io/03/core.js"></script>
<link href="https://chocome.neocities.org/music.css" rel="stylesheet">
<style element="glenplayer03">
[glenplayer03]{
    /*--- player options ---*/
    --MusicPlayer-Screen-Gap:30px;
    --MusicPlayer-Width:210px;
    z-index:699; /* increase this number if you can't see or interact with the player */

/*--- animation options ---*/
    --MusicPlayer-Always-Show:"no"; /* "yes" will disable the next 2 options */

--MusicPlayer-Start-State:"hide"; /* "show" or "hide" */
    --MusicPlayer-Interaction-Trigger:"hover"; /* "hover" or "click" */

--MusicPlayer-Animation-Speed:0.7s;

/*--- playback options ---*/
    --Autoplay-First-Song:"no";
    --Autoplay-Next-Song:"yes";
    --Loop-Playlist:"no";

/*--- player title ---*/
    --MusicPlayer-Title-Size:0.7rem;
    --MusicPlayer-Title-Color:#e0e0d7;
    --MusicPlayer-Title-BG:#80614e;
    --MusicPlayer-Title-Padding:14px;
    --MusicPlayer-Title-Rounded-Corners:4px;

/*--- songs list ---*/
    --MusicPlayer-List-Padding:14px;
    --MusicPlayer-List-BG:#ffffff;
    --MusicPlayer-List-Borders-Size:1px;
    --MusicPlayer-List-Borders-Color:#eeeeee;
    --MusicPlayer-List-Row-Spacing:9px;

/*--- album image/thumbnail ---*/
    --MusicPlayer-Album-Image-Size:32px;
    --MusicPlayer-Album-Image-Rounded-Corners:3px;
    --MusicPlayer-Album-Gap-Right:10px;

/*--- song name ---*/
    --MusicPlayer-Song-Name-Size:0.65rem;
    --MusicPlayer-Song-Name-Color:#80614e;

/*--- artist name ---*/
    --MusicPlayer-Artist-Name-Size:0.7rem;
    --MusicPlayer-Artist-Name-Color:#80614e;

/*--- more options ---*/
    --MusicPlayer-Details-Row-Gap:2px;
    --MusicPlayer-Scrollbar-Color:#80614e; /* doesn't work on firefox */

/*--- player buttons ---*/
    --MusicPlayer-Icon-Style:"fill"; /* "fill" or "outline" */
    --MusicPlayer-Buttons-Touch-Padding:4px;
    --MusicPlayer-Buttons-Size:12px;
}
</style>

<div music-list>
        
        <figure song-row>
            <img album-image src="https://files.catbox.moe/c6m2nl.jpg">
            <figcaption song-details>
                <span song-name>sweet donuts</span>
                <span artist-name>perfume</span>
            </figcaption>
            <audio src="https://files.catbox.moe/zap198.m4a" volume="60%"></audio>
        </figure>

<figure song-row>
            <img album-image src="https://files.catbox.moe/q4cbzz.jpg">
            <figcaption song-details>
                <span song-name>as you like it</span>
                <span artist-name>sayonara ponytail</span>
            </figcaption>
            <audio src="https://files.catbox.moe/6j1kl9.m4a" volume="60%"></audio>
        </figure>

<figure song-row>
            <img album-image src="https://files.catbox.moe/1lvdo5.jpg">
            <figcaption song-details>
                <span song-name>brighter than sunshine</span>
                <span artist-name>lee jung hyun</span>
            </figcaption>
            <audio src="https://files.catbox.moe/q7ib9t.mp3" volume="60%"></audio>
        </figure>

<figure song-row>
            <img album-image src="https://files.catbox.moe/oqnsf2">
            <figcaption song-details>
                <span song-name>i only wanna be with you</span>
                <span artist-name>tommy february6</span>
            </figcaption>
            <audio src="https://files.catbox.moe/g8g4lc.mp3" volume="60%"></audio>
        </figure>

<figure song-row>
            <img album-image src="https://files.catbox.moe/d8q9d1.jpg">
            <figcaption song-details>
                <span song-name>ice cream</span>
                <span artist-name>fx</span>
            </figcaption>
            <audio src="https://files.catbox.moe/8jahd1.mp3" volume="60%"></audio>
        </figure>
        
    </div>    
</section>

</div>

</body>
</html>

Check out our Python playground!