Skip to content

Instantly share code, notes, and snippets.

@stormsweeper
Last active November 19, 2018 21:59
Show Gist options
  • Save stormsweeper/ac00f74bc74757203dee72c7344c5d3a to your computer and use it in GitHub Desktop.
Save stormsweeper/ac00f74bc74757203dee72c7344c5d3a to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=ac00f74bc74757203dee72c7344c5d3a

Pixel Art

You'll create 10 classes, and assign them to the tags as described below. Once you assign a background color to each class, you will reveal the secret picture!

The tags in each item here should have the same class:

  • A-05 through A-09, B-04 through B12
  • C-04 through C-06, D-03, D-05, E-03, E-05, E-06, F-04
  • C-09, D-09
  • E-10, F-09 through F-12
  • C-07, C-08, C-10, D-04, D-06 through D-08, D-10 through D-12, E-04, E-07 through E-09, E-11 through E-13, F-05 through F-08, G-05 through G-10
  • H-04, H-05, H-07, H-08, H-10, H-11, I-03 through I-05, I-07, I-08, I-10 through I-12, J-02 through J05, J-10 through J-13, K-04, K-11
  • H-06, H-09, I-06, I-09, J-06 through J-09, K-05, K-07, K-08, K-10, L-05 through L-10, M-04 through M-11, N-04 through N-06, N-09 through N-11
  • K-06, K-09
  • O-03 through O-05, O-10 through 0-12, P-02 through P-05, P-10 through P-13
  • K-02, K-03, K-12, K-13, L-02 through L-04, L-11 through L-13, M-02, M-03, M-12, M-13
<!DOCTYPE html>
<html>
<head>
<title>Pixel Art</title>
</head>
<body>
<h1>Pixel Art</h1>
<div class="pixels">
<span class="">A-00</span>
<span class="">A-01</span>
<span class="">A-02</span>
<span class="">A-03</span>
<span class="">A-04</span>
<span class="">A-05</span>
<span class="">A-06</span>
<span class="">A-07</span>
<span class="">A-08</span>
<span class="">A-09</span>
<span class="">A-10</span>
<span class="">A-11</span>
<span class="">A-12</span>
<span class="">A-13</span>
<span class="">A-14</span>
<span class="">A-15</span>
<span class="">B-00</span>
<span class="">B-01</span>
<span class="">B-02</span>
<span class="">B-03</span>
<span class="">B-04</span>
<span class="">B-05</span>
<span class="">B-06</span>
<span class="">B-07</span>
<span class="">B-08</span>
<span class="">B-09</span>
<span class="">B-10</span>
<span class="">B-11</span>
<span class="">B-12</span>
<span class="">B-13</span>
<span class="">B-14</span>
<span class="">B-15</span>
<span class="">C-00</span>
<span class="">C-01</span>
<span class="">C-02</span>
<span class="">C-03</span>
<span class="">C-04</span>
<span class="">C-05</span>
<span class="">C-06</span>
<span class="">C-07</span>
<span class="">C-08</span>
<span class="">C-09</span>
<span class="">C-10</span>
<span class="">C-11</span>
<span class="">C-12</span>
<span class="">C-13</span>
<span class="">C-14</span>
<span class="">C-15</span>
<span class="">D-00</span>
<span class="">D-01</span>
<span class="">D-02</span>
<span class="">D-03</span>
<span class="">D-04</span>
<span class="">D-05</span>
<span class="">D-06</span>
<span class="">D-07</span>
<span class="">D-08</span>
<span class="">D-09</span>
<span class="">D-10</span>
<span class="">D-11</span>
<span class="">D-12</span>
<span class="">D-13</span>
<span class="">D-14</span>
<span class="">D-15</span>
<span class="">E-00</span>
<span class="">E-01</span>
<span class="">E-02</span>
<span class="">E-03</span>
<span class="">E-04</span>
<span class="">E-05</span>
<span class="">E-06</span>
<span class="">E-07</span>
<span class="">E-08</span>
<span class="">E-09</span>
<span class="">E-10</span>
<span class="">E-11</span>
<span class="">E-12</span>
<span class="">E-13</span>
<span class="">E-14</span>
<span class="">E-15</span>
<span class="">F-00</span>
<span class="">F-01</span>
<span class="">F-02</span>
<span class="">F-03</span>
<span class="">F-04</span>
<span class="">F-05</span>
<span class="">F-06</span>
<span class="">F-07</span>
<span class="">F-08</span>
<span class="">F-09</span>
<span class="">F-10</span>
<span class="">F-11</span>
<span class="">F-12</span>
<span class="">F-13</span>
<span class="">F-14</span>
<span class="">F-15</span>
<span class="">G-00</span>
<span class="">G-01</span>
<span class="">G-02</span>
<span class="">G-03</span>
<span class="">G-04</span>
<span class="">G-05</span>
<span class="">G-06</span>
<span class="">G-07</span>
<span class="">G-08</span>
<span class="">G-09</span>
<span class="">G-10</span>
<span class="">G-11</span>
<span class="">G-12</span>
<span class="">G-13</span>
<span class="">G-14</span>
<span class="">G-15</span>
<span class="">H-00</span>
<span class="">H-01</span>
<span class="">H-02</span>
<span class="">H-03</span>
<span class="">H-04</span>
<span class="">H-05</span>
<span class="">H-06</span>
<span class="">H-07</span>
<span class="">H-08</span>
<span class="">H-09</span>
<span class="">H-10</span>
<span class="">H-11</span>
<span class="">H-12</span>
<span class="">H-13</span>
<span class="">H-14</span>
<span class="">H-15</span>
<span class="">I-00</span>
<span class="">I-01</span>
<span class="">I-02</span>
<span class="">I-03</span>
<span class="">I-04</span>
<span class="">I-05</span>
<span class="">I-06</span>
<span class="">I-07</span>
<span class="">I-08</span>
<span class="">I-09</span>
<span class="">I-10</span>
<span class="">I-11</span>
<span class="">I-12</span>
<span class="">I-13</span>
<span class="">I-14</span>
<span class="">I-15</span>
<span class="">J-00</span>
<span class="">J-01</span>
<span class="">J-02</span>
<span class="">J-03</span>
<span class="">J-04</span>
<span class="">J-05</span>
<span class="">J-06</span>
<span class="">J-07</span>
<span class="">J-08</span>
<span class="">J-09</span>
<span class="">J-10</span>
<span class="">J-11</span>
<span class="">J-12</span>
<span class="">J-13</span>
<span class="">J-14</span>
<span class="">J-15</span>
<span class="">K-00</span>
<span class="">K-01</span>
<span class="">K-02</span>
<span class="">K-03</span>
<span class="">K-04</span>
<span class="">K-05</span>
<span class="">K-06</span>
<span class="">K-07</span>
<span class="">K-08</span>
<span class="">K-09</span>
<span class="">K-10</span>
<span class="">K-11</span>
<span class="">K-12</span>
<span class="">K-13</span>
<span class="">K-14</span>
<span class="">K-15</span>
<span class="">L-00</span>
<span class="">L-01</span>
<span class="">L-02</span>
<span class="">L-03</span>
<span class="">L-04</span>
<span class="">L-05</span>
<span class="">L-06</span>
<span class="">L-07</span>
<span class="">L-08</span>
<span class="">L-09</span>
<span class="">L-10</span>
<span class="">L-11</span>
<span class="">L-12</span>
<span class="">L-13</span>
<span class="">L-14</span>
<span class="">L-15</span>
<span class="">M-00</span>
<span class="">M-01</span>
<span class="">M-02</span>
<span class="">M-03</span>
<span class="">M-04</span>
<span class="">M-05</span>
<span class="">M-06</span>
<span class="">M-07</span>
<span class="">M-08</span>
<span class="">M-09</span>
<span class="">M-10</span>
<span class="">M-11</span>
<span class="">M-12</span>
<span class="">M-13</span>
<span class="">M-14</span>
<span class="">M-15</span>
<span class="">N-00</span>
<span class="">N-01</span>
<span class="">N-02</span>
<span class="">N-03</span>
<span class="">N-04</span>
<span class="">N-05</span>
<span class="">N-06</span>
<span class="">N-07</span>
<span class="">N-08</span>
<span class="">N-09</span>
<span class="">N-10</span>
<span class="">N-11</span>
<span class="">N-12</span>
<span class="">N-13</span>
<span class="">N-14</span>
<span class="">N-15</span>
<span class="">O-00</span>
<span class="">O-01</span>
<span class="">O-02</span>
<span class="">O-03</span>
<span class="">O-04</span>
<span class="">O-05</span>
<span class="">O-06</span>
<span class="">O-07</span>
<span class="">O-08</span>
<span class="">O-09</span>
<span class="">O-10</span>
<span class="">O-11</span>
<span class="">O-12</span>
<span class="">O-13</span>
<span class="">O-14</span>
<span class="">O-15</span>
<span class="">P-00</span>
<span class="">P-01</span>
<span class="">P-02</span>
<span class="">P-03</span>
<span class="">P-04</span>
<span class="">P-05</span>
<span class="">P-06</span>
<span class="">P-07</span>
<span class="">P-08</span>
<span class="">P-09</span>
<span class="">P-10</span>
<span class="">P-11</span>
<span class="">P-12</span>
<span class="">P-13</span>
<span class="">P-14</span>
<span class="">P-15</span>
</div>
</body>
</html>
{"hiddenUIComponents":["console","editor.javascript"]}
/* PUT YOUR CLASS RULES HERE */
/* DON'T DELETE THESE! */
.pixels {
display: flex;
flex-wrap: wrap;
width: 512px;
border: 1px solid #dddddd;
}
.pixels > span {
box-sizing: border-box;
width: 32px;
height: 32px;
display: inline-block;
border: 1px solid #dddddd;
font-family: monospace;
font-size: 8px;
text-align: center;
color: #999999;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment