00:00 All right let's dive in. So we have this long comment here telling us about the two wrapping div and I will place these divs after the comments so here and just as a reminder the first div is the overall container and then the layout container that contains both the main sections of our design.

00:18 I'll just create two nested divs first and then we'll go about styling them. So div, div and I'll move the closing divs at the end here after the ul. All right so going back to the top the first div is a full page container that needs to have a minimum the full screen height, center the children

00:37 and then handle horizontal and vertical padding according to Figma. So let's look at the container here and you can see the horizontal padding is 16 which in Tailwind divided by 4 translates to level and the vertical padding is 64 so this is quick math level 16 and Tailwind is going to make you

00:57 very good at tables of four and it's a good thing. So I'll just start with this here class name on the first div and go px 4 16 pixels as you can see at the bottom and py 16 which will take us to

01:12 64 pixels and you can see that spacing that has been created around our entire page at the top and the bottom. Next we want to center our content vertically and horizontally and so we can set it

01:26 as a grid and then say place items center to center it vertically and horizontally with one class. It's sort of hard to tell what's happening here but if I turn the grid lines in the dev tools

01:39 you'll see that we have this grid which currently only has one single child which is this nested div and so the centering is not very clear but believe me it's happening. So we've taken care of the full page container we still need to make sure it has the minimum full screen height

01:58 and so that makes it a little bit hard to tell with all the images that are taking more than the full screen so what I can do here is for a second comment out this logo list and we'll just have one li that says hello just so we can see that currently the grid will not use at least the full height of the screen but only the space that it needs. I can go back to the parent grid

02:18 here and add minimum height of screen for 100% viewport height and you can see that now it will take the amount that it needs including the padding horizontal and vertical. A quick note here

02:32 we use the VH unit and you may have heard about the new dynamic viewport units that take care of the possible chrome ui like the address bar or a button tab. Let me show you the Tailwind

02:45 documentation actually. Tailwind CSS if I search for dvh here there is a very good example of this dynamic viewport height so hdvh will use 100% dvh instead of just vh and you can see that here it's

03:01 aware that the top of the ui is covered by the address bar but as we scroll it will fill up more of the space once it can. You have the minimum and maximum viewport height so large viewport height which is always the full height so if there is a bit of the ui taken by the address

03:20 bar it's going to overflow below because it's always the full height and then the minimum or the small viewport height is the opposite. It fills the whole space when the navbar is here but if we scroll it's not going to fill up the entire space and I thought I'd show you these examples

03:37 from the Tailwind docs because they're really good at showing the difference. So most of the time this is the ideal use case we don't really need it here but if you wanted to refactor this min-h screen which is vh you could use instead min-h dvh which will do the same but using these

03:55 dynamic viewport height units and if I close the docs here we still have the same. All right so this is our page container the main wrapping div and I believe we have covered everything that we need so we can remove that comment and next we're going to tackle the inner wrapper which is going

04:13 to be a common parent to both the sections. You could use flexbox here but I think for such a nice predictable layout structure css grid is great and it's also going to be really good at switching to a two column layout when we add a second column to our grid. So I will make this child parent maybe

04:32 I can add a little comment layout container it's also going to be a grid and so now you can see the nested grid inside and we want this grid to have this gap at the mobile design of 48 pixels between

04:46 the two sections. So here 48 is going to be level 12 12 times for 48 intelwind. So let's go with gap 12 you can see 48 pixels and now there's an obvious problem instead of creating a gap between

05:02 the content and the unordered list we've created a gap between each element inside the content section. This is what this comment is here for we want all of this to be a common child and to do so

05:16 we can wrap these elements together inside a div like so. So now our inner layout grid has one row for the content section and one row for the logo list and it's a good time to bring back the images

05:30 instead of this hello here. So let's get rid of that and uncomment our list here and things are starting to look pretty good. I can get rid of the comment here since we've done our content wrapper

05:43 and so we have our layout grid that contains now two children cells the content and the logo list we have a gap of 12 but we haven't centered the children so once again we can go with place items

05:57 center and now it's going to try center the grid contents vertically and horizontally. Let's get rid of this comment and you know what we had this fragment originally because we did not have a common parent element but now that we have the wrapping div we can get rid of the fragment

06:13 and with that we are good with our structural layout and in the next sections we can go about styling the content section and the logo list here. Good job let's keep going.