<html lang="en">
  
<head>
  <title> Profile Card</title>
  <!--Required Meta tags-->
    <meta charset="UTF-8">
    <meta name="description" content=" Profile    Card">
    <meta name="Keywords" Content="profile card, css,html">
    <meta name="viewport" content="device=width-device initial-scale=1.0">
  <!--Font Awesome link-->
      <link rel="stylesheet"      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
    <body>
      
     <!--Card Contents--> 
   <div class="card">
    
     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQci5BTo3zLFXJIu5Ku8XMCkOav0tz9no4fs2t0uCIQkCZqp-N89g" alt="Bosi" style=""/>
     <h1>Winnie Magoma</h1>
     <p class="title">Front-end Developer</p>
     <p>Kenya</p>
     <!--font awesome icons that are to appear at the bottom of the card-->
     <a href="#"><i class="fa fa-facebook-square"></i></a>
     <a href="#"><i class="fa fa-twitter"></i></a>
     <a href="#"><i class="fa fa-linkedin"></i></a>
     <a href="#"><i class=" fa fa-google-plus-official"></i></a>
     <a href="#"><i class="fa fa-github"></i></a>
     <p class="copyright">Winnie Magoma&copy; 2018 </p>
       </div>
      </div>
     
     
      
    </body>
    </html>
body{
  background-color:rgba(160,180,250,0.5);
}

.card{
  box-shadow: 10px 14px 8px rgba(0,0,0,0.5);
  width:300px;
  height:400px;
  margin:auto;
  text-align:center;
background-image:url("https://images.unsplash.com/photo-1527104412985-1321468125af?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=6558eb209a7e2825dd75482285e3daaf");
}

/*for the rounded image*/
img{
  border-radius:50%;
  display:block;
  margin-left:auto;
  margin-right: auto;
  height:150px;
  width:150px;
}
.title{
  color:#000000;
  font-size:20px;
  font-weight:bold;
}
button{
  border:none;
  outline:0;
  display: inline-block;
  padding:8px;
  color:white;
  cursor:pointer;
  width:100%; font-size:18px;
}
a:hover{
  opacity:0.7;
  
}
.copyright:hover{
  opacity:0.5;
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.