00:00 All right, so I'll start by defining our container with multiple sections here. And so these are the two layout containers that we've created in the previous lesson. And here is the common parent to all our content section over here. Here we can add class names. And like we did before, we could use grid here.

00:19 And let me turn on the grid line, so we see what we're doing. But this time we want to turn on the new grid, this one. And maybe I'll turn off the other ones. And let me refresh the page to have a different color. Yep, I like that one. Fun fact, in Chrome, every time you refresh the page, the grid lines show up with a different color. And we could handle a section like this,

00:36 but you can also use flexbox if you prefer. So I could change this to flex. Obviously, this is going to stack stuff horizontally, but then I can go flex col to make it vertical. Once again, we can turn on some visual helpers from the dev tools for the flex container. And that will work mostly the same. I would myself use grid most of the time.

00:56 I always have that rule that if something has a predictable amount of space it needs to use, I like to use grid. But if I want something to flow and use whatever space it needs, usually I reach for flexbox for something that kind of spreads and then the next element goes after it and uses the space that it needs in a more fluid way.

01:14 Regardless of the approach, flex or grid, what we want to do is now horizontally center our elements. And so here in the flexbox context, we've switched to flex col. So the way to horizontally center things is with align items. So I can go items center, and this should put things in the center.

01:32 Now you can see that the paragraph is actually left aligned, but it's completely normal because our paragraph is actually taking the whole width and then the text inside it is left aligned. If we look at the H1, it's not using the full width, but if that text was much longer, the exact same thing would happen. The element would span across the whole width and then left align.

01:51 So what we need to do to guard against this, and we don't really know the length of the headline or the paragraph. So maybe on the parent element, we want to align the text center. We could do this on the H1 and the P tag, but instead we can do it on the common parent here, text center,

02:08 and this will center the text itself within the element. And so no matter how long it is, it'll look centered. I can remove my gibberish here on the heading, and you can see we are at a nice place. We're going to take another sneak peek into the future and into the bigger screens, just to realize that something happened

02:28 to this content section. It seems to be max width clamped to a width of 448 pixels width. You can see, even when the screen gets larger, we don't have a width going larger than 448. And this kind of makes sense. We don't really want the paragraph tag

02:46 to be super long on one line because it looks kind of weird. And so there's this max width container here to guard it. And we should probably do the same because right now, if I make the screen larger, you can see that the paragraph will go on one line, and if the text was longer, it would keep growing and growing. And so we're going to try to respect

03:05 this max width of 448 pixels, and we can go for a max width on the wrapper here, max width, and you can see the numbers here growing. We have all these options, but we also have small, medium, and what do you know? Medium is 448 pixels exactly.

03:25 I guess the designers have looked at the values in the tailwind theme and kind of tried to play with it. Good job. That makes our job easy. So now if I save this and I go wide, once again, it should stop growing after it reaches this max width MD, which is perfect. And with that, we have style our container. It has a max width.

03:45 It is horizontally centered, so we can get rid of all of that. And now we can focus on the next thing, which is the typography and spacing between elements. When you think about spacing in the context of flex or grid, your mind might instantly go to the gap property, which is super useful. But here, look at what happens.

04:04 The spacing or the gap between the first two elements and the next two is not the same. We have 24 pixels between the logo and the heading, and then 16 pixels only between here and there. So we could have a gap of 16 and then add a margin top to compose with the gap, but I think it's a little bit messy.

04:23 And honestly, if the values are different between each element and we don't have more than once the same, I think we can handle the spacing internally. So we can apply some padding or margin to the elements themselves, and that's what we're gonna do. I will leave the first element intact, and then I will add a margin top of 24 pixels,

04:41 which is a level of six in tailwind. And then here to have 16, we'll have empty four on the paragraph. So on the H1, class name equals empty six, which is 24 pixels. And then on the paragraph tag, class name equals empty dash four.

05:00 And now we have the correct amount of spacing applied via a margin, which is great. So the last thing we need to worry about is the font size, font weight, font color, et cetera, and we should be good to go. And just to make sure, the logo here is set to size 20,

05:18 which is 80 pixel by 80 pixel. So let's just quickly verify that that's the case. And yep, 80 by 80 is what we want here, so we're good. So the font size, let me make sure that I am actually in the mobile version, I am. So here the font size is 36 pixels, line height 40,

05:36 and the font weight is 500. So 36 pixels. After my margin here, I'll go text, and let's go to the sizes. So base is 16 pixels, LG is 18, we gotta go to 36. And look at this, text for Excel is 36 pixels and 40 pixels line height, exactly like we want.

05:56 And then we can change the font weight with font, and you can see a thin, extra light, and we want 500, which is font medium light. So in terms of colors, I believe this is black and highlights, so we should be good to go. Yep, black and highlights. And so next for the paragraph at the mobile screen,

06:14 it looks like the font size is the base size, 16 pixels by 24 line height, which is also Tailwind's default. The font weight is 400, which is also the default, but we need to change the color. So the link itself is black, but then the text has that custom color here, which is the light gray.

06:34 And if you remember from defining colors, it is actually mapped to Tailwind's slate 600. You can see the matching hex numbers here. So we can essentially set our text color to slate 600, and then the anchor tag inside of it should be black. And we also, while we're there,

06:54 make sure that it's underlined. All right, let me remove these comments that are confusing more than anything at this point. We know what we're trying to do. Just this one, apply the correct text color. Don't worry about the hover state for now. So we will do the hover style of the link later. So we'll just make it look like it should on idle state when it's not being interacted with.

07:13 So the text color will be text slate, remember 600, but then inside of it, the anchor tag will have a text of black. And finally, we want also this link to be underlined. And this brings us in a really good place. Our content section in the design and our content section in the code

07:32 are looking very, very similar. This gives me a lot of confidence that if we happen to do a screenshot test where we overlay the Figma design over a browser rendering, we should have a perfect match. And with that, we can move to the next step, which is styling the list item, the logo tiles here.