<div class="area">
	<div class="calendar">
		<div class="month">
			<div>
				<h1>February</h1>
			</div>
		</div>
		<div class="dates">
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
			<span>5</span>
			<span>6</span>
			<span>7</span>
			<span>8</span>
			<span>9</span>
			<span>10</span>
			<span>11</span>
			<span>12</span>
			<span>13</span>
			<span>14</span>
			<span>15</span>
			<span>16</span>
			<span>17</span>
			<span>18</span>
			<span>19</span>
			<span>20</span>
			<span>21</span>
			<span>22</span>
			<span>23</span>
			<span>24</span>
			<span>25</span>
			<span>26</span>
			<span>27</span>
			<span>28</span>
		</div>
	</div>
</div>

// https://static.pexels.com/photos/279315/pexels-photo-279315.jpeg

$background: #f47b4b;
$light-tan: #e5d1ba;
$grain-brown: #e4cfb4;
$tan: #d0b190;
$bay-leaf: #82a791;
$white-smoke: #f5f5f5;
$thunder: #4c4b4a;

$atomic: 'Atomic Age', cursive;
$metro: 'Metrophobic', sans-serif;


body {
	background-color: $background;
}

.area {
	width: 600px;
	height: 300px;
	margin: 100px auto;
}

.calendar {
	width: 100%;
	height: 100%;
	transform: rotate3d(1, -1, 0, -30deg);
	&:before {
		content: '';
		position: absolute;
		height: 102%;
		width: 100%;
		background: $thunder;
		left: 17px;
		top: 25px;
		z-index: -1;
		transform: rotate3d(1, 0, 1, -7deg);
	}
}

.month {
	div {
		position: relative;
		background-image: url('https://static.pexels.com/photos/279315/pexels-photo-279315.jpeg');
		background-size: contain;
		background-repeat: no-repeat;
		&:before {
			content: '';
			background-color: rgba($thunder, .75);
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 2;
		}
		&:after {
			content: '';
			position: absolute;
			width: 10%;
			height: 18%;
			right: -3.8%;
			bottom: -13%;
			background-color: $grain-brown;
			z-index: 0;
			transform: rotate3D(-4, 1, -1, -70deg);
			border-radius: 0px 0px 0px 0px;
			border-bottom: 1px solid darken($grain-brown, 20);
		}
	}
	h1 {
		color: $white-smoke;
		text-transform: uppercase;
		letter-spacing: 1px;
		font-size: 3rem;
		font-family: $metro;
		text-align: center;
		margin: 0;
  	padding: 123px;
		position: relative;
		z-index: 100;
		text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.4);
		box-shadow: 3px 0px 6px rgba(0,0,0,0.12), 2px 0px 6px rgba(0,0,0,0.24)
	}
}

.dates {
	text-align: center;
	height: 60px;
	background-color: $tan;
	position: relative;
	margin-top: -1px;
	&:after {
		content: '';
		position: absolute;
		width: 10%;
		height: 70%;
		right: -2.3%;
		bottom: -3%;
		background-color: #f0e7da;
		z-index: -1;
		transform: rotate3D(-4, 7, -1, -50deg);
		border-radius: 0 0 0 50px;
	}
	span {
		margin: 20px 0;
		color: $thunder;
  	display: inline-block;
		font-family: $atomic;
		&:nth-child(19) {
			background: $grain-brown;
			border-radius: 100%;
		}
	}
}

// The awesome colors https://dribbble.com/shots/2090661-Welcome-to-Mutiny

// The awesome calendar idea https://dribbble.com/shots/3281795-Desk-Calendar-Mock-Up