surrogate-section-3-2

by Abdul Ahmad

HTML

<div class='row'>

  <div class='left-col'>
    <div class='big-circle-container'>
      <div class='big-circle'>
        
      </div>
    </div>
    
    <div class='big-circle-neighbor'>
     <!--  <div class='small-circle-container'>
        <div class='small-circle'>
        
        </div>
        <div class='small-circle-description'>
        
        </div>
      </div> -->
      
    </div>
    
  </div>
  
  <div class='right-col'>
  
  </div>
  
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.row {
  height: 400px;
  width: 100vw;
  max-width: 1200px;
  margin: 0 auto;
  
  border: 1px red solid;
}

.left-col {
  display: block;
  clear: none;
  float: left;
  width: 50%;
  height: 100%;
  margin: 0;
  
  background: rgba(0, 255, 126, 0.5);
  background: tomato;
}

.big-circle-container {
  display: block;
  clear: none;
  float: left;
  
  width: 200px;
  height: 400px;
  
  position: relative;
  left: -15%;
  
  border: 1px black dashed;
}

.big-circle {
  width: 400px;
  height: 400px;
  border-radius: 400px;
  
  background-color: darkgray;
}

.big-circle-neighbor {
  display: block;
  clear: none;
  float: left;
  
  width: 200px;
  height: 400px;
  
  position: relative;
  
  background: black;
  
  border: 1px white dashed;
  
}


.right-col {
  display: block;
  clear: none;
  float: left;
  width: 50%;
  height: 100%;
  margin: 0;
  
  background: rgba(255, 126, 0, 0.5);
  background: blue;
}