<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;
}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.