competition Registration Form
Agreed to terms and conditions
Create Fabulous Competition Form From This Unique Code
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="title">
Competition Registration Form
</div>
<strong><div class="form">
<div class="inputfield">
<label>Full Name</label>
<input type="text" class="input">
</div>
<div class="inputfield">
<label>Date of Birth</label>
<input type="text" class="input">
</div>
<div class="inputfield">
<label>Father's Name</label>
<input type="text" class="input">
</div>
<div class="inputfield">
<label>Mother's Name</label>
<input type="text" class="input">
</div>
<div class="inputfield">
<label>Password</label>
<input type="password" class="input">
</div>
<div class="inputfield">
<label>Confirm Password</label>
<input type="password" class="input">
</div>
<div class="inputfield">
<label>Gender</label>
<div class="custom_select">
<select>
<option value="">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="female">Rather Not Say</option>
</select>
</div>
</div>
<div class="inputfield">
<label>Email Address</label>
<input type="text" class="input">
</div>
<div class="inputfield">
<label>Phone Number</label>
<input type="text" class="input">
</div>
<div class="inputfield">
<label>Address</label>
<textarea class="textarea"></textarea>
</div>
<div class="inputfield">
<label>Zip Code</label>
<input type="text" class="input">
</div>
<div class="inputfield terms">
<label class="check">
<input type="checkbox">
<span class="checkmark"></span>
</label>
<p>Agreed to terms and conditions</p></strong>
</div>
<div class="inputfield">
<input type="submit" value="Register" class="btn">
</div>
</div>
</div>
</body>
</html>
CSS Code
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Imprint MT Shadow';
}
body{
background: linear-gradient(#08f190,#d073f5,#83f7f7);
padding: 0 30px;
}
.wrapper{
max-width: 550px;
width: 100%;
background: transparent;
margin: 5px auto;
box-shadow: 5px 5px 10px rgba(0,0,0,3.125);
padding: 15px;
}
.wrapper .title{
font-size: 28px;
font-weight: 900;
margin-bottom: 25px;
color: #f4151a;
text-transform: uppercase;
text-align: center;
}
.wrapper .form{
width: 100%;
}
.wrapper .form .inputfield{
margin-bottom: 15px;
display: flex;
align-items: center;
}
.wrapper .form .inputfield label{
width: 200px;
color: #000;
margin-right: 5px;
font-size: 18px;
}
.wrapper .form .inputfield .input,
.wrapper .form .inputfield .textarea{
width: 100%;
outline: none;
border: 1px solid #d5dbd9;
font-size: 15px;
padding: 8px 10px;
border-radius: 3px;
transition: all 0.3s ease;
}
.wrapper .form .inputfield .textarea{
width: 100%;
height: 100px;
resize: none;
}
.wrapper .form .inputfield .custom_select{
position: relative;
width: 100%;
height: 37px;
}
.wrapper .form .inputfield .custom_select:before{
content: "";
position: absolute;
top: 12px;
right: 10px;
border: 8px solid;
border-color: #d5dbd9 transparent transparent transparent;
pointer-events: none;
}
.wrapper .form .inputfield .custom_select select{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
width: 100%;
height: 100%;
border: 0px;
padding: 8px 10px;
font-size: 15px;
border: 1px solid #d5dbd9;
border-radius: 3px;
}
.wrapper .form .inputfield .input:focus,
.wrapper .form .inputfield .textarea:focus,
.wrapper .form .inputfield .custom_select select:focus{
border: 1px solid #fec107;
}
.wrapper .form .inputfield p{
font-size: 14px;
color: #000;
}
.wrapper .form .inputfield .check{
width: 15px;
height: 15px;
position: relative;
display: block;
cursor: pointer;
}
.wrapper .form .inputfield .check input[type="checkbox"]{
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.wrapper .form .inputfield .check .checkmark{
width: 15px;
height: 15px;
border: 1px solid #f92549;
display: block;
position: relative;
}
.wrapper .form .inputfield .check .checkmark:before{
content: "";
position: absolute;
top: 1px;
left: 2px;
width: 5px;
height: 2px;
border: 2px solid;
border-color: transparent transparent #fff #fff;
transform: rotate(-45deg);
display: none;
}
.wrapper .form .inputfield .check input[type="checkbox"]:checked ~ .checkmark{
background: #0acc54;
}
.wrapper .form .inputfield .check input[type="checkbox"]:checked ~ .checkmark:before{
display: block;
}
.wrapper .form .inputfield .btn{
width: 100%;
padding: 8px 10px;
font-size: 18px;
border: 0px;
background: #f92549;
color: #000;
cursor: pointer;
border-radius: 3px;
outline: none;
}
.wrapper .form .inputfield .btn:hover{
background: #0acc54;
}
.wrapper .form .inputfield:last-child{
margin-bottom: 0;
}
@media (max-width:420px) {
.wrapper .form .inputfield{
flex-direction: column;
align-items: flex-start;
}
.wrapper .form .inputfield label{
margin-bottom: 5px;
}
.wrapper .form .inputfield.terms{
flex-direction: row;
}
}
OUTPUT SCREEN
Posts
37 Comments
Wonderful work with HTML
ReplyDeleteWonderful work
ReplyDeleteBeautiful
ReplyDeleteAwesome
ReplyDeleteVery Interesting
ReplyDeleteNice Creation
ReplyDeletePerfect
ReplyDeleteWonderful
ReplyDeleteFantastic
ReplyDeleteExcellent
ReplyDeletePerfect Work
ReplyDeleteExcellent
ReplyDeleteBrilliant
ReplyDeleteExcellent Quality
ReplyDeletePerfect
ReplyDeletePerfect
ReplyDeleteWonderful
ReplyDeleteWonderful
ReplyDeleteWonderful
ReplyDeleteAwesome
ReplyDeleteAwesome
ReplyDeleteFantastic
ReplyDeleteInteresting
ReplyDeleteInteresting
ReplyDeleteSuperb
ReplyDeleteSuperb
ReplyDeleteFabulous
ReplyDeleteFabulous
ReplyDeleteFabulous
ReplyDeleteBrilliant
ReplyDeleteBrilliant
ReplyDeleteAmazing
ReplyDeleteExcellent & Wonderful
ReplyDeleteExcellent & Wonderful
ReplyDeleteExcellent & Wonderful
ReplyDeleteSuperb
ReplyDeleteWonderful
ReplyDelete