four card feature section

Community feedback

• 

  P

  Stephen Ostler•210

  @steveostlerPosted 4 months ago

  Check that the layout looks good on a range of screen sizes. At 850px wide there are two boxes stacked on top of each other. This was my approach using flexbox

  main{
         display: flex;
         gap:1.5rem;
         align-items: center;
      }
  

  <main>
      <div class="col1">
        <div class="card box1">
          <h3>Supervisor</h3>
          <p>Monitors activity to identify project roadblocks</p>
          <img src="./images/icon-supervisor.svg" alt="supervisor">
        </div>
      </div>
      
      <div class="col2">
        <div class="card box2">
          <h3>Team Builder</h3>
          <p>Scans our talent network to create the optimal 
            team for your project</p>
          <img src="./images/icon-team-builder.svg" alt="team builder">
        </div>
    
        <div class="card box3">
          <h3>Karma</h3>                 
          <p>Regularly evaluates our talent to ensure quality</p>
          <img src="./images/icon-karma.svg" alt="karma">
        </div>
      </div>
      
      <div class="col3">
        <div class="card box4">
          <h3>Calculator</h3>
          <p>Uses data from past projects to provide better delivery estimates </p>
          <img src="./images/icon-calculator.svg" alt="">
        </div>
    
      </div>
      
    </main>
  

  Marked as helpful

  0