WEBVTT

00:00:07.110 --> 00:00:12.690
Now we are ready to start populating our body elements and we're going to start with the navigation

00:00:12.690 --> 00:00:13.230
bar.

00:00:13.530 --> 00:00:14.070
OK.

00:00:14.310 --> 00:00:16.090
So going to create this navigation bar.

00:00:16.290 --> 00:00:19.470
Exactly the same way we have learned in the booth chopped up.

00:00:20.070 --> 00:00:28.370
So we are going to use the nuff tag to create our navigation bar.

00:00:29.430 --> 00:00:31.250
OK.

00:00:32.850 --> 00:00:37.180
And we're going to give it a roll of navigation.

00:00:37.260 --> 00:00:39.700
This is for screen release me.

00:00:39.880 --> 00:00:41.000
OK.

00:00:41.070 --> 00:00:47.250
And also it needs a glass of Naveh to stylus.

00:00:47.280 --> 00:00:54.230
You can either give it a nav bar default class and it's going to give us a great color.

00:00:54.330 --> 00:00:55.560
OK.

00:00:55.830 --> 00:01:01.380
Otherwise we can go for Navar inverse for a blackout day.

00:01:01.380 --> 00:01:04.450
And then we're going to our more CSL styling later on.

00:01:04.980 --> 00:01:06.780
So inside the novel

00:01:11.760 --> 00:01:16.280
we are going to need to replace everything inside a container.

00:01:16.560 --> 00:01:16.890
OK.

00:01:16.890 --> 00:01:18.530
All contain a fluid.

00:01:18.570 --> 00:01:24.580
I'm going to go for a container float for it forthwith.

00:01:25.830 --> 00:01:27.120
OK.

00:01:27.300 --> 00:01:33.270
And then inside the container or container fluid we're going to have a couple of elements.

00:01:33.300 --> 00:01:39.650
So the first element is the header which consists of the brand and the toggle button.

00:01:40.540 --> 00:01:41.180
OK.

00:01:41.550 --> 00:01:47.870
And the second element is the nav bar collapse which consists of the coolest collapsible contents.

00:01:48.570 --> 00:01:49.400
OK.

00:01:50.010 --> 00:02:00.200
So let's start with the Navar head which is a div of glass Nevada.

00:02:02.350 --> 00:02:04.690
Okay.

00:02:04.900 --> 00:02:11.790
And then the next one is the back collapse.

00:02:12.020 --> 00:02:17.590
It needs a couple of classes now labs and collapse.

00:02:18.190 --> 00:02:22.710
And this one we're going to give us an idea because we need to link it to the toggle button.

00:02:22.890 --> 00:02:26.280
So going to give us an idea enough back collapse.

00:02:26.730 --> 00:02:27.860
OK.

00:02:27.900 --> 00:02:33.470
So inside the header we're going to have our Navarre brand first.

00:02:34.140 --> 00:02:37.470
OK.

00:02:37.710 --> 00:02:40.590
And that's going to be a link.

00:02:41.260 --> 00:02:45.900
OK so going to create a link and then inside the link We're going to place a picture.

00:02:46.800 --> 00:02:52.250
So we need to give the link a glass of brand.

00:02:53.490 --> 00:02:54.300
OK.

00:02:55.080 --> 00:02:58.320
You can give us an eight Tref if you want.

00:02:59.640 --> 00:03:04.740
And then we're going to place the image inside the link.

00:03:06.390 --> 00:03:07.380
OK.

00:03:07.390 --> 00:03:11.590
Now you need to give it a source.

00:03:12.510 --> 00:03:18.290
And we're going to go for a crown like this.

00:03:18.370 --> 00:03:23.420
So going to use our logo maker those com Web sites.

00:03:24.240 --> 00:03:24.990
OK.

00:03:25.250 --> 00:03:25.740
So they look

00:03:28.330 --> 00:03:34.660
.

00:03:57.820 --> 00:04:01.040
And I'm going to go for this one.

00:04:02.130 --> 00:04:02.810
OK.

00:04:03.120 --> 00:04:10.580
So we're going to pick up this color using the color because.

00:04:13.820 --> 00:04:15.130
OK.

00:04:15.240 --> 00:04:19.580
And is copy the correct answer.

00:04:19.940 --> 00:04:22.690
And safe.

00:04:23.100 --> 00:04:27.370
OK.

