Project : 2 Survey Form(Final)

index.html

<!-- to check efficiency of form -->

  
<!-- TITLE text -->
<h1 id="title">
 Survey form
</h1>
<!-- OUTER div -->
<div id="outer-div">

<!-- DESCRIPTION text -->
<p id="description">
  Let us know how we can improve <a href="https://codepen.io" target="_blank">CODEPEN</a>  
</p>

<!-- SURVEY form -->
    <form action="submit" method="post" id="survey-form">
      
<!--       NAME row -->
      <div class="row">
        <div class="label">
          <label name="name" id="name-label">* Name :</label>
        </div>
        <div class="right-tab">
          <input type="text" name="name" id="name" required placeholder="Enter your Name" class="input-field"/>
        </div>
      </div>
        
<!--       EMAIL row -->
      <div class="row">
        <div class="label">
          <label name="email" id="email-label">* Email :</label>
        </div>
         <div class="right-tab">
          <input type="email" name="email" id="email" required placeholder="Enter your Email" class="input-field"/>
        </div>
      </div>
      
<!--       AGE row -->
      <div class="row">
        <div class="label">
          <label name="number" id="number-label">* Age :</label>
        </div>
        <div class="right-tab">
          <input type="number" name="number" id="number" required placeholder="Enter your Age" min="0" max="80" class="input-field"/>
        </div>
      </div>
      
<!--       DROPDOWN list -->
      <div class="row">
        <div class="label">
          <label for="role">Select Your Current Role :</label>        
        </div>
        <div class="right-tab">
          <select name="role" id="dropdown" >
            <option name="role" value="student">Student</option>
            <option name="role" value="intern">Intern</option>
            <option name="role" value="fulltimedev">Full Time Developer</option>
            <option name="role" value="parttimedev">Part Time Developer</option>
            <option name="role" value="notprefer">Prefer not to Say</option>
            <option name="role" value="other">Other</option>
          </select>
        </div>
      </div>
      
<!--       RADIO buttons -->
      <div class="row">
        <div class="label">
          <label for"bestpart">Best Part About CODEPEN :</label>
        </div>
        <div class="right-tab">
            <ul style="list-style: none;">
              <li class="radio"><label for="bestpart"><input type="radio" name="radio-buttons" value="community" class="bestpart" checked/>Open Source Community</label></li>
              <li class="radio"><label for="bestpart"><input type="radio" name="radio-buttons" value="ide" class="bestpart"/>IDE/Live Preview</label></li>
              <li class="radio"><label for="bestpart"><input type="radio" name="radio-buttons" value="project" class="bestpart"/>Projects/Pens</label></li>
              <li class="radio"><label for="bestpart"><input type="radio" name="radio-buttons" value="notprefer" class="bestpart"/>Prefer not to Say</label></li>
              <li class="radio"><label for="bestpart"><input type="radio" name="radio-buttons" value="other" class="bestpart"/>Other</label></li>
            </ul>
        </div>
      </div>
      
<!--       CHECKBOXES -->
      <div class="row">
        <div class="label">
          <label for="improvement">Things should be Improved/Added<br/> in Future :</label>
        </div>
        <div class="right-tab">
          <ul style="list-style: none;">
            <li class="checkboxes"><label for="checkboxes"><input type="checkbox" name="checkbox" value="backend-dev" class="bestpart" checked/>Backend Developer IDE</label></li>
            <li class="checkboxes"><label for="checkboxes"><input type="checkbox" name="checkbox" value="frontend-dev" class="bestpart"/>Frontend Developer IDE</label></li>
            <li class="checkboxes"><label for="checkboxes"><input type="checkbox" name="checkbox" value="community" class="bestpart"/>Community</label></li>
            <li class="checkboxes"><label for="checkboxes"><input type="checkbox" name="checkbox" value="add-ide" class="bestpart"/>Additional Language IDE</label></li>
            <li class="checkboxes"><label for="checkboxes"><input type="checkbox" name="checkbox" value="dashboard-view" class="bestpart"/>Dashboard View</label></li
            <li class="checkboxes"><label for="checkboxes"><input type="checkbox" name="checkbox" value="other" class="bestpart"/>If any Other Mention in Comment Box</label></li>
          </ul>
        </div>  
      </div>
      
<!--       COMMENT box -->
      <div class="row">
        <div class="label">
          <label for="comment">Any Comment (optional):</label>
        </div>
        <div class="right-tab">
          <textarea rows="4" cols="35" placeholder="Comment, If any....." class="input-field"></textarea>
        </div>
      </div>
        
