In this video.
Let's work on the layout.
So we are going to design for mobile first.
So let's go ahead and then reduce the browser size to something like this.
And if you scroll, you can see that everything has been skirted.
So let's get started inside the CSS.
We are going to add a global style to all the images.
So inside the CSS, before we continue the layout, let's come up here for the global CSS and let's
add the property called image.
And for the image you want to have a width of 100%, meaning that it should fit to it container.
So with this one now have a look.
You can see that everything has been fixed inside a container on last grain.
You can see that everything is perfectly fit inside a container.
That is it about that.
So let's go ahead and then work on the layout and so on.
Mobile, this is what we want, but we can add some starting to it to make it more beautiful.
So how are we going to style it?
So after the header here or before the media query, let's add a comment and call this one as the layout.
So first step is less target the flex container, which is this because this container wrapped the main
and then the sidebar.
So let me collapse the sidebar.
Now we have two elements or two children inside the main, so I can control this one by using this flex
on the container.
So back to the CSS, let's see how we are going to add that.
So here we go.
So the container flex, that flex and let's give it display as flex.
And then the maximum weight for that one is going to be 1900 x.
So have a look.
And now this is what we have, but we want them to be on top of each other.
So we're going to use flex direction to column because by default it is row two.
Now this is what we have.
The next step is that we can align everything at the center using this property zero and then the order.
So this one also get the job done.
So now we are done with the parent container.
So let's add a background color to the container as hash tag F even though we have it.
But let's bring it here also.
Okay, good.
So now this is what we have.
Great.
The next step is let's work on the main, which is this one.
And so let's target the main.
So after the container, let's target the main and let's I'm going to do let's give it a pattern of
ten works with this one.
Let's have a look.
You can see that we have some padding around the main.
But for the sidebar, no, but we come back to it, which is this one.
So the next step is that let's add some padding to the post contents.
And this is a post content.
It's supposed to be post here.
So we guys so have to change inside the site here to to post, which is this one.
Okay, good.
So let's target that one too.
So we inside the CSS, let's go ahead and select the post dash content and then let's give it padding
also to be ten, let's save it.
And now let's check it out.
And this is what we have.
The next step is that let's go ahead and then style the post info that is this one.
So inside the CSS, let's get that one done.
Going to be as post dash info.
Give it display flex and then just file contain to be flex start and then align items to be center.
Let's save it.
And now let's check it out.
This is what we have.
Let's have some spacing between this one and that.
Remember, this is the author and this is the date about the post.
So we can target the post dot author.
Posts.
Dash author.
And for this, let's give it a margin of ten parsecs.
So let's have a look.
And indeed, we have some space in between them.
But let's change the colour for this one to let's a grey colour.
So a colour here is going to be as grey colour.
Now this one looks good for my likeness.
So the next step is less tile.
The h one here so we can target the post content and then the h one.
So here we go.
Going to be as dot post content and then we target the h one.
So for this one, let's give it a font size of 2.8 ram and then the font weight to be bold and then
margin button.
To be $20.
And then the color for the H one is going to be hashtag 14213 dx save it.
And now let's have a look.
And this is what we have as compared to the final one.
Great.
So the next step is let's work on the other side, which is this one?
This one.
The side bar.
So let's target that one also.
So here we go.
We bring in the side and let's give it a pattern of ten P6.
Let's see.
And you can see that everything is aligned perfectly on mobile.
So let's work on the about main, which is this one.
So let's go ahead and then select that.
So if you check the structure of the HTML, we have a class called about me and in there we are going
to add some border radius and some padding to it.
So let's get started.
Let's give it a pattern of ten pixels and test align to be center and let's give it some box shadow
around that container.
So here we go.
Box Shadow is going to be our zero P6 one pesos and then one pesos.
The color going to be the RGV zero zero.
And then the opacity is going to be 0.3.
Save it.
And now let's see.
And this is what I'm referring to.
And you can see that we have some box shadow around the container.
Good.
So next step is that let's make the avatar of the author to circle.
So let's see the location of the image of the author inside the HTML.
So for the sidebar, this is the author, right?
So we can target the above me and then the image here, or we can give it a specific class to target
that thing about me and IMG.
We will get the job done also.
So here we go, dot about me and then the IMG and let's give it a weight of 100 pixels and then the
height of $100 and let's give it border radius to be 50 so that it would be a circle.
So save it.
And now let's have a look.
And indeed, this is what we have and we can put them at the center by making this of margin zero or
two.
So I think everything remains the same.
So now everything is perfectly aligned as that.
So we can see that on mobile we are done with the implementation, right?
We are done with it.
So what has left?
Can I be the responsiveness on desktop?
On desktop?
That's where I will divide the layout into two.
One is for the main and one is for the side.
So let's get into that in the next video.