Codecademy - Checkboxes App

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
    <title>Checkbox Input</title>
  </head>
  <body>
    <section id="overlay">
      <img src="https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-6/htmlcss1-img_burger-logo.svg" alt="Davie's Burgers Logo" id="logo">
      <hr>
      <form>
        <h1>Create a burger!</h1>
        <section class="protein">
          <label for="patty">What type of protein would you like?</label>
                <input type="text" name="patty" id="patty">
        </section>
        <hr>
        <section class="patties">
          <label for="amount">How many patties would you like?</label>
          <input type="number" name="amount" id="amount">
        </section>
        <hr>
        <section class="cooked">
          <label for="doneness">How do you want your patty cooked</label>
          <br>
          <span>Rare</span>
          <input type="range" name="doneness" id="doneness" value="3" min="1" max="5">
          <span>Well-Done</span>
        </section>
        <hr>

        <section class="toppings">
          <span>What toppings would you like?</span>
          <br>
          <!--Add your code below for the first checkbox-->

                    <label for="lettuce">Lettuce</label>
          <!--Add your code below for the second checkbox-->
                    <input type="checkbox" name="topping"
                 id="lettuce" value="lettuce">

          <label for="tomato">Tomato</label>
          <!--Add your code below for the third checkbox-->
                    <input type="checkbox" name="topping"
                 id="tomato" value="tomato">
                    <label for="onion">Onion</label>
          <input type="checkbox" name="topping"
                 id="onion" value="onion">

        </section>

      </form>
    </section>
  </body>
</html>