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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.