Landing page tutorial — Grid-based footer (Part 8 of 12)


Footer– research shows that the word has
no real meaning. Some etymologists believe it’s because a
footer like a foot is at the bottom of the body. So we’ll build a simple three column footer
in grid. Before we started recording we already added
a section, but let’s start by cleaning house. Let’s rename Brand Section to Section since
that makes more sense. We’ve been using it everywhere, and this is
the section we added. We’re going to apply that new section class,
or that renamed section class, and we have the padding automatically inherited. We’re going to use a combo class, we’ll
call it Footer, and this will let us make some changes like background color. We’ll change the background color for the
footer to a dark color like dark grey, and once we’ve made that selection we can start
building our footer. We’ll start with a container. As we know, containers keep everything neatly
bound, towards the center. So that’ll be the basis for this. What will the container contain? Well, it will contain the grid we’re dragging
in right now. Now let go, and we can see we have our two
by two, but what we really need is to add a column and remove one of our rows. That’s the basis for our footer, and we
could leave it like this but it’s blank so let’s not leave it like this, and we’ll
go ahead and rename to organize. We’ll call it Footer Grid, and now let’s
steal. We’re going to copy our air pockets logo,
and we can do this by clicking and dragging, holding down option or alt and letting go
inside of the first cell. Now we have a copy. For our next column, we are going to use a
div block to contain our contents. So we’ll drag the div block into that second
column. We used a wrapper before, so we can use that
same class we’ll just call it Wrapper, just naming things to keep them organized. And we’ll option or alt drag to create a
copy. Now both cells have a wrapper inside. Let’s populate with content. We’ll start with labels, and we’ll use
headings as these labels. So we’ll drag this one and make it an H2
and double-click to edit the text inside. This will be About. And we can use this again, so we’ll create
a class, call it Footer Heading. And we can make some changes to the typography. So first let’s decrease that font size,
something like twenty looks pretty good. Same with the line height, let’s make an
adjustment there. And we can remove some of that top margin,
we can see it’s not aligned on the top, so let’s remove that top margin, making
it about 5 pixels. Let’s go in and drag our next element inside. This will be a paragraph, featuring of course
some highly descriptive lorem ipsum, which we can eliminate, at least partially eliminate. Now, for our next heading we could go to the
ad panel and drag another heading in, but we’ll save some time and option or alt drag
our about text so that the styling is copied along with it, and we’ll rename that Contact. We can do the same thing with the paragraph,
option or alt drag that paragraph underneath contact. Let go. We’ll double-click to edit and paste in
some of the content we’ve copied to our clipboard. That looks pretty good. Let’s copy that heading again, moving it
into the third column. Let’s change that text to get the app and
we’ll reuse the buttons we made above. We can copy the app store button by option
or alt dragging, or it might be quicker to just copy and paste. Select Google play store, copy, click this
one and paste, paste is right under. Now on our wrapper we can use flexbox. Of course we want everything to stack vertically,
so let’s switch our flex layout to vertical and everything looks great. All the other wrappers look fine, and because
we have aligned stretch on, the buttons are full width. So let’s select this store button, add a
little bit of margin to the bottom, give it some breathing room, check our hero section
to make sure those buttons still look good, they do. And lastly, let’s tweak our headings. Let’s change the color and the weight. For the color, let’s brighten it up a little
bit. That looks pretty good. And we’ll go in and adjust the font weight. We’ll make it normal. That’s it right now for the footer. Let’s keep going because in the next video
we’ll quickly make some adjustments to make sure it looks great on all devices.

Add a Comment

Your email address will not be published. Required fields are marked *