Created
September 10, 2020 20:26
-
-
Save hariomkushwaha/f9c5cdd3bd49e53622df65cb1c51b42f to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<title>Sign Up Form</title> | |
<meta name="description" content=""> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<style type="text/css"> | |
*{ | |
box-sizing: border-box; | |
} | |
body { | |
font-family:sans-serif; | |
color: #384047; | |
} | |
form { | |
max-width: 800px; | |
margin: 10px auto; | |
padding: 10px 20px; | |
background: #f4f7f8; | |
border-radius: 8px; | |
} | |
h1 { | |
margin: 0 0 30px 0; | |
text-align: center; | |
} | |
input[type="text"], | |
input[type="password"], | |
input[type="email"], | |
input[type="number"], | |
textarea, | |
select { | |
background: rgba(255,255,255,0.1); | |
border: none; | |
font-size: 16px; | |
height: auto; | |
margin: 0; | |
outline: 0; | |
padding: 15px; | |
width: 100%; | |
background-color: #e8eeef; | |
color: #8a97a0; | |
box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset; | |
margin-bottom: 30px; | |
} | |
input[type="radio"], | |
input[type="checkbox"] { | |
margin: 0 4px 8px 0; | |
} | |
select { | |
padding: 6px; | |
height: 32px; | |
border-radius: 2px; | |
} | |
button { | |
padding: 19px 39px 18px 39px; | |
color: #FFF; | |
background-color: #4bc970; | |
font-size: 18px; | |
text-align: center; | |
font-style: normal; | |
border-radius: 5px; | |
width: 100%; | |
border: 1px solid #3ac162; | |
border-width: 1px 1px 3px; | |
box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset; | |
margin-bottom: 10px; | |
} | |
label { | |
display: block; | |
margin-bottom: 8px; | |
} | |
label.light { | |
font-weight: 300; | |
display: inline; | |
} | |
.number { | |
background-color: #5fcf80; | |
color: #fff; | |
height: 30px; | |
width: 30px; | |
display: inline-block; | |
font-size: 0.8em; | |
margin-right: 4px; | |
line-height: 30px; | |
text-align: center; | |
text-shadow: 0 1px 0 rgba(255,255,255,0.2); | |
border-radius: 100%; | |
} | |
.circle{ | |
padding: 16px 0px 16px 0px; | |
font-size: 20px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="row"> | |
<div class="form"> | |
<form> | |
<h1> Sign Up </h1> | |
<div> | |
<div class="circle"><span class="number">1</span> Your Basic Info</div> | |
<label for="name">Name:</label> | |
<input type="text" id="name" name="user_name"> | |
<label for="email">Email:</label> | |
<input type="email" id="mail" name="user_email"> | |
<label for="password">Password:</label> | |
<input type="password" id="password" name="user_password"> | |
<label>Age:</label> | |
<input type="radio" id="under_13" value="under_13" name="user_age"><label for="under_13" class="light">Under 13</label><br> | |
<input type="radio" id="over_13" value="over_13" name="user_age"><label for="over_13" class="light">Over 13</label> | |
</div> | |
<div> | |
<div class="circle"><span class="number">2</span> Your Profile</div> | |
<label for="bio">Bio:</label> | |
<textarea id="bio" name="user_bio"></textarea> | |
<label for="job">Job Role:</label> | |
<select id="job" name="user_job"> | |
<optgroup label="Web"> | |
<option value="frontend_developer">Front-End Developer</option> | |
<option value="php_developer">PHP Developer</option> | |
<option value="python_developer">Python Developer</option> | |
<option value="rails_developer">Rails Developer</option> | |
<option value="web_designer">Web Designer</option> | |
<option value="wordpress_developer">Wordpress Developer</option> | |
</optgroup> | |
<optgroup label="Mobile"> | |
<option value="android_developer">Android Developer</option> | |
<option value="ios_developer">IOS Developer</option> | |
<option value="mobile_designer">Mobile Designer</option> | |
</optgroup> | |
<optgroup label="Business"> | |
<option value="business_owner">Business Owner</option> | |
<option value="freelancer">Freelancer</option> | |
</optgroup> | |
</select> | |
<label>Interests:</label> | |
<input type="checkbox" id="development" value="interest_development" name="user_interest"><label class="light" for="development">Development</label><br> | |
<input type="checkbox" id="design" value="interest_design" name="user_interest"><label class="light" for="design">Design</label><br> | |
<input type="checkbox" id="business" value="interest_business" name="user_interest"><label class="light" for="business">Business</label> | |
</div> | |
<button type="submit">Sign Up</button> | |
</form> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment