<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Card with curve limited image</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="shape-container">
<div class="shape"></div>
</div>
<div class="info">
<div class="shape-container">
<div class="shape"></div>
</div>
<span class="content">
<h3>Homer Simpson</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
<span class="logos">
<span class="fab fa-facebook-square"></span>
<span class="fab fa-instagram"></span>
<a href="https://github.com/PedroDuarte536"><span class="fab fa-github"></span></a>
<a href="https://codepen.io/Pedru"><span class="fab fa-codepen"></span></a>
<a href="https://dribbble.com/Pedru536"><span class="fab fa-dribbble"></span></a>
<span class="fab fa-linkedin"></span>
</span>
</span>
</div>
<!-- partial -->
</body>
</html>
html, body {
margin: 0;
font-family: "Segoe UI", sans-serif;
}
div.shape-container {
position: absolute;
width: 100%;
height: 330px;
overflow: hidden;
}
div.shape-container div.shape {
position: relative;
top: -200px;
left: -450px;
background-color: #444;
width: 3000px;
height: 530px;
border-radius: 50%;
}
div.info {
position: relative;
z-index: 1;
top: 135px;
left: calc(50vw - 150px);
height: calc(350px + 4vw);
width: 300px;
background-color: #f2f2f2;
border-radius: 25px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.43);
overflow: hidden;
}
div.info div.shape-container {
width: 100vw;
top: -135px;
left: calc(-50vw + 150px);
}
div.info div.shape-container div.shape {
background-image: url(https://abrilquatrorodas.files.wordpress.com/2017/01/homer-simpson.jpg?quality=70&strip=info&w=1024);
background-repeat: no-repeat;
background-size: 300px 200px;
background-position: calc(50vw + 300px) 330px;
}
div.info span.content {
display: inline-block;
margin-top: calc(50% + 4vw);
width: 80%;
height: 40%;
padding: 0 10%;
text-align: left;
color: #444;
}
div.info span.content h3 {
margin: 0;
color: #222;
font-size: 25px;
font-weight: normal;
}
div.info span.content p {
margin: 0;
font-size: 15px;
}
div.info span.content span.logos {
display: inline-block;
margin-top: 13%;
width: 100%;
}
div.info span.content span.logos span.fab {
display: block;
text-align: center;
font-size: 22px;
width: 16.6666666667%;
float: left;
}
div.info span.content span.logos span.fab:hover {
color: #222;
cursor: pointer;
}
a {
color: #444;
}