Footer
Last updated
Was this helpful?
Last updated
Was this helpful?
We'll use a grid to setup the layout for the footer row and set the background-color/text to dark/white. We now have three columns in the footer row.
There is a logo, followed by a paragraph of text.
Here, we're introducing a new type of HTML element, the form. For this exercise, we're going to do a brief initial introduction to forms, before studying them in greater detail in a later exercise.
The purpose of a form is to collect input from the user. The <form> element is a container that contains <input> elements that receive the user input. There is a wide variety of input types that HTML supports. A few examples include numeric, text, email, password, date, checkbox, and radio button. The type "submit" which is used in the second <input> element in the form below, is used to specify the button that will be used to submit the form.
And here's one more type of CSS selector that we have not yet introduced. It's called an attribute selector, because the bracket notation allows you to select on an element and additionally specify the value of an attribute that must be present for the selection to be a match.
Attribute selectors are a more advanced feature, and there are a lot more options for how they can be used. If you want to learn more about them you can read the MDN Documentation.
This CSS attribute selector is targeting the specific <input> element that has the type attribute set to "email".
You should be starting to recognize the patterns. Everything in this column has been introduced in previous exercises.
The modifications to the footer are similar to those for the article grid, just changing the default number of columns to be one and increasing it to three when the screen width is greater than 600px.
Here's a link to the published version of this site.
