<div class="cont">
  <img src="https://s3.amazonaws.com/peoplepng/wp-content/uploads/2018/03/19092841/Vintage-Border-Vector-Free-Download.png" class="border">
  <div class="profile"></div>
  
  <div class="info">
    <h3>ELLA | ANDERSON</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, repellat dolore nisi, id omnis, necessitatibus mollitia distinctio delectus soluta eveniet accusantium quas veritatis aliquam! Ea architecto beatae inventore qui quisquam?</p>
    <a href="#"><h5>www.My-Website.com</h5></a>
  </div>
  <div class="social">
    <a href="#"><img src="http://www.transparentpng.com/download/instagram-logo-icon/P9HtDp-instagram-logo-png-icon-transparent.png" class="ins"></a>
    <a href="#"><img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/33-pinterest-512.png" class="pin"></a>
    <a href="https://twitter.com/karim05238318?lang=en"><img src="https://png.icons8.com/metro/1600/twitter.png" class="twi"></a>
  </div>
  <div class="footer"></div>
</div>
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
body{
  background: url("https://images3.alphacoders.com/225/thumb-1920-22567.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
a{
  text-decoration: none;
}
.cont{
  position:absolute;
  left:550px;
  width:300px;
  height:580px;
  background:white;
  margin-top:50px;
  margin-bottom:50px;
  text-align:center;
  
}
.border{
  position:absolute;
  left:25px;
  top:-70px;
  width:250px;
}
.profile{
  position:absolute;
  top:40px;
  left:45px;
  width:200px;
  height:200px;
  border-radius:50%;
  border:5px solid rgb(200,200,200);
  transition:.3s;
  background-image:url("https://images.unsplash.com/photo-1515800352606-849721435cbc?ixlib=rb-0.3.5&s=db34ea52a138c60b182f139e3178c675&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb");
  
  background-repeat: no-repeat;
  background-position: -35px 0px;
  background-size: 280px 200px;
}
.profile:hover{
  position:absolute;
  top:35px;
  left:40px;
  border:10px solid rgb(150,150,150);
  transition:.3s;
}
.info{
  position:absolute;
  top:250px;
  left:20px;
  width:260px;
  height:200px;
  text-align:center;
  font-family: 'Source Sans Pro', sans-serif;
}
.info h5{
  color:#9C9BCB;
}
.social{
  position:absolute;
  top:520px;
  left:0px;
  width:300px;
  height:60px;
  background:rgb(220,220,220);
}
.pin{
  position:absolute;
  left:70px;
  top:15px;
  width:25px;
  opacity:.5;
}
.ins{
  position:absolute;
  left:140px;
  top:15px;
  width:25px;
  opacity:.5;
}
.twi{
  position:absolute;
  left:210px;
  top:15px;
  width:25px;
  opacity:.5;
}
.pin:hover{
  position:absolute;
  left:70px;
  top:15px;
  width:25px;
  opacity:1;
}
.ins:hover{
  position:absolute;
  left:140px;
  top:15px;
  width:25px;
  opacity:1;
}
.twi:hover{
  position:absolute;
  left:210px;
  top:15px;
  width:25px;
  opacity:1;
}


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.