Please proved the whole typed code (Not photos) following the Requirement, HTML
ID: 3887000 • Letter: P
Question
Please proved the whole typed code (Not photos) following the Requirement, HTML requirement, and css requirement blew, thank you very much.
Requirement:
create a form that asks for a user’s email address, phone number, and date of birth. There should also be a submit button
HTML requirement:
Use the best HTML <input> types
Use additional HTML <input> attributes to present mobile keyboards suited to the input task
Use semantically associated <label> tags
Use some kind of semantic grouping structure in HTML to keep labels and inputs together
css style requirement:
Open with a rich set of reset CSS styles
Include a set of normalization styles for the forms (such as the Form area of Normalize.css)
Use CSS to stylalize the form between a scroll friendly mobile first, and a sectioned desktop version.
Explanation / Answer
index.html :
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>User's Details</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User's Details</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:400,300" rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<form action="index.html" method="post">
<h1>User's Details</h1>
<fieldset>
<label for="mail">Email:</label>
<input type="email" id="mail" name="user_email">
<label for="phoneNo">Phone Number</label>
<input type="phoneNumber" id="phoneNo" name="user_phoneNumber">
<label for="DOB">date of Birth:</label>
<input type="dateofbirth" id="DOB" name="user_dob">
</fieldset>
<button type="submit">Submit</button>
</form>
</body>
</html>
</body>
</html>
Css:
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Nunito', sans-serif;
color: #384047;
}
form {
max-width: 300px;
margin: 10px auto;
padding: 10px 20px;
background: #f4f7f8;
border-radius: 8px;
}
h1 {
margin: 0 0 30px 0;
text-align: center;
}
input[type="email"],
input[type="phoneNumber"],
input[type="dateofbirth"],
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;
}
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;
}
fieldset {
margin-bottom: 30px;
border: none;
}
legend {
font-size: 1.4em;
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%;
}
@media screen and (min-width: 480px) {
form {
max-width: 480px;
}
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.