div.box
  - for (var x = 0; x < 1920; x++)
    .pixel
    
View Compiled
$y    : #ffd924;
$b    : #231816;
$r    : #fe3310;
$w    : #ffffff;
$fost : #f19224;
$dy   : #c3a40f;


body {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:100vh;
  background:#f4f4f4;
}

.box {
  width:400px;  
  height:480px;
  box-shadow:1px 14px 93px 2px rgba(0, 0, 0, 0.41);
  background:$w;
  
  .pixel {
    width:10px;
    height:10px;
    background:$y;
    float:left;
    font-size:6px;
    text-align:center;
    line-height:10px;
    box-shadow: 0px 0px 1px 0px #231816;
    &:nth-of-type(155),
    &:nth-of-type(156),
    &:nth-of-type(193),
    &:nth-of-type(194),
    &:nth-of-type(195),
    &:nth-of-type(196),
    &:nth-of-type(231),
    &:nth-of-type(232),
    &:nth-of-type(233),
    &:nth-of-type(234),
    &:nth-of-type(235),
    &:nth-of-type(236),
    &:nth-of-type(274),
    &:nth-of-type(275),
    &:nth-of-type(276),
    &:nth-of-type(314),
    &:nth-of-type(315),
    &:nth-of-type(354),
    &:nth-of-type(355),
    &:nth-of-type(394),
    &:nth-of-type(433),
    &:nth-of-type(472),
    &:nth-of-type(511),
    &:nth-of-type(550),
    &:nth-of-type(590),
    &:nth-of-type(630),
    &:nth-of-type(270),
    &:nth-of-type(309),
    &:nth-of-type(348),
    &:nth-of-type(387),
    &:nth-of-type(386),
    &:nth-of-type(425),
    &:nth-of-type(384),
    &:nth-of-type(383),
    &:nth-of-type(382),
    &:nth-of-type(381),
    &:nth-of-type(380),
    &:nth-of-type(379),
    &:nth-of-type(378),
    &:nth-of-type(376),
    &:nth-of-type(375),
    &:nth-of-type(374),
    &:nth-of-type(373),
    &:nth-of-type(417),
    &:nth-of-type(332),
    &:nth-of-type(331),
    &:nth-of-type(330),
    &:nth-of-type(329),
    &:nth-of-type(288),
    &:nth-of-type(287),
    &:nth-of-type(286),
    &:nth-of-type(285),
    &:nth-of-type(284),
    &:nth-of-type(283),
    &:nth-of-type(325),
    &:nth-of-type(324),
    &:nth-of-type(323),
    &:nth-of-type(366),
    &:nth-of-type(365),
    &:nth-of-type(406),
    &:nth-of-type(407),
    &:nth-of-type(447),
    &:nth-of-type(448),
    &:nth-of-type(488),
    &:nth-of-type(489),
    &:nth-of-type(530),
    &:nth-of-type(531),
    &:nth-of-type(533),
    &:nth-of-type(572),
    &:nth-of-type(612),
    &:nth-of-type(651),
    &:nth-of-type(691),
    &:nth-of-type(731),
    &:nth-of-type(671),
    &:nth-of-type(711),
    &:nth-of-type(751),
    &:nth-of-type(792),
    &:nth-of-type(832),
    &:nth-of-type(872),
    &:nth-of-type(912),
    &:nth-of-type(951),
    &:nth-of-type(991),
    &:nth-of-type(770),
    &:nth-of-type(810),
    &:nth-of-type(850),
    &:nth-of-type(890),
    &:nth-of-type(931),
    &:nth-of-type(971),
    &:nth-of-type(509),
    &:nth-of-type(616),
    &:nth-of-type(617),
    &:nth-of-type(655),
    &:nth-of-type(656),
    &:nth-of-type(657),
    &:nth-of-type(658),
    &:nth-of-type(697),
    &:nth-of-type(698),
    &:nth-of-type(696),
    &:nth-of-type(695),
    &:nth-of-type(736),
    &:nth-of-type(737),
    &:nth-of-type(627),
    &:nth-of-type(626),
    &:nth-of-type(665),
    &:nth-of-type(666),
    &:nth-of-type(667),
    &:nth-of-type(668),
    &:nth-of-type(705),
    &:nth-of-type(706),
    &:nth-of-type(707),
    &:nth-of-type(708),
    &:nth-of-type(746),
    &:nth-of-type(747),
    &:nth-of-type(781),
    &:nth-of-type(782),
    &:nth-of-type(861),
    &:nth-of-type(862),
    &:nth-of-type(899),
    &:nth-of-type(900),
    &:nth-of-type(903),
    &:nth-of-type(904),
    &:nth-of-type(858),
    &:nth-of-type(865),
    &:nth-of-type(1012),
    &:nth-of-type(1030),
    &:nth-of-type(1071),
    &:nth-of-type(1111),
    &:nth-of-type(1151),
    &:nth-of-type(1191),
    &:nth-of-type(1232),
    &:nth-of-type(1272),
    &:nth-of-type(1312),
    &:nth-of-type(1352),
    &:nth-of-type(1392),
    &:nth-of-type(1432),
    &:nth-of-type(1472),
    &:nth-of-type(1511),
    &:nth-of-type(1551),
    &:nth-of-type(1590),
    &:nth-of-type(1629),
    &:nth-of-type(1670),
    &:nth-of-type(1710),
    &:nth-of-type(1709),
    &:nth-of-type(1708),
    &:nth-of-type(1707),
    &:nth-of-type(1706),
    &:nth-of-type(1665),
    &:nth-of-type(1666),
    &:nth-of-type(1624),
    &:nth-of-type(1623),
    &:nth-of-type(1622),
    &:nth-of-type(1621),
    &:nth-of-type(1620),
    &:nth-of-type(1619),
    &:nth-of-type(1618),
    &:nth-of-type(1657),
    &:nth-of-type(1656),
    &:nth-of-type(1658),
    &:nth-of-type(1696),
    &:nth-of-type(1695),
    &:nth-of-type(1694),
    &:nth-of-type(1693),
    &:nth-of-type(1692),
    &:nth-of-type(1652),
    &:nth-of-type(1613),
    &:nth-of-type(1572),
    &:nth-of-type(1531),
    &:nth-of-type(1491),
    &:nth-of-type(1450),
    &:nth-of-type(1410),
    &:nth-of-type(1370),
    &:nth-of-type(1330),
    &:nth-of-type(1290),
    &:nth-of-type(1250),
    &:nth-of-type(1210),
    &:nth-of-type(1170),
    &:nth-of-type(1051),
    &:nth-of-type(1091),
    &:nth-of-type(1131),
    &:nth-of-type(1092),
    &:nth-of-type(1174),
    &:nth-of-type(1178),
    &:nth-of-type(1214),
    &:nth-of-type(1255),
    &:nth-of-type(1295),
    &:nth-of-type(1336),
    &:nth-of-type(1377),
    &:nth-of-type(1378),
    &:nth-of-type(1339),
    &:nth-of-type(1299),
    &:nth-of-type(1259),
    &:nth-of-type(1219),
    &:nth-of-type(1138),
    &:nth-of-type(1189),
    &:nth-of-type(1229),
    &:nth-of-type(1268),
    &:nth-of-type(1308),
    &:nth-of-type(1347),
    &:nth-of-type(1385),
    &:nth-of-type(1386),
    &:nth-of-type(1344),
    &:nth-of-type(1304),
    &:nth-of-type(1264),
    &:nth-of-type(1224),
    &:nth-of-type(1185),
    &:nth-of-type(1145),
    &:nth-of-type(1571),
    &:nth-of-type(1570),
    &:nth-of-type(1529),
    &:nth-of-type(1528),
    &:nth-of-type(1487),
    &:nth-of-type(1446),
    &:nth-of-type(1407),
    &:nth-of-type(1366),
    &:nth-of-type(1325),
    &:nth-of-type(1284),
    &:nth-of-type(1244),
    &:nth-of-type(1205),
    &:nth-of-type(1164),
    &:nth-of-type(1123),
    &:nth-of-type(1083),
    &:nth-of-type(1043),
    &:nth-of-type(1003),
    &:nth-of-type(963),
    &:nth-of-type(923),
    &:nth-of-type(883),
    &:nth-of-type(843),
    &:nth-of-type(803),
    &:nth-of-type(763),
    &:nth-of-type(804),
    &:nth-of-type(845),
    &:nth-of-type(886),
    &:nth-of-type(927),
    &:nth-of-type(968),
    &:nth-of-type(1009),
    &:nth-of-type(1050),
    &:nth-of-type(1247),
    &:nth-of-type(1208),
    &:nth-of-type(1288),
    &:nth-of-type(1329),
    &:nth-of-type(1409),
    &:nth-of-type(1169) {
      background:$b;
    }
    
    &:nth-of-type(657),
    &:nth-of-type(667) {
      background:$w;
    }
    
    &:nth-of-type(773),
    &:nth-of-type(774),
    &:nth-of-type(812),
    &:nth-of-type(854),
    &:nth-of-type(855),
    &:nth-of-type(814),
    &:nth-of-type(815),
    &:nth-of-type(852),
    &:nth-of-type(853),
    &:nth-of-type(893),
    &:nth-of-type(813),
    &:nth-of-type(894),
    
    &:nth-of-type(789),
    &:nth-of-type(790),
    &:nth-of-type(828),
    &:nth-of-type(829),
    &:nth-of-type(830),
    &:nth-of-type(831),
    &:nth-of-type(868),
    &:nth-of-type(869),
    &:nth-of-type(870),
    &:nth-of-type(871),
    &:nth-of-type(909),
    &:nth-of-type(910)
    {
      background:$r;
    }
    
    &:nth-of-type(1101),
    &:nth-of-type(1102),
    &:nth-of-type(1060),
    &:nth-of-type(1061),
    &:nth-of-type(1062),
    &:nth-of-type(1063),
    &:nth-of-type(549),
    &:nth-of-type(508),
    &:nth-of-type(510),
    &:nth-of-type(471),
    &:nth-of-type(432),
    &:nth-of-type(393),
    &:nth-of-type(353),
    &:nth-of-type(352),
    &:nth-of-type(392),
    &:nth-of-type(431),
    &:nth-of-type(470),
    &:nth-of-type(469),
    &:nth-of-type(426),
    &:nth-of-type(416),
    &:nth-of-type(372),
    &:nth-of-type(328),
    &:nth-of-type(327),
    &:nth-of-type(326),
    &:nth-of-type(367),
    &:nth-of-type(408),
    &:nth-of-type(449),
    &:nth-of-type(490),
    &:nth-of-type(491),
    &:nth-of-type(492),
    &:nth-of-type(493),
    &:nth-of-type(494),
    &:nth-of-type(532),
    &:nth-of-type(652),
    &:nth-of-type(1052),
    &:nth-of-type(972),
    &:nth-of-type(844),
    &:nth-of-type(885),
    &:nth-of-type(926),
    &:nth-of-type(967),
    &:nth-of-type(1049),
    &:nth-of-type(1008),
    &:nth-of-type(1090),
    &:nth-of-type(990),
    &:nth-of-type(1070),
    &:nth-of-type(1269),
    &:nth-of-type(1309),
    &:nth-of-type(1348),
    &:nth-of-type(1387),
    &:nth-of-type(1376),
    &:nth-of-type(1335),
    &:nth-of-type(1294),
    &:nth-of-type(1254),
    &:nth-of-type(1616),
    &:nth-of-type(1617),
    &:nth-of-type(1625),
    &:nth-of-type(1626),
    &:nth-of-type(1580),
    &:nth-of-type(1581),
    &:nth-of-type(1582),
    &:nth-of-type(1583),
    &:nth-of-type(1451),
    &:nth-of-type(1492),
    &:nth-of-type(1532),
    &:nth-of-type(1573),
    &:nth-of-type(1530),
    &:nth-of-type(1490),
    &:nth-of-type(1489),
    &:nth-of-type(1488),
    &:nth-of-type(1449),
    &:nth-of-type(1448),
    &:nth-of-type(1447),
    &:nth-of-type(1369),
    &:nth-of-type(1408),
    &:nth-of-type(1367),
    &:nth-of-type(1368),
    &:nth-of-type(1327),
    &:nth-of-type(1328),
    &:nth-of-type(1287),
    {
      background:$fost;
    }
    
    &:nth-of-type(1209),
    &:nth-of-type(1249),
    &:nth-of-type(1248),
    &:nth-of-type(1289)
    {
      background:$dy;
    }
    
    
    
    
    
    
    
  }
}

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.