<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.