index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Do Now</title>
        <link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
        <style>
        /* 1. Change all the <h2> tags to a font color of green. */
            

        /* 2. Spicy Task: change the color of the "Apples" header to red, while the mangos and lemons stay green. */
        

        .images {
            display: flex;
            justify-content: space-around;
        }
        
        img {
            height: 150px;
            border-radius: 10px;
        }
        
        body {
            background-color: #f5e97d;
            font-family: 'Sofia';
            text-align: center;
        }

          h2 {
            color: green;
          }

          .apple {
            color: red;
          }
        </style>


    </head>
    <body>
        <div class="navbar">
            <a href="index.html">Do Now</a>
            <a href="code-along.html">Code Along</a>
            <a href="code-solo.html">Code Solo</a>
        </div>

        <h1 class="center"> Types of Fruit</h1>
        <div class="images">
            <div>
                <h2 class="apple">Apples</h2>
                <img src="https://images.heb.com/is/image/HEBGrocery/000466634">
            </div>
            <div>
                <h2 class="mango">Mangos</h2>
                <img src="https://images.heb.com/is/image/HEBGrocery/000321109?fit=constrain,1&wid=800&hei=800&fmt=jpg&qlt=85,0&resMode=sharp2&op_usm=1.75,0.3,2,0">
            </div>
            <div>
                <h2 class="lemon">Lemons</h2>
                <img src="https://media.healthyfood.com/wp-content/uploads/2017/03/What-to-do-with-lemons.jpg">
            </div>
        </div>
    </body>
</html>