So let's go to the HTML file and let's go outside the header and uh let's create a section let's give it an idea of about and uh this should also have all.
The content inside a specific width so let's add the container division over here and in this we will have the left and the right division so let's create a division with the class of.
Left and here let's add an S3 or let's create an H2 and here let's tap discover the music of lb and let's create a right division over here and in this right division we.
Will have a paragraph and let's copy this text from here and let's paste it over here so this is the about section let's create one more section and let's give it an idea of.
With the class of Brands and in that we will have all the images so let's create an IMG tag and in the source let's have Images slash logo1.jpg and let's duplicate this four.
More times and then we'll have logo two we'll have logo three four and five right now if we go back to our design this is how it looks we have all the content displayed over here now let's.
Style this so let's go to style CSS file and uh let's add some styles for all the ed2 so for the ed2 let's set the font family to DM serif display serif and let's set the font size to 40.
Pixels and let's say the margin top to zero so this is the edge2 now for the about section we need to have this hed2 on the left side and this content on the right side so let's create a comment.
I'll just type about and here let's type hash about container and uh let's set the display to flex align items to the center justify content to space.
Posts Related:
- How To Design Animated Full Screen Nav Menu Using HTML, CSS & JS (Part 1)
- 15000+Feminine Logo Creator Circle Edition In PSD EPS AI PNG Sheri Sk Photoshop Tutorial Office
- How To Remove Sidebar From Blogger Contempo Theme - Live Blogger BlogSpot
Between and let's add a gap of 30 pixels
And uh now we can see that the content of the heading is on the left side and the paragraph on the right side now for the left side we will have 1/3 of the.Width so let's tap about left and let's set the flex to one and about right and let's set the flex to two and this is how it looks so I think we can decrease the font size a little.
Bit so here for the left side let's have font size and uh let's set it to 30 pixels and uh I think we just go ahead and change this to and S3 and uh let's set the font family.
To DM serif display serif so this is how this about section looks now let's go and style this brand section so let's create a comment collaborations and uh let's.
Type hash collaborations and we'll add a background color for this section so let's typ VAR and let's set it to Accent color so now we can see we have this.
Background color now for all the sections we will have some padding so let's have padding of 60 pixels top and bottom and zero for left or right and now we can see we have this.
Padding for the sections right now we want to bring this heading to the center so let's type [Music] collaborations H2 text align.
Center right now we need to bring all these Brands one next to the other and and let's also change the size of the image so let's tap do Brands and let's target the images and let's set the.
Width of the images to 120 pixels and let's add a border radius of 50% so that it has round shape and uh let's target the brand Division and let's set the display to.
Flex align items to the center let's add
A gap of 24 pixels and uh justify content to the Center and let's also add a flex wrap so let's tap Flex wrap and let's set it to.Wrap so now when we decrease the width of the browser window the logos will wrap down all right so with that we have designed the about and the brands section 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.
