0-Foundations/Projects/4-Etch-A-Sketch/index.html

<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Etch-A-Sketch</title>
    <meta name="description" content="Etch-A-Sketch made by jmcamposdev">
    <meta property="og:title" content="Etch-A-Sketch made by jmcamposdev" />
    <meta property="og:url" content="https://jmcamposdev.github.io/TheOdinProject/Foundations/Projects/4-Etch-A-Sketch/" />
    <meta property="og:description" content="Etch-A-Sketch made by jmcamposdev" />
    <meta property="og:image" content="🖌️" />
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="css/media.css"/>
</head>
<body>
    <h1>Etch-A-Sketch</h1>
    <main class="main">
      <div class="settings">
          <div id="swatch">
              <input type="color" id="pick-color" name="color" value="#1A1A1A">
              <div class="info">
                  <h3>Input</h3>
                  <h4>Color</h4>
              </div>
          </div>
          <button id="color-mode" class="button">Color Mode</button>
          <button id="rainbow" class="button">Rainbow</button>
          <button id="eraser" class="button">Erase</button>
          <button id="clear" class="button">Clear</button>
          <div class="slider-container">
            <span id="grid-size">16 x 16</span>
            <input class="slider" type="range" min="16" max="100" value="16" id="myRange">
          </div>
      </div>
      <div id="grid" class="grid"></div>
    </main>
    <footer>
        <p>Created by <a href="https://jmcampos.dev" target="_blank">jmcamposdev 🖌️</a></p>
    </footer>
</body>
<script src="main.js"></script>
</html>