Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:12Length:1.9 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 Create the Hero Header

The last of our three headers is our “hero” header. We’ll look at loading our background image in and having it fill the space, using Flexbox to control alignment, and adding in our content.

3.3 Create the Hero Header

Hey, welcome back to Figma to HTML. We're about to make the third of the three headers that are comprising our overall header section at the top of our site. We've done the first two top header and our main header. Now we're gonna do this hero unit header. There's not a lot of HTML that we need to use to build out this header so we're gonna go ahead and do that first. While we're here, I'm gonna Ctrl-click this content here. So that I can just get it copied into my cache, ready to put into the HTML. All right, so just like before, we're gonna start by creating an overall div to contain our header section. This one is gonna have the class hero_header. Again, like before, we're gonna have an inner div with the class, inner. And then we're gonna need a container to keep our three pieces of content. The SVG that says summer, the subheadline, and the button at the bottom of the section. To keep them all contained in together. So for that, we're gonna add in a div with the class, hero_content. Now let's load in our content. The first thing that we want to add in is that summer SVG that we exported earlier. So let's just add in an image tag. We'll get VS Code searching inside our images folder. And we'll find summer.svg. And then let's keep that, the alt tag #summer. Because that's what it says, so if the image fails, then somebody would just see the text that it's replacing. Now let's put in that subheadline of text. We're gonna add a class name subheadline. And then that text that we just copied from Figma can be pasted in here. If we just quickly refer back to Figma, we can see that this last part of the text, seaside, islands, etc., is bold. So to handle that we're just gonna add in a pair of strong tags. So let's add that in. Strong, and then we're just gonna copy and paste that closing tag to the end there. And now all we need to add in is this button. So just like we've been doing so far, Ctrl-click to directly select this text, right click, Copy as Text. We're gonna add this in as just a regular link. So we add in that a href with a hash. We're gonna give this the class name, button. And then we'll paste in the display text to go on top of the button. So far that doesn't look like much, but you can see that we've got our SVG text in and our central content. Now let's go ahead and style it up. The first thing that we're gonna do is get this image showing up, filling up this hole, here a unit space. And for that we're also gonna need to set a height on this hero unit for that image to fill up. So if we select the heroimage, we can see that the height is 700 pixels. So let's target our hero_header class And we're gonna add in a height. And that pixel amount converted to rem values is 43.75 rem. Now we wanna load in our heroimage as the background. So we're just gonna set background-image. Set it to a URL, you want that URL to be images/ and then we have our heroimage. And now to make that heroimage fill up that whole space, we want it to cover the whole space. So we're gonna set background-size to cover. And then, finally, while we're still working inside this div, we're gonna set everything inside it to be center aligned on the horizontal axis. And we'll do that with text-align: center. All right, let's take a look. All right, so that's a pretty good start. We've got our height and our image is showing up just how we want it to, but at the moment all this content is sitting up the top. What we want is for it to be right in the middle. So in the same way as in our main header, we added an extra inner class, we're gonna do that here as well. So we're gonna say, hero_header_inner. And we're gonna add that class into our CSS. And once again we're gonna be using flexbox. So we're gonna set display to flex. And now we're gonna center our content in both directions by adding align-items to center. And also justify-content to center as well. All right, so now everything is in the middle in both directions, just how we want. Now all we need to do is style up our text and our button. For the subheadline, you've already seen how to look at Figma and grab all the different attributes of text, color, font size, etc. So I'm gonna start moving a bit faster through the CSS because I don't want you to get too bored. I'm actually just gonna copy and paste in the completed CSS for the subheadline. We're just applying our white color from a background color, one variable. Setting the font size and also setting some spacing at the bottom so that there's a gap in between that subheadline text and the button. All right, so now that's our text looking just how it does in the design. And just as a side note, for production you would probably want to put some type of a background color like a transparent darker blue behind this text to make sure it's got enough contrast. But as we're just doing a direct conversion to code, we're just gonna leave that as it is for now. But just bear that in mind that it is important when you're coding things up to ensure that there is sufficient text contrast with the colors that are involved. Now we are going to bring in the style of this button here. A lot of what we've got applied to this button if we go up into the code tab. And we select this background element here. You can see in the code up the top right, we've got a linear gradient that matches the linear gradient applied to this shape. We've got a box shadow and we have border radius set there, which gives us the rounded corners. So we're gonna copy all of that CSS and that's gonna get us off to a solid start. So we're targeting a elements with the class button. Let's add that in, a.button, and we'll paste in the CSS that came from Figma. The text color is white just like our subheadline, so we can copy and paste in this line of code to set the color. Our text has a font weight of 500. And then to control the spacing, what we're gonna do is set the line-height to match the height of our background image here. So that's 60 pixels. And then to create the spacing on either side of the text, we're gonna use some padding. Because we're gonna set a line-height the same height as the button we won't need any vertical padding. We'll only need horizontal padding. And if we hover we can see that that horizontal padding should be 40 pixels. So the CSS that we need for all that is padding and then we add zero to say that there's no top and bottom padding. And then 2.5rem of padding on the left and right sides to give us that space. Then we're gonna set our line height to 3.75rem. Let's see what we've got so far. Right now that is almost working. You can see that we've got the rounded edges and we've got the linear gradient. But our settings that we added to control the height are not working and that's because by default this is an inline element. It's just a link, so it's just a normal inline element. And to make everything that we've added in take full effect, we need to change it to an inline block element. So let's hit display and we're gonna change that to inline-block. And now, there we have, our fully functional button. So that rounds off the last thing that we needed to do for our hero unit and for our whole header section. So from here we're going to be able to move on to cutting up the main content section. So we've got our area that shows off categories of tours. We've got our Best Offers section, and we've got our blog section. So the next portion of the course is gonna be all about this main content area. And we are gonna start by creating this tours category section. So hook into that in the next video. I'll see you there.

Back to the top