00:04:27.840 --> 00:04:33.540
Just make sure you copy the credits using this button and place them somewhere on your website or on

00:04:33.570 --> 00:04:36.320
another page and you give the link to that page.

00:04:36.330 --> 00:04:41.290
OK so now we're going to get the image from our desktop.

00:04:41.370 --> 00:04:50.610
Let's change the name to web logo and let's open our images folder.

00:04:52.020 --> 00:04:52.920
OK.

00:04:53.340 --> 00:04:55.700
We don't need this one anymore.

00:04:56.280 --> 00:04:58.140
Let's drag our image to

00:05:01.150 --> 00:05:10.790
play so the source is going to be images and then Web logo must be edgy.

00:05:11.380 --> 00:05:12.380
OK.

00:05:12.440 --> 00:05:17.360
We're going to need to style this image using a glass.

00:05:17.490 --> 00:05:18.140
OK.

00:05:18.180 --> 00:05:19.790
Now we're going in the logo.

00:05:20.690 --> 00:05:26.510
So if we go to our CSSA file you've got here style brand.

00:05:26.580 --> 00:05:29.120
OK.

00:05:29.620 --> 00:05:33.410
You can access the class logo.

00:05:34.560 --> 00:05:35.630
OK.

00:05:36.560 --> 00:05:48.370
Let's give it a height of 30 pixels looks OK.

00:05:49.290 --> 00:05:53.680
Now let's move to the single button.

00:05:54.030 --> 00:05:57.650
So we're going to use the buttons.

00:05:59.300 --> 00:06:00.420
OK.

00:06:00.600 --> 00:06:10.560
We're going to give it's a type of button ok for assistive technologies and we need to give it a class

00:06:10.620 --> 00:06:14.500
of vertical guide importance.

00:06:15.330 --> 00:06:19.570
And we're going to link it to the collapsable content.

00:06:19.720 --> 00:06:19.990
OK.

00:06:19.990 --> 00:06:31.010
Using a data target's attributes pay which will be set to the ID of the collapsable content.

00:06:32.150 --> 00:06:32.810
OK.

00:06:33.180 --> 00:06:42.780
And also we need a data toggle attributes which will set to collapse.

00:06:43.680 --> 00:06:48.700
Basically we are collapsing the elements of ID not collapse.

00:06:48.880 --> 00:06:49.820
OK.

00:06:51.090 --> 00:06:51.610
OK.

00:06:51.900 --> 00:07:00.850
So now we need to create these bars inside the button.

00:07:00.950 --> 00:07:01.640
OK.

00:07:01.680 --> 00:07:05.610
So you can do that using spanne elements

00:07:12.410 --> 00:07:15.980
and it's going to be inside the button.

00:07:16.120 --> 00:07:16.490
So

00:07:20.800 --> 00:07:24.860
so each span is going to have a glass of I can bowl

00:07:31.830 --> 00:07:35.540
OK and see if there is one there is duplicate this.

00:07:35.550 --> 00:07:37.380
Now we go another one and another one.

00:07:37.500 --> 00:07:38.350
OK.

00:07:38.500 --> 00:07:41.620
And going to add one span at the beginning.

00:07:42.300 --> 00:07:43.980
OK for assistive technologies

00:07:53.790 --> 00:07:58.240
and play some text there toggle nomination for example.

00:07:58.730 --> 00:07:59.870
OK.

00:07:59.880 --> 00:08:05.320
And we're going to Heidi's using the saw only close.

00:08:05.580 --> 00:08:06.180
OK.

00:08:06.210 --> 00:08:09.960
And basically this is for assistive technologies maybe.

00:08:10.520 --> 00:08:11.110
OK.

00:08:11.390 --> 00:08:16.850
So now we're done with the head bots and I'm going to move you the collapsible parts.

00:08:17.120 --> 00:08:22.780
So we're going to place a list in there.

00:08:24.090 --> 00:08:24.420
OK.

00:08:24.450 --> 00:08:26.980
It's going to be an ordered list.

00:08:28.110 --> 00:08:33.920
So we need to give it a class of nerve.

00:08:34.120 --> 00:08:36.040
Not enough.

00:08:38.060 --> 00:08:38.780
OK.

00:08:38.900 --> 00:08:44.350
And this place a few less items there.

00:08:46.980 --> 00:08:50.580
So inside each list item we're going to place a link.

