Building a Modern Website: Part 2

This is the third of a 3-post series on building a modern website (if you don’t understand the post title, this may help you: the series started with Part 0. Lua developers are excused for not getting the significance.). The demo website is a fictional sailing club’s homepage. This post will go over the footer and finishing touches. This is what the site looked like at the end of the last post:

See the Pen GJEWMR by flyingfisch (@flyingfisch) on CodePen.

Footer

Before we get to the CSS, let’s stick a little markup in the footer like so:

<footer>
    &copy; 2015 R. S. Sailing Club
</footer>

OK, with that out of the way we can start styling. Let’s start by giving it a background color (remember that we set variables for the color values at the top of the stylesheet):

footer {
    background-color: $light-secondary;
}

Now let’s throw some padding on it:

padding: 2em;

And then make the font a little larger and centered:

font-size: 1.2em;
text-align: center;

That’s it for the footer, now let’s do some quick mobile optimizations and wrap this project up.

Mobile

The first thing we can do is make the navigation go below the logo on mobile.

header {
    @media (max-width: 630px) {
        nav {
            display: block;
        }
    }
}

Next let’s make the feature section come all the way to the edges of the screen.

article {
    .feature {
        padding: 0;
    }
}

That’s it!

Going Forward

That finishes this tutorial series, but there is still plenty left to do. For instance, we haven’t covered image styling or captions, and the footer is pretty empty. Maybe a background image behind the feature section would be a good idea, it’s up to you.

See the Pen yNzQwd by flyingfisch (@flyingfisch) on CodePen.

Feel free to fork the pen and make it your own!