- ul {
- margin: -3*$px 0 0 -20*$px;
- padding: 0;
- list-style: none;
-
- li {
- margin-top: 20*$px;
- margin-left: 20*$px;
- float: left;
- width: 160*$px;
- height: 90*$px;
- border-radius: 15*$px;
-
- a {
- color: white;
- text-transform: uppercase;
- display: block;
- height: 80*$px;
- width: 150*$px;
- display: table;
- padding: 5*$px;
-
- span {
- font-size: .9em;
- height: 100%;
- width: 100%;
- display: table-cell;
- vertical-align: middle;
- border: 1px solid transparent;
- border-radius: 10*$px;
- padding-left: 16*$px;
- }
- }
- a:hover span {
- border: 1px solid white;
- }
- }
- .box1 {background-color: #adaeaf;}
- .box2 {background-color: #f8b323;}
- .box3 {background-color: #16a487;}
- .box4 {background-color: #5e6165;}
- .box5 {background-color: #16a487;}
- .box6 {background-color: #363a3e;}
- .box7 {background-color: #adaeaf;}
- .box8 {background-color: #ed7831;}