00:08:50.630 --> 00:08:51.370
OK.

00:08:51.770 --> 00:08:52.130
So

00:08:55.700 --> 00:08:58.190
I'm going to place the nature of that cake and give it to nature.

00:08:58.230 --> 00:09:03.070
If you don't so we're going to have full list items.

00:09:03.110 --> 00:09:05.600
Let's get this.

00:09:05.750 --> 00:09:20.810
So the first one to get to play some text home second one about then portfolio and then contact.

00:09:27.540 --> 00:09:30.840
Now our navigation bar is working properly.

00:09:31.050 --> 00:09:31.700
OK.

00:09:31.980 --> 00:09:35.640
Now we're going to add some styling using CSSA to our navigation bar.

00:09:35.880 --> 00:09:38.170
So he's got he has his file.

00:09:39.060 --> 00:09:42.130
Ok I'm going to go with that.

00:09:42.940 --> 00:09:47.350
First we want a transparent background just like that.

00:09:47.580 --> 00:09:48.370
OK.

00:09:48.750 --> 00:09:56.570
So will access the litigation bar using one of the classes are going to access it using nabû invest

00:09:56.580 --> 00:09:57.340
for example.

00:09:57.540 --> 00:09:57.820
OK

00:10:02.040 --> 00:10:07.530
well we need to access it using the number Inv. because that's what's dictating this background kind

00:10:07.530 --> 00:10:09.810
of other moments which is like so

00:10:14.950 --> 00:10:22.930
said the color of the lover in verse class to the background

00:10:26.080 --> 00:10:29.880
to a black color with a transparency of 0.5.

00:10:29.950 --> 00:10:32.300
OK we're going to use the IGDA function.

00:10:32.500 --> 00:10:39.560
So for the black color the first three prong images are going to be 0 0 0 and then the last problem

00:10:39.620 --> 00:10:41.850
over transparency are going to give its points 5.

00:10:41.910 --> 00:10:42.270
OK.

00:10:42.310 --> 00:10:47.040
Now we can see this nice transparent background.

00:10:47.500 --> 00:10:48.550
OK.

00:10:49.300 --> 00:10:51.410
Now we're going to move to the list items.

00:10:51.580 --> 00:10:52.260
OK.

00:10:52.720 --> 00:10:53.170
So

00:10:57.100 --> 00:11:03.760
to access the list items are going to access the nav class and then inside the class are going to access

00:11:03.750 --> 00:11:05.970
the list items.

00:11:07.300 --> 00:11:08.120
OK.

00:11:08.760 --> 00:11:20.980
So first of all we are going to set the color of the list items to a white color.

00:11:21.850 --> 00:11:23.100
OK.

00:11:24.210 --> 00:11:27.390
And it's going to look more or less gray.

00:11:27.500 --> 00:11:28.270
OK.

00:11:28.650 --> 00:11:30.120
Due to the background.

00:11:30.280 --> 00:11:30.930
OK.

00:11:31.420 --> 00:11:37.770
So we're going to also change the font size and make it slightly bigger.

00:11:37.780 --> 00:11:40.650
I'm going to go for 17 pixels.

00:11:41.620 --> 00:11:42.960
That looks good.

00:11:43.720 --> 00:11:47.950
And also some Margene.

00:11:48.070 --> 00:11:48.500
OK.

00:11:48.510 --> 00:11:52.920
Between the list items I'm going to go for Mudgett right.

00:11:53.080 --> 00:11:55.360
OK.

00:11:56.080 --> 00:11:59.180
So because we we don't want any margin left.

00:11:59.230 --> 00:11:59.670
OK.

00:11:59.860 --> 00:12:07.820
So Margene right we're going to go for five pixels.

00:12:08.890 --> 00:12:16.850
Now you can see OK got margin there between the list items.

00:12:17.470 --> 00:12:21.780
And finally we can add some padding at the top and bottom.

00:12:21.790 --> 00:12:22.110
OK.

00:12:22.120 --> 00:12:24.070
Inside each list item.

00:12:24.620 --> 00:12:25.310
OK.

00:12:25.570 --> 00:12:31.260
So we're going to go for the big cells at the top and bottom.

00:12:31.410 --> 00:12:35.270
We don't want any budding on the left hand side and right hand side.

