8 of 11
This lesson is closed. Finish the one before it. Do the practice. Pass the assessment. Then this one opens.
Back to the lesson. Three tries are used. Read this again, then try the code.
You finished. The lesson is open again.
Name, email, phone number, and a Send Message button. Style the section with background, border, margin, and padding.
The clay outline is the part this lesson is about.
The contact section is a box with three bars and a button. A bar the person types in is an input. The word next to the bar is a label. Put the input inside the label, so the word and the bar belong together. On a phone, tapping the word then focuses the bar.
type="text" is a normal bar, for the name. type="email" is the email bar. type="tel" is the phone bar. tel means telephone. The button text is Send Message, because that is what the brief calls it. type="submit" means it belongs to the form. This page does not really send an email. There is no server in this assignment. The button only has to be there, styled, with those words.
The section itself needs a background, a border, margin, and padding, same idea as About. Inside it the marker looks for the three facts, name, email, and phone, and for a button that says Send Message.
<section class="contact" id="contact">
<h2>Contact</h2>
<form action="#contact">
<label>Name <input type="text" name="name"></label>
<label>Email <input type="email" name="email"></label>
<label>Phone number <input type="tel" name="phone"></label>
<button type="submit">Send Message</button>
</form>
</section>.contact {
background: #ffffff;
border: 1px solid #e4d9ce;
margin: 20px;
padding: 20px;
}
.contact h2 {
margin-top: 0;
font-size: 28px;
}
.contact label {
display: block;
margin-bottom: 12px;
}
.contact input {
display: block;
width: 100%;
max-width: 420px;
margin-top: 6px;
padding: 10px;
border: 1px solid #e4d9ce;
font: inherit;
font-size: 16px;
}
.contact button {
background: #c0532e;
color: #faf7f2;
border: 0;
padding: 12px 18px;
font: inherit;
}<form action="#contact">The form groups the bars and the button. action="#contact" keeps the person on this page. Nothing is stored.<label>Name <input type="text" name="name"></label>The word Name and the bar are one label. type="text" is a typing bar. name is the bar’s own name, for the form.type="email"An email bar. The phone uses type="tel". Use the type that matches the fact.<button type="submit">Send Message</button>The words on the button are Send Message. type="submit" is the right type inside a form..contact background, border, margin, paddingWhite box, thin line, space outside, space inside. Same four ideas as About. The brief lists them again here, so do them again..contact buttonClay background, paper text, padding so the words have room. A button with no padding is a thin strip and looks unfinished.The next lesson opens after you practice and pass the assessment.
The bars are fine. The button says the wrong words. The brief names the button.
The code is right. Start the assessment when you are ready. The lesson stays closed until both answers are right.
The lesson is closed. Pick one answer each, then mark it. A wrong answer tells you why, what to do, and what to remember.