<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Profile Card</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!-- this is the markup. you can change the details (your own name, your own avatar etc.) but don’t change the basic structure! -->
<aside class="profile-card">
<header>
<!-- here’s the avatar -->
<a href="http://ali.shahab.pk">
<img src="http://gravatar.com/avatar/eb2d48c7f2cf027bb4cb20483e27c9c9?size=200px">
</a>
<!-- the username -->
<h1>Ali Shahab</h1>
<!-- and role or location -->
<h2>Another Web Designer</h2>
</header>
<!-- bit of a bio; who are you? -->
<div class="profile-bio">
<p>Specialties are Creative UI, HTML5, CSS3, Semantic Web, Responsive Layouts, Web Standards Compliance, Performance Optimization, Cross Device Troubleshooting.</p>
</div>
<!-- some social links to show off -->
<ul class="profile-social-links">
<!-- twitter - el clásico -->
<li>
<a href="https://twitter.com/alishahab">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-twitter.svg">
</a>
</li>
<!-- envato – use this one to link to your marketplace profile -->
<li>
<a href="http://themeforest.net/user/alishahab">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-envato.svg">
</a>
</li>
<!-- codepen - your codepen profile-->
<li>
<a href="https://codepen.io/alishahab">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-codepen.svg">
</a>
</li>
<!-- add or remove social profiles as you see fit -->
</ul>
</aside>
<!-- that’s all folks! -->
<!-- partial -->
</body>
</html>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700);
*, *:after, *:before {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-smooth: always;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-family: inherit;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
font: 300 13px/1.6 Roboto, Helvetica, Arial;
color: #444;
position: relative;
background: #448AFF;
height: 100vh;
text-align: center;
/*background: #3f51b5;*/
background: url('http://ali.shahab.pk/blur.php?img=http://ali.shahab.pk/ali-shahab.jpg&x=250') no-repeat center center;
background-size: cover;
}
body:after{
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: rgba(0,0,0,.5);
z-index: -1
}
ul{
list-style: none;
}
img {
-ms-interpolation-mode: bicubic;
vertical-align: middle;
border: 0;
}
.profile-card{
width: 300px;
border-radius: 2px;
overflow: hidden;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
position: relative;
margin: auto;
background: rgba(255,255,255,1);
top: 50%;
transform: translateY(-50%);
}
.profile-card header{
display: block;
position: relative;
background: rgba(255,255,255,1);
text-align: center;
padding: 30px 0 20px;
z-index: 1;
overflow: hidden;
}
.profile-card header:before{
content: "";
position: absolute;
background: url('http://ali.shahab.pk/blur.php?img=http://ali.shahab.pk/ali-shahab.jpg&x=60') no-repeat;
background-size: cover;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
}
.profile-card header:after{
content: "";
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-image: linear-gradient(
to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
}
.profile-card header img{
border-radius: 100%;
overflow: hidden;
width: 150px;
/*border: 1px solid rgba(255,255,255,.5);*/
box-shadow: 0 1px 0 rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);
}
.profile-card header h1{
font-weight: 200;
font-size: 42px;
color: #444;
letter-spacing: -3px;
margin: 0;
padding: 0;
}
.profile-card header h2{
font-weight: 400;
font-size: 14px;
color: #666;
letter-spacing: .5px;
margin: 0;
padding: 0;
}
.profile-card .profile-bio{
padding: 0 30px;
text-align: center;
color: #888;
}
.profile-card .profile-social-links{
display: table;
width: 70%;
margin: 20px auto;
}
.profile-card .profile-social-links li{
display: table-cell;
width: 33.3333333333333333%
}
.profile-card .profile-social-links li a{
display: block;
text-align: center;
padding: 10px;
margin: 0 10px;
border-radius: 100%;
-webkit-transition: box-shadow 0.2s;
-moz-transition: box-shadow 0.2s;
-o-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
}
.profile-card .profile-social-links li a:hover{
box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);
}
.profile-card .profile-social-links li a:active{
box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
}
.profile-card .profile-social-links li a img{
width: 100%;
display: block;
}