Build Your First: HTML & CSS

Loading the player…


If you look at the finished layout.

Planning and creating HTML elements for footer area:

Scroll right to the bottom of the page, we’ll come to the footer. And inside, we broke them up to a range of different classes. We’ll be looking at footer info and then we’ll be looking at footer info UL. We’ll spend a lot of time on the elements inside there. We’re also going to look at footer logo. And then finally, at footer copyright. And of course, we’re going to be doing them at narrow screen first and then at wide screen. Let’s get into it. As before, we’re going to copy our footer information this time. We’re going to grab right through to that container and we’re going to paste it from our finished file into our start file. And the reason is as before, we don’t want to spend hours typing in bits of text. Now all of this stuff is already here. We’ve added in a class of footer__info and then logo. We’ve added in some lists and another list here. And we’ve got footer__cta for call to action. Let’s go and start it.

Styling footer area:

Open up our modules.css and go down to our footer area. The first thing we need to do is to style the footer info bar and we’re going to to set it to a color of 777 and then we need to start a URL. Next up, the footer and visiting links. So we’re setting our footer a:link and visited to the same color as our text and text-decoration: none. Now we actually want to set the a elements when they’re in focus over an active to show people what’s going on. We’re going to put a bit of border bottom underneath. So we’re going to style them with. Focus, hover and active and we’re going to set them with a border. And we’re setting them with 0.15 solid. So, it’ll be the same color as the text, because we haven’t defined a color. And now we need to style each of these ones out individually. I’m going to set that with a color white. Next up,we’re going to start on the footer logo with some margin on the bottom. And the footer copyright. We also, want to start the footer__copyright li. I’m going to set this to display: inline-block and margin. I put a margin on the right of each of those elements. And the last thing we need to do is set a media query.

Creating footer styles for wide screens:

As usual, we’re sitting at 2:30 a.m. And we’re just going to start footer_cta and we’re just going to set that to text-align: right, just at wide screen. Let’s go have a look in a browser. If we reload and go down the page and there we have our footer. Now we have a look at small screen, you’ll see it’s working okay.