<link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,400,600,900&display=swap" rel="stylesheet">
<div class="card">
<img src="https://i.pravatar.cc/125?image=3" alt="" class="profile-img">
<ul class="social-list">
<li><a href="#" class="social-link"><i class="fab fa-dribbble-square"></i></a></li>
<li><a href="#" class="social-link"><i class="fab fa-facebook-square"></i></a></li>
<li><a href="#" class="social-link"><i class="fab fa-twitter-square"></i></a></li>
</ul>
<h2 class="profile-name">Ramsey Harper</h2>
<p class="profile-position">Graphic Designer</p>
<p class="profile-info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere a tempore, dignissimos odit accusantium repellat quidem, sit molestias dolorum placeat quas debitis ipsum esse rerum?</p>
</div>
* {
box-sizing: border-box;
}
body {
font-family: 'Fira Sans', sans-serif;
line-height: 1.6;
min-height: 100vh;
display: grid;
place-items: center;
}
.card {
// box-shadow: 0 0 20px rgba(0,0,0,.2);
width: 80%;
margin: 0 auto;
display: flex;
flex-direction: column;
max-width: 600px;
background: #005E9B;
flex-basis: 250px;
color: white;
padding: 2em;
text-align: center;
display: grid;
grid-template-columns: 1fr;
grid-column-gap: 2em;
grid-template-areas:
"name"
"image"
"social"
"position"
"description";
}
.profile-name { grid-area: name; }
.profile-position { grid-area: position; }
.profile-info { grid-area: description; }
.profile-img { grid-area: image; }
.social-list { grid-area: social; }
.profile-info {
font-weight: 300;
opacity: .7;
}
.profile-name {
grid-area: name;
letter-spacing: 1px;
font-size: 2rem;
margin: .75em 0 0;
line-height: 1;
}
.profile-name::after {
content: '';
display: block;
width: 2em;
height: 1px;
background: #5bcbf0;
margin: .5em auto .65em;
opacity: .25;
}
.profile-position {
text-transform: uppercase;
font-size: .875rem;
letter-spacing: 3px;
margin: 0 0 .5vem;
line-height: 1;
color: #5bcbf0;
}
.profile-img {
justify-self: center;
max-width: 100%;
border-radius: 50%;
border: 2px solid white;
}
.social-list {
justify-self: center;
list-style: none;
justify-content: space-between;
display: flex;
width: 75px;
margin: .5em 0 0;
padding: 0;
}
.social-link {
color: #5bcbf0;
opacity: .5;
}
.social-link:hover,
.social-link:focus {
opacity: 1;
}
.bio-title {
color: #0090D1;
font-size: 1.25rem;
// font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 1;
margin: 0;
}
@media (min-width: 600px) {
.card {
text-align: left;
grid-template-columns: 1fr 3fr;
grid-template-areas:
"image name"
"image position"
"social description";
}
.profile-name::after {
margin-left: 0;
}
}
View Compiled
This Pen doesn't use any external JavaScript resources.