Как поделить страницу сайта?

*{ 
  box-sizing: border-box; 
} 
 
html,body{ 
  margin: 0; 
  padding: 0; 
} 
 
.item{ 
  position: relative; 
  width: 100%; 
  height: 100vh; 
} 
 
svg{ 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  width: 100%; 
  height: 100%; 
} 
 
.text{ 
  width: 100%; 
  height: 300px; 
  position: absolute; 
  top: 50%; 
  left: 0; 
  transform: translateY(-50%); 
  background: ; 
  padding: 0 0 0 20em; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
} 
 
.el{ 
  width: 150px; 
  height: 150px; 
  background:#00a8ff; 
  border-radius: 90%; 
  margin-right: 30px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 
 
.text-block{ 
  width: 100%; 
} 
 
@media(max-width: 950px){ 
  .text{ 
    padding: 0 10em; 
  } 
 
  h3 { 
    text-transform: uppercase; 
  } 
  p{ 
    font-size: 14px; 
  } 
}

<div class="item"> 
<svg viewBox="0 0 900 500" preserveAspectRatio="none"> 
  <rect width="100%" height="100%" fill='#00a8ff'/> 
  <circle cx="900" cy="230" r="100%" fill="#fff"> 
</svg> 
<div class="text"> 
  <div class="circle"> 
    <div class="el"> 
      lorem ipsum 
    </div> 
  </div> 
  <div class="text-block"> 
    <h3>lorem ipsum</h3> 
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit vitae nobis veritatis laboriosam placeat vel alias corrupti ipsa nostrum inventore?</p> 
  </div> 
</div> 
</div>

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
div { 
  width: 500px; 
  height: 500px; 
  background: radial-gradient(ellipse 100% 150% at left, #AFAFAF 50%, transparent 50%); 
  border: 1px solid #000; 
}

<div></div>