Survey Form - Build a Survey Form

HTML-CSS
1

Hi I couldn’t figure out how to put a background image on this survey form like it was on the example and the text “Which option best describes your current role?” doesn’t show up What can I do please help me

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Registration Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Registration Form</h1>
    <p>Please fill out this form with the required information</p>
    <form method="post" action='https://register-demo.freecodecamp.org'>
    <div class="flex">
  <span>Name</span>
      <input type="text" class="personal-info__data" id="name" name="name" placeholder="Enter your name" required>
  
<span>Email</span>   
      <input type="email" class="personal-info__data" id="email" name="email" placeholder="Enter your email" required>
   

 <span> Age (optional)</span>  
      <input type="number" class="personal-info__data" id="number" name="age" min="1" max="115" placeholder="Age" required>
      <label for="role">Which option best describes your current role?
          <select id="role" name="role"  > 
                        <option value="">Select current role</option>
            <option value="1">Student</option>
            <option value="2">Full Time Job</option>
            <option value="3">Full Time Learner
            </option>
            <option value="4">Prefer not to say</option>
            <option value="5">Other</option>
            
      <h2> Would you recommend freeCodeCamp to a friend?</h2>
            
            <label for="definitely"><input id="definitely" type="radio" name="reccomendation" class="inline" /> Definitely</label>

        <label for="maybe"><input id="maybe" type="radio" name="reccomendation" class="inline" /> Maybe</label>
        
        <label for="notsure"><input id="notsure" type="radio" name="reccomendation" class="inline" /> Not Sure</label>
     











  </div>


/* file: styles.css */
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  color: #f5f6f7;
  font-family: Helvetica;
  font-size: 16px;
}	
h1, p, h2 {
  margin: 1em auto;
  text-align: center;
  font-family: Helvetica;
}
.flex {
  display:flex;
  flex-direction:column;
  text-align: left;
  width:850px;
  height:550px;
  margin:0px auto;
  border-radius:15px 15px;
  background-color:#1b1b32 ;
  padding:3px
  
}
span{
  display:block;
  line-height:41px;
  font-weight:bold;
  font-size:18
}

input {
  padding:7px;
font-size: 25px;

}
select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 41px;
  display:block;
  line-height:41px;
  font-size:18;
}

label {
  display:block;
  line-height:41px;
  font-weight:bold;
  font-size:18
}
option {
text-color: grey;

}
.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

3

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