Created
January 23, 2014 10:28
-
-
Save syahrasi/8576283 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- 4.times do |i| | |
%div{:class => "box cyan-box-#{i + 1}" } | |
- 25.times do |i| | |
%div{:class => "box blue-box-#{i + 1}" } | |
- 18.times do |i| | |
%div{:class => "box purple-box-#{i + 1}" } | |
- 6.times do |i| | |
%div{:class => "box pink-box-#{i + 1}" } | |
- 9.times do |i| | |
%div{:class => "box red-box-#{i + 1}" } | |
- 17.times do |i| | |
%div{:class => "box brown-box-#{i + 1}" } | |
- 6.times do |i| | |
%div{:class => "box orange-box-#{i + 1}" } | |
- 12.times do |i| | |
%div{:class => "box yellow-box-#{i + 1}" } | |
- 23.times do |i| | |
%div{:class => "box green-box-#{i + 1}" } | |
- 10.times do |i| | |
%div{:class => "box grey-box-#{i + 1}" } | |
- 17.times do |i| | |
%div{:class => "box white-box-#{i + 1}" } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.2.14) | |
// Compass (v0.12.2) | |
// ---- | |
$blue: deepskyblue, blue, cyan, aquamarine, turquoise, mediumturquoise, aqua, paleturquoise, lightcyan, darkturquoise, cadetblue, powderblue, lightblue, skyblue, lightskyblue, steelblue, dodgerblue, lightsteelblue, cornflowerblue, royalblue, midnightblue, navy, darkblue, mediumblue, mediumslateblue; | |
$brown: maroon, brown, rosybrown, sienna, saddlebrown, chocolate, sandybrown, peru, bisque, burlywood, tan, navajowhite, blanchedalmond, wheat, darkgoldenrod, goldenrod, cornsilk; | |
$cyan: darkcyan, cyan, teal, lightcyan; | |
$grey: black, dimgray, gray, darkgray, silver, lightgrey, gainsboro, darkslategray, slategray, lightslategray; | |
$green: darkcyan, olive, olivedrab, yellowgreen, darkolivegreen, greenyellow, chartreuse, lawngreen, darkgreen, green, forestgreen, lime, limegreen, lightgreen, palegreen, darkseagreen, seagreen, mediumseagreen, springgreen, mediumspringgreen, mediumaquamarine, lightseagreen, teal; | |
$orange: tomato, orangered, coral, lightsalmon, darkorange, orange; | |
$pink: mediumvioletred, deeppink, hotpink, palevioletred, pink, lightpink; | |
$purple: magenta, lavender, darkslateblue, slateblue, mediumslateblue, mediumpurple, blueviolet, indigo, darkorchid, darkviolet, mediumorchid, purple, darkmagenta, fuchsia, violet, plum, thistle, orchid; | |
$red: darkred, firebrick, red, indianred, lightcoral, salmon, darksalmon, lightsalmon, crimson; | |
$white: whitesmoke, white, snow, mistyrose, seashell, linen, antiquewhite, oldlace, floralwhite, beige, ivory, honeydew, mintcream, azure, aliceblue, ghostwhite, lavenderblush; | |
$yellow: peachpuff, papayawhip, moccasin, goldenrod, gold, khaki, lemonchiffon, palegoldenrod, darkkhaki, yellow, lightgoldenrodyellow, lightyellow; | |
.box { | |
display: block; | |
width: 10%; | |
height: 50px; | |
float: left; | |
} | |
@mixin color-box($colors, $size, $class) { | |
@for $i from 1 through $size { | |
.#{$class}-#{$i} { | |
$color: nth($colors, $i); | |
background-color: $color; | |
&:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
@if lightness($color) < 50% { | |
color: white; | |
} | |
content: "#{$color}"; | |
padding: 5px; | |
} | |
} | |
} | |
} | |
@include color-box($blue, 25, blue-box); | |
@include color-box($brown, 17, brown-box); | |
@include color-box($cyan, 4, cyan-box); | |
@include color-box($grey, 10, grey-box); | |
@include color-box($green, 23, green-box); | |
@include color-box($orange, 6, orange-box); | |
@include color-box($pink, 6, pink-box); | |
@include color-box($red, 9, red-box); | |
@include color-box($purple, 18, purple-box); | |
@include color-box($white, 17, white-box); | |
@include color-box($yellow, 12, yellow-box); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.box { | |
display: block; | |
width: 10%; | |
height: 50px; | |
float: left; | |
} | |
.blue-box-1 { | |
background-color: deepskyblue; | |
} | |
.blue-box-1:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "deepskyblue"; | |
padding: 5px; | |
} | |
.blue-box-2 { | |
background-color: blue; | |
} | |
.blue-box-2:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "blue"; | |
padding: 5px; | |
} | |
.blue-box-3 { | |
background-color: cyan; | |
} | |
.blue-box-3:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "cyan"; | |
padding: 5px; | |
} | |
.blue-box-4 { | |
background-color: aquamarine; | |
} | |
.blue-box-4:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "aquamarine"; | |
padding: 5px; | |
} | |
.blue-box-5 { | |
background-color: turquoise; | |
} | |
.blue-box-5:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "turquoise"; | |
padding: 5px; | |
} | |
.blue-box-6 { | |
background-color: mediumturquoise; | |
} | |
.blue-box-6:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "mediumturquoise"; | |
padding: 5px; | |
} | |
.blue-box-7 { | |
background-color: cyan; | |
} | |
.blue-box-7:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "cyan"; | |
padding: 5px; | |
} | |
.blue-box-8 { | |
background-color: paleturquoise; | |
} | |
.blue-box-8:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "paleturquoise"; | |
padding: 5px; | |
} | |
.blue-box-9 { | |
background-color: lightcyan; | |
} | |
.blue-box-9:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "lightcyan"; | |
padding: 5px; | |
} | |
.blue-box-10 { | |
background-color: darkturquoise; | |
} | |
.blue-box-10:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "darkturquoise"; | |
padding: 5px; | |
} | |
.blue-box-11 { | |
background-color: cadetblue; | |
} | |
.blue-box-11:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "cadetblue"; | |
padding: 5px; | |
} | |
.blue-box-12 { | |
background-color: powderblue; | |
} | |
.blue-box-12:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "powderblue"; | |
padding: 5px; | |
} | |
.blue-box-13 { | |
background-color: lightblue; | |
} | |
.blue-box-13:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "lightblue"; | |
padding: 5px; | |
} | |
.blue-box-14 { | |
background-color: skyblue; | |
} | |
.blue-box-14:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "skyblue"; | |
padding: 5px; | |
} | |
.blue-box-15 { | |
background-color: lightskyblue; | |
} | |
.blue-box-15:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "lightskyblue"; | |
padding: 5px; | |
} | |
.blue-box-16 { | |
background-color: steelblue; | |
} | |
.blue-box-16:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "steelblue"; | |
padding: 5px; | |
} | |
.blue-box-17 { | |
background-color: dodgerblue; | |
} | |
.blue-box-17:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "dodgerblue"; | |
padding: 5px; | |
} | |
.blue-box-18 { | |
background-color: lightsteelblue; | |
} | |
.blue-box-18:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "lightsteelblue"; | |
padding: 5px; | |
} | |
.blue-box-19 { | |
background-color: cornflowerblue; | |
} | |
.blue-box-19:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "cornflowerblue"; | |
padding: 5px; | |
} | |
.blue-box-20 { | |
background-color: royalblue; | |
} | |
.blue-box-20:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "royalblue"; | |
padding: 5px; | |
} | |
.blue-box-21 { | |
background-color: midnightblue; | |
} | |
.blue-box-21:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "midnightblue"; | |
padding: 5px; | |
} | |
.blue-box-22 { | |
background-color: navy; | |
} | |
.blue-box-22:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "navy"; | |
padding: 5px; | |
} | |
.blue-box-23 { | |
background-color: darkblue; | |
} | |
.blue-box-23:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "darkblue"; | |
padding: 5px; | |
} | |
.blue-box-24 { | |
background-color: mediumblue; | |
} | |
.blue-box-24:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "mediumblue"; | |
padding: 5px; | |
} | |
.blue-box-25 { | |
background-color: mediumslateblue; | |
} | |
.blue-box-25:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "mediumslateblue"; | |
padding: 5px; | |
} | |
.brown-box-1 { | |
background-color: maroon; | |
} | |
.brown-box-1:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "maroon"; | |
padding: 5px; | |
} | |
.brown-box-2 { | |
background-color: brown; | |
} | |
.brown-box-2:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "brown"; | |
padding: 5px; | |
} | |
.brown-box-3 { | |
background-color: rosybrown; | |
} | |
.brown-box-3:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "rosybrown"; | |
padding: 5px; | |
} | |
.brown-box-4 { | |
background-color: sienna; | |
} | |
.brown-box-4:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "sienna"; | |
padding: 5px; | |
} | |
.brown-box-5 { | |
background-color: saddlebrown; | |
} | |
.brown-box-5:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "saddlebrown"; | |
padding: 5px; | |
} | |
.brown-box-6 { | |
background-color: chocolate; | |
} | |
.brown-box-6:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "chocolate"; | |
padding: 5px; | |
} | |
.brown-box-7 { | |
background-color: sandybrown; | |
} | |
.brown-box-7:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "sandybrown"; | |
padding: 5px; | |
} | |
.brown-box-8 { | |
background-color: peru; | |
} | |
.brown-box-8:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "peru"; | |
padding: 5px; | |
} | |
.brown-box-9 { | |
background-color: bisque; | |
} | |
.brown-box-9:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "bisque"; | |
padding: 5px; | |
} | |
.brown-box-10 { | |
background-color: burlywood; | |
} | |
.brown-box-10:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "burlywood"; | |
padding: 5px; | |
} | |
.brown-box-11 { | |
background-color: tan; | |
} | |
.brown-box-11:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "tan"; | |
padding: 5px; | |
} | |
.brown-box-12 { | |
background-color: navajowhite; | |
} | |
.brown-box-12:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "navajowhite"; | |
padding: 5px; | |
} | |
.brown-box-13 { | |
background-color: blanchedalmond; | |
} | |
.brown-box-13:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "blanchedalmond"; | |
padding: 5px; | |
} | |
.brown-box-14 { | |
background-color: wheat; | |
} | |
.brown-box-14:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "wheat"; | |
padding: 5px; | |
} | |
.brown-box-15 { | |
background-color: darkgoldenrod; | |
} | |
.brown-box-15:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "darkgoldenrod"; | |
padding: 5px; | |
} | |
.brown-box-16 { | |
background-color: goldenrod; | |
} | |
.brown-box-16:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "goldenrod"; | |
padding: 5px; | |
} | |
.brown-box-17 { | |
background-color: cornsilk; | |
} | |
.brown-box-17:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "cornsilk"; | |
padding: 5px; | |
} | |
.cyan-box-1 { | |
background-color: darkcyan; | |
} | |
.cyan-box-1:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "darkcyan"; | |
padding: 5px; | |
} | |
.cyan-box-2 { | |
background-color: cyan; | |
} | |
.cyan-box-2:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "cyan"; | |
padding: 5px; | |
} | |
.cyan-box-3 { | |
background-color: teal; | |
} | |
.cyan-box-3:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "teal"; | |
padding: 5px; | |
} | |
.cyan-box-4 { | |
background-color: lightcyan; | |
} | |
.cyan-box-4:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "lightcyan"; | |
padding: 5px; | |
} | |
.grey-box-1 { | |
background-color: black; | |
} | |
.grey-box-1:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "black"; | |
padding: 5px; | |
} | |
.grey-box-2 { | |
background-color: dimgrey; | |
} | |
.grey-box-2:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "dimgrey"; | |
padding: 5px; | |
} | |
.grey-box-3 { | |
background-color: gray; | |
} | |
.grey-box-3:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "gray"; | |
padding: 5px; | |
} | |
.grey-box-4 { | |
background-color: darkgrey; | |
} | |
.grey-box-4:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "darkgrey"; | |
padding: 5px; | |
} | |
.grey-box-5 { | |
background-color: silver; | |
} | |
.grey-box-5:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "silver"; | |
padding: 5px; | |
} | |
.grey-box-6 { | |
background-color: lightgrey; | |
} | |
.grey-box-6:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "lightgrey"; | |
padding: 5px; | |
} | |
.grey-box-7 { | |
background-color: gainsboro; | |
} | |
.grey-box-7:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "gainsboro"; | |
padding: 5px; | |
} | |
.grey-box-8 { | |
background-color: darkslategrey; | |
} | |
.grey-box-8:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "darkslategrey"; | |
padding: 5px; | |
} | |
.grey-box-9 { | |
background-color: slategrey; | |
} | |
.grey-box-9:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "slategrey"; | |
padding: 5px; | |
} | |
.grey-box-10 { | |
background-color: lightslategrey; | |
} | |
.grey-box-10:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "lightslategrey"; | |
padding: 5px; | |
} | |
.green-box-1 { | |
background-color: darkcyan; | |
} | |
.green-box-1:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "darkcyan"; | |
padding: 5px; | |
} | |
.green-box-2 { | |
background-color: olive; | |
} | |
.green-box-2:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "olive"; | |
padding: 5px; | |
} | |
.green-box-3 { | |
background-color: olivedrab; | |
} | |
.green-box-3:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "olivedrab"; | |
padding: 5px; | |
} | |
.green-box-4 { | |
background-color: yellowgreen; | |
} | |
.green-box-4:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "yellowgreen"; | |
padding: 5px; | |
} | |
.green-box-5 { | |
background-color: darkolivegreen; | |
} | |
.green-box-5:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "darkolivegreen"; | |
padding: 5px; | |
} | |
.green-box-6 { | |
background-color: greenyellow; | |
} | |
.green-box-6:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "greenyellow"; | |
padding: 5px; | |
} | |
.green-box-7 { | |
background-color: chartreuse; | |
} | |
.green-box-7:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "chartreuse"; | |
padding: 5px; | |
} | |
.green-box-8 { | |
background-color: lawngreen; | |
} | |
.green-box-8:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "lawngreen"; | |
padding: 5px; | |
} | |
.green-box-9 { | |
background-color: darkgreen; | |
} | |
.green-box-9:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "darkgreen"; | |
padding: 5px; | |
} | |
.green-box-10 { | |
background-color: green; | |
} | |
.green-box-10:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "green"; | |
padding: 5px; | |
} | |
.green-box-11 { | |
background-color: forestgreen; | |
} | |
.green-box-11:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "forestgreen"; | |
padding: 5px; | |
} | |
.green-box-12 { | |
background-color: lime; | |
} | |
.green-box-12:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "lime"; | |
padding: 5px; | |
} | |
.green-box-13 { | |
background-color: limegreen; | |
} | |
.green-box-13:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "limegreen"; | |
padding: 5px; | |
} | |
.green-box-14 { | |
background-color: lightgreen; | |
} | |
.green-box-14:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "lightgreen"; | |
padding: 5px; | |
} | |
.green-box-15 { | |
background-color: palegreen; | |
} | |
.green-box-15:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "palegreen"; | |
padding: 5px; | |
} | |
.green-box-16 { | |
background-color: darkseagreen; | |
} | |
.green-box-16:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "darkseagreen"; | |
padding: 5px; | |
} | |
.green-box-17 { | |
background-color: seagreen; | |
} | |
.green-box-17:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "seagreen"; | |
padding: 5px; | |
} | |
.green-box-18 { | |
background-color: mediumseagreen; | |
} | |
.green-box-18:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "mediumseagreen"; | |
padding: 5px; | |
} | |
.green-box-19 { | |
background-color: springgreen; | |
} | |
.green-box-19:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "springgreen"; | |
padding: 5px; | |
} | |
.green-box-20 { | |
background-color: mediumspringgreen; | |
} | |
.green-box-20:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "mediumspringgreen"; | |
padding: 5px; | |
} | |
.green-box-21 { | |
background-color: mediumaquamarine; | |
} | |
.green-box-21:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "mediumaquamarine"; | |
padding: 5px; | |
} | |
.green-box-22 { | |
background-color: lightseagreen; | |
} | |
.green-box-22:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "lightseagreen"; | |
padding: 5px; | |
} | |
.green-box-23 { | |
background-color: teal; | |
} | |
.green-box-23:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "teal"; | |
padding: 5px; | |
} | |
.orange-box-1 { | |
background-color: tomato; | |
} | |
.orange-box-1:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "tomato"; | |
padding: 5px; | |
} | |
.orange-box-2 { | |
background-color: orangered; | |
} | |
.orange-box-2:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "orangered"; | |
padding: 5px; | |
} | |
.orange-box-3 { | |
background-color: coral; | |
} | |
.orange-box-3:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "coral"; | |
padding: 5px; | |
} | |
.orange-box-4 { | |
background-color: lightsalmon; | |
} | |
.orange-box-4:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "lightsalmon"; | |
padding: 5px; | |
} | |
.orange-box-5 { | |
background-color: darkorange; | |
} | |
.orange-box-5:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "darkorange"; | |
padding: 5px; | |
} | |
.orange-box-6 { | |
background-color: orange; | |
} | |
.orange-box-6:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "orange"; | |
padding: 5px; | |
} | |
.pink-box-1 { | |
background-color: mediumvioletred; | |
} | |
.pink-box-1:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "mediumvioletred"; | |
padding: 5px; | |
} | |
.pink-box-2 { | |
background-color: deeppink; | |
} | |
.pink-box-2:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "deeppink"; | |
padding: 5px; | |
} | |
.pink-box-3 { | |
background-color: hotpink; | |
} | |
.pink-box-3:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "hotpink"; | |
padding: 5px; | |
} | |
.pink-box-4 { | |
background-color: palevioletred; | |
} | |
.pink-box-4:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "palevioletred"; | |
padding: 5px; | |
} | |
.pink-box-5 { | |
background-color: pink; | |
} | |
.pink-box-5:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "pink"; | |
padding: 5px; | |
} | |
.pink-box-6 { | |
background-color: lightpink; | |
} | |
.pink-box-6:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "lightpink"; | |
padding: 5px; | |
} | |
.red-box-1 { | |
background-color: darkred; | |
} | |
.red-box-1:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "darkred"; | |
padding: 5px; | |
} | |
.red-box-2 { | |
background-color: firebrick; | |
} | |
.red-box-2:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "firebrick"; | |
padding: 5px; | |
} | |
.red-box-3 { | |
background-color: red; | |
} | |
.red-box-3:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "red"; | |
padding: 5px; | |
} | |
.red-box-4 { | |
background-color: indianred; | |
} | |
.red-box-4:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "indianred"; | |
padding: 5px; | |
} | |
.red-box-5 { | |
background-color: lightcoral; | |
} | |
.red-box-5:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "lightcoral"; | |
padding: 5px; | |
} | |
.red-box-6 { | |
background-color: salmon; | |
} | |
.red-box-6:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "salmon"; | |
padding: 5px; | |
} | |
.red-box-7 { | |
background-color: darksalmon; | |
} | |
.red-box-7:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "darksalmon"; | |
padding: 5px; | |
} | |
.red-box-8 { | |
background-color: lightsalmon; | |
} | |
.red-box-8:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "lightsalmon"; | |
padding: 5px; | |
} | |
.red-box-9 { | |
background-color: crimson; | |
} | |
.red-box-9:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "crimson"; | |
padding: 5px; | |
} | |
.purple-box-1 { | |
background-color: magenta; | |
} | |
.purple-box-1:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "magenta"; | |
padding: 5px; | |
} | |
.purple-box-2 { | |
background-color: lavender; | |
} | |
.purple-box-2:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "lavender"; | |
padding: 5px; | |
} | |
.purple-box-3 { | |
background-color: darkslateblue; | |
} | |
.purple-box-3:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "darkslateblue"; | |
padding: 5px; | |
} | |
.purple-box-4 { | |
background-color: slateblue; | |
} | |
.purple-box-4:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "slateblue"; | |
padding: 5px; | |
} | |
.purple-box-5 { | |
background-color: mediumslateblue; | |
} | |
.purple-box-5:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "mediumslateblue"; | |
padding: 5px; | |
} | |
.purple-box-6 { | |
background-color: mediumpurple; | |
} | |
.purple-box-6:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "mediumpurple"; | |
padding: 5px; | |
} | |
.purple-box-7 { | |
background-color: blueviolet; | |
} | |
.purple-box-7:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "blueviolet"; | |
padding: 5px; | |
} | |
.purple-box-8 { | |
background-color: indigo; | |
} | |
.purple-box-8:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "indigo"; | |
padding: 5px; | |
} | |
.purple-box-9 { | |
background-color: darkorchid; | |
} | |
.purple-box-9:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "darkorchid"; | |
padding: 5px; | |
} | |
.purple-box-10 { | |
background-color: darkviolet; | |
} | |
.purple-box-10:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "darkviolet"; | |
padding: 5px; | |
} | |
.purple-box-11 { | |
background-color: mediumorchid; | |
} | |
.purple-box-11:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "mediumorchid"; | |
padding: 5px; | |
} | |
.purple-box-12 { | |
background-color: purple; | |
} | |
.purple-box-12:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "purple"; | |
padding: 5px; | |
} | |
.purple-box-13 { | |
background-color: darkmagenta; | |
} | |
.purple-box-13:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "darkmagenta"; | |
padding: 5px; | |
} | |
.purple-box-14 { | |
background-color: magenta; | |
} | |
.purple-box-14:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "magenta"; | |
padding: 5px; | |
} | |
.purple-box-15 { | |
background-color: violet; | |
} | |
.purple-box-15:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "violet"; | |
padding: 5px; | |
} | |
.purple-box-16 { | |
background-color: plum; | |
} | |
.purple-box-16:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "plum"; | |
padding: 5px; | |
} | |
.purple-box-17 { | |
background-color: thistle; | |
} | |
.purple-box-17:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "thistle"; | |
padding: 5px; | |
} | |
.purple-box-18 { | |
background-color: orchid; | |
} | |
.purple-box-18:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "orchid"; | |
padding: 5px; | |
} | |
.white-box-1 { | |
background-color: whitesmoke; | |
} | |
.white-box-1:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "whitesmoke"; | |
padding: 5px; | |
} | |
.white-box-2 { | |
background-color: white; | |
} | |
.white-box-2:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "white"; | |
padding: 5px; | |
} | |
.white-box-3 { | |
background-color: snow; | |
} | |
.white-box-3:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "snow"; | |
padding: 5px; | |
} | |
.white-box-4 { | |
background-color: mistyrose; | |
} | |
.white-box-4:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "mistyrose"; | |
padding: 5px; | |
} | |
.white-box-5 { | |
background-color: seashell; | |
} | |
.white-box-5:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "seashell"; | |
padding: 5px; | |
} | |
.white-box-6 { | |
background-color: linen; | |
} | |
.white-box-6:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "linen"; | |
padding: 5px; | |
} | |
.white-box-7 { | |
background-color: antiquewhite; | |
} | |
.white-box-7:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "antiquewhite"; | |
padding: 5px; | |
} | |
.white-box-8 { | |
background-color: oldlace; | |
} | |
.white-box-8:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "oldlace"; | |
padding: 5px; | |
} | |
.white-box-9 { | |
background-color: floralwhite; | |
} | |
.white-box-9:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "floralwhite"; | |
padding: 5px; | |
} | |
.white-box-10 { | |
background-color: beige; | |
} | |
.white-box-10:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "beige"; | |
padding: 5px; | |
} | |
.white-box-11 { | |
background-color: ivory; | |
} | |
.white-box-11:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "ivory"; | |
padding: 5px; | |
} | |
.white-box-12 { | |
background-color: honeydew; | |
} | |
.white-box-12:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "honeydew"; | |
padding: 5px; | |
} | |
.white-box-13 { | |
background-color: mintcream; | |
} | |
.white-box-13:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "mintcream"; | |
padding: 5px; | |
} | |
.white-box-14 { | |
background-color: azure; | |
} | |
.white-box-14:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "azure"; | |
padding: 5px; | |
} | |
.white-box-15 { | |
background-color: aliceblue; | |
} | |
.white-box-15:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "aliceblue"; | |
padding: 5px; | |
} | |
.white-box-16 { | |
background-color: ghostwhite; | |
} | |
.white-box-16:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "ghostwhite"; | |
padding: 5px; | |
} | |
.white-box-17 { | |
background-color: lavenderblush; | |
} | |
.white-box-17:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "lavenderblush"; | |
padding: 5px; | |
} | |
.yellow-box-1 { | |
background-color: peachpuff; | |
} | |
.yellow-box-1:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "peachpuff"; | |
padding: 5px; | |
} | |
.yellow-box-2 { | |
background-color: papayawhip; | |
} | |
.yellow-box-2:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "papayawhip"; | |
padding: 5px; | |
} | |
.yellow-box-3 { | |
background-color: moccasin; | |
} | |
.yellow-box-3:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "moccasin"; | |
padding: 5px; | |
} | |
.yellow-box-4 { | |
background-color: goldenrod; | |
} | |
.yellow-box-4:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
color: white; | |
content: "goldenrod"; | |
padding: 5px; | |
} | |
.yellow-box-5 { | |
background-color: gold; | |
} | |
.yellow-box-5:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "gold"; | |
padding: 5px; | |
} | |
.yellow-box-6 { | |
background-color: khaki; | |
} | |
.yellow-box-6:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "khaki"; | |
padding: 5px; | |
} | |
.yellow-box-7 { | |
background-color: lemonchiffon; | |
} | |
.yellow-box-7:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "lemonchiffon"; | |
padding: 5px; | |
} | |
.yellow-box-8 { | |
background-color: palegoldenrod; | |
} | |
.yellow-box-8:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "palegoldenrod"; | |
padding: 5px; | |
} | |
.yellow-box-9 { | |
background-color: darkkhaki; | |
} | |
.yellow-box-9:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "darkkhaki"; | |
padding: 5px; | |
} | |
.yellow-box-10 { | |
background-color: yellow; | |
} | |
.yellow-box-10:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "yellow"; | |
padding: 5px; | |
} | |
.yellow-box-11 { | |
background-color: lightgoldenrodyellow; | |
} | |
.yellow-box-11:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "lightgoldenrodyellow"; | |
padding: 5px; | |
} | |
.yellow-box-12 { | |
background-color: lightyellow; | |
} | |
.yellow-box-12:after { | |
font-size: 0.8em; | |
font-family: sans-serif; | |
display: block; | |
content: "lightyellow"; | |
padding: 5px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class='box cyan-box-1'></div> | |
<div class='box cyan-box-2'></div> | |
<div class='box cyan-box-3'></div> | |
<div class='box cyan-box-4'></div> | |
<div class='box blue-box-1'></div> | |
<div class='box blue-box-2'></div> | |
<div class='box blue-box-3'></div> | |
<div class='box blue-box-4'></div> | |
<div class='box blue-box-5'></div> | |
<div class='box blue-box-6'></div> | |
<div class='box blue-box-7'></div> | |
<div class='box blue-box-8'></div> | |
<div class='box blue-box-9'></div> | |
<div class='box blue-box-10'></div> | |
<div class='box blue-box-11'></div> | |
<div class='box blue-box-12'></div> | |
<div class='box blue-box-13'></div> | |
<div class='box blue-box-14'></div> | |
<div class='box blue-box-15'></div> | |
<div class='box blue-box-16'></div> | |
<div class='box blue-box-17'></div> | |
<div class='box blue-box-18'></div> | |
<div class='box blue-box-19'></div> | |
<div class='box blue-box-20'></div> | |
<div class='box blue-box-21'></div> | |
<div class='box blue-box-22'></div> | |
<div class='box blue-box-23'></div> | |
<div class='box blue-box-24'></div> | |
<div class='box blue-box-25'></div> | |
<div class='box purple-box-1'></div> | |
<div class='box purple-box-2'></div> | |
<div class='box purple-box-3'></div> | |
<div class='box purple-box-4'></div> | |
<div class='box purple-box-5'></div> | |
<div class='box purple-box-6'></div> | |
<div class='box purple-box-7'></div> | |
<div class='box purple-box-8'></div> | |
<div class='box purple-box-9'></div> | |
<div class='box purple-box-10'></div> | |
<div class='box purple-box-11'></div> | |
<div class='box purple-box-12'></div> | |
<div class='box purple-box-13'></div> | |
<div class='box purple-box-14'></div> | |
<div class='box purple-box-15'></div> | |
<div class='box purple-box-16'></div> | |
<div class='box purple-box-17'></div> | |
<div class='box purple-box-18'></div> | |
<div class='box pink-box-1'></div> | |
<div class='box pink-box-2'></div> | |
<div class='box pink-box-3'></div> | |
<div class='box pink-box-4'></div> | |
<div class='box pink-box-5'></div> | |
<div class='box pink-box-6'></div> | |
<div class='box red-box-1'></div> | |
<div class='box red-box-2'></div> | |
<div class='box red-box-3'></div> | |
<div class='box red-box-4'></div> | |
<div class='box red-box-5'></div> | |
<div class='box red-box-6'></div> | |
<div class='box red-box-7'></div> | |
<div class='box red-box-8'></div> | |
<div class='box red-box-9'></div> | |
<div class='box brown-box-1'></div> | |
<div class='box brown-box-2'></div> | |
<div class='box brown-box-3'></div> | |
<div class='box brown-box-4'></div> | |
<div class='box brown-box-5'></div> | |
<div class='box brown-box-6'></div> | |
<div class='box brown-box-7'></div> | |
<div class='box brown-box-8'></div> | |
<div class='box brown-box-9'></div> | |
<div class='box brown-box-10'></div> | |
<div class='box brown-box-11'></div> | |
<div class='box brown-box-12'></div> | |
<div class='box brown-box-13'></div> | |
<div class='box brown-box-14'></div> | |
<div class='box brown-box-15'></div> | |
<div class='box brown-box-16'></div> | |
<div class='box brown-box-17'></div> | |
<div class='box orange-box-1'></div> | |
<div class='box orange-box-2'></div> | |
<div class='box orange-box-3'></div> | |
<div class='box orange-box-4'></div> | |
<div class='box orange-box-5'></div> | |
<div class='box orange-box-6'></div> | |
<div class='box yellow-box-1'></div> | |
<div class='box yellow-box-2'></div> | |
<div class='box yellow-box-3'></div> | |
<div class='box yellow-box-4'></div> | |
<div class='box yellow-box-5'></div> | |
<div class='box yellow-box-6'></div> | |
<div class='box yellow-box-7'></div> | |
<div class='box yellow-box-8'></div> | |
<div class='box yellow-box-9'></div> | |
<div class='box yellow-box-10'></div> | |
<div class='box yellow-box-11'></div> | |
<div class='box yellow-box-12'></div> | |
<div class='box green-box-1'></div> | |
<div class='box green-box-2'></div> | |
<div class='box green-box-3'></div> | |
<div class='box green-box-4'></div> | |
<div class='box green-box-5'></div> | |
<div class='box green-box-6'></div> | |
<div class='box green-box-7'></div> | |
<div class='box green-box-8'></div> | |
<div class='box green-box-9'></div> | |
<div class='box green-box-10'></div> | |
<div class='box green-box-11'></div> | |
<div class='box green-box-12'></div> | |
<div class='box green-box-13'></div> | |
<div class='box green-box-14'></div> | |
<div class='box green-box-15'></div> | |
<div class='box green-box-16'></div> | |
<div class='box green-box-17'></div> | |
<div class='box green-box-18'></div> | |
<div class='box green-box-19'></div> | |
<div class='box green-box-20'></div> | |
<div class='box green-box-21'></div> | |
<div class='box green-box-22'></div> | |
<div class='box green-box-23'></div> | |
<div class='box grey-box-1'></div> | |
<div class='box grey-box-2'></div> | |
<div class='box grey-box-3'></div> | |
<div class='box grey-box-4'></div> | |
<div class='box grey-box-5'></div> | |
<div class='box grey-box-6'></div> | |
<div class='box grey-box-7'></div> | |
<div class='box grey-box-8'></div> | |
<div class='box grey-box-9'></div> | |
<div class='box grey-box-10'></div> | |
<div class='box white-box-1'></div> | |
<div class='box white-box-2'></div> | |
<div class='box white-box-3'></div> | |
<div class='box white-box-4'></div> | |
<div class='box white-box-5'></div> | |
<div class='box white-box-6'></div> | |
<div class='box white-box-7'></div> | |
<div class='box white-box-8'></div> | |
<div class='box white-box-9'></div> | |
<div class='box white-box-10'></div> | |
<div class='box white-box-11'></div> | |
<div class='box white-box-12'></div> | |
<div class='box white-box-13'></div> | |
<div class='box white-box-14'></div> | |
<div class='box white-box-15'></div> | |
<div class='box white-box-16'></div> | |
<div class='box white-box-17'></div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment