<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="body">
<div class="content-wrepper">
<div class="content-block">
<div class="row">
<div class="column-6 column-m">
<div class="content-element">
<div>
<div class="card-logo-wrapper"><img src="https://api.freelogodesign.org/assets/thumb/logo/4793_200.png" alt="logo">
</div>
<div class="card-content">
<h3>Heavy</h3>
<h2>Comfort</h2>
<p>We create for your comfort, We don't compromise for quality</p>
<a class="btn button" href="#">Buy Now</a>
<p class="icon-wrapper">
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-whatsapp"></ion-icon>
<ion-icon name="logo-google"></ion-icon>
</p>
</div>
</div>
</div>
</div>
<div class="column-6 column-m">
<div class="image-show">
<div class="bg-circle">
<div class="fg-circle">
<span></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>
* {
box-sizing: border-box;
}
.body{
margin:0;
padding:0;
position:relative;
height:auto;
width:100%;
background-color:#e0e0e0;
}
h1,h2,h3,p{
margin:5px 0;}
.content-wrepper{
display:flex;
align-items:center;
justify-content:center;
height:100vh;
width:100%;
}
.content-block{
//border-radius: 0px 160px 160px 0px;
height:auto;
width:600px;
background-color:#e0e0e0;
padding:25px;
position:relative;
box-shadow: 11px 11px 16px #cccccc,
-11px -11px 16px #f4f4f4;
}
.content-element{
display:flex;
align-items:center;
jutify-content:center;
}
.card-logo-wrapper{
height:45px;
position:relative;
}
.card-logo-wrapper img{
max-height:100%;
width:auto;
position:relative;
}
.btn.button{
background-color:#ED7714;
padding:7px 15px;
color:#fff;
text-decoration:none;
display:block;
margin-top:10px;
width:max-content;
}
.icon-wrapper{
margin-top:10px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.bg-circle{
border-radius:100%;
background-image:url(https://images.unsplash.com/photo-1606117167162-3772433768c0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1225&q=80);
background-size:cover;
padding:23%;
}
.fg-circle{
position:relative;
border-radius:100%;
padding-bottom:100%;
border:3px solid #fff;
z-index: 1;
//background-color: blue;
background-image:url(https://images.unsplash.com/photo-1606117167162-3772433768c0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1225&q=80);
background-size:cover;
}
.bg-circle:after{
content:'';
width: 150px;
height: 150px;
background-color: yellow;
border-radius: 100%;
}
@media (min-width:640px){
.row{
display:flex;
align-items:center;
jutify-content:center;
}
.column-7{
width:60%;
float:left;
}
.column-6{
width:50%!important;
float:left;
}
.column-5{
width:40%;
float:left;
}
.bg-circle:before{
content: '';
width: 244px;
height: 174px;
background-color:#ED7714;
border-radius: 150px 0 0 150px;
position: absolute;
z-index: 0;
right: 0;
top: 78px;
}
}
@media (max-width:640px){
.column-m{
width:auto!important;
}
.bg-circle:before{
//content: '';
width: 200px;
height: 50%;
background-color:#ED7714;
border-radius: 150px 150px 0px 0px;
position: absolute;
z-index: 0;
bottom: 0;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.