Right, so in this video, we're going to create our social navigation here.
So let's assume, first of all, Jumptap initial project and go into each demo.
Now, after little Heather get hit in another section, so first of all, this type of comment so we
know what we're doing social.
NAB and to this comment are going to hit this section, this section tag, the idea of social within
this single integrated dip lexicon, which would dip out of here and just create a social container
class.
Within this container, I'm going to use not font awesome icons.
So if we go to font awesome back, I say I'm just going to show you an example.
Let's say Facebook.
And loading, loading, loading, loading.
Clung to the strange.
OK.
Let's try this again.
Well, never mind, let's go into our.
They've back again, so social continuum, and I'm sure I can target this so I can tag that last name
of Fabi, then space F a dash Facebook.
And also, I want to show you this, first of all, so just by doing this, we should have your free
Facebook text.
Why do I have three of them?
Just y y y y y y.
Weatherfield, them amazing.
Oh.
Is it because the face, the font or some pages?
Oh, the bit messed up.
Mr. President Hayes book.
Something was wrong with Pontotoc today.
Nevertheless, here is one times Facebook and they have kind of standing on this.
What are the three of them?
Still don't get it.
Hmm, strange.
No mind, so you can see we have three icons and they need freshness again.
Well, to make them larger because here they are large and tiny.
So how can we do that?
We can.
Actually, within the class, there is a functionality class F, a dash to X. This means two times its
size.
As soon as we do this, we will have.
Why do I have three of them?
I don't get to do something now container and I only have one I can tell.
Hmmm, this is so strange, so don't have any kind of standing in here now to figure it out eventually,
but what I do need to do is copy this actually for my times and.
And I want to replace the I the Facebook name here with Instagram.
Then Twitter
and then LinkedIn.
So we should have.
Oh, my God, what just happened?
There's something wrong with Hunterson.
I get it, and the larger and larger and larger.
This means something is amplifying them, but what what could it be?
So I have my kit here, font, awesome to have to do something with the kit that will come in the kit
out for me.
Yep.
This makes them disappear.
So I comment this back in, then I have the.
Something ain't right.
Let me start styling this, so let's go into success and step in here, comment of social.
And let's start styling our idea of social by positioning it fixed.
And now that we said not that we assigned the type of position not to tell it where it should be fixed,
I'm going to go left zero and this will push everything to the left side.
Now, I can do this play flex because I want the content from the container to be displayed as flex.
But this will display only the container now because Flex Display Sarafina Road.
I'm going to change the flex direction to column and they are going to line all the items to the center.
Nurses would do this if they were lined up into the center can now set a max width of 10 viewport with.
And this is because I set my well, my container of the net here to 80 percent.
So theoretically, I should have 10 percent here and 10 percent here.
And because this is 100 percent of the viewport with I'm only going to take up here 10 percent of its
with.
Now, for the height of this container, we are only going to use 80 percent or 80 viewport heights.
Now, let's also change the border radius, first of all, we're going to go on the upper left side
of a corner with zero, then the right side 10 pixels, then the bottom left right side, also ten pixels
and the bottom left side zero.
So this should look then something like this, but we don't have a shadow to show it.
So now what we need to do is implement our shadow.
But for this we first need a border.
So let me target this social idea again.
And I'm going to give it a border.
But only when I'm hovering over it.
Now the world will be one pixel solid and has 350.
And also, let's go back to an e-mail and give the the section a class of box shadow
nurses who do this when we hover over all our left side of social, when we hover over our left section
of social, we now have this shadow.
Now, what exactly is going on with this icons?
I need to take a closer look at this, but let's carry on by not targeting the social campaigner.
Because they need to place those icons into a row, so I started the class of social container.
And again, we're going to display it as Flex will change to flex their action to column and we'll justify
the ad and would justify the content with space around.
Now, what this will do is create equal space around the items of all the items, which are the icons
are now messed up.
But we're going to fix this.
Let's also give it a height of 100 percent of its container.
This is just spread out everything in the entire container and also a margin of one gram all around.
OK, so there would be our navigation.
Now, one last thing I want to do is keep actually two things keep each icon.
A hover effect that can do this very simply by going into icons and also signing them and actually going
to select these two times, hold down command on the Mac or control on the PC, then DTD.
Then one error.
Left.
Right.
I mean, space.
And I'm going to give them the class of Pober says we do this, then, hey, we should have actually
that effect.
Why don't we have that effect.
Something's not right here.
I know what the problem is, haha, I'm an idiot.
I didn't close the eye Congress.
That's what the problem is.
I didn't use a closing in.
What is the matter with me too much Emet?
That's what the problem is.
So let's save it.
Go in here.
And I'm an idiot.
So we also have the effect of the.
However, effect, don't call myself an idiot, however, it's in the class, oh, because of the color.
Exactly, because they need to change the color.
The hover has to go up here.
Actually, the whole class has the primary color, which, well, it has an opposite of zero point eight,
I'm going to reduce actually the the color of our F a B's, which are actual class icons.
So anything that has this class F.S.B.
Now a different class of class of Fabi and all this changed a color to the color of secondary color
key and also going to include a transition here.
So when we hover out, we'll still have that smooth over effect.
So what is.
OK, now let's try this up hovering and there we go.
OK, so that's pretty much it for the social icons.
So see the next.