WEBVTT

00:00:06.840 --> 00:00:07.080
All right.

00:00:07.080 --> 00:00:09.390
Now let's move to our menu.

00:00:09.390 --> 00:00:15.230
So we're going to create a div inside a div we can create and an order list.

00:00:15.390 --> 00:00:16.220
OK.

00:00:16.730 --> 00:00:19.110
And then we're going to add some styling decoration.

00:00:19.200 --> 00:00:19.410
OK.

00:00:19.410 --> 00:00:22.160
Using colors transitions and so on.

00:00:22.710 --> 00:00:28.440
So let's go back to our index that's a stable file and right after the header div.

00:00:28.540 --> 00:00:36.340
OK let's create another div and give it an ID menu.

00:00:37.280 --> 00:00:37.820
OK.

00:00:37.990 --> 00:00:45.650
So inside this stuff we're going to have another list where we can place all these items.

00:00:45.750 --> 00:00:46.590
OK so

00:00:50.020 --> 00:00:55.470
we're going to have list items and inside each list item we can have a link.

00:00:56.110 --> 00:00:56.440
OK.

00:00:56.470 --> 00:00:59.600
We're going to play some text so that first one is going to be home.

00:00:59.830 --> 00:01:05.970
And for each link it can give give it a riff OK if you want to.

00:01:06.000 --> 00:01:13.820
And now this deprecates this line four times.

00:01:14.780 --> 00:01:15.270
OK.

00:01:15.450 --> 00:01:26.580
We have five items and this change the text of the other links so all lined Thorold's

00:01:29.710 --> 00:01:33.260
then.

00:01:35.440 --> 00:01:42.100
And so you know that's OK.

00:01:42.930 --> 00:01:43.320
So

00:01:47.100 --> 00:01:49.640
this is how our list looks like for now.

00:01:49.930 --> 00:01:51.200
OK.

00:01:51.840 --> 00:01:56.200
So we're going to need to add some styling to get it like this.

00:01:56.310 --> 00:01:57.990
OK inline.

00:01:58.740 --> 00:02:05.990
So it goes our styling sheet.

00:02:06.000 --> 00:02:09.170
So first of all to get rid of the bullet points.

00:02:09.180 --> 00:02:09.710
OK.

00:02:10.050 --> 00:02:20.170
We are going to select our on a list and we will change the list style ok to none.

00:02:20.620 --> 00:02:22.880
No we don't have any Woodys points that.

00:02:23.060 --> 00:02:24.790
OK.

00:02:24.950 --> 00:02:28.920
And that's who gets our lists in line like this.

00:02:28.920 --> 00:02:31.180
We are going to style the list items.

00:02:31.410 --> 00:02:36.480
So we get to access the list items

00:02:39.420 --> 00:02:40.450
from the menu.

00:02:40.530 --> 00:02:40.970
OK.

00:02:41.070 --> 00:02:45.450
So first we are accessing the menu using using its ID.

00:02:45.480 --> 00:02:53.550
So that's number sign menu and then we accessing the unordered list and then we accessing the list item

00:02:53.670 --> 00:02:55.100
inside the Donnellys.

00:02:55.170 --> 00:02:56.550
OK.

00:02:57.180 --> 00:03:07.320
So it gets the less inclined we get to set the float property of the list items to left.

00:03:07.920 --> 00:03:08.270
OK.

00:03:08.280 --> 00:03:13.300
Now all our list items are going to be floating left.

00:03:13.650 --> 00:03:19.550
Right now we're going to need to add some padding.

00:03:19.800 --> 00:03:20.710
OK.

00:03:21.000 --> 00:03:25.810
So we don't want any top and most important for now.

00:03:26.460 --> 00:03:30.110
We only want the rights and lefts paddings.

00:03:30.390 --> 00:03:36.220
So we're going to set the putting property using two values.

00:03:36.570 --> 00:03:40.160
The first value is going to be for the top on what's I'm going to set it to zero.

00:03:40.170 --> 00:03:48.660
And the second value we can choose for example 10 pixels and it's going to be for the right and left

00:03:48.690 --> 00:03:49.410
panic.

00:03:49.680 --> 00:03:58.160
OK now let's style our menu Dave and on some hikes and background color.

00:03:58.170 --> 00:04:03.700
So I'm going to put the signing of the menu just before the end of the list signing.

00:04:03.840 --> 00:04:08.490
OK using ID.

00:04:09.000 --> 00:04:16.780
Let's change the height to 50 pixels.

00:04:18.450 --> 00:04:21.140
Probably more 7c.

00:04:22.750 --> 00:04:27.220
OK and let's give it some background.

00:04:27.750 --> 00:04:29.300
So we're going to use gradients again.

00:04:29.300 --> 00:04:32.950
We're going to use the background property.

