We've built out a solid homepage. We built up portfolio pages and now we'll do the last of our main pages, our contact page. Now, why are we doing this? We want to make it exceedingly simple for someone to reach out and get in touch. We have the contact form on the homepage. We have it on the project pages, but anytime someone clicks in the navbar, we want to take them to this page. It'll be the same form, but on its own static page. And we'll set it up with two things. The hero section, which includes the form and we'll add our navbar and our footer, but we'll use this to demonstrate how to make the footer stick to the bottom of shorter pages like this.
Let's start with the hero section and before we go anywhere, always make sure you're starting your design from the base breakpoint. If you're in one of the larger breakpoints or one of the smaller breakpoints, and you start styling, adding elements and styling, remember, things start at the base breakpoint and they cascade down towards smaller devices and upwards towards larger devices. So we're in our base breakpoint. Let's go ahead and create that contact page. We'll go to pages, add a new page. We'll call this contact.
And our hero section is going to have two elements. There's going to be a heading and then the contact form itself. Let's add our heading. But first of course, we'll add our section element. Section class. Let's add a container, Command K for quick find, container. Let's add our class, Command enter, type in container, press enter, and let's add a heading, Command K, heading. And we can use any text we want, we can always change this later. Let's say I'd love to hear from you! That's one element down, let's add the contact form. Hit escape to de-select, Command K, contact form. Grab that Symbol.
Now, let's configure the styling for our heading. We have some existing heading styles we can use as a starting point, but we'll do something a little more custom here to match [inaudible 00:02:00]'s design. Let's duplicate and say larger heading. And we'll change that accordingly. Let's make the size something closer to 48. That looks good. Change the line height one hyphen. And right now it's maxed at 450 from the homepage. Let's remove that. Let's reset that maximum width. That looks pretty good. If we check our design in Figma, we're using a specific color here. Let's change that color to CBB8FF, which rhymes with nothing at all, and we'll press return. And the color has been applied. Let's add that as a secondary brand color, create. That way we can reuse that swatch elsewhere in our project. And that's the hero section.
Let's move on to our navbar and footer. Let's add those two Symbols. So let's go over to our Symbols panel. Let's grab navigation and we'll place it right in the page body, above this section. And we'll go into the Symbols panel one more time and grab our footer. Footer of course not at the top. Let's put it at the bottom outside of the section. And there it is.
Now, something to note with the footer. On this display right here, it looks fine. But if we go to a larger breakpoint, notice how it's not at the bottom of the page. Maybe this is a design preference, but in most cases, we want the footer to stick to the bottom of the page. So how do we do that? Well first, so we can apply this to all our devices, let's go back to the base breakpoint and we'll select our body. And we're going to go into our body, all pages tag, and we're going to use flexbox to solve this. In fact, we're going to make the entire body element flex, which press flexbox. This doesn't look too good. Let's make sure things are stacked vertically and things look the same right now.
In fact, if we click through, we go to the larger breakpoint. It looks the same as it did a moment ago, we can click through all of these. But what we unlocked here is the ability to stick our footer at the bottom. So let's double click to edit our footer, to edit that Symbol. And we'll set one thing top margin. We'll just click into top margin, we'll set the top margin to auto. Now we didn't see any change here, but if you go back to the larger breakpoint, we can see it stuck to the bottom.
And here's how that works. When a parent is set to flex and all its children are stacked, in this case, vertically, adding top margin auto will create automatic space above that element to fill up any available space inside that parent. For the body on this larger display, that means all the dead space that was below is no longer there because the footer has been pushed down. It created automatic margin above the footer. We can even click the edge of the canvas and increase the canvas width to some obscenely high number, and we can see the footer stays at the bottom of the page. Again, back to our base breakpoint, that's looking pretty good.
And that's really it. That's a static contact page. We made our hero section and we added the navbar and footer Symbols. And we made sure that the footer sticks to the bottom of shorter pages.
Up next, we'll very quickly check responsiveness and fluidity on all different breakpoints, and we'll add recapture validation to reduce the amount of spam that our fictional UX designer, named Megan, receives.
Speaking of validation, I get extraordinary validation from people talking about me on Twitchster. I don't mean to brag, but I've had three mentions already in the last 41 months. And I'm hoping to use this platform to increase the size of my following. Also, obligatory mention, #21DayPortfolio.
