In this video.
Let's work on the hair styling.
So back to the component that is the inside the hair component.
Let's click on the header dot case and here we go.
Let's open the component also so that we can make reference to it as we move on.
So now let's start with the header container.
Remember, the header container wraps everything inside the header.
So let's go ahead and then select that as header dash container.
And here we go.
Let's give it display of flex.
And then they flex direction as column.
The next step is let's go ahead and style the header content, which is this one and that is these ones
over here, this content.
So let's try that one.
So let's go ahead and then select that one also header.
Dash content and here we go.
Also ask display flex and then flex direction to be column.
Remember, we are designing for mobile first approach.
So let's try to reduce the screen size so that we see the mobile first approach first.
So here we go.
So now we are targeting or working on this one.
So let's get going after that.
Let's give it a line items as flat start and then justify content also as flex stops.
Now let's have a look and indeed something like this one.
Good.
But I think we need to have some margin and padding around it.
So margin top to be ten parsecs and then margin left to be 30 parsecs.
So let's see the difference now.
Now everything looks nice.
So what about the H one, which is this one?
So let's go ahead and target that one.
Also going to be as header contained.
And then the H1, which is this one, right.
Let's change the font size to four ram and then the font family is Sarah.
And then if there is no Sarah being installed, then issue four to Sans Serif.
Now let's see a something like this as compared to the final one.
We are almost there, right?
The next step is about this one, which is a paragraph as compared to this one.
We have a colour as this, so here we go.
We can select this one and change this one to P meaning.
We are targeting the paragraph inside this.
So the font size for this is going to be as one point to red and then the line height for this one,
the line height is 1.9.
So let's see a something like this.
Great.
It looks beautiful.
All right, next step is about the colour on that hashtag.
70667f Now let's see a it looks good, right?
Something like this.
So let's also style the full name, which is this one here.
So here we go, the full name.
If you look at the structure, you will see the tag for that.
So for this, let's set the font size to three ram and then margin top to be ten pixels and then the
colour hashtag e0880.
For now, let's see a something like this as compared to the final one by the font family I use is called
play.
So here font family is equal to play.
Make sure that you have this font being installed and we have done that one and we have it as this great.
The next step is let's go ahead and style the payment icon for now.
Don't worry about the image.
We will come back to it.
So let's style the payment icon.
So here we go.
Remember, this is a payment container.
Inside the header container, we have this payment container, which is this one.
So we are going to copy this class and back to the CSS.
Let's go ahead and then style it as that.
So it display as flex and next is flex direction is row.
This by default you can choose not to bring it and also align items to the center and then just file
contained to the center for this one we have covered in details under Flexbox.
So here let's use space between and margin tab is going to be as 20 P6 and margin bottom is going to
be 30 pages for this one.
We can use shorthand syntax to write this one, but for the meantime, let's maintain this one.
So padding left also 30 pixels and then the weight is going to be as 90% great.
So now let's see what we have something like this on mobile.
So next step is let's target the button, which is this one, and you are going to select this class
and you select the button.
And for this let's add a background color to hashtag FC B to one, two and the border to be none and
also padding on both sizes to ten pixels and then font size to be 1.2 ram.
And also the font family here, let's use the same as play and the four font going to be sans serif.
And for this one, let's give it border radius to be $5 can have something like a curve at the edges
and box shadow to be 060 pixels and zero pixels and ten pixels with our GB color.
So for red to be zero.
And Green zero and then blue zero and opacity are 0.2.
So let's see what we have.
A we are almost there, right?
So let's continue.
The next step is let's target the individual icons for the payment that is the paper FSC and the MasterCard
and an Amex.
So here we go.
So here we can say the icons or payment icons or card icons.
So let's make it as payment icons.
So let's start with the F a PayPal does PayPal great.
So for this one, we have a color as hashtag.
003087 and the font size the font size of this one as to REM pay par.
That is a class for eight people.
Great.
So let's see.
And we have the color for that.
So I'm going to copy this one.
And down here, I'm going to pass it here and going to be the fake Visa card.
So I'm going to be as f a.
F a C dash visa.
So for this one, we can make a shorthand as this one like that multiple selection and save us before.
And then to bring a comma here and this is what we have.
The next step is going to be the MasterCard.
So here we go.
Dot F a dash.
CC dash MasterCard.
And for this one too, the color hashtag de 724, three, two, four, three, two.
And the font size also has to ram through all I'd say with the font size so we can make it as a global
class, but it's okay for these small projects.
And lastly, it's about the F a cc MZ card going to be as F a cc cc dash max.
And then the same way we're going to be at before.
So I can even select it here as a comma separated dot dot and comma separated.
So only one dot and let me remove it from here.
And something like this as compared to the final one, we are almost dead right.
So I think I need to give it a color for this one on the button.
So let's come here and add a color hashtag f, f, f here is going to be hashtag f, f, f, yes.
So let's save it.
Now, this is what we have.
Great.
So we are done with the actual content.
So let's work on the file image, which is this one, and then the border around it.
So remember, this is what we have done with it.
So let me collapse this one and collapse this one also here, this one.
So let me collapse this one and let's work on the image container.
So you're going to select the profile image container and back to the CCS.
Let's go ahead and have a beautiful comment as profile image or let me say image, image.
So here dot the class.
And for this, I'm going to give it a position as relative because I want to control this once.
Have a look at the final one.
You can see that we have this DCA and that because I want to give this def as position called absolute
and for absolute.
You want to look up to the nearest parent which has a position correlated.
Then going to position is a relative to that parent.
That is why I'm giving this one a position for relative and that is it.
So let's go ahead and start the actual image.
So profile image container and then the IMG.
So here we go.
Can I be asked that profile image container and then the IMG.
And for this one I want to give it a weight of 100% and then the height also as 100%.
So let's have a look what I'm referring to and here we have it.
You can see that it fit perfectly into it container.
So on the desktop you can see that it's too big, but don't worry, we'll fix it as we get to desktop
responsive design.
So next step is that let's give it a border with this kind of style and look at the final one.
This time we have here at the border here.
That is the case, I added, so we can add that one, this border here, you see we have this one and
then the other one also.
So these are borders.
So let's get that one done.
Going to be as border bottom ten parsecs solid and the color is hashtag f, c, b, two, one, two.
And for the border left, border left.
Also as the same ten page oxalate by the color changes some around it's kind of blue so something like
this one.
So let's see what we have achieved so far and this is what we have.
But you can see that it is not like a circle.
So to achieve that, we're going to add border radius as 50% border radius as 50% with this one going
to have something like this as compared to the final one, we are almost there.
So to make sure that the image fits into it container, we are going to use a specific property called
Object Fit and space that cover.
So for this one, when a fits into each container.
So we are done with that one.
So let's work on this device, this one we see here, right?
So for that one, remember we gave it a circle one and circle two.
So let's see how we are going to target that one.
So let's start with this circle one, dash one, and we are going to give it a position called absolute.
Remember we gave a parent as relative.
So for this one, we know we're going to position itself too.
So let's give it a weight of 150 pixels and then the height also adds 150 pixels.
And then let's see what we have.
All right.
This is what we are developing and I think somewhere here.
But let's give it a background color so that you will see it visually as red.
Now we can see that it is down here.
So now I can control this one and position itself to the parent.
So are going to add bottom here to be zero and let's see what we have something like this one.
So let's give it a margin of ten P6 and indeed it is down here.
So let's remove the background color.
And next is let's add a box shadow.
So here we go.
Going to be as box shadow when it be hours zero.
For peasants and then the color is LGB A and the opacity is one.
Great.
So let's save it and let's have a look.
Yeah, something like it down here.
But it's not that visible.
Right, but it's down here.
They get it here.
Yes.
So what we are going to do is that I want to give this one a margin bottom, as we did for the image
so I can copy this one.
And down here, I'm going to paste it here.
But I want this one to be more opaque.
So I'm going to change the color from F to e08804 and let's see the magic and something like this.
But for the final one, we can see that we have some curved edges, so it's border radius.
So let's go ahead and add that one also as border radius to be $16.
So let's have a look.
And this is what we have as compared to the final one is almost the same.
Right?
So let's continue implementing this.
So the next step is let's work on the circle two.
So here I'm going to copy the entire circle one plus here and down here.
The difference here is the color and then the position.
So here I'm going to position to the right.
So here right to be ten and then top also to be ten parsecs as that.
So let's change this one to circle two.
Let's save it and let's have a look at the effect.
Let's is what we have.
But it looks like we are making some small mistake here as compared to the final one.
You can see that this de is like a transparent div.
So let's see where we are making the mistake.
One, two.
Yeah, I think it is from the shadow.
So going to be zero and then $4 and this one going to be as $30.
Yes.
So let's see, have a look.
And indeed, this is what we have.
So let's add the $30 to this one or so and let's see something like this.
That is awesome.
So we are done with the mobile first because on mobile it looks nice and this is what I want.
So what has left is on desktop you can see that these icons are not way arranged and I want this image
to be the left here.
So let's get that one done in the next video.