Survey Form - Build a Survey Form

Tell us what’s happening:
Describe your issue in detail here.

Hey All,

In building the survey form, I’m having some trouble with the CSS part of the project. The HTML was pretty straightforward for me but I feel kind of lost with the CSS design.

I’m trying to figure out the following, for starters:

  • How to spread out the spacing of the elements in the form

  • Aligning the input areas, radio buttons, checkboxes

Any tips or insight would be greatly appreciated!

  • List item

Your code so far

/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Survey Form</title>
  <link rel="stylesheet" href="styles.css" />
  <div id="outside">
  </head>
  <body>
    <h1 id="title">Bob's Photo Printing Survey Form</h1>
    <p id="description">Thank you for taking the time to help us improve our business</p>
    <form id="survey-form">
      <div>
    <label id="name-label">Name <input type="text" id="name" placeholder="Enter your name" required/> </label>
      </div>
      <div>
    <label id="email-label"> Email <input type="email" id="email" placeholder="Enter your Email" required/></label>
      </div>
      <div>
    <label id="number-label"> Age <input type="number" id="number" name="age" min="10" max="120" placeholder="age"></label>
      </div>
    <label>Which option best describes you?
      <select id="dropdown">
          <option value="">(select one)</option>
          <option value="1">Full-time Photogrpaher</option>
          <option value="2">Part-Time Photographer</option>
          <option value="3">Hobby Photographer</option>
          <option value="4">Prefer not to say</option>
          <option value="5">Other</option>
        </select>
        <div>
        <label> Would you recommend Bob's to a friend?</label></div>
        <div>
          <label> Definetly<input type="radio" name="rec" value="Defintely"></label>
        </div>
        <div>
          <label>Maybe<input type="radio" name="rec" value="Maybe"></label>
        </div>
        <div>
          <label> Not Sure <input type="radio" name="rec" value="Not Sure"></label>
        </div>

      <label>What is your favorite feature of Bob's?</label>

      <select id="dropdown">
          <option value="">(select one)</option>
          <option value="1">Print Quality</option>
          <option value="2">Promotional Deals</option>
          <option value="3">Service</option>
          <option value="4">Website</option>
      </select>
      <div>
        <label> What would you like to see improved?</label></div>
        <div>
          <label> Website Interface<input type="checkbox" name="improved" value="Website Interface"></label>
        </div>
        <div>
          <label> Print Quality<input type="checkbox" name="improved" value="Print Quality"></label>
        </div>
          <label> Customer Service<input type="checkbox" name="improved" value="Customer Service"></label>
        <div>
          <label> Shipping Time<input type="checkbox" name="improved" value="Shipping Time"></label>
          </div>
        <label>Any comment or suggestions?
        <textarea name="comments" rows="3" cols="30" placeholder="Enter your comment here..."></textarea>
      </label>
      <div>
      <input type="submit" id="submit" value="Submit"/>
      </div>
    </form>
    </body>
/* file: styles.css */

body{
font-family: verdana;
text-align: center;
}
#outside{
background-color: #8B0000;
padding-top: 25px;
padding-bottom: 25px;
}

h1{
text-align: center;
color: #F0FFFF;
}
p{
font-style: italic;
text-align: center;
padding-bottom: 10px;
color: #F0FFFF;
}
form{
width: 70%;
margin: 0 auto;
text-align: left;
border: 1px solid #cCC;
padding: 1em;
background-color: white;
display: inline-block; 
}


  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

There are many ways to space things out or align them. Look up “flex layout” and “grid layout” online or read this beginner’s guide

why does it come out that I did everything, but still 20% completion of the task?

@Abdumajidaliev97ur, you should open your own topic when you have a question so as not to detract from the OP’s.

To answer your question, you’ve completed one of five projects…20%

do I understand correctly that 20% points are given for each completed task?