Survey form project passed: some "p" éléments doesn't appear

HTML-CSS
#1

Hello,
Something weird, Here under my code for the “survey form” project, so I blured it:

<!DOCTYPE html>
<html>
  <head>
    <title>Cours JavaScript</title>
    <meta charset="utf-8" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap"
      rel="stylesheet"
    />
    <style>
      body {
        background-image: linear-gradient(
            115deg,
            rgba(58, 58, 158, 0.8),
            rgba(136, 136, 206, 0.7)
          ),
          url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
        width: 100%;
        height: 100%;
        z-index: -1;
        background-size: cover;
        font-family: 'Poppins', sans-serif;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.4;
        color: white;
        background-color: darkblue;
      }
         h1 {
        margin: 40px 0px 0px 0px;
      }
      #description {
       font-weight: 600;
       font-size: 1.125rem;
        margin: 5px 0px 30px 0px;
        text-shadow: 1px 1px 1px rgb(0 0 0 /100%);
        color:white;
      }
      #container {
        width: 700px;
        margin: auto;
        padding: 0px;
        text-align: center;
      }
      input {
        width: 100%;
      }
      #survey-form {
        background-color: rgba(37,37,69, 0.9);
        padding: 40px  40px  70px  40px;
        text-align:left;
      }
      .div-input {
        margin: 0px 0px 1.2rem 0px;
      }
      #name-label {
        font-size: 1.1rem;
        height: 50px;
        line-height: 2rem;
      }
      #email-label {
        font-size: 1.1rem;
        height: 50px;
        line-height: 2rem;
      }
      #number-label {
        font-size: 1.1rem;
        height: 50px;
        line-height: 2rem;
      }
      .input-field {
        height: 2.375rem;
        border-radius: 0.25rem;
      }
      .input-field-comments {
        height: 120px;
        width: 100%;
        border-radius: 0.25rem;
        margin-bottom: 20px;
      }

      #name::placeholder {
        font-family: 'Poppins', sans-serif;
        padding: 10px;
        color: grey;
        font-size: 0.9rem;
        font-weight: bold;
      }
      #email::placeholder {  
        font-family: 'Poppins', sans-serif;
        padding: 10px;
        color: grey;
        font-size: 0.9rem;
        font-weight: bold;
      }
      #number::placeholder {
        font-family: 'Poppins', sans-serif;
        padding: 10px;
        color: grey;
        font-size: 0.9rem;
        font-weight: bold;
      }
      #comments::placeholder {
        font-family: 'Poppins', sans-serif;
        padding: 10px;
        color: grey;
        font-size: 0.9rem;
        font-weight: bold;
        vertical-align: text-top;  /* Why vertical-align doesn't work ? */
      }
      #dropdown {
        width: 100%;
        height: 2.375rem;
        border-radius: 0.25rem;
        
      }
      #dropdown-feature {
        width: 100%;
        height: 2.375rem;
        border-radius: 0.25rem;
      }
      .select {
         font-family: 'Poppins', sans-serif;
        padding: 10px;
        color: rgb(5, 5, 5);
        font-size: 0.9rem;
        font-weight: bold;
      }
      select {
        font-family: 'Poppins', sans-serif;
        padding: 5px 10px 5px 10px;
        color: grey;
        font-size: 0.9rem;
        font-weight: bold;
      
      }
      .option {
        font-size: 1.1rem;
        line-height: 1.8rem;
        margin: 0px;
      }
      #div-select {
        margin-top: 30px;
      }
      #div-select-feature {
        margin-top: 30px;
      }

      .bouton { 
        width: 15px;
        height: 15px;
      }
      input[type="radio"]{
        vertical-align: middle;
        margin: 10px 10px 10px 0px;
      }
       input[type="checkbox"]{
        vertical-align: middle;
        margin: 10px 10px 10px 0px;
      }
      #submit {
        background-color: #37af65;
        font-size: 1.1rem;
        height: 50px;
        line-height: 2rem;
        width: 100%;
        color: white
      }
   
    </style>
  </head>
  <body>
    <div id="container">
      <header>
        <h1 id="title">freeCodeCamp Survey Form</h1>
        <p id="description"><em>Thank you for taking the time to help us improve the platform</em></p>
      </header>
      <form id="survey-form" methode="post" action="">
        <div class="div-input">
          <label id="name-label" for="name">Name</label>
          <input
            class="input-field"
            id="name"
            type="text"
            name="name"
            placeholder="Enter your name"
            required
          />
        </div>
        <div class="div-input">
          <label id="email-label" for="email">Email</label>
          <input
            class="input-field"
            id="email"
            type="email"
            name="email"
            placeholder="Enter your Email"
            required
          />
        </div>
        <div class="div-input">
          <label id="number-label" for="number">Age (optional)</label>
          <input
            class="input-field"
            id="number"
            type="number"
            name="number"
            placeholder="Enter your Age"
            min="0"
            max="99"
          />
        </div>
        <div id="div-select" class="div-input">
          <p class="option">which option best describes your current role?</p>
          <label for="dropdown"></label>
          <select 
            id="dropdown"
            name="select"
            required
          >
          <option value="" class="select">Select an option</option>
          <option value="dog" class="select">Designer</option>
          <option value="cat" class="select">coder</option>
          <option value="hamster" class="select">Community Manager</option>
        </div>
        <div>
           <p class="option">Would you recommended freeCodeCamp to a friend?</p>
            <label for="definitely">
            <input id="definitely" class="bouton" value="Definitely" type="radio" name="recommend">Definitely<br>
            </label>
            <label for="maybe">
              <input id="maybe" class="bouton" value="Maybe" type="radio" name="recommend">Maybe<br>
            </label>
            <label for="not">
              <input id="not" class="bouton" value="Not sure" type="radio" name="recommend">Not sure<br>
            </label>
         </div>
         <div id="div-select-feature" class="div-input">
            <p class="option">What is your favorite feature of freeCodeCamp?</p>
            <label for="dropdown-feature"></label>
            <select 
              id="dropdown-feature"
              name="select"
              required
            >
            <option value="" class="select">Select an option</option>
            <option value="dog" class="select">Chalenges</option>
            <option value="cat" class="select">Projects</option>
            <option value="hamster" class="select">Community</option>
            <option value="hamster" class="select">Open source</option>
         </div>
         <div>
           <!-- class="option" -->

            <p>What would you like to see improved</p> 

            <label for="Front-end">
              <input id="Front-end" class="bouton" value="Front-end Projects" type="checkbox" name="improved">Front-end Projects<br>
            </label>
            <label for="Back-end">
              <input id="Back-end" class="bouton" value="Back-end Projects" type="checkbox" name="improved">Back-end Projects<br>
            </label>
            <label for="Data">
              <input id="Data" class="bouton" value="Data Visualization" type="checkbox" name="improved">Data Visualization<br>
            </label>
            <label for="Challenges">
              <input id="Challenges" class="bouton" value="Challenges" type="checkbox" name="improved">Challenges<br>
            </label>
            <label for="Open">
              <input id="Open" class="bouton" value="Open Source Community" type="checkbox" name="improved">Open Source Community<br>
            </label>
            <label for="Gitter">
              <input id="Gitter" class="bouton" value="Gitter help rooms" type="checkbox" name="improved">Gitter help rooms<br>
            </label>
            <label for="Videos">
              <input id="Videos" class="bouton" value="Videos" type="checkbox" name="improved">Videos<br>
            </label>
            <label for="City">
              <input id="City" class="bouton" value="City Meetups" type="checkbox" name="improved">City Meetups<br>
            </label>
            <label for="Wiki">
              <input id="Wiki" class="bouton" value="Wiki" type="checkbox" name="improved">Wiki<br>
            </label>
            <label for="Forum">
              <input id="Forum" class="bouton" value="Forum" type="checkbox" name="improved">Forum<br>
            </label>
            <label for="Additional">
              <input id="Additional" class="bouton" value="Additional Courses" type="checkbox" name="improved">Additional Courses<br>
            </label>
          </div>
          <div class="div-input">
            <label class="label-input" for="comments">Any comments or suggestions?</label>
            <textarea id="comments" class="input-field-comments" name="comments" placeholder="Enter your comment here..."></textarea>
          </div>
        <button id="submit" type="submit" value="Envoyer">Submit</button>
      </form>
    </div>
  </body>
</html>

Ligne 228 and 229 of VScode.
There is a “div” and a “p” class “option”:

image
image906×255 16.1 KB

But “p” doesn’t appear when I launch it and as you see hereunder, in “dev Tool” the “p” (would you recommended freecodecamp to a friend?) is at the end of “select” element and there isn’t the “div”.

image

I hope that is clear for you.
What’s matter ?

#2

Hey again @karlito.
You didnt close your select tag and your browser tried to fix it for you, but put it in the wrong place.
Make sure all the elements have matching opening and closing tags.

#3

@karlito, in the future you should run your HTML code through the W3C validator. It will point our syntax errors for you.
In addition to the one you were told about there are a few others that you should be aware of and address.

#4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.