Pixel Art

by awesomespaceman

HTML

<body>
  <div style="padding:1px">
    <div id="functions/palette">
          <div class="pen" style="background-color: white"></div>
      <div class="pen" id="pen" style="background-color: black" onclick="setPixelColor(this)"></div>
      <input type="text" id="penFill"><br>
     
    <div id="art">
      <div class="row">
        <div class="pixel" onclick="setPixelColor(this)"></div>
        <div class="pixel" onclick="setPixelColor(this)"></div>
        <div class="pixel" onclick="setPixelColor(this)"></div>
        <div class="pixel" onclick="setPixelColor(this)"></div>
        <div class="pixel" onclick="setPixelColor(this)"></div>
        <div class="pixel" onclick="setPixelColor(this)"></div>
        <div class="pixel" onclick="setPixelColor(this)"></div>
        <div class="pixel" onclick="setPixelColor(this)"></div>
         <div class="pixel" onclick="setPixelColor(this)"></div>
        <div class="pixel" onclick="setPixelColor(this)"></div>
        <div class="pixel" onclick="setPixelColor(this)"></div>
        <div class="pixel" onclick="setPixelColor(this)"></div>
        <div class="pixel" onclick="setPixelColor(this)"></div>
        <div class="pixel" onclick="setPixelColor(this)"></div>
        <div class="pixel" onclick="setPixelColor(this)"></div>
        <div class="pixel" onclick="setPixelColor(this)"></div>


      </div>
      <div class="row">
        <div class="pixel" onclick="setPixelColor(this)"></div>
        <div class="pixel" onclick="setPixelColor(this)"></div>
        <div class="pixel" onclick="setPixelColor(this)"></div>
        <div class="pixel" onclick="setPixelColor(this)"></div>
        <div class="pixel" onclick="setPixelColor(this)"></div>
        <div class="pixel" onclick="setPixelColor(this)"></div>
        <div class="pixel" onclick="setPixelColor(this)"></div>
        <div class="pixel" onclick="setPixelColor(this)"></div>
         <div class="pixel" onclick="setPixelColor(this)"></div>
        <div class="pixel"...

CSS

#art {
  display: table;
  border-spacing: 1px;
  background-color: black;
  border: 3px solid black;
}

.row {
  display: table-row;
}

.pixel {
  background-color: white;
  width: 20px;
  height: 20px;
  display: table-cell;
  cursor: pointer;
}

.pen {
  display: inline-block;
  width: 35px;
  height: 35px;
  border: 2px solid black;
}
.function{
  background-color: red;
  border: none;
  color: white;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 4px 2px;
  cursor: pointer;
}