Google Calendar Appointment Box

by joplomacedo

HTML

<div class="a">
	<div class="b">
		<div class="c">
			<span class="d">name#</span>Sofia Vergara<span class="d">#</span>
		</div>
		
		<div class="c">
			<span class="d">dr#</span>Hugo<span class="d">#</span>
		</div>

		<div class="c">
			<span class="d">#</span>987456321
		</div>
	</div>
	
	<div class="e">
		<img src="https://img.icons8.com/color/420/google-calendar.png" class="f">
		<span class="g">Google Calendar Appointment</span>
	</div>
</div>

CSS

* {
	padding: 0;
	margin: 0;
	border: 0;
	box-sizing: border-box;
}

html {
	font-family: open sans;
	padding: 4em;
}

.a {
		box-shadow: 0 2px 5px rgba(0,0,0,.2);
}

.b {
	border: 1px solid #1145a070;
	border-bottom: 0;
	padding: 1em;
	background: linear-gradient(50deg, #d2e1fb7d 0%, #fff 100%);
	border-radius: 2px 2px 0 0;
}

.c {
	
}

.d {
	font-weight:900;
	color: #000;
}

.e {
border: 1px solid #1145a070;
    padding: .5rem 1rem;
    font-size: 13px;
    background: linear-gradient(50deg, #d2e1fb 0%, #d2e1fb 100%);
    border-radius: 0 0 2px 2px;
    color: #1145a0;
}

.f {
	vertical-align: middle;
	width: 1.8em;
	position: relative;
	top: -1px;
}

.g {
	
}