Let's create a section with an IDE of portfolio and uh let's add this inside the container division because we need to have a Max width and let's create an ed2 and let's type.
Explore the portfolio and we need to have this text so I just copy this and let's create a paragraph let's paste it over here and now we need to.
Have these two buttons so for the buttons let's create a division with the class of BTN container and let's add the anchor tag for the button and let's give it a class of.
BTN and for the first button let's type listen to the music and let's duplicate this and for the second button let's type contact for collaborations and the second button has.
Back to our source code and let's add the footer and here also we'll create the container Division and in this container division we need to have the ed2 and uh here let's type get in.
Touch and let's create a paragraph and uh let's copy this and let's paste it over here and now we need to have these three different divisions so let's create a division with the class of.
Address for that and in that we will have a division with the class class of email and in that we need to have this symbol so for the symbol let's create a.
Division with the class of Icon and let's get the icon from hero icons.com so here I'm in hero icons.com and let's search for email and uh let's get the icon from here so let's copy.
This icon over here so let's click on copy SVG and let's paste it inside this icon Division and let's go outside the icon Division and uh let's create a division.
Posts Related:
- Generate Unlimited Report Cards With This Amazing 1 Click Dashboard School Manager Pt. 20 FINAL Office
- How To Create A Warehouse Manager Application To Control Inventory In Excel Free Download
- Microsoft Teams Learn How to Use Microsoft Teams
With the class of label
And here let's type email and here let's create another division with the class of value and here let's add the email so let's typ info@ email.com so now if you.Go back here we can see that we have the logo email and the email displayed over here I'm going to do the same for the other two divisions so I'll just copy this email division from.
Here and duplicate it two more times and for the second one let's go ahead and change this this to phone and let's add a phone number over here and for the phone let's go ahead.
And get an icon over here so let's tap phone let's copy this icon from here let's click on copy SVG and let's paste it over here inside the icon.
Division and uh then we have the address so let's tap office over here and uh let's copy this text so we need to have this text as well so let's copy this and we need to add it after.
This label so let's create a division with the class of info and let's add the text over here I'll just copy this and do the same for email and phone as well all right now for the office let's.
Set the value to this address so let's copy this and and let's add the address over here so with that we have completed the HTML of the footer now let's go and.
Style all of them so let's go to the sty CSS file and let's create a comment let's tab portfolio and first of all we need to bring all of this to the center so let's Ty hash portfolio text align to.
The center right now let's add some margin top to these buttons so let's tap portfolio and we have this division with the class of BTN container so we have this.
Division over here so let's type BTN
Container and let's add a margin of 30 pixels top and bottom zero for left and right let's set the display to flex gap of 30 pixels and justify content to.Center so now we can see that we have everything displayed correctly all right now let's file this footer so for the footer let's go ahead and create a comment I'll just tap footer and let's.
Tap footer over here and we need to add a background color for the footer and let's set the background color to our accent color and let's add a padding of 30 pixels top and bottom zero for left.
And right for the footer now let's change the size of these icons so let's type footer and uh we have it inside the icon division we have the SVG so let's set the height to 40.
Pixels now we need to bring all these elements one next to the other so let's go ahead and Target the container which is this division with the class of address so let's tap address over here.
And let's set the display to flex align items to the center justify content to space between and let's add a gap of 30 pixels and for this content we need to have a line height.
So it is inside this email division so we have the same email division for all these content because we have the same styling so let's go ahead and type footer.
Email and let's set the line height to 1.8 and let's set the display to flex Flex direction to column and let's add a gap of 20 pixels right now let's go ahead and set.
The font weight of these values to B so let's start footer and we have a division with the class of value so let's set the font weight to bold and with that we have styled our footer 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 day [Music] a [Music].
