Name is displayed over here and if we hover over this icon we can see that twitter is displayed over here and then we have instagram and youtube so this is what we're going to design in.
This video let's get started right here i have created this folder called social media icons and i just.
Opened it with vs code so let's start by creating an html file so i'll just name it index.html and let's also create a css file i'll just name it style.css.
Let's start with the index.html file now in vs code you can just press exclamation and press tab and you'll have this basic html5 code and let's also link our css file over.
Here so i'll just type link and here in the edger file just type style.css now for these icons we're going to be using font awesome icons so let's get the cdn of font awesome you can just search for.
Let's click on copy link tag and let's go back to our html and i'll just paste it over here in the head section all right now let's start with the.
Markup so here we just create a division with the class of social icons container to hold all these icons so let's create a division of the class of social icons.
Container now for each of the icons i'm going to use an anchor tag so that we can add a link to the icons so let's create an anchor tag and here you can go ahead and add the.
Link of your social media page right now in the anchor tag i'm going to create a division for the icon and another division for the name so let's create a division.
And we'll get a class of icon and here we will add the icon of facebook now let's go to the official website of font awesome.
So here i'm in font awesome dot com so Wesdigital
Let's go over here to options and let's go to icons and let's search for facebook and here we can see we have this icon.Called facebook square so we need to have this icon so let's click on this and let's click on this code to copy it and let's go back over here to this division and paste it over here all.
Right now let's open this in the browser and let's see how it looks so i have this extension called live server installed in vs code so once you install that you can just.
Right click over here in the html and click on open with live server and here we can see we have the icon displayed over here and the next thing we need to have is the name so let's.
Create a division with the class of name and here i'll just have facebook and now you can see we have the icon and the name right now let's copy this anchor tag and i'll just paste it three.
More times because we need to have three more icons right now let's change the icons and the names so for the second one we need to have twitter.
So here instead of facebook i'll just type twitter and here in the name i'll just type twitter and then we need to have.
Instagram so here i'll just tap instagram and even here i'll just type instagram and then lastly we need to have youtube so let's type youtube over here and even.
Here we'll just type youtube right now we have all the icons and the text ready and that's it with the html now let's go to our css and let's start styling this.
So the first thing we will do is style
The container division which is this division of the class of social icons container so let's tab.Social icons container and let's set the display to flex so that all the icons will be one next to the other so just type display of flex and.
We will have a gap of 30 pixels between each of the icons and we'll also set the font family to roboto and sans serif and let's also add a.
Margin of 32 pixels top and bottom and zero for left and right and we'll also bring it to the center so i'll just type justify content center right now let's style the anchor tags so.
Inside the anchor tags we have a division with a class of icon and a division of the class of name now we want this icon and this name to be one next to the other so we have to add a.
Display of flex for the anchor tags as well so here i'll just type social icons container a for the anchor tag and let's type display of flex.
And now we can see the icons and the text are one next to the other we'll also add a gap of 8 pixels and let's set the size of the icons to.
42 pixels and we'll also remove the underline so just type text decoration none and now we need to decrease the size of the text.
So here we can see inside the anchor tag we have this division with the class of name so let's target this so here let's type social icons container a dot name.
And here just have font size and let's set the font size to 16 pixels right now we need to bring this text to the center vertically so for that here i'll just type align items to the center.
Right now the next thing we will do is we will reduce the width of these elements so by default we need to have just the icon displayed so let's set a width.
Let's start with 42 pixels and let's also type overflow hidden so that anything.
Outside this anchor tag will be hidden and it looks all right but let's add a background color and let's see whether we have any extra width so just a.
Background of red and now we can see we have some extra width over here so let's decrease the width a little bit let's try 38 pixels.
And i think that's the perfect width so let's also add a height of the same value so i'll just type height of 38 pixels and we can see we have a little bit of.
Gap at the bottom so for that we can set the line height to zero and now we can see everything looks all right.
Right now let's remove this background color now let's also add a box shadow so i'll just type box shadow and let's say the values to 0 4 pixels 8 pixels negative 2.
Pixels rgb a 0 0 0 and 0.2 right now let's add different colors to these icons based on the company so.
Let's go ahead and let's type social icons container a and let's select the first instance so we can just type colon nth of type.
And we can just type one over here so this will select the first anchor tag so for the first anchor tag we will have a color of 4267 b2.
This is the color for facebook now let's select the second anchor tag so let's tap social icons container a end of type and let's type 2 over here.
And for the second one we will have a color of 1 d a 1 f 2 right now i'll just copy these lines of code.
And i'll just paste it down here and let's change this to 3 and this to 4 and let's change the color of instagram to e1306c and for youtube let's change the color.
To ff000 right now the last thing we need to do is display the name when we hover over any of these icons so let's add a hover effect so here i'll.
Just type social icons container a column hover and when we hover over this we will have a width of let's try 138 pixels let's go to our.
Website and let's hover over one of these icons and we can see that we have the correct width so everything is being displayed correctly now the last thing we need to do is we.
Need to add a smooth transition for the horror effect so here in the anchor tag i'll just type transition.
And i'll just set it to all 400 milliseconds ease and now if you hover over this we can see we have this mode transition and i'll also change the font weight to.
Bold for the name so i'll just have font weight and set it to bold and now let's hover over this and we can see everything looks alright.