00:04:35.130 --> 00:04:37.150
OK.

00:04:37.170 --> 00:04:41.850
So we're going to start the topgallant

00:04:52.100 --> 00:04:58.790
and then the Muslim culture.

00:05:00.900 --> 00:05:04.480
OK here we go.

00:05:04.520 --> 00:05:05.980
All right.

00:05:06.730 --> 00:05:13.280
OK so now let's go back to our list items and now we're going to style the text inside the list items

00:05:13.280 --> 00:05:13.580
.

00:05:13.800 --> 00:05:18.630
And for that we're going to access the link inside each list item.

00:05:18.920 --> 00:05:19.640
OK.

00:05:20.060 --> 00:05:25.880
So to do that we're going to access the list item first

00:05:28.970 --> 00:05:31.830
using the same syntax we used before.

00:05:31.880 --> 00:05:34.970
And then inside the list item we going to access the link.

00:05:35.060 --> 00:05:35.710
OK.

00:05:36.230 --> 00:05:41.260
So we don't want the links to be underlined.

00:05:41.420 --> 00:05:41.910
OK.

00:05:42.140 --> 00:05:49.580
So to do this you're going to use the text decoration property and are going to say that to none.

00:05:50.060 --> 00:05:51.210
OK.

00:05:52.180 --> 00:06:02.490
Now our links on those light also you want all links to be OPIC case.

00:06:02.510 --> 00:06:07.310
So going to use the text transform property and we will say that to uppercase

00:06:11.330 --> 00:06:18.400
also let's change the font size to make it a little bit bigger.

00:06:18.560 --> 00:06:19.640
Is Troy 15

00:06:23.990 --> 00:06:28.660
or 16.

00:06:28.660 --> 00:06:29.640
It probably 70.

00:06:29.770 --> 00:06:30.980
OK.

00:06:32.580 --> 00:06:35.110
That looks fine.

00:06:35.110 --> 00:06:35.980
All right.

00:06:36.080 --> 00:06:37.780
Now let's add a color.

00:06:37.960 --> 00:06:38.470
OK.

00:06:38.600 --> 00:06:39.050
So

00:06:42.110 --> 00:06:49.250
we can try to use our colors either to select the color but the problem is once we have all the elements

00:06:49.400 --> 00:06:50.380
the color changes.

00:06:50.450 --> 00:06:55.730
OK so we're not going to be able to use colors for this purpose so what we're going to do.

00:06:55.790 --> 00:06:59.350
I'm going to click right and go to inspect elements.

00:06:59.950 --> 00:07:00.580
OK.

00:07:00.650 --> 00:07:09.820
And then inside the code of this page we can get these as has properties of the link.

00:07:09.830 --> 00:07:10.230
OK.

00:07:10.290 --> 00:07:18.690
So so that's our menu div and does the list.

00:07:19.010 --> 00:07:21.170
If we access any list item

00:07:24.250 --> 00:07:26.130
and exclude exits.

00:07:26.310 --> 00:07:26.940
OK

00:07:30.080 --> 00:07:35.370
then you can see the siestas properties of that list items.

00:07:35.400 --> 00:07:37.480
There it is here.

00:07:37.490 --> 00:07:44.310
So we looking at the properties of the link and the color.

00:07:44.390 --> 00:07:48.710
Is this something to copy it.

00:07:49.130 --> 00:07:50.970
I'm going to basic that.

00:07:51.290 --> 00:07:52.830
OK.

00:07:53.970 --> 00:07:55.870
And then of course the right color.

00:07:56.060 --> 00:07:59.520
OK.

00:08:00.380 --> 00:08:06.680
Now let's add some more padding to our list items.

00:08:06.830 --> 00:08:08.090
So let's change this to

00:08:10.700 --> 00:08:12.660
20 or 30.

00:08:12.800 --> 00:08:13.480
OK.

00:08:13.480 --> 00:08:17.190
So are more distant from each other.

00:08:18.020 --> 00:08:20.990
OK.

00:08:20.990 --> 00:08:25.690
Also let's separate the list items using this vertical bar.

00:08:25.790 --> 00:08:26.840
OK.

00:08:26.870 --> 00:08:31.340
That's that we're going to add some border right to each list item.

00:08:32.120 --> 00:08:37.520
So and before doing this we're going to need to change the height of each list item so that we get the

00:08:37.520 --> 00:08:40.300
right height for our bar.

00:08:40.420 --> 00:08:55.080
Ok so can I change the height of our list items to 20 pixels and then we're going to add a border.

00:08:55.100 --> 00:08:56.900
Right.

00:08:58.100 --> 00:08:59.930
That's going to style is following.

00:08:59.930 --> 00:09:07.790
So for the way we're going to go for one pixels one pixel and then it's going to be a solid style for

