Survey Form

index.html

<div class="container">
  <header class="header">
  <h1 id="title" class="text-center">Women In Tech Survey Form</h1>
  <p id="description" class="description text-center">This form is to help understand the rate at which women join the tech world and at what age.</p>
  </header> 
  
  <form id="survey-form">
    <div class="form-group">
      <label id="name-label" for="name">Name</label>
      <input type="text" name="name" id="name" class="form-control" placeholder="Enter your name" required>
    </div>
    
    <div class="form-group">
      <label id="email-label" for="email">Email</label>
     <input type="email" name="email" id="email" class="form-control" placeholder="Enter your Email" required>
    </div>
    
    <div class="form-group">
      <label id="number-label" for="number">Age <span class="clue">(That you entered the tech world)</span></label>
          <input type="number" name="age" id="number" min="10" max="90" class="form-control" placeholder="Age" required>
    </div>
    
    <div class="form-group">
      <p>Current Role at the moment?</p>
      <select id="dropdown" name="role" class="form-control" required>
        <option disable selected value>Select current role</option>
        <option value="student">Student</option>
        <option value="job">Full Time Job</option>
        <option value="job">Part Time Job</option>
        <option value="learner">Learner</option>
        <option value="preferNo">Prefer Not to Say</option>
        <option value="other">Other</option>
      </select>
    </div>
    
    <div class="form-group">
      <p>Martial Status</p>
       <select id="dropdown" name="role" class="form-control" required>
        <option disable selected value>Select current status</option>
        <option value="married">Married</option>
        <option value="single">Single</option>
        <option value="divorced">Divorced</option>
        <option value="widowed">Widowed</option>
        <option value="preferNo">Prefer Not to Say</option>
        <option value="other">Other</option>
      </select>
    </div>
    
    <div class="form-group">
      <p>What intrested you to join the tech world</p>
      <label>
        <input name="user-recommend" value="creativity" type="radio" class="input-radio" checked>Creativity
      </label>
      
      <label>
        <input name="user-recommend" value="hobby" type="radio" class="input-radio">Hobby
      </label>
      
      <label>
        <input name="user-recommend" value="visual design" type="radio" class="input-radio">Visual Design
      </label>
      
      <label>
        <input name="user-recommend" value="job security" type="radio" class="input-radio">Job Security
      </label>
    </div>
    
    <div class="form-group">
      <p>Favorite Programming Language?</p>
      <select id="most-like" name="mostLike" class="form-control" required>
        <option disabled selected value>Select an option</option>
        <option value="html&css">HTML & CSS</option>
        <option value="javascript">JavaScript</option>
        <option value="python">Python</option>
        <option value="java">java</option>
        <option value="c++">C++</option>
        <option value="php">PHP</option>
        <option value="others">Others</option>
      </select>
    </div>
    
    <div class="form-group">
      <p>Which Developer are you? <span class="clue">(Check all that applies)</span></p>
      
      <label><input name="prefer" value="front-end-developer" type="checkbox" class="input-checkbox">Front-end Developer</label>
      <label><input name="prefer" value="back-end-developer" type="checkbox" class="input-checkbox">Back-end Developer</label>
      <label><input name="prefer" value="web designer" type="checkbox" class="input-checkbox">Web Designer</label>
      <label><input name="prefer" value="full-Stack developer" type="checkbox" class="input-checkbox">Full-Stack Developer</label>
      <label><input name="prefer" value="ui/ux designer" type="checkbox" class="input-checkbox">UX/UI Designer</label>
    </div>
    
    <div class="form-group">
      <p>How long have you been in the tech world</p>
      <select id="most-like" name="mostLike" class="form-control" required>
        <option disabled selected value>Select an option</option>
        <option value="0-1year">0-1year</option>
        <option value="2-5years">2-5years</option>
        <option value="5-10years">5-10years</option>
        <option value="10-15years">10-15years</option>
        <option value="15years above">15years above</option>
      </select>
    </div>
    
    <div class="form-group">
      <p>How many hours do you code per day</p>
      <select id="most-like" name="mostLike" class="form-control" required>
        <option disabled selected value>Select an option</option>
        <option value="30min">30min per day</option>
        <option value="1hour">1hour per day</option>
        <option value="2-3hours">2-3hours per day</option>
        <option value="3-5hours">3-5hours per day</option>
        <option value="5hours">5hours above</option>
        </div>
      </select>
      
    <div class="form-group">
      <p>Any comments or advice to new female developers?</p>
      <textarea id="comments" class="input-textarea" name="comment" placeholder="Enter your comment here..."></textarea>
    </div>
    
      <div class="form-group">
        <button type="submit" id="submit" class="submit-button">Submit</button>
      </div>
    
  </form>
