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

4.2 Create the Best Offers Section

In the “Best Offers” section, we’ll be taking advantage of CSS Grid again, and while we’re at it we’ll see how to alternately style each row in our section.

4.2 Create the Best Offers Section

Hey, welcome back to Figma to HTML. In this lesson gonna I'm gonna create the second of our main content areas and that is this Best Offers portion of the design. We're gonna start by just setting up the div itself and creating this area with the headings and the button.Then we'll move on to using CSS Grid to create this area of the content. All right. So, adding in another area inside our main element. We're gonna take the same approach again, we'll create an additive, we'll call this one best offers, or give it the class best offers rather. And we need an inner dev, and we are gonna use the same padding as we did our previous section. So, we're gonna add in that In a padding class as well, and we are going to use this same method of creating a heading. But we need to be able to left align this heading to make space for the button that's gonna appear on the right. So, I'm going to need a wrapper for the heading in the button elements. So, create a dev and we're gonna give it the class best offers title, in here we're gonna do the same type of approach that we did with our last heading. Set up an h1 element with strong tags inside it. And we're gonna say, best is the first word and then outside the strong tags, offers. On the right, we're gonna be creating this button, so let's just grab the text content for it. And we've already created a button style, that pink button style that we used in the hero unit. So to make up that button, all we need to do is add an, a element, just put a placeholder link in there, give it the class button, just like with our first button. And just paste in the text that we got from Figma. And once again, so that we can see what we're doing, we're going to add a minimum height to this section. Let's just actually remove the minimum height from the tools, we don't need that any more, and we're going to apply it to the best offers class instead. And if we scroll down, we've got our Best Offers heading looking right and we've got our button looking right. Now we just need to get them aligning properly. And we also need to give this portion of the site the right background color and needs to have that darker, soft blue grey color. So first up, let's add that background color in, say background color. We're gonna use one of our previously defined variables and the one that we want is background color two. At the moment if we go back up we're using this card to send all of our headings to be aligned at the center. But we wanna make an exemption for this particular heading, so what were gonna do, is say best offers and then target the same type of heading. So whenever an h1 element that's inside an inner class that's also inside of best offers class is used, we set the text alignment to the left. So let's put that on the left. Now we need to get both of these on the same row, and we're gonna do that by targeting our best offers title class that we created a moment ago, and we're gonna use Flexbox again. So we're gonna set the display to Flex, we're gonna use the same technique that we used to position the elements in our main header, so we're going to use justify content and we're gonna set it to space between. It's going to maximize the space between these items which will push them both out to the far end. So that's taken care of pushing these items out to the left and right side. But this item is also taking up the full height of this area of the design. We don't want that. So we can overcome this issue by setting align items to flex start. And that's gonna tell both the heading and the button to put themselves at the top of this div. So there we go, that solve that. And there's just one more thing to do for this part of the site and that is to add a bit of margin below the heading. If we don't add the margin below that heading, then when we add in the rest of the content below this section, it's gonna be flash right against the bottom of the heading. So we're gonna go back up to the custom h1, that we set up just a moment ago, which is here. And we're gonna set all the margins to zero except for the bottom margin. So we're gonna say top zero, right zero and the bottom margin is gonna be five rem and the left will be zero. All right so now we ready to go with adding in the rows of best offers. So we are gonna use these as grid for this, but unfortunately, we can't just create each one of these rows as a row in our grid. The reason for that is we need to be able to target this entire row to apply a different background to it. And at the moment, there's no way to do this if we just have one single grid for this whole portion of the layout. So what we're gonna do is create each of these rows separately. And we use CSS Grid just to control the columns that are laid out inside each of these rows. So back inside our div here, we're gonna create a class and we're gonna call it best offers table. Strictly speaking, this isn't a table. But we're gonna make it work like a table, so it's just gonna help us to remember what's going on here. And then for our first row, we're gonna create the class best offers row. Inside each of these rows we've got six columns, one, two, three, four, five, six, so we're gonna need six elements inside this row that are gonna be converted into grid cells. And for that we're just gonna use empty divs. We don't need to have any class applied to these, they just need to be a distinct element. So you can add in an empty div six times. The first of these elements is gonna hold the image thumbnail that we exported earlier. So that first row has the Paris thumbnail in it. So we're gonna look for thumb_Paris. Set the all tag to Paris tour. And then for each of the subsequent divs, we have a piece of bold text and a piece of light text and each of them needs to be on their on row, so we gonna have another two divs inside. The first one with strong tags in it and the text from the first one and then the second div will just have the regular text put into it. So to say if you're watching me, type all of that out, when you're done, you should have discard, so we've got our first row here with our thumb and with each of the colons with the strong and regular text. And then the same thing is just repeated for the second row and for the third row. All right now let's go ahead and style up each of these offer row class instances into a grid. So back down at the end of our style sheet, I'm gonna tag it best offer row. And just like we had before, we're gonna set the display to grid. We're gonna setup how we're controlling the grid template columns. And this time, just like how before we wanted three equal fractions. This time we want six equal fractions and we could write at 1fr six times. But since we're just repeating 1 fr six times, what we're going to do instead, is say repeat, and then we're gonna say we wanna repeat something to six times. And the thing we want to repeat six times is 1fr. So that is equivalent to write again 1 fr six times. So if we look what we've got so far. We've got our rows and our columns are all divided up perfectly, but we need to adjust the alignment a little bit and the coloring of the text. First up, we're gonna need a padding amount of 1.25 rem. And the reason that we're doing that is so that we can create this spacing on the inside of this white row when we add that in. If we just added margin then we wouldn't have this little bit of inner space on that white part. And you can see that we're also going to have to make this image hang over the left side of the row. The way that we're gonna do that is by adding a margin to create this space here on both the left and the right sides of our rows, so that they stay centered. Then, we're gonna apply a negative margin to this image. So it's gonna pull it over to the left. So for now, we'll just put those margins in. So we want both margin on the left side. To be 1.25 rem and also on the right side, and we want the content in each one of our cells to be centered we are gonna say align items center we also need to set our text color and font size so just like we have been before we're gonna to set out font size to 0.875 rem. And the font color being used on the regular text is actually a new color. So let's grab this color, define a new variable, text color. Four. Add that in. Copy that variable name. And set that as the color of our default text here. So now our text has been centered. It's right in the middle of this row and we've got the right styling on the default text. Now, we just need style, the bold text as well. So we're going to target the best offer row and any place that the strong tag is used. Our color is already defined so we're going to set that to text color two. And want the font size to be one rem. All right, so now our text is all looking good, and we are ready to style up this central row here, and make it look different to the others. So, in Figma, let's select this background, so we wanna go in and get the actual shape itself, because that has the box shadow and the border radius applied to it that we want, so it's copy that code and we only want this to apply to every second row. So the way that we gonna do that is to look for the best offer row and then we gonna use nth child. And we're gonna set it to even. So now, that's gonna find every second use of the best offer row. Now, we can add in the border radius and box shadow that we grabbed out of Figma. We're gonna set our background color. We're gonna use variable again. I'm gonna use background color one, so now that has a row here looking correct but we still need to set this imageup so that is hanging off the left side and we gonna do the same thing to all the images so they're all aligned in the same position. So add best offer row image. So we get any image that's inside this class. And we're gonna set the left margin to twice the amount that we set up here but in the negative so it's gonna move itself to the left by 2.5 rem, all right. So now that's got that hang over that we wanted And the only thing missing at this point is the shadow that needs to apply to this image. In the Figma design, there's sort of a blur also applied to the image itself. I'm gonna elect to leave that out. That's actually sort of an artefact that has come up by way of using a shadow applied to this image in Figma, but to directly recreate that we would need to export that image with that blurred shadow in it, and it's probably not worth the extra overhead to add that in, so what we're going to do instead is just copy the regular box shadow code, so we're just gonna grab that and we wanna target the image that appears in every second best offer row. So I'm gonna paste that code in here just to get it out of my case. So I can copy this line. And then add an image selector in as the child element that we want to target. Now, I'll cut that back out again and add that to our new selector. And that has edited in the nice drop shadow to the image. We've only got these three rows in here. But if you would add in more rows than every second one. Would appear with this white background. So that is Best Offer the section all done in the next lesson, we're gonna go through and create this blog section. And that will be the third of the three main content sections will be reusing some of the techniques that have already been using so far, like CSS Grid, and it's child even. And we're gonna go through all of that in the next lesson. I'll see you there.

Back to the top