Responsive Web Design Project: A Survey Form

index.html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Font Awesome Icon Library -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<h1 id="title">A Survey Form</h1>
<p id="description">Track Customer's Feedback and Satisfaction Level</p>

<section>
  <form id="survey-form">
    <fieldset>
      <h4>Instructions: Take a few moments to fill up this short survey and click submit.</h4>
      
 
      <div class="labels">
        <label id="name-label" for="name">* Name: </label><div>
      
        <input autofocus type="text" name="name" id="name" class="input-field" placeholder="Enter your name" required><br>
      
    
      <div class="labels">
        <label id="email-label" for="email">* Email: </label></div>
      
      
        <input type="email" name="email" id="email" class="input-field" required placeholder="Enter your Email"><br>
    
    
      <div class="labels">
        <label id="number-label" for="age">* Age: </label></div>
      
        <input type="number" name="age" id="number" min="1" max="125" class="input-field" placeholder="Age">
      </input>
       
    
        <h4>1. How did you find my website?</h4>
        <input id="facebook" type="checkbox" name="" value="facebook">
        <label for="facebook">Facebook</label><br>
        <input id="twitter" type="checkbox" name="" value="twitter">
        <label for="twitter">Twitter</label><br>
        <input id="google" type="checkbox" name="" value="google">
        <label for="google">Google</label><br>
        <input id="freecodecamp" type="checkbox" name="" value="freecodecamp">
        <label for="freecodecamp">freeCodeCamp</label>

      <div id="dropdown">
        <h4>2. What level of education do you have?</h4>
        <select name="level">
      <option value="elementary">Elementary</option>
      <option value="highschool">Highschool</option>
      <option value="college">College</option>
      <option value="graduate">Graduate</option>
      </select></div>

      <br>
        <h4>3. Do you like it?</h4>
        <input type="radio" id="likeChoice1" name="like" value="absolutely yes">
        <label for="Absolutely Yes">Absolutely Yes</label><br>
        <input type="radio" id="definitely no" name="likeChoice2" value="definitely no">
        <label for="definitely no">Definitely No</label><br>
        <input type="radio" id="hmm maybe" name="likeChoice3" value="hmm maybe">
        <label for="hmm maybe">Hmm Maybe</label>

      <div>
        <h4>4. Any advice so that I can improve my website?</h4>
        <textarea rows="5" cols="70">Enter your message here...</textarea id="input-field"></div>

      <div>
        <h4>5. How would you rate?</h4>
        <span class="heading"></span>
        <input id="yes" type="radio" name="yes" value="">
        <span class="fa fa-star checked"></span>
        <label for="yes">1 Star</label><br>

        <input id="yes" type="radio" name="yes" value="">
        <span class="fa fa-star checked"></span>
        <span class="fa fa-star checked"></span>
        <label for="yes">2 Stars</label><br>

        <input id="yes" type="radio" name="yes" value="">
        <span class="fa fa-star checked"></span>
        <span class="fa fa-star checked"></span>
        <span class="fa fa-star checked"></span>
        <label for="yes">3 Stars</label><br>

        <input id="yes" type="radio" name="yes" value="">
        <span class="fa fa-star checked"></span>
        <span class="fa fa-star checked"></span>
        <span class="fa fa-star checked"></span>
        <span class="fa fa-star checked"></span>
        <label for="yes">4 Stars</label><br>

        <input id="yes" type="radio" name="yes" value="">
        <span class="fa fa-star checked"></span>
        <span class="fa fa-star checked"></span>
        <span class="fa fa-star checked"></span>
        <span class="fa fa-star checked"></span>
        <span class="fa fa-star checked"></span>
        <label for="yes">5 Stars</label><br><br></div>

      <button id="submit">Submit Now</button><br><br>

    </fieldset>
  </form>
</section>

<p>Thank you for your time!</p>

responsive-web-design-project-a-survey-form.markdown

Responsive Web Design Project: A Survey Form

A Pen by Grace Hanssen on CodePen.

License.

style.css

body {
  background-color: #CCFCFF;
  font-family: monospaced;
  margin-top: 50px;
  margin-bottom: 90px;
  padding-left: 30px;
  padding-right: 40px;
}

h1 {
  text-align: center;
  color: blue;
}
  
p {
  text-align: center;
  font-weight: bold;
  
}

h4 {
  font-weight: bold;
  font-style: italic;
}

.checked {
    color: orange;
}

#submit {
  text-align: center;
}