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();
}) ();
1 Response