Skip to content

Instantly share code, notes, and snippets.

@immanishbainsla

immanishbainsla/index.html

Created January 24, 2019 06:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save immanishbainsla/0a6ae2d276bcfd0740dfe72a00f1bd9f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save immanishbainsla/0a6ae2d276bcfd0740dfe72a00f1bd9f to your computer and use it in GitHub Desktop.
Download ZIP
Project : 2 Survey Form(Final)
Raw
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>
Raw
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.

Raw
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%;
}
}
@immanishbainsla
Copy link
Author

immanishbainsla commented Jan 24, 2019

Transferred from Codepen.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment