Last active
November 15, 2015 06:35
-
-
Save df2k2/3f4a4abd69537551f059 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or 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> | |
| <ul class="row" id="row0"> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <ul class="row" id="row1"> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <ul class="row" id="row3"> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| </ul> | |
| </div><div> | |
| <ul class="row" id="row2"> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <ul class="row" id="row4"> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <ul class="row" id="row5"> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <ul class="row" id="row6"> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <ul class="row" id="row7"> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <ul class="row" id="row8"> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <ul class="row" id="row9"> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <ul class="row" id="row10"> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <ul class="row" id="row11"> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| </ul> | |
| </div> |
This file contains hidden or 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.4.14) | |
| // Compass (v1.0.3) | |
| // ---- | |
| @import url(https://fonts.googleapis.com/css?family=Open+Sans:800italic,800,700italic,700,600italic,600,400italic,400,300italic,300); | |
| $sizeValue: 1%; | |
| .check-percent { | |
| @if (unit($sizeValue) == '%') { font-size: $sizeValue; } | |
| } | |
| .check-null { | |
| @if ($sizeValue) { content: 'not null'; } | |
| } | |
| body {line-height:1.5;} | |
| $color: #EE672F; //#EE672F | |
| $color2: #D8502C;// #D8502C; | |
| $color-blue: #4BB7BE; // #4BB7BE | |
| $mage-colors: #ef672f, #c14800, #0088cc, #31302b; | |
| .row { | |
| clear:both; | |
| } | |
| ul { | |
| list-style:none; | |
| margin:0; | |
| padding:0; | |
| display:table; | |
| width:100%; | |
| li { | |
| display:table-cell; | |
| padding: 1rem 1%; | |
| width:9%; | |
| vertical-align:middle; | |
| text-align:center; | |
| background:#ddd; | |
| font-family:"open sans"; | |
| font-size:1rem; | |
| color:darken(mix($color,#fff,30%),10%); | |
| &:nth-child(5) { | |
| background:$color; | |
| width:10%; | |
| } | |
| } | |
| &#row0 li { | |
| &:nth-child(5) { | |
| background:$color; | |
| &:after { | |
| content: "#{$color}"; | |
| } | |
| } | |
| } | |
| &#row1 li { | |
| &:nth-child(5) { | |
| background:$color; | |
| &:after { | |
| content: "#{$color}"; | |
| } | |
| } | |
| } | |
| &#row2 li { | |
| &:first-child { | |
| } | |
| &:nth-child(2) { | |
| background:darken($color,10%); | |
| } | |
| &:nth-child(3) { | |
| background:saturate($color,10%); | |
| } | |
| &:nth-child(4) { | |
| background:darken($color,10%); | |
| } | |
| &:nth-child(5) { | |
| $bg: rgba(red($color), green($color), blue($color),1); | |
| //background: $bg; | |
| color:white; | |
| &:after { | |
| content: to-upper-case("#{$bg}"); | |
| } | |
| } | |
| &:nth-child(6) { | |
| background:darken($color,10%); | |
| } | |
| } | |
| } | |
| ul { | |
| &#row1 li { background:$color; } | |
| &#row0 li { | |
| &:nth-child(4) { | |
| $cd: darken($color,10%); | |
| $tmp: $color - $cd; | |
| background:$tmp; | |
| &:after { | |
| content: to-upper-case("#{$color} - #{$cd} = #{$tmp}"); | |
| } | |
| } | |
| } | |
| &#row3 { | |
| li { | |
| } | |
| li:nth-child(1) { | |
| $new: lighten($color,20%); // color:darken(mix($color,#fff,30%),10%); | |
| $lightness: lightness($color); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$lightness} #{$new}"); | |
| } | |
| } | |
| li:nth-child(2) { | |
| $new: lighten($color,15%); | |
| background:$new; | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(3) { | |
| $new: lighten($color,10%); | |
| background:$new; | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(4) { | |
| $new: lighten($color,5%); | |
| background:$new; | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(5) { | |
| &:after { | |
| content: to-upper-case("#{$color}"); | |
| } | |
| } | |
| li:nth-child(6) { | |
| $new: darken($color,5%); | |
| background:$new; | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(7) { | |
| $new: darken($color,10%); | |
| background:$new; | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(8) { | |
| $new: darken($color,15%); | |
| background:$new; | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(9) { | |
| $new: darken($color,20%); | |
| background:$new; | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| } | |
| } | |
| ul { | |
| &#row4 { | |
| li { | |
| } | |
| li:nth-child(1) { | |
| $new: adjust-hue($color,100deg); // color:darken(mix($color,#fff,30%),10%); | |
| $lightness: lightness($color); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$lightness} #{$new}"); | |
| } | |
| } | |
| li:nth-child(2) { | |
| $new: lighten($color,15%); | |
| background:$new; | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(3) { | |
| $new: lighten($color,10%); | |
| background:$new; | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(4) { | |
| $new: lighten($color,5%); | |
| background:$new; | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(5) { | |
| &:after { | |
| content: to-upper-case("#{$color}"); | |
| } | |
| } | |
| li:nth-child(6) { | |
| $new: darken($color,5%); | |
| background:$new; | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(7) { | |
| //$new: complement($color); // | |
| $new: darken($color,10%); | |
| //$lightness: lightness($color); | |
| background:$new; | |
| //color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(8) { | |
| $new: darken($color,15%); | |
| background:$new; | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(9) { | |
| $new: darken($color,20%); | |
| background:$new; | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| } | |
| } | |
| ul { | |
| $color: complement($color); | |
| &#row5 { | |
| li { | |
| } | |
| li:nth-child(1) { | |
| //$new: adjust-hue($color,3deg); | |
| $new: lighten($color,20%); | |
| color:darken(mix($color,#fff,30%),10%); | |
| //$lightness: lightness($color); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(2) { | |
| $new: lighten($color,15%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(3) { | |
| $new: lighten($color,10%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(4) { | |
| $new: lighten($color,5%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(5) { | |
| background: $color; | |
| color: darken($color,lightness(invert($color))); | |
| &:after { | |
| content: to-upper-case("#{$color}"); | |
| } | |
| } | |
| li:nth-child(6) { | |
| $new: darken($color,5%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(7) { | |
| $new: darken($color,10%); | |
| $lightness: lightness($color); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$lightness} #{$new}"); | |
| } | |
| } | |
| li:nth-child(8) { | |
| $new: darken($color,15%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(9) { | |
| $new: darken($color,20%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| } | |
| } | |
| ul { | |
| //$color: complement($color); | |
| $color: #1979c3;//#F7F3EB;//#7B756B; | |
| &#row6 { | |
| li { | |
| } | |
| li:nth-child(1) { | |
| //$new: adjust-hue($color,3deg); | |
| $new: lighten($color,20%); | |
| color:darken(mix($color,#fff,30%),10%); | |
| //$lightness: lightness($color); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(2) { | |
| $new: lighten($color,15%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(3) { | |
| $new: lighten($color,10%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(4) { | |
| $new: lighten($color,5%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(5) { | |
| background: $color; | |
| color: darken($color,lightness(invert($color))); | |
| &:after { | |
| content: to-upper-case("#{$color}"); | |
| } | |
| } | |
| li:nth-child(6) { | |
| $new: darken($color,5%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(7) { | |
| $new: darken($color,10%); | |
| $lightness: lightness($color); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$lightness} #{$new}"); | |
| } | |
| } | |
| li:nth-child(8) { | |
| $new: darken($color,15%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(9) { | |
| $new: darken($color,20%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| } | |
| } | |
| ul { | |
| //$color: complement($color); | |
| $color: #EE672F; //#1979c3;//#F7F3EB;//#7B756B; | |
| &#row7 { | |
| li { | |
| } | |
| li:nth-child(1) { | |
| //$new: adjust-hue($color,3deg); | |
| $new: lighten($color,40%); | |
| color:darken(mix($color,#fff,30%),10%); | |
| //$lightness: lightness($color); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(2) { | |
| $new: lighten($color,30%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(3) { | |
| $new: lighten($color,20%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(4) { | |
| $new: lighten($color,5%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(5) { | |
| background: $color; | |
| color: darken($color,lightness(invert($color))); | |
| &:after { | |
| content: to-upper-case("#{$color}"); | |
| } | |
| } | |
| li:nth-child(6) { | |
| $new: darken($color,5%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(7) { | |
| $new: darken($color,10%); | |
| $lightness: lightness($color); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$lightness} #{$new}"); | |
| } | |
| } | |
| li:nth-child(8) { | |
| $new: darken($color,15%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(9) { | |
| $new: darken($color,20%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| } | |
| } | |
| ul { | |
| //$color: complement($color); | |
| $color: #cac3b4;//#1979c3;//#F7F3EB;//#7B756B; | |
| &#row8 { | |
| li { | |
| } | |
| li:nth-child(1) { | |
| //$new: adjust-hue($color,3deg); | |
| $new: lighten($color,20%); | |
| color:darken(mix($color,#fff,30%),10%); | |
| //$lightness: lightness($color); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(2) { | |
| $new: lighten($color,15%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(3) { | |
| $new: lighten($color,10%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(4) { | |
| $new: lighten($color,5%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(5) { | |
| background: $color; | |
| color: darken($color,lightness(invert($color))); | |
| &:after { | |
| content: to-upper-case("#{$color}"); | |
| } | |
| } | |
| li:nth-child(6) { | |
| $new: darken($color,5%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(7) { | |
| $new: darken($color,10%); | |
| $lightness: lightness($color); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$lightness} #{$new}"); | |
| } | |
| } | |
| li:nth-child(8) { | |
| $new: darken($color,15%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(9) { | |
| $new: darken($color,20%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| } | |
| } | |
| ul { | |
| //$color: complement($color); | |
| $color: #31302B;//#cac3b4;//#1979c3;//#F7F3EB;//#7B756B; | |
| &#row9 { | |
| li { | |
| } | |
| li:nth-child(1) { | |
| //$new: adjust-hue($color,3deg); | |
| $new: lighten($color,20%); | |
| color:darken(mix($color,#fff,30%),10%); | |
| //$lightness: lightness($color); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(2) { | |
| $new: lighten($color,15%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(3) { | |
| $new: lighten($color,10%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(4) { | |
| $new: lighten($color,5%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(5) { | |
| background: $color; | |
| color: #f7f3eb;//darken($color,lightness(invert($color))); | |
| &:after { | |
| content: to-upper-case("#{$color}"); | |
| } | |
| } | |
| li:nth-child(6) { | |
| $new: darken($color,5%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(7) { | |
| $new: darken($color,10%); | |
| $lightness: lightness($color); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$lightness} #{$new}"); | |
| } | |
| } | |
| li:nth-child(8) { | |
| $new: darken($color,15%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(9) { | |
| $new: darken($color,20%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| } | |
| } | |
| ul { | |
| //$color: complement($color); | |
| $color: #088299;//#cac3b4;//#1979c3;//#F7F3EB;//#7B756B; | |
| &#row10 { | |
| li { | |
| } | |
| li:nth-child(1) { | |
| //$new: adjust-hue($color,3deg); | |
| $new: lighten($color,20%); | |
| color:darken(mix($color,#fff,30%),10%); | |
| //$lightness: lightness($color); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(2) { | |
| $new: lighten($color,15%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(3) { | |
| $new: lighten($color,10%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(4) { | |
| $new: lighten($color,5%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(5) { | |
| background: $color; | |
| color: darken($color,lightness(invert($color))); | |
| &:after { | |
| content: to-upper-case("#{$color}"); | |
| } | |
| } | |
| li:nth-child(6) { | |
| $new: darken($color,5%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(7) { | |
| $new: darken($color,10%); | |
| $lightness: lightness($color); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$lightness} #{$new}"); | |
| } | |
| } | |
| li:nth-child(8) { | |
| $new: darken($color,15%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(9) { | |
| $new: darken($color,20%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| } | |
| } | |
| ul { | |
| //$color: complement($color); | |
| $color:#EDF8F9; //#088299;//#cac3b4;//#1979c3;//#F7F3EB;//#7B756B; | |
| &#row11 { | |
| li { | |
| } | |
| li:nth-child(1) { | |
| //$new: adjust-hue($color,3deg); | |
| $new: lighten($color,20%); | |
| color:darken(mix($color,#fff,30%),10%); | |
| //$lightness: lightness($color); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(2) { | |
| $new: lighten($color,15%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(3) { | |
| $new: lighten($color,10%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(4) { | |
| $new: lighten($color,5%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(5) { | |
| background: $color; | |
| color: darken($color,lightness(invert($color))); | |
| &:after { | |
| content: to-upper-case("#{$color}"); | |
| } | |
| } | |
| li:nth-child(6) { | |
| $new: darken($color,5%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(7) { | |
| $new: darken($color,10%); | |
| $lightness: lightness($color); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$lightness} #{$new}"); | |
| } | |
| } | |
| li:nth-child(8) { | |
| $new: darken($color,15%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| li:nth-child(9) { | |
| $new: darken($color,20%); | |
| background:$new; | |
| color: darken($new,lightness(invert($new))); | |
| &:after { | |
| content: to-upper-case("#{$new}"); | |
| } | |
| } | |
| } | |
| } | |
| $last: #f7f3eb; | |
| /* Adjust_Color */ | |
| /* | |
| adjust_color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]) | |
| */ | |
| .adjust-color { | |
| $new_color: adjust-color($color, $blue: 5); | |
| $new_color_u: to-upper-case("#{$new_color}"); | |
| /* | |
| $new_color: adjust-color($color, $blue: 5) | |
| Was: #{$color} => #{$new_color_u}; | |
| adjust-color(#102030, $red: -5, $blue: 5) => #0b2035 | |
| adjust-color(hsl(25, 100%, 80%), $lightness: -30%, $alpha: -0.4) => hsla(25, 100%, 50%, 0.6) | |
| */ | |
| } | |
This file contains hidden or 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
| @import url(https://fonts.googleapis.com/css?family=Open+Sans:800italic,800,700italic,700,600italic,600,400italic,400,300italic,300); | |
| .check-percent { | |
| font-size: 1%; | |
| } | |
| .check-null { | |
| content: 'not null'; | |
| } | |
| body { | |
| line-height: 1.5; | |
| } | |
| .row { | |
| clear: both; | |
| } | |
| ul { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| display: table; | |
| width: 100%; | |
| } | |
| ul li { | |
| display: table-cell; | |
| padding: 1rem 1%; | |
| width: 9%; | |
| vertical-align: middle; | |
| text-align: center; | |
| background: #ddd; | |
| font-family: "open sans"; | |
| font-size: 1rem; | |
| color: #f6ae92; | |
| } | |
| ul li:nth-child(5) { | |
| background: #EE672F; | |
| width: 10%; | |
| } | |
| ul#row0 li:nth-child(5) { | |
| background: #EE672F; | |
| } | |
| ul#row0 li:nth-child(5):after { | |
| content: "#EE672F"; | |
| } | |
| ul#row1 li:nth-child(5) { | |
| background: #EE672F; | |
| } | |
| ul#row1 li:nth-child(5):after { | |
| content: "#EE672F"; | |
| } | |
| ul#row2 li:nth-child(2) { | |
| background: #d84c12; | |
| } | |
| ul#row2 li:nth-child(3) { | |
| background: #f96224; | |
| } | |
| ul#row2 li:nth-child(4) { | |
| background: #d84c12; | |
| } | |
| ul#row2 li:nth-child(5) { | |
| color: white; | |
| } | |
| ul#row2 li:nth-child(5):after { | |
| content: "#EE672F"; | |
| } | |
| ul#row2 li:nth-child(6) { | |
| background: #d84c12; | |
| } | |
| ul#row1 li { | |
| background: #EE672F; | |
| } | |
| ul#row0 li:nth-child(4) { | |
| background: #161b1d; | |
| } | |
| ul#row0 li:nth-child(4):after { | |
| content: "#EE672F - #D84C12 = #161B1D"; | |
| } | |
| ul#row3 li:nth-child(1) { | |
| background: #f6ac8d; | |
| color: #ec591c; | |
| } | |
| ul#row3 li:nth-child(1):after { | |
| content: "55.88235% #F6AC8D"; | |
| } | |
| ul#row3 li:nth-child(2) { | |
| background: #f49b76; | |
| } | |
| ul#row3 li:nth-child(2):after { | |
| content: "#F49B76"; | |
| } | |
| ul#row3 li:nth-child(3) { | |
| background: #f2895e; | |
| } | |
| ul#row3 li:nth-child(3):after { | |
| content: "#F2895E"; | |
| } | |
| ul#row3 li:nth-child(4) { | |
| background: #f07847; | |
| } | |
| ul#row3 li:nth-child(4):after { | |
| content: "#F07847"; | |
| } | |
| ul#row3 li:nth-child(5):after { | |
| content: "#EE672F"; | |
| } | |
| ul#row3 li:nth-child(6) { | |
| background: #ec5617; | |
| } | |
| ul#row3 li:nth-child(6):after { | |
| content: "#EC5617"; | |
| } | |
| ul#row3 li:nth-child(7) { | |
| background: #d84c12; | |
| } | |
| ul#row3 li:nth-child(7):after { | |
| content: "#D84C12"; | |
| } | |
| ul#row3 li:nth-child(8) { | |
| background: #c14410; | |
| } | |
| ul#row3 li:nth-child(8):after { | |
| content: "#C14410"; | |
| } | |
| ul#row3 li:nth-child(9) { | |
| background: #a93b0e; | |
| } | |
| ul#row3 li:nth-child(9):after { | |
| content: "#A93B0E"; | |
| } | |
| ul#row4 li:nth-child(1) { | |
| background: #37ee2f; | |
| color: #073705; | |
| } | |
| ul#row4 li:nth-child(1):after { | |
| content: "55.88235% #37EE2F"; | |
| } | |
| ul#row4 li:nth-child(2) { | |
| background: #f49b76; | |
| } | |
| ul#row4 li:nth-child(2):after { | |
| content: "#F49B76"; | |
| } | |
| ul#row4 li:nth-child(3) { | |
| background: #f2895e; | |
| } | |
| ul#row4 li:nth-child(3):after { | |
| content: "#F2895E"; | |
| } | |
| ul#row4 li:nth-child(4) { | |
| background: #f07847; | |
| } | |
| ul#row4 li:nth-child(4):after { | |
| content: "#F07847"; | |
| } | |
| ul#row4 li:nth-child(5):after { | |
| content: "#EE672F"; | |
| } | |
| ul#row4 li:nth-child(6) { | |
| background: #ec5617; | |
| } | |
| ul#row4 li:nth-child(6):after { | |
| content: "#EC5617"; | |
| } | |
| ul#row4 li:nth-child(7) { | |
| background: #d84c12; | |
| } | |
| ul#row4 li:nth-child(7):after { | |
| content: "#D84C12"; | |
| } | |
| ul#row4 li:nth-child(8) { | |
| background: #c14410; | |
| } | |
| ul#row4 li:nth-child(8):after { | |
| content: "#C14410"; | |
| } | |
| ul#row4 li:nth-child(9) { | |
| background: #a93b0e; | |
| } | |
| ul#row4 li:nth-child(9):after { | |
| content: "#A93B0E"; | |
| } | |
| ul#row5 li:nth-child(1) { | |
| color: #92d8f6; | |
| background: #8dd7f6; | |
| color: #1cafec; | |
| } | |
| ul#row5 li:nth-child(1):after { | |
| content: "#8DD7F6"; | |
| } | |
| ul#row5 li:nth-child(2) { | |
| background: #76cff4; | |
| color: #1090c5; | |
| } | |
| ul#row5 li:nth-child(2):after { | |
| content: "#76CFF4"; | |
| } | |
| ul#row5 li:nth-child(3) { | |
| background: #5ec7f2; | |
| color: #0c6d96; | |
| } | |
| ul#row5 li:nth-child(3):after { | |
| content: "#5EC7F2"; | |
| } | |
| ul#row5 li:nth-child(4) { | |
| background: #47bef0; | |
| color: #084b67; | |
| } | |
| ul#row5 li:nth-child(4):after { | |
| content: "#47BEF0"; | |
| } | |
| ul#row5 li:nth-child(5) { | |
| background: #2fb6ee; | |
| color: #052937; | |
| } | |
| ul#row5 li:nth-child(5):after { | |
| content: "#2FB6EE"; | |
| } | |
| ul#row5 li:nth-child(6) { | |
| background: #17aeec; | |
| color: #010608; | |
| } | |
| ul#row5 li:nth-child(6):after { | |
| content: "#17AEEC"; | |
| } | |
| ul#row5 li:nth-child(7) { | |
| background: #129ed8; | |
| color: black; | |
| } | |
| ul#row5 li:nth-child(7):after { | |
| content: "55.88235% #129ED8"; | |
| } | |
| ul#row5 li:nth-child(8) { | |
| background: #108dc1; | |
| color: black; | |
| } | |
| ul#row5 li:nth-child(8):after { | |
| content: "#108DC1"; | |
| } | |
| ul#row5 li:nth-child(9) { | |
| background: #0e7ca9; | |
| color: black; | |
| } | |
| ul#row5 li:nth-child(9):after { | |
| content: "#0E7CA9"; | |
| } | |
| ul#row6 li:nth-child(1) { | |
| color: #92c0e2; | |
| background: #58aaea; | |
| color: #0f4a77; | |
| } | |
| ul#row6 li:nth-child(1):after { | |
| content: "#58AAEA"; | |
| } | |
| ul#row6 li:nth-child(2) { | |
| background: #429fe7; | |
| color: #092e4a; | |
| } | |
| ul#row6 li:nth-child(2):after { | |
| content: "#429FE7"; | |
| } | |
| ul#row6 li:nth-child(3) { | |
| background: #2b93e4; | |
| color: #04121c; | |
| } | |
| ul#row6 li:nth-child(3):after { | |
| content: "#2B93E4"; | |
| } | |
| ul#row6 li:nth-child(4) { | |
| background: #1c87da; | |
| color: black; | |
| } | |
| ul#row6 li:nth-child(4):after { | |
| content: "#1C87DA"; | |
| } | |
| ul#row6 li:nth-child(5) { | |
| background: #1979c3; | |
| color: black; | |
| } | |
| ul#row6 li:nth-child(5):after { | |
| content: "#1979C3"; | |
| } | |
| ul#row6 li:nth-child(6) { | |
| background: #166bac; | |
| color: black; | |
| } | |
| ul#row6 li:nth-child(6):after { | |
| content: "#166BAC"; | |
| } | |
| ul#row6 li:nth-child(7) { | |
| background: #135d96; | |
| color: black; | |
| } | |
| ul#row6 li:nth-child(7):after { | |
| content: "43.13725% #135D96"; | |
| } | |
| ul#row6 li:nth-child(8) { | |
| background: #104f7f; | |
| color: black; | |
| } | |
| ul#row6 li:nth-child(8):after { | |
| content: "#104F7F"; | |
| } | |
| ul#row6 li:nth-child(9) { | |
| background: #0d4169; | |
| color: black; | |
| } | |
| ul#row6 li:nth-child(9):after { | |
| content: "#0D4169"; | |
| } | |
| ul#row7 li:nth-child(1) { | |
| color: #f6ae92; | |
| background: #fdf1ec; | |
| color: #fce3d8; | |
| } | |
| ul#row7 li:nth-child(1):after { | |
| content: "#FDF1EC"; | |
| } | |
| ul#row7 li:nth-child(2) { | |
| background: #facebc; | |
| color: #f49e7a; | |
| } | |
| ul#row7 li:nth-child(2):after { | |
| content: "#FACEBC"; | |
| } | |
| ul#row7 li:nth-child(3) { | |
| background: #f6ac8d; | |
| color: #ec591c; | |
| } | |
| ul#row7 li:nth-child(3):after { | |
| content: "#F6AC8D"; | |
| } | |
| ul#row7 li:nth-child(4) { | |
| background: #f07847; | |
| color: #672408; | |
| } | |
| ul#row7 li:nth-child(4):after { | |
| content: "#F07847"; | |
| } | |
| ul#row7 li:nth-child(5) { | |
| background: #EE672F; | |
| color: #371305; | |
| } | |
| ul#row7 li:nth-child(5):after { | |
| content: "#EE672F"; | |
| } | |
| ul#row7 li:nth-child(6) { | |
| background: #ec5617; | |
| color: #080301; | |
| } | |
| ul#row7 li:nth-child(6):after { | |
| content: "#EC5617"; | |
| } | |
| ul#row7 li:nth-child(7) { | |
| background: #d84c12; | |
| color: black; | |
| } | |
| ul#row7 li:nth-child(7):after { | |
| content: "55.88235% #D84C12"; | |
| } | |
| ul#row7 li:nth-child(8) { | |
| background: #c14410; | |
| color: black; | |
| } | |
| ul#row7 li:nth-child(8):after { | |
| content: "#C14410"; | |
| } | |
| ul#row7 li:nth-child(9) { | |
| background: #a93b0e; | |
| color: black; | |
| } | |
| ul#row7 li:nth-child(9):after { | |
| content: "#A93B0E"; | |
| } | |
| ul#row8 li:nth-child(1) { | |
| color: #dad5cb; | |
| background: #f4f3f0; | |
| color: #e9e7e1; | |
| } | |
| ul#row8 li:nth-child(1):after { | |
| content: "#F4F3F0"; | |
| } | |
| ul#row8 li:nth-child(2) { | |
| background: #eae7e1; | |
| color: #d5cfc3; | |
| } | |
| ul#row8 li:nth-child(2):after { | |
| content: "#EAE7E1"; | |
| } | |
| ul#row8 li:nth-child(3) { | |
| background: #dfdbd2; | |
| color: #bfb7a5; | |
| } | |
| ul#row8 li:nth-child(3):after { | |
| content: "#DFDBD2"; | |
| } | |
| ul#row8 li:nth-child(4) { | |
| background: #d5cfc3; | |
| color: #aa9f87; | |
| } | |
| ul#row8 li:nth-child(4):after { | |
| content: "#D5CFC3"; | |
| } | |
| ul#row8 li:nth-child(5) { | |
| background: #cac3b4; | |
| color: #958769; | |
| } | |
| ul#row8 li:nth-child(5):after { | |
| content: "#CAC3B4"; | |
| } | |
| ul#row8 li:nth-child(6) { | |
| background: #bfb7a5; | |
| color: #776c54; | |
| } | |
| ul#row8 li:nth-child(6):after { | |
| content: "#BFB7A5"; | |
| } | |
| ul#row8 li:nth-child(7) { | |
| background: #b5ab96; | |
| color: #59513f; | |
| } | |
| ul#row8 li:nth-child(7):after { | |
| content: "74.90196% #B5AB96"; | |
| } | |
| ul#row8 li:nth-child(8) { | |
| background: #aa9f87; | |
| color: #3b352a; | |
| } | |
| ul#row8 li:nth-child(8):after { | |
| content: "#AA9F87"; | |
| } | |
| ul#row8 li:nth-child(9) { | |
| background: #a09378; | |
| color: #1d1b15; | |
| } | |
| ul#row8 li:nth-child(9):after { | |
| content: "#A09378"; | |
| } | |
| ul#row9 li:nth-child(1) { | |
| color: #a8a8a5; | |
| background: #67655b; | |
| color: black; | |
| } | |
| ul#row9 li:nth-child(1):after { | |
| content: "#67655B"; | |
| } | |
| ul#row9 li:nth-child(2) { | |
| background: #5a584f; | |
| color: black; | |
| } | |
| ul#row9 li:nth-child(2):after { | |
| content: "#5A584F"; | |
| } | |
| ul#row9 li:nth-child(3) { | |
| background: #4c4b43; | |
| color: black; | |
| } | |
| ul#row9 li:nth-child(3):after { | |
| content: "#4C4B43"; | |
| } | |
| ul#row9 li:nth-child(4) { | |
| background: #3f3d37; | |
| color: black; | |
| } | |
| ul#row9 li:nth-child(4):after { | |
| content: "#3F3D37"; | |
| } | |
| ul#row9 li:nth-child(5) { | |
| background: #31302B; | |
| color: #f7f3eb; | |
| } | |
| ul#row9 li:nth-child(5):after { | |
| content: "#31302B"; | |
| } | |
| ul#row9 li:nth-child(6) { | |
| background: #23231f; | |
| color: black; | |
| } | |
| ul#row9 li:nth-child(6):after { | |
| content: "#23231F"; | |
| } | |
| ul#row9 li:nth-child(7) { | |
| background: #161513; | |
| color: black; | |
| } | |
| ul#row9 li:nth-child(7):after { | |
| content: "18.03922% #161513"; | |
| } | |
| ul#row9 li:nth-child(8) { | |
| background: #080807; | |
| color: black; | |
| } | |
| ul#row9 li:nth-child(8):after { | |
| content: "#080807"; | |
| } | |
| ul#row9 li:nth-child(9) { | |
| background: black; | |
| color: black; | |
| } | |
| ul#row9 li:nth-child(9):after { | |
| content: "BLACK"; | |
| } | |
| ul#row10 li:nth-child(1) { | |
| color: #91c8d1; | |
| background: #14cff3; | |
| color: #010d0f; | |
| } | |
| ul#row10 li:nth-child(1):after { | |
| content: "#14CFF3"; | |
| } | |
| ul#row10 li:nth-child(2) { | |
| background: #0cc0e2; | |
| color: black; | |
| } | |
| ul#row10 li:nth-child(2):after { | |
| content: "#0CC0E2"; | |
| } | |
| ul#row10 li:nth-child(3) { | |
| background: #0babc9; | |
| color: black; | |
| } | |
| ul#row10 li:nth-child(3):after { | |
| content: "#0BABC9"; | |
| } | |
| ul#row10 li:nth-child(4) { | |
| background: #0997b1; | |
| color: black; | |
| } | |
| ul#row10 li:nth-child(4):after { | |
| content: "#0997B1"; | |
| } | |
| ul#row10 li:nth-child(5) { | |
| background: #088299; | |
| color: black; | |
| } | |
| ul#row10 li:nth-child(5):after { | |
| content: "#088299"; | |
| } | |
| ul#row10 li:nth-child(6) { | |
| background: #076d81; | |
| color: black; | |
| } | |
| ul#row10 li:nth-child(6):after { | |
| content: "#076D81"; | |
| } | |
| ul#row10 li:nth-child(7) { | |
| background: #055969; | |
| color: black; | |
| } | |
| ul#row10 li:nth-child(7):after { | |
| content: "31.56863% #055969"; | |
| } | |
| ul#row10 li:nth-child(8) { | |
| background: #044450; | |
| color: black; | |
| } | |
| ul#row10 li:nth-child(8):after { | |
| content: "#044450"; | |
| } | |
| ul#row10 li:nth-child(9) { | |
| background: #033038; | |
| color: black; | |
| } | |
| ul#row10 li:nth-child(9):after { | |
| content: "#033038"; | |
| } | |
| ul#row11 li:nth-child(1) { | |
| color: #d6eeee; | |
| background: white; | |
| color: white; | |
| } | |
| ul#row11 li:nth-child(1):after { | |
| content: "WHITE"; | |
| } | |
| ul#row11 li:nth-child(2) { | |
| background: white; | |
| color: white; | |
| } | |
| ul#row11 li:nth-child(2):after { | |
| content: "WHITE"; | |
| } | |
| ul#row11 li:nth-child(3) { | |
| background: white; | |
| color: white; | |
| } | |
| ul#row11 li:nth-child(3):after { | |
| content: "WHITE"; | |
| } | |
| ul#row11 li:nth-child(4) { | |
| background: white; | |
| color: white; | |
| } | |
| ul#row11 li:nth-child(4):after { | |
| content: "WHITE"; | |
| } | |
| ul#row11 li:nth-child(5) { | |
| background: #EDF8F9; | |
| color: #dbf1f3; | |
| } | |
| ul#row11 li:nth-child(5):after { | |
| content: "#EDF8F9"; | |
| } | |
| ul#row11 li:nth-child(6) { | |
| background: #daf1f3; | |
| color: #b5e2e6; | |
| } | |
| ul#row11 li:nth-child(6):after { | |
| content: "#DAF1F3"; | |
| } | |
| ul#row11 li:nth-child(7) { | |
| background: #c7e9ec; | |
| color: #8fd3d9; | |
| } | |
| ul#row11 li:nth-child(7):after { | |
| content: "95.29412% #C7E9EC"; | |
| } | |
| ul#row11 li:nth-child(8) { | |
| background: #b4e2e6; | |
| color: #69c5cd; | |
| } | |
| ul#row11 li:nth-child(8):after { | |
| content: "#B4E2E6"; | |
| } | |
| ul#row11 li:nth-child(9) { | |
| background: #a1dadf; | |
| color: #42b5c0; | |
| } | |
| ul#row11 li:nth-child(9):after { | |
| content: "#A1DADF"; | |
| } | |
| /* Adjust_Color */ | |
| /* | |
| adjust_color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]) | |
| */ | |
| .adjust-color { | |
| /* | |
| $new_color: adjust-color($color, $blue: 5) | |
| Was: #EE672F => #EE6734; | |
| adjust-color(#102030, $red: -5, $blue: 5) => #0b2035 | |
| adjust-color(hsl(25, 100%, 80%), $lightness: -30%, $alpha: -0.4) => hsla(25, 100%, 50%, 0.6) | |
| */ | |
| } |
This file contains hidden or 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> | |
| <ul class="row" id="row0"> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <ul class="row" id="row1"> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <ul class="row" id="row3"> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| </ul> | |
| </div><div> | |
| <ul class="row" id="row2"> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <ul class="row" id="row4"> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <ul class="row" id="row5"> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <ul class="row" id="row6"> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <ul class="row" id="row7"> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <ul class="row" id="row8"> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <ul class="row" id="row9"> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <ul class="row" id="row10"> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <ul class="row" id="row11"> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| <li> </li> | |
| </ul> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment