Survey Form - FCC - Christonja

index.html

<!--Website follows a FreeCodeCamp tutorial where it is designed based on a pre-existing example website 
created by FreeCodeCamp however all code is original and created from scratch by 'Christonja'-->

<!--test script courtesy of Free Code Camp-->
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">

<h1 id="title">Survey Form<h1>
  <p id="description">Let us know how we can improve freeCodeCamp</p>
  
    <form id="survey-form">
     <div class="contact-details">
      <br>
      <label for="name" id="name-label">*Name <input id="name" type="text" placeholder="Please input your name" required="required"></label>
      <br>
      <label for="email" id="email-label">*Email <input id="email" type="email" placeholder="Please input your email" required="required"></label>
      <br>
      <label for="number" id="number-label">&nbsp;&nbsp;&nbsp;*Age <input id="number" type="number" placeholder="Please input your age" min="1" max="99"></label>
    </div>
    <div class="questions">
      <label for="dropdown">Which option best describes your current role?
        <select id="dropdown">
          <option name="Student">Student</option>
          <option name="Full Time Job">Full Time Job</option>
          <option name="Full Time Learner">Full Time Learner</option>
          <option name="Prefer Not To Say">Prefer Not To Say</option>
          <option name="Other">Other</option>
        </select>
      </label>
      
     
      <p>* How likely are you to recommend free code camp to a friend
      </p>
      <label for="definitely">
        <input id="definitely" type="radio" name="radio-buttons" value="1">Definitely</input>
      </label>
      <br>
      <label for="maybe">
        <input id="maybe" type="radio" name="radio-buttons" value="2">Maybe</input>
      </label>
      <br>
      <label for="not sure">
        <input id="not sure" type="radio" name="radio-buttons" value="3">Not Sure</input>
      </label>

      <br><br>

      <label for="dropdown">What do you like most in FCC:
        <select id="dropdown">
          <option name="challenges">Challenges</option>
          <option name="projects">Projects</option>
          <option name="community">Community</option>
          <option name="open source">Open Source</option>
        </select>
      </label>
     </div>
      <p id="improvements">
        Things that should be improved in the future<br>(Check all that apply):
      </p>
      <ul class="checkboxes" style="list-style: none">
        <li><label><input type="checkbox" value="front-end">Front End Projects</label></li>
        <li><label for="back-end"><input type="checkbox" value="back-end">Back End Projects</label></li>
        <li><label for="data-vis"><input type="checkbox" value="data-vis">Data Visualization</label></li>
        <li><label for="challenges"><input type="checkbox" value="challenges">Challenges</label></li>
        <li><label for="open-source"><input type="checkbox" value="open-source">Open Source Community</label></li>
        <li><label for="gitter-help-rooms"><input type="checkbox" value="gitter-help-rooms">Gitter help rooms</label></li>
        <li><label for="videos"><input type="checkbox" value="videos">Videos</label></li>
        <li><label for="city-meetups"><input type="checkbox" value="city-meetups">City Meetups</label></li>
        <li><label for="wiki"><input type="checkbox" value="wiki">Wiki</label><li>
        <li><label for="forum"><input type="checkbox" value="forum">Forum</label></li>
        <li><label for="additional-courses"><input type="checkbox" value="additional-courses">Additional Courses</label><li>
      </ul>
      <p class='comments'>
        Any comments or suggestions?
      </p>
      <textarea id="textarea" type"textarea" placeholder="Enter your comment here..."></textarea>
      <input id="submit" type="submit" value="Submit">
    </form>

style.css

body {
  background-color: #a9d7d1;
}

#title {
  text-align: center;
  font-family: 'Dosis', sans-serif;
}

#survey-form {
  display: block;
  max-width: 900px;
  background-color: rgb(250, 250, 250);
  margin: auto;
  border-radius: 20px;
}

#description {
  font-family: 'Dosis', sans-serif;
  font-size: 20px;
  text-align: center;
}

.checkboxes {
  margin: 0 40%;
  width: 200px;
  text-align: left;
  padding: 10px;
}

label, #improvements {
  font-family: 'Dosis', sans-serif;
  font-size: 17px;
  margin: auto;
  width: 50%;
  text-align: center;
}

.comments {
  font-family: 'Dosis', sans-serif;
  font-size: 17px;
  margin: auto;
  width: 50%;
  text-align: center;
  padding: 10px;
}

.contact-details {
  display: inline-block;
  margin: 0 36%;
  max-width: 600px;
  
}

.questions {
  display: block;
  text-align: center;
  padding: 10px;
  font-family: 'Dosis', sans-serif;
  font-size: 17px; 
  line-height: 1.6;
}

#textarea {
  height: 50px;
  width: 40%;
  margin: 0 30%;
  border: 2px solid black;
}

#submit {
    background-color: teal; /* Green */
    border-radius: 10px;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    font-size: 16px;
    margin: 2px 42%;
}

survey-form-fcc-christonja.markdown

Survey Form - FCC - Christonja

A Pen by Christonja on CodePen.

License.