music.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src='music.js'></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="music.css">
    <link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
    <title>Music</title>
    
</head>

</nav>
<body>
    <nav>
        <img src="logo.png" width="75">
        <a href="index.html">Home</a>  
        <a href="villagers.html">Villagers</a>
        <a href="fish.html">Fish</a>
        <a href="bugs.html">Bugs</a>
        <a href="sea.html">Sea Creatures</a>
        <a href="music.html">Music</a>
        <a href="myInfo.html">My Island</a>
    </nav>
    
    <div id='container'>
        <div id="kkslider">
            <div id="tips">
                <h2>K.K. Slider</h2>
                <p>Attend K.K. Slider concerts on Saturdays and request a song after 6 pm!</p>
                <img src="kk.png" width="100px">
            </div>
            <div id='info'>
                <img id='cover' src="#">
                <p id='title'>Title</p>
                <audio id='music' controls loop source src="https://acnhapi.com/v1/music/95"></audio>
            </div>
            <div id="tips">
                <h2>Quick Tip</h2>
                <p>If there is an event in the plaza on a Saturday, K.K. Slider will perform on Sunday.</p>
                <img src="stereo.png" height="144px">
            </div>
        </div>
        
        <div id="songs"></div>
    </div>
</body>
</html>