<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">


<div class="card">
   <div class="banner">
      <div class="avatar"></div>
   </div>
	<h3>Mohamed Yousef</h3>
   <a href="mailto:contact@webdevtrick.com">📧 contact@mail.com</a>
   <a href="">📱 +00 000-000-0000</a>
	<ul>
      <a href="#" target="_blank"><i class="fa fa-twitter" style="font-size:16px"></i></a>
	   <a href="#" target="_blank"><i class="fa fa-linkedin" style="font-size:16px"></i></a>
      <a href="#" target="_blank"><i class="fa fa-instagram" style="font-size:16px"></i></a>
      <a href="#" target="_blank"><i class="fa fa-facebook" style="font-size:16px"></i></a>
	</ul>
</div>

*{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}
body{
	height: 100vh;
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #ddd;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.card{
	width: 200px; 
	overflow: hidden;
	background-color: #FFFFFF;
	border-radius: 15px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	text-align: center;
	-webkit-transition: .1s ease-in-out;
	transition: .1s ease-in-out;
}
	.card:first-of-type{
		margin-right: 25px;
	}

	.card:hover{
		margin-top: -10px;
		box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	}
.banner{
	height: 100px;
	width: 100%;
	padding-top: 30px;
	background-color: #FAFAFA;
	background-size: cover;
	background-position: center;
}
.card .banner{
		background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKM6rRET9CTBdVhMPRZIYaT3fHRVVEoIAZ9D3lR9da2ZlTlRdoK1X7E9mOcp7cNWP912Cq-fkhmdpD6byoX5EoDNkOHaoZa0xKcOx-ccCWxNU8Mr9TabV6dnRPqdhMD4T0EwbcX0Alxp9Z-85RRY_T8fynoHjQI38wuQcnTfwJL88JiGYW2x6jkmDR/s1600/bg-new-1.jpg");
	}
.avatar{
	height: 100px;
	width: 100px;
	margin: auto;
	background-size: cover;
	background-position: center;
	background-color: #F1F1F1;
	border-radius: 100%;
}
.card .avatar{
		background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxivAs4UknzmDfLBXGMxQkayiZDhR2ftB4jcIV7LEnIEStiUyMygioZnbLXCAND-I_xWQpVp0jv-dv9NVNbuKn4sNpXYtLIJk2-IOdWQNpC2Ldapnljifu0pnQqAWU848Ja4lT9ugQex-nwECEh3a96GXwiRXlnGEE6FFF_tKm66IGe3fzmLaVIoNL/s1600/img_avatar.png");
	}

h3, a, i{
	font-family: 'Roboto', sans-serif;
	font-weight: lighter;
	-webkit-transition: .1s ease-in-out;
	transition: .1s ease-in-out;
}
	h3{
		margin-top: 45px;
		margin-bottom: 5px;
		font-size: 18px;
		color: #212121;
	}
	a {
		display: block;
		padding: 5px 0px;
		font-size: 14px;
		color: #9E9E9E;
		text-decoration: none;
	}
		a:hover{
			background-color: #FAFAFA;
			color: inherit;
		}
ul {
	margin-top: 10px;
	padding: 15px 0px;
	background-color: #FAFAFA;
}
	ul a{
		display: inline;
		margin-right: 10px;
	}
	ul a i:hover{
		transform: scale(1.5);
		color: #2ab1ce;
		}