<div id="cover">
<div class="calendar">
<div class="top">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="day">
<h1>7</h1>
<span>Brand New Day!</span>
</div>
</div>
<div class="calendar site">
<div class="day">
<h1>6</h1>
<span>Tuesday</span>
</div>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700);
$green: #1abc9c;
$dgrey: #3d3d3d;
$lgrey: #b9b9b9;
$vlgrey: #a2a2a2;
body{
margin: 0 auto;
padding:0;
width: 600px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
background: $green;
}
#cover {
height: 598px;
position: relative;
background: $green;
}
.calendar {
width: 300px;
height: 400px;
margin: 0 auto;
margin-top: 20px;
border: 5px solid $dgrey;
border-radius: 20px;
background: #fff;
box-shadow: 0 10px 0 0 #16a085;
> .top {
width: 100%;
height: 60px;
border-bottom: 5px solid $dgrey;
background: $lgrey;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
> ul {
list-style: none;
width: 100%;
margin: 0;
padding: 0;
line-height: 75px;
> li {
width: 20px;
height: 20px;
margin: 0 8px;
border: 5px solid $dgrey;
border-radius: 50%;
display: inline-block;
background: #1abc9c;
position: relative;
&:after {
content: '';
width: 18px;
height: 60px;
background: $dgrey;
position: absolute;
margin: auto;
left:0; right:0; bottom:1px;
border-radius: 15px;
}
}
}
}
> .day {
position: relative;
box-shadow: inset 0 19px 0 0 #fff,
inset 0 20px 0 0 $vlgrey,
inset 0 39px 0 0 #fff,
inset 0 40px 0 0 $vlgrey,
inset 0 59px 0 0 #fff,
inset 0 60px 0 0 $vlgrey,
inset 0 79px 0 0 #fff,
inset 0 80px 0 0 $vlgrey,
inset 0 99px 0 0 #fff,
inset 0 100px 0 0 $vlgrey,
inset 0 119px 0 0 #fff,
inset 0 120px 0 0 $vlgrey,
inset 0 139px 0 0 #fff,
inset 0 140px 0 0 $vlgrey,
inset 0 159px 0 0 #fff,
inset 0 160px 0 0 $vlgrey,
inset 0 179px 0 0 #fff,
inset 0 180px 0 0 $vlgrey,
inset 0 199px 0 0 #fff,
inset 0 200px 0 0 $vlgrey,
inset 0 219px 0 0 #fff,
inset 0 220px 0 0 $vlgrey,
inset 0 239px 0 0 #fff,
inset 0 240px 0 0 $vlgrey,
inset 0 259px 0 0 #fff,
inset 0 260px 0 0 $vlgrey,
inset 0 279px 0 0 #fff,
inset 0 280px 0 0 $vlgrey,
inset 0 299px 0 0 #fff,
inset 0 300px 0 0 $vlgrey,
inset 0 319px 0 0 #fff,
inset 0 320px 0 0 $vlgrey;
> h1 {
text-align: center;
line-height: 335px;
font-size: 200px;
margin: 0;
color: $dgrey;
text-shadow: 0 10px 0 #fff, 0 -10px 0 #fff, 10px 0 0 #fff, -10px 0 0 #fff;
}
> span {
position: absolute;
margin: auto;
left: 0; right: 0; bottom: 16px;
color: $vlgrey;
text-align: center;
font-weight: 700;
}
}
}
.site {
width: 300px;
height: 335px;
margin: 0 auto;
margin-top: 100px;
border: 5px solid $dgrey;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
border-top-right-radius: 0;
border-top-left-radius: 0;
position: absolute;
margin: auto;
bottom:0; right:-80px;
transform: rotate(10deg) ;
transform: rotate(10deg) ;
transform: rotate(10deg) ;
transform: rotate(10deg) ;
transform: rotate(10deg) ;
background: #fff;
}
View Compiled
This Pen doesn't use any external CSS resources.