<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Profile Card</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="profile">
<div class="profile__header"><img class="profile__background" src="https://eumeps-powerparts.eu/thumbs/home/header-environment-400x200.jpg"/><img class="profile__picture" src="https://usercontent2.hubstatic.com/11352039.jpg"/></div>
<div class="profile__content">
<div class="profile__bio">
<h3 class="profile__name">Scarlett Johansson</h3>
<p class="profile__info">American film actress known for her work in films like Lost in Translation, Vicky Cristina Barcelona, and Hitchcock.</p>
</div>
<div class="profile__links"><a class="profile__link" href="#"><i class="profile__link__icon fa fa-map-marker"></i><span class="profile__link__text">New York</span></a><a class="profile__link" href="#"><i class="profile__link__icon fa fa-envelope"></i><span class="profile__link__text">Send Email </span></a></div>
<div class="profile__twitter">
<div class="profile__twitter__stats profile__twitter__stats--followers"><span class="profile__twitter__stats__count">97,000</span><span class="profile__twitter__stats__label">Followers</span></div>
<div class="profile__twitter__stats profile__twitter__stats--following"><span class="profile__twitter__stats__count">57</span><span class="profile__twitter__stats__label">Following</span></div>
<div class="profile__twitter__follow">
<button class="profile__twitter__follow__button">Follow</button>
</div>
</div>
</div>
</div>
<!-- partial -->
</body>
</html>
@import url("https://fonts.googleapis.com/css?family=ABeeZee");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ABeeZee, sans-serif;
}
body {
background: #ccc;
padding: 20px;
color: #455A64;
}
.profile {
border-radius: 10px;
background: #fff;
width: 400px;
margin-left: auto;
margin-right: auto;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.profile__header {
display: flex;
position: relative;
justify-content: center;
}
.profile__background {
border-radius: 10px 10px 0px 0px;
}
.profile__picture {
position: absolute;
bottom: -80px;
width: 160px;
height: 160px;
border-radius: 50%;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.profile__content {
padding-top: 90px;
text-align: center;
}
.profile__bio {
padding: 10px 20px;
}
.profile__name {
color: #37474F;
font-size: 28px;
margin-bottom: 10px;
}
.profile__info {
line-height: 1.5;
font-size: 16px;
}
.profile__links {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.profile__link {
display: flex;
justify-content: center;
align-items: center;
flex-basis: 180px;
padding: 20px;
text-decoration: none;
color: inherit;
font-size: 18px;
transition: .2s;
}
.profile__link:hover {
color: #2196F3;
}
.profile__link__icon {
padding-right: 15px;
color: #2196F3;
font-size: 20px;
}
.profile__twitter {
display: flex;
flex-wrap: wrap;
}
.profile__twitter__stats {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-basis: 50%;
padding: 15px 20px;
background: #ECEFF1;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
transition: .2s;
}
.profile__twitter__stats:hover {
background: #CFD8DC;
}
.profile__twitter__stats--followers {
border-right: 1px solid #ddd;
}
.profile__twitter__stats__count {
font-size: 20px;
font-weight: bold;
padding-bottom: 2px;
}
.profile__twitter__follow {
flex-basis: 100%;
}
.profile__twitter__follow__button {
padding: 20px;
width: 100%;
border-radius: 0px 0px 10px 10px;
background: #66BB6A;
color: #fff;
font-size: 18px;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
transition: .2s;
}
.profile__twitter__follow__button:hover {
background: #4CAF50;
}