Calendar Icon

HTML
<div class="container"> <div class="app"> <div class="app-calendar"> <div id="weekday">monday</div> <div id="day">13</div> </div> </div> </div>
CSS
@charset "utf-8"; html, body { height: 100%; width: 100%; background: linear-gradient(to left, #2c3e50 , #3498db); font: 100%/1.5em "Droid Sans", sans-serif; margin: 0; } p { margin: 0; } .container { height: 248px; left: 50%; margin: -124px 0 0 -100px; position: absolute; top: 50%; width: 200px; } .app { text-align: center; } .app-calendar { height: 200px; margin-bottom: 24px; width: 200px; } .app-title { font-size: 24px; font-weight: bold; text-shadow: 0 5px #15181f; } #weekday { background: #34495e; border-radius: 35px 35px 0 0; color: #f9f9f9; font-size: 24px; line-height: 56px; position: relative; text-transform: lowercase; } #weekday:before, #weekday:after { background: #f9f9f9; border-radius: 50%; content: ""; height: 8px; margin-top: -4px; position: absolute; top: 50%; width: 8px; z-index: 1; } #weekday:before { left: 24px; } #weekday:after { right: 24px; } #day { background: #f9f9f9; border-radius: 0 0 35px 35px; box-shadow: 0 8px 0 #202933; color: #15181f; font-size: 120px; font-weight: bold; height: 144px; line-height: 144px; }
JAVASCRIPT
(function() { var date = new Date(), weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; document.getElementById('weekday').innerHTML = weekday[date.getDay()]; document.getElementById('day').innerHTML = date.getDate(); }) ();
Expand for more options Login