index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Etch a Sketch</title>
    <script src="script.js" defer></script>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap" rel="stylesheet">
</head>

<body>
    <h1>Etch a sketch</h1>
    <div id="content">
        <div id="options">
            <div class="sliderContainer">
                <div class="valueContainer">
                    <span id="demo">16 x 16</span>
                </div>
                <input type="range" min="1" max="150" value="16" id="slider">
            </div>


            <input type="color" class="button" id="colorPicker">
            <button id="black" class="button buttonStyle">BLACK</button>
            <button id="eraser" class="button buttonStyle">ERASER</button>
            <button id="rainbow" class="button buttonStyle">RAINBOW</button>
            <button id="clear" class="button buttonStyle">CLEAR</button>
        </div>
        <div id="container">

        </div>
    </div>
    <p>Copyright © 2023 Hoon Kang<a id="link" href="https://github.com/hoon610" target="_blank">
            <img src="images/githublogo"></a></p>
</body>

</html>