Create a survey form

HTML-CSS
1

please help me why

<header class="header">
            <h1 id="title">Build a Survey Form</h1>
            <p id="description">fill out the survey form below</p>
</header>

does not appear in freecodecamp preview

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Survey Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1 id="title">Build a Survey Form</h1>
            <p id="description">fill out the survey form below</p>
        </header>
        <form id="survey-form" value="survey">
        <fieldset>
            <legend>please fill out the survey</legend>
            <label id="name-label">Name <input id="name" type="text" placeholder="enter your name" required /></label><br>
            <label id="email-label">Email <input id="email" type="email" placeholder="enter your email" required /></label><br>
            <label id="number-label">Age <input id="number" type="number" min="12" max="130" placeholder="age"/></label>
        </fieldset>
        <fieldset>
            <legend>Are you very happy with this course?</legend>
            <label><input id="rec" type="radio" name="account-type" value="Rcm" />Recomended
            </label><br>
            <label><input id="myb" type="radio" name="account-type" value="Maybe" />Maybe</label>
        </fieldset>
        <fieldset>
            <legend>who are you?</legend>
            <label>Please select
                <select id="dropdown">
                <option>(Select One)</option>
                <option>student</option>
                <option>otodidak</option>
                </select>
            </label>
        </fieldset>
        <legend>What will be discussed later?<br>*please choose more than one</legend>
            <label>
                <input type="checkbox" name="topic" value="framework" />Framework
            </label>
            <label>
                <input type="checkbox" name="topic" value="library"/>Library
            </label>
            <label>
                <input type="checkbox" name="topic" value="cyber" />Cyber Security
            </label>

            <label for="think">What do you think?
                <textarea id="think" name="think" row="3" cols="30"> </textarea>
            </label>
            <input id="submit" type="submit" value="Submit"/>
        </form>
    </div>
</body>
</html>

CSS

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: cyan;
    color: #313036;
    font-family: 'Times new roman', serif;
  }

  #title{
    margin-top: 40px;
  }
  
  h1,p{
    text-align: center;
    margin: auto;
  }
  
  p{
    font-size: 12px;
  }
  
  form {
    width: 80vw;
    max-width: 500px;
    min-width: 300px;
    border-style: solid;
    border-width: medium;
    ;
  }
  
  fieldset{
     border: 1px solid black;
    background-color: lightblue;
    padding: auto;
  }
  
  
  fieldset:last-of-type {
    border-bottom: none;
  }
  
  
  label {
    display: block;
    margin: 0.5rem 0;
  }
  
  input,
  textarea,
  select {
    margin: auto;
  }
  
  input[type="submit"] {
    display: block;
    width: 10%;
    margin: 1em auto;
    height: 2em;
    font-size: 1.1rem;
    background-color: #3b3b4f;
    border-color: white;
    min-width: 300px;
  }

image
image1217×585 41.1 KB

2

please provide the link to the challenge

3

https://codesandbox.io/p/devbox/survey-form-ttd8pp

4

I meant on freecodecamp. When you ask for help please always provide the link to the challenge/step/lesson

you are giving display: flex to the body, after giving it a fixed height, so the items that do not fit overflow.

5

sorry I linked the wrong link,
you are right I used display: flex; but this makes the content in the content not in the middle, so what property in CSS does it use instead?

6

you can use flex without giving a fixed height to body

7

thank you for helping

8

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