My 1 Project completed a Form
HTML FILE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="myfile.css">
</head>
<body>
<div class="form">
<h1 class="head">Application For Permission To Date My Daughter</h1>
<div class="note">
<p><b>Note:</b>Form is to be completed at least 21 days prior to date</p>
</div>
<div class="first">
<div class="personal">
<h2>Personal Details</h2>
<label for="">Name: </label>
<input type="text" name="" id="" placeholder="Enter Name">
</div>
<div class="personal">
<label for="">Address: </label>
<input type="text" name="" id="" placeholder="Enter Address">
</div>
<div class="personal">
<label for="">Email: </label>
<input type="email" name="" id="" placeholder="Enter Email">
</div>
<div class="personal">
<label for="">Phone Number: </label>
<input type="number" name="" id="" placeholder="Enter Phone Number">
</div>
<div class="personal">
<label for="">IQ: </label>
<input type="number" name="" id="" placeholder="Your IQ">
</div>
<div class="personal">
<p>Gender</p>
<input type="radio" name="Gender" value="male" id="male">
<label for="male">Male: </label><br>
<input type="radio" name="Gender" value="female" id="female">
<label for="female">Female: </label><br>
<input type="radio" name="Gender" value="other" id="other">
<label for="other">Other: </label><br>
</div>
<div class="personal">
<label for="">Date of Proposed Outing: </label>
<input type="date" name="" id="">
</div>
</div>
<div class="second">
<div class="check">
<p>Check All That Apply</p>
<input type="checkbox" name="" id="">
<label for=""> I have tattoos and/or piercings</label><br>
<input type="checkbox" name="" id="">
<label for="">I am more than 2 years older than my daughter</label><br>
<input type="checkbox" name="" id="">
<label for="">I own a panel van or V8 ute</label><br>
<input type="checkbox" name="" id="">
<label for="">I work full-time</label><br>
<input type="checkbox" name="" id="">
<label for="">My parents are rich</label><br>
<input type="checkbox" name="" id="">
<label for="">Is the date at a well lit public location</label><br>
</div>
</div>
<div class="third">
<div class="menu">
<p>Political Persuasion:</p>
<select name="" id="">
<option value="left wing">left wing</option>
<option value="right wing">right wing</option>
<option value="Conservative">Conservative</option>
<option value="Nazi">Nazi</option>
</select>
<p>Education Level Completed: </p>
<select name="" id="">
<option value="University">University</option>
<option value="College">College</option>
<option value="High School">High School</option>
<option value="None">None</option>
</select>
</div>
</div>
<div class="fourth">
<div class="section">
<h2>
Essay Section
</h2>
<p>In 50 words or more explain why you want to date my daughter</p>
<textarea name="" id="" cols="40" rows="5" placeholder="Enter Text here"></textarea>
<p>Please upload contact details for 2 references</p>
<textarea name="" id="" cols="40" rows="5" placeholder="Enter Text here"></textarea>
<p>Upload Police Clearance Certificate, Bank Statement and Medical Certifiates here: <input type="file" name="Upload" id=""></p>
</div>
</div>
<div class="button">
<button>Send Your Application</button>
</div>
</div>
</body>
</html>
CSS FILE
.form {
margin: 5% 10%;
border-width: 1px;
border-color: rgb(39, 13, 13);
border-style: solid;
border-radius: 2%;
}
.head {
text-align: center;
}
.note {
margin: 3%;
}
.first {
margin: 3%;
border-width: 1px;
border-color: cadetblue;
border-style: solid;
}
.personal {
padding: 15px;
}
.second {
margin: 3%;
border-width: 1px;
border-color: cadetblue;
border-style: solid;
}
.check {
padding: 15px;
}
.third {
margin: 3%;
border-width: 1px;
border-color: cadetblue;
border-style: solid;
}
.menu {
margin: 15px;
}
.fourth {
margin: 3%;
border-width: 1px;
border-color: cadetblue;
border-style: solid;
}
.section {
margin: 15px;
}
.button {
text-align: center;
padding-bottom: 3%;
}
button {
font-size: 20px;
color: white;
background-color: green;
border-spacing: 5px;
}
Comments
Post a Comment