00:09:07.790 --> 00:09:08.500
the color.

00:09:08.570 --> 00:09:13.800
We'll use the same color we use for sex.

00:09:15.530 --> 00:09:20.830
OK.

00:09:24.920 --> 00:09:28.940
So we can see how bad they're going to make it a little bit bigger.

00:09:28.970 --> 00:09:32.760
It's going to change the height of our list items.

00:09:33.350 --> 00:09:36.710
Let's go for example.

00:09:40.270 --> 00:09:40.650
Ok

00:09:43.560 --> 00:09:46.670
that looks all right OK.

00:09:47.790 --> 00:09:52.260
And also we want to censor the text vertically

00:09:54.860 --> 00:10:03.790
with the vertical bar so to do that we're going to change the line height of the text or the link.

00:10:03.940 --> 00:10:04.460
OK.

00:10:04.680 --> 00:10:05.070
So

00:10:08.120 --> 00:10:15.990
it's a very useful property and we'll say that two to pixels for example

00:10:18.960 --> 00:10:24.290
or 20 or 30 looks fine.

00:10:24.410 --> 00:10:26.980
OK.

00:10:27.480 --> 00:10:29.110
All right.

00:10:29.640 --> 00:10:35.820
Now let's add some space between the list items and the border of our menu.

00:10:36.120 --> 00:10:41.130
So you going to add some padding to the menu div.

00:10:42.790 --> 00:10:43.400
OK.

00:10:43.770 --> 00:10:46.360
So we only want to apply some padding.

00:10:46.620 --> 00:10:48.690
No left or right hand side.

00:10:48.720 --> 00:10:54.200
So let's go for five pixels and 0

00:10:58.740 --> 00:11:00.340
is a bit more padding.

00:11:00.620 --> 00:11:03.100
Probably seven.

00:11:04.620 --> 00:11:07.250
And that looks better.

00:11:07.850 --> 00:11:12.240
OK.

00:11:12.600 --> 00:11:14.290
All right.

00:11:14.610 --> 00:11:19.970
Now you will notice does the last list item doesn't have any border.

00:11:19.980 --> 00:11:20.690
Right.

00:11:20.990 --> 00:11:21.640
OK.

00:11:21.870 --> 00:11:23.420
So we want to get rid of this.

00:11:23.760 --> 00:11:24.290
OK.

00:11:24.660 --> 00:11:34.040
So to do that we are going to access the last list item of our list.

00:11:34.920 --> 00:11:42.330
So first we get to access the menu using its ID and then the unordered lists and then the list item

00:11:42.380 --> 00:11:51.880
in size and then we get to use call on last night and make sure that there is no space between the call

00:11:51.880 --> 00:11:52.840
or the text.

00:11:52.880 --> 00:11:53.530
OK.

00:11:53.910 --> 00:11:58.270
So then inside the brackets we're going to rights voting rights

00:12:02.860 --> 00:12:04.240
OK.

00:12:04.530 --> 00:12:07.020
We're going to say that to none.

00:12:07.850 --> 00:12:12.770
And now we can see that there is no border right for that last place item.

00:12:13.070 --> 00:12:17.310
OK.

00:12:18.000 --> 00:12:18.480
All right.

00:12:18.570 --> 00:12:23.730
Now we are going to add some styling to our links so that they change when we get on them.

00:12:23.910 --> 00:12:24.540
OK.

00:12:24.620 --> 00:12:29.190
So we want the color to change to this nice purple color.

00:12:29.190 --> 00:12:35.740
And also we want the font size to become bigger and the font weight to become bald.

00:12:35.940 --> 00:12:36.480
OK.

00:12:36.840 --> 00:12:41.830
So to access the links we're going to use the same way we have used before.

00:12:42.150 --> 00:12:42.620
OK.

00:12:42.750 --> 00:12:49.740
Followed by CONAN And then over and bear in mind there is no space between Kallen and text.

00:12:50.010 --> 00:12:55.050
Ok so first of all this change the font size to 20 pixels

00:12:57.820 --> 00:13:04.990
that explained to you the font weight too bold.

00:13:06.420 --> 00:13:07.130
Okay.

00:13:07.350 --> 00:13:12.650
And finally let's change the color to the same purple color we see here.

00:13:12.690 --> 00:13:13.320
OK.

00:13:13.320 --> 00:13:18.830
So let's speak it's using our colors you know it's going to be this one.

00:13:19.080 --> 00:13:23.390
And let's go let's turn.

00:13:23.800 --> 00:13:27.650
Here we go.

00:13:28.380 --> 00:13:34.110
Because like it's a little bit different in this respect.

00:13:34.110 --> 00:13:36.860
OK.

