index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">

  <title>Frontend Mentor | Four card feature section</title>
  <link rel="stylesheet" href="css/styles.css">
  <link href="https://fonts.googleapis.com/css?family=Poppins:200,400,600&display=swap" rel="stylesheet">


<body>

  <div class="header">
    <header>

      <h2 class="font200 lbfont">Reliable, efficient delivery</h2>
      <h2 class="dbfont">Powered by Technology</h2>

      <p class="lbfont">

        Our Artificial Intelligence powered tools use millions of project data points
        to ensure that your project is successful

      </p>
    </header>
  </div>

  <div class="container">


    <div class="card c-stripe">
      <h3>Supervisor</h3>
      <p>Monitors activity to identify project roadblocks</p>
      <img src="images/icon-supervisor.svg" alt="">
    </div>

<div class="center-cards">


      <div class="card r-stripe group">
        <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="">

      </div>

      <div class="card o-stripe group">
        <h3>Karma</h3>
        <p>Regularly evaluates our talent to ensure quality</p>
        <img src="images/icon-karma.svg" alt="">
      </div>

</div>

    <div class="card b-stripe">
      <h3>Calculator</h3>
      <p>
        Uses data from past projects to provide better delivery estimates</p>
        <img src="images/icon-calculator.svg" alt="">
    </div>
</div>
    <footer>

      <p class="attribution">
        Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
        Coded by <a href="#">shortwave76</a>.
      </p>

    </footer>


</body>

</html>