index.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="./css/index.css">   
    </head>
    <body>
        <div class="staff" >
            <img src="./images/treble_clef.svg" width=400>          
            <img src="./images/sharp.svg" width=25 class="accidental sharp">
            <img id="whole-note" src="./images/wholenote.svg" height=35 class="whole-note">   
        </div>
        <div class="note-info-wrapper">	
            <div class="note-info"></div>
           <!-- <a href="https://www.smashingmagazine.com/2018/03/web-midi-api/">reference</a>
            <a href="https://codepen.io/Rumyra/pen/NxdbzL">also look here</a>
            <a href="https://glitch.com/~webmidi-examples">and here</a> -->
        </div>
        <script src="./js/index.js"></script>
    </body>    
</html>