We’ll start with some boilerplate again, this time with some properly outlined headers. (And we’ll add some semantic tags to this.)
Here’s a link to a logo we can use, and a few background images. One for the body, and a couple of others to play with: a gps icon and a solid grey bar.
We’ll use these to create a 2- and 3-column layout (using floats)
And we’re going to need the clearfix for sure. Here’s that code again:
.clearfix::after { content: ""; clear: both; display: table;}
Then we’ll create a navigation, using an unordered list. This will require that we reset how an unordered list, but only in our navigation bar.
We’ll use this code as a starting point:
nav ul {
list-style-type: none;
margin: 0;
padding: 0px 0px 0px 290px;
overflow: hidden;
background-color: #FCF;}
nav li {
float: left;}
nav li a {
display: block;
color: #444;
text-align: center;
padding: 14px 16px;
text-decoration: none;}
nav li a:hover {
background-color: red;
color: white;}
In the footer we’ll create a secondary text menu using simple linking styles.
And if we still have some time, I’d like to play around with creating the layout using left floats.
The last thing to tackle — border radius and text shadows. We’ll find the code (and explanations) for these on the LIS 9723 website.
And as always, if you’re unsure of the exact syntax or name of a tag, remember the resources at the W3Schools!