wk8/index.html

<html>

<head>
    <link rel="stylesheet" type="text/css" href="./styles.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body class="bg-blue">
    <div class="eyes">
        <div class="eye">
            <div class="ball"></div>
        </div>
        <div class="eye">
            <div class="ball"></div>
        </div>
    </div>
    <div id='card' class="card rounded bg-secondary">
        <div class="card-body">
            <h3 class="card-title text-black font-monospace text-center">Level of Sleep</h3>
            <input type="range" class="form-range" id="range" onchange="rangeMove(event)">
        </div>
    </div>
</body>
<script src="./eyes.js"></script>

</html>