00:13:40.200 --> 00:13:41.410
See now.

00:13:41.910 --> 00:13:42.150
OK.

00:13:42.150 --> 00:13:43.340
That looks better.

00:13:43.950 --> 00:13:45.290
OK.

00:13:46.410 --> 00:13:47.010
All right.

00:13:47.010 --> 00:13:51.800
Now let's make our first list item active.

00:13:51.980 --> 00:13:52.870
OK.

00:13:53.040 --> 00:13:54.090
Like this.

00:13:54.450 --> 00:13:58.790
So to do that we're going to go back to our experts Cheryl file.

00:13:58.920 --> 00:14:07.120
You can go to the first list item and we are going to give it to us active and then size.

00:14:07.230 --> 00:14:07.590
OK.

00:14:07.620 --> 00:14:08.040
So

00:14:11.490 --> 00:14:15.950
we're going to use the same style we use for her ink on the links.

00:14:16.170 --> 00:14:21.400
So all we're going to do an odd base Alexa here for the August evening.

00:14:21.680 --> 00:14:22.410
OK.

00:14:22.880 --> 00:14:34.620
And rather than a going on over we're going to write a dot active meaning the links of class active

00:14:34.620 --> 00:14:34.850
.

00:14:35.040 --> 00:14:36.950
OK.

00:14:37.130 --> 00:14:39.340
And reason.

00:14:39.590 --> 00:14:46.040
And then when we refresh the page it works OK.

00:14:46.170 --> 00:14:54.480
All right now we are going to the transition effects that we see when we hope that the link elements

00:14:54.990 --> 00:14:59.530
we can see that they go smoothly from the initial state to the Hovis state.

00:14:59.650 --> 00:15:00.720
OK.

00:15:01.020 --> 00:15:08.290
So to do that we are going to select our links so we'll use the selection.

00:15:08.850 --> 00:15:14.310
And we're going to use the transition property.

00:15:15.510 --> 00:15:18.110
OK so this is the standard property.

00:15:18.270 --> 00:15:19.750
OK.

00:15:20.790 --> 00:15:26.220
So first of all we are going to specify which attributes we are looking at.

00:15:26.220 --> 00:15:34.860
So basically once the font size to take a certain direction it's moved from the initial font size to

00:15:34.860 --> 00:15:36.600
the final font size.

00:15:36.600 --> 00:15:41.560
So our beauty is font size.

00:15:42.810 --> 00:15:49.190
Ok then we are going to set the duration of our transition.

00:15:49.290 --> 00:15:51.960
So let's try first one second.

00:15:52.080 --> 00:15:52.500
OK.

00:15:52.500 --> 00:15:54.480
As for second.

00:15:55.570 --> 00:15:56.450
All right.

00:15:56.460 --> 00:16:02.110
And then we are going to set the transition timing function.

00:16:02.380 --> 00:16:05.420
Ok so if we say that to linear for example.

00:16:05.430 --> 00:16:10.730
So this means that the speed of the transition is the same from the beginning till the end.

00:16:10.960 --> 00:16:19.410
OK so if we try this you can see it takes one second while the transition to happen and also the speed

00:16:19.440 --> 00:16:22.750
is the same from the beginning till the end.

00:16:22.770 --> 00:16:27.440
So let's change the duration to half a second

00:16:32.120 --> 00:16:38.960
and let's make it shorter.

00:16:39.350 --> 00:16:42.710
But it looks all right rather than linear.

00:16:42.930 --> 00:16:53.600
I'm going to use IIS which means that the speed starts slow then becomes fast then and slow.

00:16:53.820 --> 00:16:55.520
That looks fine.

00:16:56.490 --> 00:16:58.020
OK.

00:16:59.190 --> 00:17:00.290
All right.

00:17:00.720 --> 00:17:05.860
So we need to add a few more lines for this property.

00:17:06.090 --> 00:17:06.770
OK.

00:17:07.070 --> 00:17:08.660
For other browsers.

00:17:09.140 --> 00:17:17.460
So so we're going to add one line for Safari.

00:17:17.490 --> 00:17:24.980
Now we're going to place just before the transition word we're going to place minus sign K minus sign

00:17:25.260 --> 00:17:29.000
get the minus sign.

00:17:29.550 --> 00:17:37.310
And then for Mozilla I mean a minus sign most a sign.

00:17:37.590 --> 00:17:48.000
And then for Oprah it's going to be a minus sign minus sign and or Internet Explorer.

00:17:48.400 --> 00:17:51.720
We're going to have to sign Imus to say OK.

00:17:51.750 --> 00:17:56.190
And finally the sun is going to be this we should be working for Chrome for example.

00:17:56.530 --> 00:18:01.340
OK.

00:18:04.780 --> 00:18:06.750
And it looks orit's