index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
    <!-- <script src="test.js" defer></script> -->
    <title>Etch a Sketch</title>
</head>

<body>
    <h1 class="heading">Etch-a-Sketch</h1>
    <div class="container">
        <div class="containerOne">
            <div class="colorPicker">
                <div class="round"><input type="color" class="colorPic" name="color ColorPicker" value="#000000"></div>
                <input type="button" class="button color focus" value="Color Mode">
            </div>
                <input type="button" class="button rainbow focus" value="Rainbow Mode">
                <input type="button" class="button eraser focus" value="Eraser">
                <input type="button" class="button clear active" value="Clear">
            <div class="gridSize">
                <div class="slidecontainer">
                    <p class="display"> 30 x 30 </p>
                    <input type="range" min="10" max="64" value="30" class="slider" id="myRange">
                  </div>
            </div>
        </div>
        <div class="containerTwo">
            <div class="gridBox"></div>
        </div>
    </div>

</body>

</html>