<!--      Submit button -->
      <div class="row">
        <input type="submit" value="Submit" id="submit"/>
      </div>
      
  </form>
  
    </div>

<!-- FOOTER -->
<footer>
  <p id="footer">Copyright: &copy;<a href="https://linktr.ee/immanishbainsla" target="_blank">@immanishbainsla</a>
  </p>
</footer>

project-2-survey-form-final.markdown

Project : 2 Survey Form(Final)

it's a Survey Form. That takes some information from you by your Choice. You are free to choose any option.

A Pen by Manish Bainsla on CodePen.

License.

style.css

/* GOOGLE fonts */
@import url('https://fonts.googleapis.com/css?family=Ubuntu:500i');
@import url('https://fonts.googleapis.com/css?family=Quicksand:500');
@import url('https://fonts.googleapis.com/css?family=Gamja+Flower');

/* BODY */
body{
  padding: 0;
  margin: 0;
  background: #DEF8FF;
  min-width: 320px;
}

/* OUTER div */
#outer-div{
  width: 60%;
  max-width: 900px;
  height: auto;
  margin: 0 auto;
  border-radius: 5px;
  background-color: #FEF5FF; 
  font-family: 'Quicksand', sans-serif;
}

/* TITLE tag */
#title{
  font-size: 60px;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 100%;
  padding: 10px;
  color: #1D3A96;
  box-sizing: border-box;
  font-family: 'Ubuntu', sans-serif;
}


/* DESCRIPTION tag */
#description{
  padding: 0;
  margin: 0;
  width: 100%;
  font-size: 30px;
  text-align: center;
  box-sizing: border-box;
  color: #5375DF;
}

/* #ROW */
.row{
  width: 100%;
  box-sizing: border-box;
  margin-top: 7px;
}

/* DIV#label */
.label{
  padding: 0;
  margin: 0;
  display: inline-block;
  box-sizing: border-box;
  width: 45%;
  text-align: right;
  vertical-align: top;
  font-size: 20px;
  padding: 5px;
  color: #1C59AC;
}

/* DIV#right-tab */
.right-tab{
  padding: 0;
  margin: 0;
  display: inline-block;
  box-sizing: border-box;
  width: 45%;
  text-align: left;
  vertical-align: middle;
  color: #3C0526;
}

/* INPUT tag */
#name,#email,#number,#dropdown,textarea{
  height: 33px;
  width: 80%;
  border-radius: 5px;
  box-sizing: border-box; 
  padding: 5px;
  font-size: 15px;
}

textarea{
  height: 60px;
}

/* LIST */
ul{
  padding: 0;
  margin: 0;
}

li{
  margin-bottom: 5px;
  font-size: 17px;
}

/* SUBMIT button */
#submit{
  width: 30%;
  height: 40px;
  align: center;
  margin-left: 35%;
  border: none;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #94FFFF;
  font-size: 22px;
  border-radius: 10px;
  color: #1C59CC;
}

/* ANCHOR tag */
a{
  text-decoration: none;
  color: #FC7587;  
}

footer{
  width: 100%;
  text-align: center;
  color: #FA3B3B;
  font-size: 25px;
}

#footer{
    font-family: font-family: 'Gamja Flower', cursive;
}

/* HOVER */
#submit:hover{
  font-weight: bold;
}

a:hover{
  font-size: 35px;
  color: #7B7CF8;
}

#name:hover{
  border-color: #94FFFF;
}

#email:hover{
  border-color: #94FFFF;
}

#number:hover{
  border-color: #94FFFF;
}


/* RESPONSIVE */
@media screen and (max-width: 833px){
  
  .input-field{
    width: 70%;
  }
  
  select{
    width: 80%;
  }

  #submit{
    width: 40%;
  }
  
}

@media screen and (max-width: 520px){
  
  #outer-div{
    width: 90%;  
  }
  
  .label{
    width: 100%;
    text-align: left;
    margin-top: 20px;
  }
  
  label{
    cursor: pointer;
  }
  
  .right-tab{
    width: 75%;
    float: left;
    margin-left: 10%;
  }
  
  .input-field{
    width: 100%;
  }
  
  select{
    width: 100%;
  }
  
  #submit{
    width: 40%;
    margin-left: 30%;
  }
  
}

Transferred from Codepen.