</div>

jomvgwr.markdown

jOmVgwr

A Pen by Mariam O-Alli on CodePen.

License.

script.babel

// !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

/***********
INSTRUCTIONS:
  - Select the project you would 
    like to complete from the dropdown 
    menu.
  - Click the "RUN TESTS" button to
    run the tests against the blank 
    pen.
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!
    ************/

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments. 

scripts

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

style.css

.container {width: 100%;
             margin: 3.125rem auto 0 auto;
             background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url(https://image.jimcdn.com/app/cms/image/transf/none/path/s9e119e99571291e3/image/if8cd2b6e50e7e563/version/1562502853/image.jpg);
         background-size: cover;
         background-position: center;
         background-attachment: fixed;}

*,*::before,*::after {box-sizing: border-box;}

div {display: block;}

body {font-family: sans-serif;
      font-size: 1rem;
      font-weight: 400;
      inline-height: 1.4;
      color: rgba(150, 186, 255, 1.0);
       margin: 0;}

header {display: block;}

.header {padding: 0 0.625rem;
         margin-bottom: 1.875rem;}

.text-center {text-align: center;}

h1 p {marigin-top: 0;
      marging-bottom: 0.5rem;}

h1 {font-weight: 500;
    line-height: 1.2;}

.description {font-weight: 200;
              font-style: italic;
              text-shadow: 1px 1px 1px rgb(0 0 0 / 40%);}

form {background-color: rgba(125, 237, 255, 0.3);
       padding: 2.5rem 0.625rem;
       border-radius: 0.25rem;
        display: block;
        margin-top: 0em;
        width: 70%;
        margin: auto;}

@meadia (min-width: 480px)
{form{padding: 2.5rem;}}

.form-group { margin: 0 auto 1.25rem auto;
              padding: 0.25rem;}

label {display: flex;
        align-items: center;
        font-size: 1.125rem;
         margin-bottom: 0.5rem;
        }
.form-control {display: block;
               width: 100%;
               height: 2.375rem;
               padding: 0.375rem 0.75rem;
                color: #495057;
                background-color: #fff;
                background-clip: padding-box;
                border: 1px solid #7DEDFF;
                border-radius: 0.30rem;
               transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;}

input, button, select, textarea {margin: 0;
                                 font-family: inherit;
                                 font-size: inherit;
                                 inline-height: inherit;}

input {text-rendering: auto;
       letter-spacing: normal;
       word-spacing: normal;
       text-transform: none;
       text-indent: 0px;
       text-shadow: none;
       text-align: start;
       apperance: auto;
       -webkit-rtl-ordering: logical;
        cursor: text;
        font: 400 13.3333px;
        }

.input-textarea { min-height:120px;
                 width: 100%;
                 padding: 0.625rem;
                 resize: vertical;
                  border: 1px solid #7DEDFF;
                  border-radius: 0.30rem;}

textarea { text-rendering: auto;
         color: -internal-light-dark(black, white);
         letter-spacing: normal;
          word-spacing: normal;
         text-transform: none;
          text-indent: 0px;
          text-shadow: none;
          display: inline-block;
         text-align: start;
        appearance: auto;
      background-color: -internal-light-dark(rgb(255,           255, 255), rgb(59, 59, 59));
         -webkit-rtl-ordering: logical;
         flex-direction: column;
           cursor: text;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    column-count: initial !important;
      font: 400 arial;
       border-image: initial;}

button { text-transform: none;
         text-indent: 0px;
          text-shadow: none;
          text-align: center;
          align-items: flex-start;
          width: 100%;
          min-height: 35px;
          border: 1px solid #7DEDFF;
          border-radius: 0.50rem; 
         background-color: rgba(125, 237, 255, 1.0);
         color: #fff}

Part of FCC Project