FREELessons:12Length:1.9 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.1 Create the Tours Section Grid

With our headers complete, we can move on to the main content sections of the site. We’ll start by laying out the content of the “Tours” section using CSS Grid.

Our tours are now laid out, but we need to style our link to convert it into a button, and reposition it and the text so they overlay the tour images. We’ll learn how in this lesson.

4.1 Create the Tours Section Grid

Hey, welcome to part four of Figma and HTML. In the last section of the course, we set up the three header portions of our site layer. And in this part of the course, we gonna go ahead and create the main content sections. And there's a few of those, we've got this section that shows off different categories of holiday tours. We've got this area that shows off some best offers and then this area that shows some blog posts. So in this video, we're going to setup this tours section. We're going to begin by creating this header and also setting up a grid to control the layout of these tours. And we're going to be doing that using CSS grid. All right, so first up, let's begin by getting our heading set up. Once we've done this once, that's all we're gonna need to do for our headings because the other headings use a lot of the same styles so we're gonna be able to leverage this first setup. All right, so, in our html here, we're no longer working on header, so we're going to go outside that header element that we set up. And now we're gonna setup a main element to contain each of these new sections that we're going to be adding in. And we're gonna keep using that same design pattern of having an outer div for the section in question and then having another div nested inside that that uses that inner class that we setup earlier. So, our first div, we'll go to tours cuz this is the tours section. Our next div is gonna have that inner class to give us the width control on our inner content. Now I'm gonna set up a heading and it needs to say discover around the world. So we're gonna add in an H1 element and then because those first two words are bold, we're also gonna add a strong element. In between those tags, we're gonna put discover, around, and then outside the tags, but still inside the H1 element, the world. And the other thing we need to account for is that there's a line break after the bold text. So in here, we're going to put br for a line break tag. So this is what we've got so far. We've got our heading showing up. We can't see what we're working with very well so let's put a minimum height on this section to make it a bit easier to style everything up. So in our CSS, let's add in the tours class that we just created, and it will give it a minimum height of, let's say 20rem. All right, so now that gives us a bit more space to work with. Let's go ahead and style up this header. And because we're gonna be using this same heading style in our other three sections as well, we don't want to use a class that only targets this section. But we're using that in a class in all of our sections so what we gonna do is we 'regonna target any H1 element that is a child of the class inner. So to help keep things organized, gonna go up to where we have our inner class. And then underneath that is where we're gonna target the inner class where it has a child that is an an H1 element. Now, if we look at our text here, what we wanna do is make the default heading text styled like the world text down here. Because these words up here have strong tags applied to them that we're going to target to apply this styling. So, on this text, we've got a font weight of light, a font size of 48, and a slight gray color that we defined earlier as text color three. We also know that we want to center this text and that we need to have some space below it. So with this selected, I'm gonna hold down Alt, and then click this content below that shows us that we need to have 90 pixels of space below our header. So that tells us everything that we need to write our current css. So that font size in rms translates to three rm. We want our text to be aligned center. We only want a margin at the bottom of our heading, but we can't just use the margin bottom property because by default, a heading has other margins applied to it as well. So we're going to set our bottom margin and zero at the other margins at the same time. So we'll just use the regular margin property then we're gonna set the top margin to zero, right margin to zero, the bottom margin in rms is gonna be 5.625 rem, and then the left margin is also gonna be zero. We want our font weight to be light. So that means a weight of 300. And for our color, we're going to be using the text color three variable that we set up earlier. So add in that variable, Now we'll check out our preview. All right, so that's a good start. This text is all looking exactly that needs to, but we still need to style this text and we need to create some space above it. So we need to create another style this time that's also going to target the inner H1 element but we're looking for the strong tags inside there. And for this color, we're looking for this sort of dark charcoal color. And earlier, we defined that with the variable text color too. So let's add that in. Text color 2, and we want to set the font weight to bold. Font weight and so that is a weight of 700. All right, so now that heading is all looking right, and the only thing we need to do is add some space around the top. And rather than applying the space to the heading, we're actually gonna apply it to the container div itself, because it's going to be a lot of cases where we want to add some padding to the inside of one of these inner divs. So to do that, we're actually going to create another class that we can apply whenever we need it. We're gonna call it inner padding. And then we can use this to apply a standard amount of padding to any of our inner classes. And if we do the same thing again, we have our heading selected and then hover to see how much space needs to be filled in between the two. We can see that needs to be 107 pixels and for convenience, we'll round that off to 110 pixels. So we're gonna create inner padding. Actually, let's just copy this over. We want this to affect the top and bottom padding of the element that we're applying it to, and in rems, 110 pixels is 6.875 rem. And we don't need any padding on the left and right side, so we'll set the second number to 0. All right, so now we've got our heading in here with a nice amount of space above, and as we start to add in our content, you'll see there will be the right amount of space below as well. Next up, we're gonna start adding in these tour categories. So as you can see, each category of tour has an image. It has some overlay information. And the way that we're gonna do this is we're gonna set up a CSS grid. Both of these categories are going to be good cells and we're going to use CSS grids ability to have a cell span multiple columns to set this first cell to be two columns wide. To get started on that, we're going to need to set up our HTML. So below our heading, we're first gonna need to set up a div that we can target to be the grid container. So we're gonna give it the class name tour_categories. This will be the container of our grid, so then any child element of this tour_categories div is gonna be a cell, automatically. And because we're gonna need to target the first cell individually, we're gonna give it a class name of roam. That's the image that's in that first category. So we'll set that class up. Roam inside that class, we're going to need an image. And digging into our images folder, we want roam.jpg. And we'll just give that an alt value of roam tours. Now we're also gonna need another div that's going to contain this content here. So we're gonna be able to position this content over the top of our image in just a bit. So, we'll setup another div here, and we're gonna give it the class name Tour Overlay. Inside that, we're going to need a link that we can turn into this button. So we'll add an A Element, just put a placeholder link in there. We're gonna give it a class name that we can tag it to style this into a button. We already have our first button so we're just gonna call this one Button 2. And then we'll add in the button text which is just gonna say 15 tours. Then we're also gonna need some tour text. So one more div, tour_text. And then we can select our text here, copy as text and add that in. And you'll notice here that there's a line break. We could restrict the width of this overlay div that we just setup but in this case, it's probably easier to put a line break directly into this code. So in here, we're just gonna add a line break element and now that's good to go. Right, now that just gives us this and we need to add in our other four tour categories as well. What you can do to create your other tour categories is just copy this first lot of code that you created, and then just paste it in four times. And then go through and change up the class name to match each one of the image names that we exported from Figma in our previous lesson for each one of those cells. Change up the number of tour in the button text and copy in the text from Figma as well, adding in a line break tag where you need it. And when you've done that, your code is going to look like this. So I've got all five of our cells in there, now we can go ahead and setup the grid code to control this layout. So we're gonna go back down to the end of our style sheet. And we're gonna target the tour_categories div. We're gonna turn that into a grid container just by adding display grid. Now we need to decide how the columns of our grid are going to behave. Our rows can just have an automatic height but we want to set our grid to have three columns. We want those columns to be an equal width. So the way we can do that is by adding in grid, template columns. And then we're just gonna put one fraction for the first column, one fraction for the second column and one fraction for the third column. And that's just going to split the grid into three equal fractions. But we dont want to have each of these columns smooshed right up next to the one adjacent to it, we want to have a gap inbetween each of our columns. And we also want to have a gap inbetween our rows as well. If we refer back to our design in Figma, if we select one of these cells, and then once again hold down Alt and hover, you can see that the vertical gap there is 30 pixels and the horizontal gap is 30 pixels. So that's the amount of grid-gap we want in both directions for the cells and for the rows. So we're gonna say grid gap. And I'm gonna put the same number in twice so that it'll fix both the row gap and the column gap. And 30 pixels converted to rems is 1.875rem. And I'm just gonna copy and paste that value. And that is the basic grid setup. So you can see here that our grid has started to take effect. You can see that three column grid layout and in fact, I'ill open up the inspector so that we can take a more direct look at it. Just select the grid container which is this one and then in Firefox, you can see this little grid Icon here if we click that. You can see that Firefox is showing us how our grid is laid out. But the problem that we have right now is coming from the fact that this content is too large, so we are going to go ahead next and tell this cell to span two of our columns. The way we do that is by targeting this roam class we applied to our first cell. We wanna control its grid column layout, so we're going to add the property grid column. And now we need to tell it where its grid column should start and finish. We want it to start in the first column. So we put a 1. Then we're gonna add a slash, separate that first number from the definition of how many columns should be spanned. We want this to span two columns. So it starts in the first column and spans two columns. And now there we go, our grid layout is all looking just right, just how we want it. And we've got the right amount of space inbetween our columns and our rows. So that grid layout is now all good to go. The only thing we have left to do is to style this overlay text here. And what we wanna do is get that tour overlay class that we set up earlier, absolutely positioned on top of this image. And then inside that, we're gonna use Flexbox again to push this button and text content down into the bottom-left corner. Start that process, we first need to get our tour overlay class absolutely positioned. And because we want to absolutely position that tour overlay text, we need to make sure that there's a parent element that has relative positioning, otherwise the absolute positioning won't work. So what we wanna do is target any div that is a direct child of the tour categories class. So let's add that in. So we use a greater than sign, so we want the direct children of the tour categories class. And we're going to then set position to relative. Now that is going to allow our tour_overlay class to be absolutely positioned. So we'll set the position to absolute. And what we wanna actually do with that tour overlay class is have it positioned on top of the image, filling up the entire width and height of the grid cell. And we'd then go and use Flexbox to push the content down in the bottom left corner. So to make it fill up the whole cell, we're gonna set top right bottom and left all to zero. So let me just paste that content in rather than typing it all out. So now if we look, we can see that our tour overlay content is absolutely positioned on top of our image. And if we open up the inspector and look at the tour overlay element, we can see that yes, it is filling up that whole grid cell. Now let's position the content using Flexbox. So we'll set display to flex. And normally, Flexbox items align themselves from left to right, but we're trying to position something vertically, so we want it to position from top to bottom. To do that, we're going to change the flex direction to column. Now, we're going to set justify content to flex end and that's gonna push our content all the way to the bottom of this flex column that we just created. But we still want it to be left aligned so we're gonna say align items, flex start. So now that's pushed our content down in the bottom left corner, just where we want it. But it's too close to the bottom. We need a bit of spacing around the inside here. Once again, if we select one of our items here, hold down Alt and then hover, we can see that we want 30 pixels of spacing. So we're gonna add some padding around the inside of our tour overlay section, and that amount in rems is going to be 1.875. And now that layout is just right. So the only thing left for us to do is to style up this button and this text. So let's select our button. We want the actual blue rectangle. So that's named Hover in this case. Then we'll go into our code and let's grab the border radius and the buckshadow code, it'll make life easier for us if we just copy and paste that part. We're targeting the button_two class that we created earlier, so a, button_two. Paste in the code that we just brought in from Figma. And if you recall from our page menu, we had the same colors applied to our page menu active link, so we can just copy tis background and color code. Add that in there. Now let's take a look at the text. We've got a font weight of 500 and a font size of 14 pixels. So add that in. Font weight, 500. And a font size In rims of 0.875. We're going to need some space around the inside of our button so let's just zoom in so we can see it a bit more clearly. It says both 10 and 12, but let's just go with 10. So in rim values, that's 0.65 rim. We're also going to need some space below. That's 15 pixels but that's near enough to 16 so we're gonna call that one rem. So the margin bottom can be set tp 1 rem. And then just as we had to with our previous button, to make all this take fit, we're gonna need to set the display on this button to inline block. All right, so there's our button looking good. The only thing left now is to style this text. And checking this out, we've got a font size of 20 pixels and a font weight of bold, which is 700. So let's target our tour text, Set the font size 1.25 rem, font weight To 700, and the font color was white. So that's this variable here. Set up our color. Set it to be a variable and add in our variable name. All right, and now that portion of our site is good to go. We're not going to worry about including the link, that's enough for what we want to do for this portion of the site. So it's the first of our three main content areas, all done and ready to go. In the next video, we're gonna be creating this Best Offers section. We're gonna take advantage of CSS grid again to do this layout. And we're also gonna see how you can automatically apply alternate styling on each of these rows. So we're gonna do that in the next lesson, I'll see you there.

Back to the top