Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
The survey form isn’t centering in full-screen but,
is centered in the half-screen.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>survey form</title>
    <link rel="stylesheet" href="styles.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="UTF-8"></meta>
  </head>
  <body>
    <h1 id="title">How can we become better programmers?</h1>
    <p id="description">Thank you, for taking the time to complete my survey.</p>
    <form action="" id="survey-form">
       <div class="form-div">
      <label id="name-label">Name</label>
        <input type="text" id="name" name="name" placeholder="Enter your first name" required></input>
      </label>
      </div>

      <div class="form-div">
      <label id="email-label">Email.</label>
        <input type="email" id="email" name="email" placeholder="Enter your email" required></input>
      </label>
      </div>


      <div class="form-div">
      <label id="number-label">Age? (optional)</label>
        <input type="number" id="number" name="number" placeholder="Enter your age" min="18" max="100" required></input>
      </label>
      </div>

      <div class="form-div"> 
      <label id="exp-label">Years of experience</label>
        <input type="number" id="number" name="age" placeholder="Enter experience" min="1" max="100" required></input>
      </label>
      </div>

      <div class="form-div">
      <label id="lan-label">most practiced programming language</label>
        <input type="text" id="name" name="name" placeholder="Enter programming language" required></input>
      </label>
      </div>
      <div class="form-div">
        <label id="dropdown-label">What is your current role?</label> 
        <select id="dropdown" name="dropdown">
         <option value="">Select your curretnt role</option>
         <option value="1">Front-end</option>
         <option value="2">Back-end</option>
         <option value="3">Full-stack</option>
         <option value="4">Student</option>
        </select>
      </div>
      </form>
  </body>
</html>

/* file: styles.css */

body{
  color:orange;
  background-image:url('https://cdn.vectorstock.com/i/1000x1000/34/47/circuit-board-abstract-computer-technology-vector-29373447.webp');
  background-repeat:no-repeat;
  background-size:cover;
  width:100vh;
  height:100vh;
  margin:0;
  font-family:ocr a std, monospace;
}

#title{
  text-align:center;
}

h1, p{
  margin:0 auto;
  font-family:OCR A Std, monospace;
}

#description{
  text-align:center;
  font-style:italic;
}

#survey-form{
  background-color:rgba(27, 27, 50, 0.8);
  width:80%;
  margin:0 auto 1.25rem auto;
  border-radius:10px;
  }

  .form-div{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    margin: 0 auto 1.25rem auto;
    padding:.25rem;
  }

  label{
    margin-bottom:10px;
  width:100%;
  font-size:18px;
  }

  input{
    width:80%;
    height:30px;
    font-size:16px;
  }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

you have a tipo n the body…

3

thank you. i actually just caught that a few minutes before your solution. along with a few other things i had missed.