<!Doctype html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" >
<meta charset="utf-8"
<name= 'viewport' content= 'width-device-width initial-scale =1'>
</head>
<body>
<div id= "header">
<a href="https://www.freecodecamp.org"> <img class="logo thick-green-border" src="http://tiny.cc/iifslz" alt="fcclogo"></a>
<h1 id="title"> Freecodecamp Responsive Web Design Project: Survey Form </h1>
</div>
<div class="content">
<p id="description"> A simple survey form project for Freecodecamp code pen project submission regarding 'Responsive Web Design Project' </p>
<form id="survey-form">
<label id="name-label"> Enter your name:</label>
<input type="text" id="name" name="name" required placeholder="Firstname Lastname"> <br>
<label id="email-label"> Enter your email:</label>
<input type="email" id="email" name="email" required placeholder="yourmail@email.com">
<br>
<label id="number-label"> Enter your number: </label>
<input type="number" id="number" name="number" min="11" max="120" placeholder="For example: 017xxxxxxxx">
<br>
<label id="age-label"> Enter your age[Optional]: </label>
<input type="number" id="number" name="number" min="5" max="120">
<br>
<label id="dropdown"> Choose your occupation: </label>
<select id="dropdown">
<option value="">--Please choose your occupation--</option>
<option value="student">Student</option>
<option value="teacher">Teacher</option>
<option value="doctor">Doctor</option>
<option value="engineer">Engineer</option>
<option value="others">Others</option>
</select>
<br>
<div id="radio-select">
<fieldset>
<legend> <label id="name">How did you come to know about Freecodecamp ?
</label>
</legend>
<input type="radio" value="friends" name="familiarity">Friends</input> <br>
<input type="radio" value="social media"name="familiarity">Social media</input><br>
<input type="radio" value="search engine" name="familiarity">Search engine</input><br>
<input type="radio" value="others" name="familiarity">others</input>
</fieldset>
</div>
<div id="checkbox-select">
<legend> Do you have any of the followings previous skills ?</legend>
<input type="checkbox" value ="cOrCplusplus">C/C++</input>
<input type="checkbox" value ="java">Java</input><br>
<input type="checkbox" value ="python">Python</input><br>
<input type="checkbox" value ="datAlg">Data Structures and Algoritms</input>
<br>
<legend id="textfield" > Feel free to recommend us to add new features or to improve in any filed.</legend>
<textarea placeholder = "Some comment here." >
</textarea>
</div>
<hr>
<hr>
<div class= "submit">
<button id="submit" type="submit" value="Submit" >Submit</button>
</div>
</form>
</div>
</body>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</html>.header{
float:left;
display:inline-block;
padding: 10px 24px;
text-align: center;
font-size:30px;
text-color: yellow;
border-radius: 4px;
}
.logo{
width:100px;
position:left;
}
.thick-green-border{
border-color: green;
border-width:10px;
border-style:solid;
border-radius: 60%;
}
body{
display: block;
background-color: lightblue ;
color: black;
margin: 5px;;
padding:85px 20px;
padding-color: blue;
background-repeat: no-repeat;
background-position: center top;
background-size:cover;
capacity:0.4;
}
.content{
padding :30px;
margin-top:20px;
margin-left:10px;
border: 4px solid #f2f2f2;
border-radius: 80px;
background-color: #63ff63;
}
h1{
font-family: Lobster, monospace;
font-size: 40px;
}
textfield{
display:flex;
width:100%;
}
label{
display: block;
}
// !! 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.
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.