A recreation of Inndovation's "Remainder" post over on dribbble (http://dribbble.com/shots/1217567-Remainder?list=popular&offset=4) - no Javascript used.
A Pen by Johan Fagerbeg on CodePen.
Created
July 3, 2016 14:58
-
-
Save Frankie-666/13841f834912a3890700344d10d11766 to your computer and use it in GitHub Desktop.
Reminder - Design by Inndovation
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 id="main"> | |
| <form> | |
| <input type="radio" id="glass" name="icon" checked="checked" /> | |
| <label for="glass" class="icon-glass"></label> | |
| <input type="radio" id="coffee" name="icon" /> | |
| <label for="coffee" class="icon-coffee"></label> | |
| <input type="radio" id="briefcase" name="icon" /> | |
| <label for="briefcase" class="icon-briefcase"></label> | |
| <input type="radio" id="basket" name="icon" /> | |
| <label for="basket" class="icon-basket"></label> | |
| <input type="radio" id="food" name="icon" /> | |
| <label for="food" class="icon-food"></label> | |
| <input type="radio" id="gamepad" name="icon" /> | |
| <label for="gamepad" class="icon-gamepad"></label> | |
| <input type="radio" id="code" name="icon" /> | |
| <label for="code" class="icon-code"></label> | |
| <input type="radio" id="beer" name="icon" /> | |
| <label for="beer" class="icon-beer"></label> | |
| <div id="clock"> | |
| <div id="pointer"></div> | |
| <ul id="marks"> | |
| <li class="large"></li> | |
| <li></li> | |
| <li></li> | |
| <li class="large"></li> | |
| <li></li> | |
| <li></li> | |
| <li class="large"></li> | |
| <li></li> | |
| <li></li> | |
| <li class="large"></li> | |
| <li></li> | |
| <li></li> | |
| <li class="large"></li> | |
| <li></li> | |
| <li></li> | |
| <li class="large"></li> | |
| <li></li> | |
| <li></li> | |
| <li class="large"></li> | |
| <li></li> | |
| <li></li> | |
| <li class="large"></li> | |
| <li></li> | |
| <li></li> | |
| </ul> | |
| <div id="hands"> | |
| <div id="large"></div> | |
| <div id="small"></div> | |
| </div> | |
| <p></p> | |
| </div> | |
| </form> | |
| </div> | |
| <p>Based on <a href="http://dribbble.com/shots/1217567-Remainder?list=popular&offset=4">this Dribbble shot by Inndovation</a></p> |
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
| // Source: | |
| // http://dribbble.com/shots/1217567-Remainder |
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
| * { | |
| margin:0; | |
| padding:0; | |
| } | |
| html { | |
| width:100%; | |
| height:100%; | |
| background:#ebe3dd; | |
| } | |
| #main { | |
| width:500px; | |
| height:500px; | |
| background:#eb6649; | |
| position:absolute; | |
| left:50%; | |
| top:50%; | |
| margin:-250px 0 0 -250px; | |
| border:5px solid white; | |
| border-radius:50%; | |
| box-shadow:0 0 25px rgba(0,0,0,0.2); | |
| } | |
| input { display:none; } | |
| label { | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| width: 48px; | |
| height: 48px; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| margin: -48px 0 0 -24px; | |
| z-index: 1; | |
| font-size: 48px; | |
| color: #b54736; | |
| -webkit-transform-origin: 50% 100%; | |
| -moz-transform-origin: 50% 100%; | |
| -o-transform-origin: 50% 100%; | |
| -ms-transform-origin: 50% 100%; | |
| transform-origin: 50% 100%; | |
| -webkit-transform: rotate(0deg) translateY(-375%); | |
| -moz-transform: rotate(0deg) translateY(-375%); | |
| -o-transform: rotate(0deg) translateY(-375%); | |
| -ms-transform: rotate(0deg) translateY(-375%); | |
| transform: rotate(0deg) translateY(-375%); | |
| } | |
| input:checked + label { | |
| color: #ebe3dd; | |
| } | |
| input:checked ~ #clock #large { | |
| -webkit-transform: rotate(90deg); | |
| -moz-transform: rotate(90deg); | |
| -o-transform: rotate(90deg); | |
| -ms-transform: rotate(90deg); | |
| transform: rotate(90deg); | |
| } | |
| input:checked ~ #clock #small { | |
| -webkit-transform: rotate(780deg); | |
| -moz-transform: rotate(780deg); | |
| -o-transform: rotate(780deg); | |
| -ms-transform: rotate(780deg); | |
| transform: rotate(780deg); | |
| } | |
| input:checked ~ #clock #pointer { | |
| -webkit-transform: rotate(90deg); | |
| -moz-transform: rotate(90deg); | |
| -o-transform: rotate(90deg); | |
| -ms-transform: rotate(90deg); | |
| transform: rotate(90deg); | |
| } | |
| input:checked ~ #clock p:before { | |
| content: "Disco"; | |
| } | |
| input:nth-of-type(2) + label { | |
| -webkit-transform: rotate(45deg) translateY(-375%); | |
| -moz-transform: rotate(45deg) translateY(-375%); | |
| -o-transform: rotate(45deg) translateY(-375%); | |
| -ms-transform: rotate(45deg) translateY(-375%); | |
| transform: rotate(45deg) translateY(-375%); | |
| } | |
| input:nth-of-type(2):checked ~ #clock #hands #large { | |
| -webkit-transform: rotate(270deg); | |
| -moz-transform: rotate(270deg); | |
| -o-transform: rotate(270deg); | |
| -ms-transform: rotate(270deg); | |
| transform: rotate(270deg); | |
| } | |
| input:nth-of-type(2):checked ~ #clock #hands #small { | |
| -webkit-transform: rotate(315deg); | |
| -moz-transform: rotate(315deg); | |
| -o-transform: rotate(315deg); | |
| -ms-transform: rotate(315deg); | |
| transform: rotate(315deg); | |
| } | |
| input:nth-of-type(2):checked ~ #clock #pointer { | |
| -webkit-transform: rotate(135deg); | |
| -moz-transform: rotate(135deg); | |
| -o-transform: rotate(135deg); | |
| -ms-transform: rotate(135deg); | |
| transform: rotate(135deg); | |
| } | |
| input:nth-of-type(2):checked ~ #clock p:before { | |
| content: "Wake up"; | |
| } | |
| input:nth-of-type(3) + label { | |
| -webkit-transform: rotate(90deg) translateY(-375%); | |
| -moz-transform: rotate(90deg) translateY(-375%); | |
| -o-transform: rotate(90deg) translateY(-375%); | |
| -ms-transform: rotate(90deg) translateY(-375%); | |
| transform: rotate(90deg) translateY(-375%); | |
| } | |
| input:nth-of-type(3):checked ~ #clock #hands #large { | |
| -webkit-transform: rotate(0deg); | |
| -moz-transform: rotate(0deg); | |
| -o-transform: rotate(0deg); | |
| -ms-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| input:nth-of-type(3):checked ~ #clock #hands #small { | |
| -webkit-transform: rotate(-367.5deg); | |
| -moz-transform: rotate(-367.5deg); | |
| -o-transform: rotate(-367.5deg); | |
| -ms-transform: rotate(-367.5deg); | |
| transform: rotate(-367.5deg); | |
| } | |
| input:nth-of-type(3):checked ~ #clock #pointer { | |
| -webkit-transform: rotate(180deg); | |
| -moz-transform: rotate(180deg); | |
| -o-transform: rotate(180deg); | |
| -ms-transform: rotate(180deg); | |
| transform: rotate(180deg); | |
| } | |
| input:nth-of-type(3):checked ~ #clock p:before { | |
| content: "Work"; | |
| } | |
| input:nth-of-type(4) + label { | |
| -webkit-transform: rotate(135deg) translateY(-375%); | |
| -moz-transform: rotate(135deg) translateY(-375%); | |
| -o-transform: rotate(135deg) translateY(-375%); | |
| -ms-transform: rotate(135deg) translateY(-375%); | |
| transform: rotate(135deg) translateY(-375%); | |
| } | |
| input:nth-of-type(4):checked ~ #clock #hands #large { | |
| -webkit-transform: rotate(-90deg); | |
| -moz-transform: rotate(-90deg); | |
| -o-transform: rotate(-90deg); | |
| -ms-transform: rotate(-90deg); | |
| transform: rotate(-90deg); | |
| } | |
| input:nth-of-type(4):checked ~ #clock #hands #small { | |
| -webkit-transform: rotate(-165deg); | |
| -moz-transform: rotate(-165deg); | |
| -o-transform: rotate(-165deg); | |
| -ms-transform: rotate(-165deg); | |
| transform: rotate(-165deg); | |
| } | |
| input:nth-of-type(4):checked ~ #clock #pointer { | |
| -webkit-transform: rotate(225deg); | |
| -moz-transform: rotate(225deg); | |
| -o-transform: rotate(225deg); | |
| -ms-transform: rotate(225deg); | |
| transform: rotate(225deg); | |
| } | |
| input:nth-of-type(4):checked ~ #clock p:before { | |
| content: "Shopping"; | |
| } | |
| input:nth-of-type(5) + label { | |
| -webkit-transform: rotate(180deg) translateY(-375%); | |
| -moz-transform: rotate(180deg) translateY(-375%); | |
| -o-transform: rotate(180deg) translateY(-375%); | |
| -ms-transform: rotate(180deg) translateY(-375%); | |
| transform: rotate(180deg) translateY(-375%); | |
| } | |
| input:nth-of-type(5):checked ~ #clock #hands #large { | |
| -webkit-transform: rotate(-270deg); | |
| -moz-transform: rotate(-270deg); | |
| -o-transform: rotate(-270deg); | |
| -ms-transform: rotate(-270deg); | |
| transform: rotate(-270deg); | |
| } | |
| input:nth-of-type(5):checked ~ #clock #hands #small { | |
| -webkit-transform: rotate(270deg); | |
| -moz-transform: rotate(270deg); | |
| -o-transform: rotate(270deg); | |
| -ms-transform: rotate(270deg); | |
| transform: rotate(270deg); | |
| } | |
| input:nth-of-type(5):checked ~ #clock #pointer { | |
| -webkit-transform: rotate(270deg); | |
| -moz-transform: rotate(270deg); | |
| -o-transform: rotate(270deg); | |
| -ms-transform: rotate(270deg); | |
| transform: rotate(270deg); | |
| } | |
| input:nth-of-type(5):checked ~ #clock p:before { | |
| content: "Dinner"; | |
| } | |
| input:nth-of-type(6) + label { | |
| -webkit-transform: rotate(225deg) translateY(-375%); | |
| -moz-transform: rotate(225deg) translateY(-375%); | |
| -o-transform: rotate(225deg) translateY(-375%); | |
| -ms-transform: rotate(225deg) translateY(-375%); | |
| transform: rotate(225deg) translateY(-375%); | |
| } | |
| input:nth-of-type(6):checked ~ #clock #hands #large { | |
| -webkit-transform: rotate(180deg); | |
| -moz-transform: rotate(180deg); | |
| -o-transform: rotate(180deg); | |
| -ms-transform: rotate(180deg); | |
| transform: rotate(180deg); | |
| } | |
| input:nth-of-type(6):checked ~ #clock #hands #small { | |
| -webkit-transform: rotate(301.5deg); | |
| -moz-transform: rotate(301.5deg); | |
| -o-transform: rotate(301.5deg); | |
| -ms-transform: rotate(301.5deg); | |
| transform: rotate(301.5deg); | |
| } | |
| input:nth-of-type(6):checked ~ #clock #pointer { | |
| -webkit-transform: rotate(315deg); | |
| -moz-transform: rotate(315deg); | |
| -o-transform: rotate(315deg); | |
| -ms-transform: rotate(315deg); | |
| transform: rotate(315deg); | |
| } | |
| input:nth-of-type(6):checked ~ #clock p:before { | |
| content: "Relax"; | |
| } | |
| input:nth-of-type(7) + label { | |
| -webkit-transform: rotate(270deg) translateY(-375%); | |
| -moz-transform: rotate(270deg) translateY(-375%); | |
| -o-transform: rotate(270deg) translateY(-375%); | |
| -ms-transform: rotate(270deg) translateY(-375%); | |
| transform: rotate(270deg) translateY(-375%); | |
| } | |
| input:nth-of-type(7):checked ~ #clock #hands #large { | |
| -webkit-transform: rotate(390deg); | |
| -moz-transform: rotate(390deg); | |
| -o-transform: rotate(390deg); | |
| -ms-transform: rotate(390deg); | |
| transform: rotate(390deg); | |
| } | |
| input:nth-of-type(7):checked ~ #clock #hands #small { | |
| -webkit-transform: rotate(-5deg); | |
| -moz-transform: rotate(-5deg); | |
| -o-transform: rotate(-5deg); | |
| -ms-transform: rotate(-5deg); | |
| transform: rotate(-5deg); | |
| } | |
| input:nth-of-type(7):checked ~ #clock #pointer { | |
| -webkit-transform: rotate(0deg); | |
| -moz-transform: rotate(0deg); | |
| -o-transform: rotate(0deg); | |
| -ms-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| input:nth-of-type(7):checked ~ #clock p:before { | |
| content: "Code"; | |
| } | |
| input:nth-of-type(8) + label { | |
| -webkit-transform: rotate(315deg) translateY(-375%); | |
| -moz-transform: rotate(315deg) translateY(-375%); | |
| -o-transform: rotate(315deg) translateY(-375%); | |
| -ms-transform: rotate(315deg) translateY(-375%); | |
| transform: rotate(315deg) translateY(-375%); | |
| } | |
| input:nth-of-type(8):checked ~ #clock #hands #large { | |
| -webkit-transform: rotate(-270deg); | |
| -moz-transform: rotate(-270deg); | |
| -o-transform: rotate(-270deg); | |
| -ms-transform: rotate(-270deg); | |
| transform: rotate(-270deg); | |
| } | |
| input:nnth-of-type(8):checked ~ #clock #hands #small { | |
| -webkit-transform: rotate(30deg); | |
| -moz-transform: rotate(30deg); | |
| -o-transform: rotate(30deg); | |
| -ms-transform: rotate(30deg); | |
| transform: rotate(30deg); | |
| } | |
| input:nth-of-type(8):checked ~ #clock #pointer { | |
| -webkit-transform: rotate(45deg); | |
| -moz-transform: rotate(45deg); | |
| -o-transform: rotate(45deg); | |
| -ms-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| } | |
| input:nth-of-type(8):checked ~ #clock p:before { | |
| content: "Pub"; | |
| } | |
| input + label:before { | |
| position:absolute; | |
| top:0; | |
| left:0; | |
| } | |
| #clock { | |
| width:300px; | |
| height:300px; | |
| background:#ebe3dd; | |
| position:absolute; | |
| left:50%; | |
| top:50%; | |
| margin:-150px 0 0 -150px; | |
| border-radius:50%; | |
| box-shadow:inset 0 2px 2px 0 white, 0 0 10px rgba(0,0,0,0.2); | |
| } | |
| #pointer { | |
| width:150px; | |
| height:50px; | |
| position:absolute; | |
| top:50%; | |
| margin-top:-25px; | |
| -webkit-transform-origin:100% 50%; | |
| -moz-transform-origin:100% 50%; | |
| -o-transform-origin:100% 50%; | |
| -ms-transform-origin:100% 50%; | |
| transform-origin:100% 50%; | |
| -webkit-transition:all 1s ease-in-out; | |
| -moz-transition:all 1s ease-in-out; | |
| -o-transition:all 1s ease-in-out; | |
| -ms-transition:all 1s ease-in-out; | |
| transition:all 1s ease-in-out; | |
| } | |
| #pointer:before, #pointer:after { | |
| content:""; | |
| width:0; | |
| height:0; | |
| position:absolute; | |
| left:-25px; | |
| top:-5px; | |
| border-right:30px solid #ebe3dd; | |
| border-top:30px solid transparent; | |
| border-bottom:30px solid transparent; | |
| } | |
| #pointer:after { | |
| left:-15px; | |
| top:0px; | |
| border-right:25px solid rgba(255,187,0,.5); | |
| border-top:25px solid transparent; | |
| border-bottom:25px solid transparent; | |
| } | |
| #marks { | |
| list-style:none; | |
| z-index:4; | |
| } | |
| #marks li { | |
| display:inline-block; | |
| width:2px; | |
| height:2.5%; | |
| margin-bottom:45%; | |
| background:#bad1cc; | |
| position:absolute; | |
| left:50%; | |
| top:50%; | |
| margin:-2.5% 0 0 -1px; | |
| vertical-align:top; | |
| box-shadow:-5% 0 black; | |
| -webkit-transform-origin:50% 100%; | |
| -moz-transform-origin:50% 100%; | |
| -o-transform-origin:50% 100%; | |
| -ms-transform-origin:50% 100%; | |
| transform-origin:50% 100%; | |
| -webkit-transform:rotate(15deg) translateY(-1800%); | |
| -moz-transform:rotate(15deg) translateY(-1800%); | |
| -o-transform:rotate(15deg) translateY(-1800%); | |
| -ms-transform:rotate(15deg) translateY(-1800%); | |
| transform:rotate(15deg) translateY(-1800%); | |
| } | |
| #marks .large { | |
| width:5px; | |
| height:5%; | |
| margin-bottom:40%; | |
| background:#8b9d99; | |
| margin:-5% 0 0 -2.5px; | |
| -webkit-transform:rotate(0deg) translateY(-800%); | |
| -moz-transform:rotate(0deg) translateY(-800%); | |
| -o-transform:rotate(0deg) translateY(-800%); | |
| -ms-transform:rotate(0deg) translateY(-800%); | |
| transform:rotate(0deg) translateY(-800%); | |
| } | |
| #marks li:nth-child(3) { | |
| -webkit-transform: rotate(30deg) translateY(-1800%); | |
| -moz-transform: rotate(30deg) translateY(-1800%); | |
| -o-transform: rotate(30deg) translateY(-1800%); | |
| -ms-transform: rotate(30deg) translateY(-1800%); | |
| transform: rotate(30deg) translateY(-1800%); | |
| } | |
| #marks li:nth-child(4) { | |
| -webkit-transform: rotate(45deg) translateY(-800%); | |
| -moz-transform: rotate(45deg) translateY(-800%); | |
| -o-transform: rotate(45deg) translateY(-800%); | |
| -ms-transform: rotate(45deg) translateY(-800%); | |
| transform: rotate(45deg) translateY(-800%); | |
| } | |
| #marks li:nth-child(5) { | |
| -webkit-transform: rotate(60deg) translateY(-1800%); | |
| -moz-transform: rotate(60deg) translateY(-1800%); | |
| -o-transform: rotate(60deg) translateY(-1800%); | |
| -ms-transform: rotate(60deg) translateY(-1800%); | |
| transform: rotate(60deg) translateY(-1800%); | |
| } | |
| #marks li:nth-child(6) { | |
| -webkit-transform: rotate(75deg) translateY(-1800%); | |
| -moz-transform: rotate(75deg) translateY(-1800%); | |
| -o-transform: rotate(75deg) translateY(-1800%); | |
| -ms-transform: rotate(75deg) translateY(-1800%); | |
| transform: rotate(75deg) translateY(-1800%); | |
| } | |
| #marks li:nth-child(7) { | |
| -webkit-transform: rotate(90deg) translateY(-800%); | |
| -moz-transform: rotate(90deg) translateY(-800%); | |
| -o-transform: rotate(90deg) translateY(-800%); | |
| -ms-transform: rotate(90deg) translateY(-800%); | |
| transform: rotate(90deg) translateY(-800%); | |
| } | |
| #marks li:nth-child(8) { | |
| -webkit-transform: rotate(105deg) translateY(-1800%); | |
| -moz-transform: rotate(105deg) translateY(-1800%); | |
| -o-transform: rotate(105deg) translateY(-1800%); | |
| -ms-transform: rotate(105deg) translateY(-1800%); | |
| transform: rotate(105deg) translateY(-1800%); | |
| } | |
| #marks li:nth-child(9) { | |
| -webkit-transform: rotate(120deg) translateY(-1800%); | |
| -moz-transform: rotate(120deg) translateY(-1800%); | |
| -o-transform: rotate(120deg) translateY(-1800%); | |
| -ms-transform: rotate(120deg) translateY(-1800%); | |
| transform: rotate(120deg) translateY(-1800%); | |
| } | |
| #marks li:nth-child(10) { | |
| -webkit-transform: rotate(135deg) translateY(-800%); | |
| -moz-transform: rotate(135deg) translateY(-800%); | |
| -o-transform: rotate(135deg) translateY(-800%); | |
| -ms-transform: rotate(135deg) translateY(-800%); | |
| transform: rotate(135deg) translateY(-800%); | |
| } | |
| #marks li:nth-child(11) { | |
| -webkit-transform: rotate(150deg) translateY(-1800%); | |
| -moz-transform: rotate(150deg) translateY(-1800%); | |
| -o-transform: rotate(150deg) translateY(-1800%); | |
| -ms-transform: rotate(150deg) translateY(-1800%); | |
| transform: rotate(150deg) translateY(-1800%); | |
| } | |
| #marks li:nth-child(12) { | |
| -webkit-transform: rotate(165deg) translateY(-1800%); | |
| -moz-transform: rotate(165deg) translateY(-1800%); | |
| -o-transform: rotate(165deg) translateY(-1800%); | |
| -ms-transform: rotate(165deg) translateY(-1800%); | |
| transform: rotate(165deg) translateY(-1800%); | |
| } | |
| #marks li:nth-child(13) { | |
| -webkit-transform: rotate(180deg) translateY(-800%); | |
| -moz-transform: rotate(180deg) translateY(-800%); | |
| -o-transform: rotate(180deg) translateY(-800%); | |
| -ms-transform: rotate(180deg) translateY(-800%); | |
| transform: rotate(180deg) translateY(-800%); | |
| } | |
| #marks li:nth-child(14) { | |
| -webkit-transform: rotate(195deg) translateY(-1800%); | |
| -moz-transform: rotate(195deg) translateY(-1800%); | |
| -o-transform: rotate(195deg) translateY(-1800%); | |
| -ms-transform: rotate(195deg) translateY(-1800%); | |
| transform: rotate(195deg) translateY(-1800%); | |
| } | |
| #marks li:nth-child(15) { | |
| -webkit-transform: rotate(210deg) translateY(-1800%); | |
| -moz-transform: rotate(210deg) translateY(-1800%); | |
| -o-transform: rotate(210deg) translateY(-1800%); | |
| -ms-transform: rotate(210deg) translateY(-1800%); | |
| transform: rotate(210deg) translateY(-1800%); | |
| } | |
| #marks li:nth-child(16) { | |
| -webkit-transform: rotate(225deg) translateY(-800%); | |
| -moz-transform: rotate(225deg) translateY(-800%); | |
| -o-transform: rotate(225deg) translateY(-800%); | |
| -ms-transform: rotate(225deg) translateY(-800%); | |
| transform: rotate(225deg) translateY(-800%); | |
| } | |
| #marks li:nth-child(17) { | |
| -webkit-transform: rotate(240deg) translateY(-1800%); | |
| -moz-transform: rotate(240deg) translateY(-1800%); | |
| -o-transform: rotate(240deg) translateY(-1800%); | |
| -ms-transform: rotate(240deg) translateY(-1800%); | |
| transform: rotate(240deg) translateY(-1800%); | |
| } | |
| #marks li:nth-child(18) { | |
| -webkit-transform: rotate(255deg) translateY(-1800%); | |
| -moz-transform: rotate(255deg) translateY(-1800%); | |
| -o-transform: rotate(255deg) translateY(-1800%); | |
| -ms-transform: rotate(255deg) translateY(-1800%); | |
| transform: rotate(255deg) translateY(-1800%); | |
| } | |
| #marks li:nth-child(19) { | |
| -webkit-transform: rotate(270deg) translateY(-800%); | |
| -moz-transform: rotate(270deg) translateY(-800%); | |
| -o-transform: rotate(270deg) translateY(-800%); | |
| -ms-transform: rotate(270deg) translateY(-800%); | |
| transform: rotate(270deg) translateY(-800%); | |
| } | |
| #marks li:nth-child(20) { | |
| -webkit-transform: rotate(285deg) translateY(-1800%); | |
| -moz-transform: rotate(285deg) translateY(-1800%); | |
| -o-transform: rotate(285deg) translateY(-1800%); | |
| -ms-transform: rotate(285deg) translateY(-1800%); | |
| transform: rotate(285deg) translateY(-1800%); | |
| } | |
| #marks li:nth-child(21) { | |
| -webkit-transform: rotate(300deg) translateY(-1800%); | |
| -moz-transform: rotate(300deg) translateY(-1800%); | |
| -o-transform: rotate(300deg) translateY(-1800%); | |
| -ms-transform: rotate(300deg) translateY(-1800%); | |
| transform: rotate(300deg) translateY(-1800%); | |
| } | |
| #marks li:nth-child(22) { | |
| -webkit-transform: rotate(315deg) translateY(-800%); | |
| -moz-transform: rotate(315deg) translateY(-800%); | |
| -o-transform: rotate(315deg) translateY(-800%); | |
| -ms-transform: rotate(315deg) translateY(-800%); | |
| transform: rotate(315deg) translateY(-800%); | |
| } | |
| #marks li:nth-child(23) { | |
| -webkit-transform: rotate(330deg) translateY(-1800%); | |
| -moz-transform: rotate(330deg) translateY(-1800%); | |
| -o-transform: rotate(330deg) translateY(-1800%); | |
| -ms-transform: rotate(330deg) translateY(-1800%); | |
| transform: rotate(330deg) translateY(-1800%); | |
| } | |
| #marks li:nth-child(24) { | |
| -webkit-transform: rotate(345deg) translateY(-1800%); | |
| -moz-transform: rotate(345deg) translateY(-1800%); | |
| -o-transform: rotate(345deg) translateY(-1800%); | |
| -ms-transform: rotate(345deg) translateY(-1800%); | |
| transform: rotate(345deg) translateY(-1800%); | |
| } | |
| #hands #large { | |
| width:40%; | |
| height:7px; | |
| background:#3f99b7; | |
| position:absolute; | |
| left:50%; | |
| top:50%; | |
| margin:-3.5px 0 0 -30%; | |
| border-radius:3.5px; | |
| -webkit-transform-origin:75% 50%; | |
| -moz-transform-origin:75% 50%; | |
| -o-transform-origin:75% 50%; | |
| -ms-transform-origin:75% 50%; | |
| transform-origin:75% 50%; | |
| -webkit-transition:all 1s ease-in-out; | |
| -moz-transition:all 1s ease-in-out; | |
| -o-transition:all 1s ease-in-out; | |
| -ms-transition:all 1s ease-in-out; | |
| transition:all 1s ease-in-out; | |
| } | |
| #hands #small { | |
| width:25%; | |
| height:7px; | |
| background:#3f99b7; | |
| position:absolute; | |
| left:50%; | |
| top:50%; | |
| margin:-3.5px 0 0 -25%; | |
| border-radius:3.5px; | |
| -webkit-transform-origin:100% 50%; | |
| -moz-transform-origin:100% 50%; | |
| -o-transform-origin:100% 50%; | |
| -ms-transform-origin:100% 50%; | |
| transform-origin:100% 50%; | |
| -webkit-transform:rotate(0deg); | |
| -moz-transform:rotate(0deg); | |
| -o-transform:rotate(0deg); | |
| -ms-transform:rotate(0deg); | |
| transform:rotate(0deg); | |
| -webkit-transition:all 1s ease-in-out; | |
| -moz-transition:all 1s ease-in-out; | |
| -o-transition:all 1s ease-in-out; | |
| -ms-transition:all 1s ease-in-out; | |
| transition:all 1s ease-in-out; | |
| } | |
| #clock p { | |
| width:100%; | |
| text-align:center; | |
| position:absolute; | |
| top:70%; | |
| margin-top:-.5em; | |
| } | |
| #clock p:before { | |
| content:"Disco"; | |
| font-family:sans-serif; | |
| font-size:2em; | |
| color:#8b9d99; | |
| text-shadow:0 2px #ebe3dd; | |
| } | |
| body > p { | |
| position:absolute; | |
| top:50%; | |
| left:0; | |
| width:100%; | |
| margin-top:300px; | |
| text-align:center; | |
| font-family:sans-serif; | |
| font-size:2em; | |
| color:#cc523d; | |
| text-shadow:0 2px 2px #8b9d99; | |
| } | |
| a { | |
| text-decoration:none; | |
| color:#cc523d; | |
| border-bottom:1px dotted #cc523d; | |
| transition:all 0.2s ease-in-out; | |
| } | |
| a:hover { | |
| color:#a63f2f; | |
| border-color:#a63f2f; | |
| } | |
| /* --- FONT --- */ | |
| @font-face { | |
| font-family: 'fontawesome'; | |
| src: url('../font/fontawesome.eot?15776277'); | |
| src: url('../font/fontawesome.eot?15776277#iefix') format('embedded-opentype'), | |
| url('../font/fontawesome.svg?15776277#fontawesome') format('svg'); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| @font-face { | |
| font-family: 'fontawesome'; | |
| src: url('data:application/octet-stream;base64,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') format('woff'), | |
| url('data:application/octet-stream;base64,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AFRYLiA8IyEbsAIlsAIlRyNHI2EgsAUlsAQlRyNHI2GwBiWwBSVJsAIlYbABRWMjIFhiGyFZY7ABRWJgIy4jICA8ijgjIVktsDUssAAWILAIQyAuRyNHI2EgYLAgYGawgGIjICA8ijgtsDYsIyAuRrACJUZSWCA8WS6xJgEUKy2wNywjIC5GsAIlRlBYIDxZLrEmARQrLbA4LCMgLkawAiVGUlggPFkjIC5GsAIlRlBYIDxZLrEmARQrLbA5LLAwKyMgLkawAiVGUlggPFkusSYBFCstsDossDEriiAgPLAEI0KKOCMgLkawAiVGUlggPFkusSYBFCuwBEMusCYrLbA7LLAAFrAEJbAEJiAuRyNHI2GwBkUrIyA8IC4jOLEmARQrLbA8LLEIBCVCsAAWsAQlsAQlIC5HI0cjYSCwBCNCsAZFKyCwYFBYILBAUVizAiADIBuzAiYDGllCQiMgR7AEQ7CAYmAgsAArIIqKYSCwAkNgZCOwA0NhZFBYsAJDYRuwA0NgWbADJbCAYmGwAiVGYTgjIDwjOBshICBGI0ewACsjYTghWbEmARQrLbA9LLAwKy6xJgEUKy2wPiywMSshIyAgPLAEI0IjOLEmARQrsARDLrAmKy2wPyywABUgR7AAI0KyAAEBFRQTLrAsKi2wQCywABUgR7AAI0KyAAEBFRQTLrAsKi2wQSyxAAEUE7AtKi2wQiywLyotsEMssAAWRSMgLiBGiiNhOLEmARQrLbBELLAII0KwQystsEUssgAAPCstsEYssgABPCstsEcssgEAPCstsEgssgEBPCstsEkssgAAPSstsEossgABPSstsEsssgEAPSstsEwssgEBPSstsE0ssgAAOSstsE4ssgABOSstsE8ssgEAOSstsFAssgEBOSstsFEssgAAOystsFIssgABOystsFMssgEAOystsFQssgEBOystsFUssgAAPistsFYssgABPistsFcssgEAPistsFgssgEBPistsFkssgAAOistsFossgABOistsFsssgEAOistsFwssgEBOistsF0ssDIrLrEmARQrLbBeLLAyK7A2Ky2wXyywMiuwNystsGAssAAWsDIrsDgrLbBhLLAzKy6xJgEUKy2wYiywMyuwNistsGMssDMrsDcrLbBkLLAzK7A4Ky2wZSywNCsusSYBFCstsGYssDQrsDYrLbBnLLA0K7A3Ky2waCywNCuwOCstsGkssDUrLrEmARQrLbBqLLA1K7A2Ky2wayywNSuwNystsGwssDUrsDgrLbBtLCuwCGWwAyRQeLABFTAtAAAAS7gAyFJYsQEBjlm5CAAIAGMgsAEjRLADI3CwEUUgIEu4AA5RS7AGU1pYsDQbsChZYGYgilVYsAIlYbABRWMjYrACI0SyCgAGKrIKBAYqshAEBipZsgQoCUVSRLIKBgcqsQYBRLEkAYhRWLBAiFixBgNEsSYBiFFYuAQAiFixBgFEWVlZWbgB/4WwBI2xBQBE') format('truetype'); | |
| } | |
| [class^="icon-"]:before, [class*=" icon-"]:before { | |
| font-family: "fontawesome"; | |
| font-style: normal; | |
| font-weight: normal; | |
| speak: none; | |
| display: inline-block; | |
| text-decoration: inherit; | |
| width: 1em; | |
| margin-right: .2em; | |
| text-align: center; | |
| /* opacity: .8; */ | |
| /* For safety - reset parent styles, that can break glyph codes*/ | |
| font-variant: normal; | |
| text-transform: none; | |
| } | |
| .icon-basket:before { content: '\64'; } /* 'd' */ | |
| .icon-coffee:before { content: '\66'; } /* 'f' */ | |
| .icon-food:before { content: '\67'; } /* 'g' */ | |
| .icon-beer:before { content: '\68'; } /* 'h' */ | |
| .icon-gamepad:before { content: '\63'; } /* 'c' */ | |
| .icon-code:before { content: '\62'; } /* 'b' */ | |
| .icon-glass:before { content: '\61'; } /* 'a' */ | |
| .icon-briefcase:before { content: '\65'; } /* 'e' */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment