<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Information</title>
    <link rel="stylesheet" href="solution.css">
  </head>
  <body>
    <div class="title">Information!</div>

    <div class="container">
      <div class="info">
        <img src="./images/barberry.png" alt="barberry">
        <div class="text">This is a type of plant. We love this one.</div>
      </div>
      <div class="info">
        <img src="./images/chilli.png" alt="chili">
        <div class="text">This is another type of plant. Isn't it nice?</div>
      </div>
      <div class="info">
        <img src="./images/pepper.png" alt="pepper">
        <div class="text">We have so many plants. Yay plants.</div>
      </div>
      <div class="info">
        <img src="./images/saffron.png" alt="saffron">
        <div class="text">I'm running out of things to say about plants.</div>
      </div>
    </div>

    <!-- disregard this section, it's here to give attribution to the creator of these icons -->
    <div class="footer">
      <div>Icons made by <a href="https://www.flaticon.com/authors/icongeek26" title="Icongeek26">Icongeek26</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
    </div>
  </body>
</html>