Survey Form pop up error in my codepen

1

i keep getting this pop up in codepen.

—Just HTML that goes in the <body> goes here. Learn more.—

Here’s a link
My Code

2

that’s how codepen works, it expect only the stuff inside he body element (without the body element) to go in the HTML box
for other stuff, like meta datas, you can add them to the pen settings

3

Oh ok, so if i just remove the title it should be fine. Thats really the only meta i have in the code. Still very new lol

4

ok so that didnt work. Is it the DOCTYPE ?

5

the doctype, the html tags… everything that is not inside the body tags, then delete the body tags

6

in short these are the changes you need to do:
(you also need to include the test suite)

HTML

- <!DOCTYPE HTML>
- <html>

- <body class="background-image">

  <div class="container">
    <header class="header">

      <h1 id="title" class="text-center"> freeCodeCamp Survey Form Project </h1>

      <p id="description" class="text-center description"> This survey is intended for feedback on the <q> Survey Form
        </q> Project for FCC. </p>

    </header>

    <div class="text-center container">
      <form id="survey-form">

        <label id="name-label" for="name">Name</label>
        <input id="name" name="name" type="text" placeholder="Enter Your Name" required />

        <br>
        <br>
        <label id="email-label" for="email">Email</label>
        <input id="email" name="email" type="email" placeholder="Enter Your Email" required />
        <br>
        <br>
        <label id="number-label" for="number"> Age (Optional)
          <input id="number" type="number" name="age" min="10" max="99" placeholder="Age" />

          <br>

          <p>Which option best describes your current role?</p>

          <select id="dropdown" name="role" required>
            <option disabled selected value>Select Current Role</option>
            <option value="student">Student</option>
            <option value="job">Full Time Job</option>

            <option value="preferNo">Prefer not to say</option>
            <option value="other">Other</option>
          </select>
          <br>
          <p>Do you think the FCC survey form project was informative and helpful?</p>
          <label>
            <input name="whatdoyouthink" value="definitelyhelpful" type="radio" checked />Definitely Helpful</label>

          <label>
            <input name="whatdoyouthink" value="somewhathelpful" type="radio" />Somewhat Helpful</label>
          
          <label>
            <input name="whatdoyouthink" value=""
          </form>
    </div>
+ <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
- </body>

- </html>

CSS


    
- }

.container {
  width: 100%;
  margin: 3.125rem auto 0 auto;
}

.header {
  padding: 0 0.625rem;
  margin-bottom: 1.875rem;
}

.text-center {
  text-align: center;
}

.description {
  font-style: italic;
  font-weight: 200; 
}

- .background-image {
+ body {
  background-image:  url("https://cdn.pixabay.com/photo/2019/11/15/15/27/landscape-4628657_960_720.jpg");
  background-size: cover;
background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  
 
  
}
1 Like
7

I know this seems elementary but if i remove the body tags how do i get my bgr img

8

use the selector for body element, instead of for a class (see my previous post)

1 Like
9

you are also missing a closing </div>, probably for your .container element

1 Like