Code so let's go to the HTML file and and uh this is where the services section ends so I'll just create a comment over here you can just press command or control and forward slash and.
Uh you can create a comment over here so I'll just Tye end of the services section now here in the services section we can see that we have wrapped the services section inside this container.
Because we wanted to have this Max width for this content of the services but for this about section we want to have the full width of the browser so let's go ahead and create a section directly over.
Here so let's tap section and let's give it an idea of about now for all the content let's create a division with a class of content and in that we need to have this left section where we have.
Images for Slash and I have an image called about. jpg and then let's create a division with the class of right and in this we will have an.
H2 and here let's type crafting digital excellence and then let's go ahead and create a paragraph and let's go ahead and copy this paragraph from here and I'll just paste it over here and let's.
Create one more paragraph and let's copy this paragraph and let's paste it over here and then lastly we need to have a button so let's create an anchor tag now here in the HF you can add the link of.
The page so this is the contact button so you can add the link of the contact page over here I just type hash for now and let's go ahead and type contact over here and since this is a button let's.
Also give it a class and let's type BTN and we have already styled the class over here so here we can see we have added some styles for the BTN class right now let's go to our design and uh.
Posts Related:
- Silk Pillow Cover Mockups Download For Photoshop Sheri Sk Photoshop Tutorial
- 2000+ PNG Files Free Download In Zip PNG Files Collection Sheri Sk
- How to Create Company Employee ID Card Design in Word MS Word Tutorial Word
This is how it looks we have this image - ID Card Make
And this content now for the button we need to add some more Styles so let's go back and here for the button let's type text decoration to none for removing the.Underline and let's set the font weight to bold and let's set the color of the text to Black and let's also tape text transform.
Uppercase now when we hor over this button we can see that we have this background color changing now we need to have the same effect over here as well so here for the button we can see that.
We have this hover effect but it is for the button inside the nav container so I'll just remove this from here so it will have the hover effect for all the buttons so now we can see we have this.
Hover effect right now if we go back to our CSS we can see that we have added some padding to all the sections so that's why we can see that we we have this padding on the left side so let's.
Go ahead and remove the padding from the about section so let's scroll down and let's create a comment I'll just tap about section and here let's tap hash about and I'll just remove all the.
Padding and now we can see we don't have any padding right now we want this left section to be on the left side and the right division to be on the right side so both of them are inside this content.
Division so let's Ty about content and let's set the display to flex and let's add a gap of 50 pixels between the elements and let's also type.
Align items to the center and uh now let's go ahead and set the width of the left and the right divisions to the same value so let's go ahead and type hash about content left and hash about.
Content right
And let's set the flex to one so that both of them have the same width right now let's go ahead and set the width of this image to 100% of the parent so.Let's T about content IMG and let's set the width to 100% and let's set the height of the image to 70 viewport height and let's also type object fit to cover so that it has the correct.
Proportions and now we we can see it looks all right now this heading is aligned to the center so if you go back here if you go to the S2 we can see that we have aligned all the headings to.
The center now we want to align the heading of this about section to left so let's go ahead and Target The Heading of the about section so just tap hash about H2 and let's tap text align left right.
Now let's go ahead and add some padding to the right of this right section so let's tab hash about right right and let's tap padding right and let's set it to 32.
Pixels and with that we have completed designing the about section all right so that's basically it for this video if you have any doubts you can ask in the comments below and if you like this.
Video please click on the like button and subscribe to this channel to get the latest video updates thanks a lot for watching have a nice .