00:12:35.400 --> 00:12:37.150
So it's going to be zero.

00:12:37.140 --> 00:12:43.410
Guys were using two volleys that one for the top and bottom and one for the left and right sites inside

00:12:43.480 --> 00:12:45.850
look and it looks good

00:12:45.850 --> 00:12:52.690
.

00:12:52.690 --> 00:12:55.620
It does make the font size slightly bigger.

00:12:55.780 --> 00:12:56.620
OK.

00:12:56.620 --> 00:12:57.420
Let's go.

00:12:57.460 --> 00:12:58.450
Nineteen pixels

00:13:04.060 --> 00:13:05.670
the font family we have used.

00:13:05.680 --> 00:13:10.170
Here is one of the Google funds and to be able to use it.

00:13:10.240 --> 00:13:16.130
We need to link our index those ASML file to the Google funds Web sites.

00:13:16.360 --> 00:13:21.630
So we're going to do we are going to go to Google and type Google fonts.

00:13:22.390 --> 00:13:26.120
OK.

00:13:26.140 --> 00:13:29.150
And then they go to the first link.

00:13:31.540 --> 00:13:36.780
So we're going to look for.

00:13:39.790 --> 00:13:40.410
OK.

00:13:40.720 --> 00:13:45.040
So then we can click on quick use

00:13:47.880 --> 00:13:53.090
and we'll need to add this code to our Web.

00:13:54.430 --> 00:13:54.800
OK.

00:13:54.820 --> 00:14:03.330
So if your copyrights and bases inside the index was a single file.

00:14:05.250 --> 00:14:08.250
OK.

00:14:08.960 --> 00:14:11.470
OK.

00:14:13.750 --> 00:14:19.610
Now the font should be working OK.

00:14:23.350 --> 00:14:27.180
Save and refresh.

00:14:28.040 --> 00:14:28.320
OK.

00:14:28.330 --> 00:14:31.410
And then we can see that our phones is working.

00:14:31.780 --> 00:14:32.620
OK.

00:14:32.670 --> 00:14:39.820
Now let's just reduce the font size a little bit to 17.

00:14:40.900 --> 00:14:44.250
And that looks the same as our file Web site.

00:14:44.250 --> 00:14:46.080
Great.

00:14:46.480 --> 00:14:50.250
Now we going to style the list items when we hover on them.

00:14:50.530 --> 00:14:51.250
OK.

00:14:51.580 --> 00:14:56.600
So we're going to add a border bottom.

00:14:56.950 --> 00:14:57.310
OK.

00:14:57.310 --> 00:15:01.920
And also the cursor becomes a point.

00:15:01.990 --> 00:15:09.790
So first you going to access the list items by going to the nut close and then inside the closet was

00:15:09.880 --> 00:15:14.170
in the list items and then going on.

00:15:14.260 --> 00:15:18.190
However with no space between the calls and texts.

00:15:18.340 --> 00:15:25.260
So we're going to start with the border bottom.

00:15:25.920 --> 00:15:37.330
So I'm going to go for one big sale or the with a style of solid and for the color we're going to use

00:15:37.330 --> 00:15:42.820
the same color as the brand.

00:15:45.450 --> 00:15:49.580
OK.

00:15:52.820 --> 00:15:55.960
OK.

00:15:56.800 --> 00:16:05.210
Now you can notice that there is a slight change to the height of the navigation bar.

00:16:05.400 --> 00:16:12.260
Once we hover on the elements there is noise because the bottom bottom is one pixel wide.

00:16:12.490 --> 00:16:20.270
So when we have all the elements the total height of the elements increases by one pixel.

00:16:20.630 --> 00:16:28.710
And consequently our navigation bar will also increase the height by one pixel.

00:16:28.810 --> 00:16:38.620
So to fix this we are going to reduce the putting bottom of the list items by one pixel.

00:16:39.440 --> 00:16:48.310
OK so the original putting bottom was to pixel OK because the person to put in top and bottom they are

00:16:48.310 --> 00:16:54.880
both Tepic So we're going to set the bottom one to nine pixel on pixels.

00:16:55.120 --> 00:17:00.470
So now the height of the navigation bar doesn't change.

00:17:00.770 --> 00:17:01.730
OK.

00:17:01.780 --> 00:17:06.210
And finally we're going to change the cursor to point

00:17:09.150 --> 00:17:09.660
concealers