WEBVTT

00:00:06.740 --> 00:00:11.680
All right now let's move to the next piece of content in our page.

00:00:11.790 --> 00:00:14.120
So it's going to be a couple of sidebars.

00:00:14.220 --> 00:00:14.660
OK.

00:00:14.710 --> 00:00:18.540
They've got one on the left hand side and one on the right hand side.

00:00:18.570 --> 00:00:19.410
OK.

00:00:20.070 --> 00:00:26.010
So let's go to our index those and file and creates these sidebars.

00:00:26.010 --> 00:00:31.500
So following the introduction if we are going to create another day.

00:00:32.550 --> 00:00:37.480
I'm going to give you an ID left sidebar.

00:00:38.010 --> 00:00:38.620
OK.

00:00:38.670 --> 00:00:40.980
For this one and then we're going to create another

00:00:44.210 --> 00:00:46.120
one that's going to be all right.

00:00:46.140 --> 00:00:48.260
Sidewalk.

00:00:49.940 --> 00:00:51.220
OK.

00:00:52.180 --> 00:00:52.470
OK.

00:00:52.470 --> 00:00:56.690
Now we are going to style these sidebars.

00:00:56.760 --> 00:01:01.710
There would be some common properties between the two side bars.

00:01:01.740 --> 00:01:08.640
So to make it easy to save time we are going to add a class a common class to the side but I'm going

00:01:08.640 --> 00:01:09.920
to call it sidebar.

00:01:10.310 --> 00:01:15.270
And again use this clause to add all the common styling between the side bars.

00:01:15.470 --> 00:01:16.390
OK.

00:01:16.860 --> 00:01:25.640
So for example both side bars are going to have the same width and height.

00:01:25.680 --> 00:01:28.550
So this use the class to smileys.

00:01:28.650 --> 00:01:32.700
So that's going to be dots side bar.

00:01:35.060 --> 00:01:43.330
And let's go for a height of 500 pixels and a width of 400.

00:01:43.820 --> 00:01:45.470
OK.

00:01:46.740 --> 00:01:53.070
Now we want the left hand side side bar to float to the left and the right side bars they float to the

00:01:53.070 --> 00:01:53.670
right.

00:01:53.850 --> 00:02:00.750
So let's access each one using its ID to the left side bar.

00:02:01.230 --> 00:02:08.700
I am going to use the property floats to the left and the right side bar

00:02:11.580 --> 00:02:12.630
is going to float

00:02:15.810 --> 00:02:17.190
to the right.

00:02:18.010 --> 00:02:19.160
OK.

00:02:20.220 --> 00:02:24.350
Now if you go to our page I don't see anything yet.

00:02:24.450 --> 00:02:32.310
OK let's add a border property for both sidebands using the class.

00:02:32.910 --> 00:02:33.330
So

00:02:36.570 --> 00:02:43.140
let's pick up this color this time of the border.

00:02:47.520 --> 00:02:49.980
OK.

00:02:51.300 --> 00:03:01.170
So let's go for a with of one pixel then a solid style then the color that we copy to our people.

00:03:01.410 --> 00:03:03.100
OK.

00:03:04.940 --> 00:03:08.430
So now we can see both side bars there.

00:03:08.580 --> 00:03:09.810
OK.

00:03:10.890 --> 00:03:22.950
So let's add a bit more seining to them so we can change the border radius so that we can get something

00:03:22.950 --> 00:03:24.040
like this.

00:03:24.960 --> 00:03:28.920
And let's say that to pick cells

00:03:31.750 --> 00:03:38.660
or 20 big cells that looks OK.

00:03:38.910 --> 00:03:39.460
All right.

00:03:39.720 --> 00:03:44.730
OK now let's add some content inside our lines.

00:03:44.820 --> 00:03:46.450
So it starts with the left one.

00:03:46.530 --> 00:03:51.220
So you want to have a head.

00:03:51.450 --> 00:03:52.370
OK.

00:03:52.550 --> 00:03:53.430
All headings.

00:03:53.670 --> 00:04:03.150
So going to use an age three that are going to copy this text.

00:04:04.710 --> 00:04:06.100
OK.

00:04:06.150 --> 00:04:10.100
And then you are going to have a list.

00:04:10.200 --> 00:04:14.490
It's going to be a longer list inside the list.

00:04:14.710 --> 00:04:18.370
You can have a list of links.

00:04:18.770 --> 00:04:23.100
OK so inside this item we're going to have a link.

00:04:23.500 --> 00:04:26.660
We can place and the sheriff if you want to.

00:04:26.670 --> 00:04:27.920
OK.

00:04:28.020 --> 00:04:34.750
And then we're going to play some text inside the link.

00:04:35.190 --> 00:04:36.400
The first one is going to be.

00:04:36.470 --> 00:04:41.480
Year One three listens.

00:04:41.820 --> 00:04:43.020
They're going to duplicate this

00:04:48.350 --> 00:04:50.690
and then change text.

00:04:50.850 --> 00:04:53.190
So that's going to be to be

00:05:03.190 --> 00:05:06.190
OK here we go.

00:05:06.210 --> 00:05:07.480
All right.

00:05:08.070 --> 00:05:09.640
We're going to do the same thing.

00:05:10.030 --> 00:05:12.420
Well the other side bar.

00:05:12.600 --> 00:05:16.170
OK so we're going to have a header.

00:05:17.280 --> 00:05:18.590
OK.

00:05:19.590 --> 00:05:27.940
And then a list of links.

00:05:29.190 --> 00:05:30.330
They

00:05:33.960 --> 00:05:37.370
place an entry inside each link on to

00:05:54.400 --> 00:06:03.910
OK and you can add some text to this one.

00:06:05.340 --> 00:06:06.100
OK.

00:06:06.260 --> 00:06:06.530
And

00:06:11.020 --> 00:06:16.310
let's just supplicate this.

00:06:17.980 --> 00:06:25.050
OK another one and then the other one

00:06:30.590 --> 00:06:35.460
and then the other one.

00:06:40.300 --> 00:06:42.060
OK.

00:06:42.510 --> 00:06:47.750
OK so now of course all our content in the OK we just need to add some signing now.

00:06:47.750 --> 00:06:48.120
All right

00:06:49.760 --> 00:06:53.720
.

00:06:54.930 --> 00:07:03.960
So first let's add some padding to our sidebars so that we can introduce a gap between the border and

00:07:04.020 --> 00:07:04.820
the header.

00:07:04.890 --> 00:07:11.550
By the way there is a standard margin for is case with the gap that we see at the top here is because

00:07:11.550 --> 00:07:14.340
of the Standard 7 margin of the head.

00:07:14.700 --> 00:07:15.840
OK so it is odd.

00:07:15.870 --> 00:07:25.360
Some padding to our side bars using the side bar.

00:07:26.700 --> 00:07:31.600
So we're going to use two values.

00:07:32.370 --> 00:07:35.080
So one for the top and bottom sides.

00:07:35.120 --> 00:07:42.480
Going to go for 10 pixels and for the second value we're going to go for 20 pixels

00:07:45.460 --> 00:07:48.820
with the left and right hindsights.

00:07:48.840 --> 00:08:00.060
So let's make it a bit bigger 30 and you can see that the gap is the same though.

00:08:00.200 --> 00:08:00.930
All right

00:08:00.930 --> 00:08:06.760
.

00:08:06.810 --> 00:08:12.430
Also will it change the width of the sidebar so that they are a little bit bigger.

00:08:13.230 --> 00:08:13.530
OK.

00:08:13.530 --> 00:08:16.710
So 450 looks fine.

00:08:17.940 --> 00:08:21.510
OK.

00:08:21.540 --> 00:08:24.310
Now let's style the headers.

00:08:24.480 --> 00:08:27.470
All the headings inside the sidebars.

00:08:27.540 --> 00:08:28.210
OK.

00:08:28.480 --> 00:08:34.270
So that's how we're going to access the class side bar.

00:08:34.850 --> 00:08:41.220
And then we're going to access the ace threes inside the class.

00:08:42.530 --> 00:08:43.290
OK.

00:08:43.290 --> 00:08:50.060
So first we're going to change the color purple color.

00:08:51.060 --> 00:08:55.700
Let's pick this one and change the color.

00:08:57.270 --> 00:08:57.630
OK.

00:08:57.660 --> 00:09:01.710
And then let's change the font size.

00:09:02.100 --> 00:09:06.420
So let's try 25 pixels.

00:09:07.240 --> 00:09:12.520
Most likely bigger than c.

00:09:13.020 --> 00:09:14.940
And then

00:09:19.160 --> 00:09:20.580
OK.

00:09:20.760 --> 00:09:24.310
And now we get it moved to the list.

00:09:24.420 --> 00:09:25.000
OK.

00:09:25.230 --> 00:09:26.200
So first we can see less.

00:09:26.220 --> 00:09:29.800
Our lists don't have any bullet points there.

00:09:29.790 --> 00:09:38.760
And the reason why is because when we signed the first lists earlier we styled all the lists of our

00:09:39.060 --> 00:09:41.180
Bookman's using the tag.

00:09:41.280 --> 00:09:42.330
OK.

00:09:42.330 --> 00:09:48.990
So all the lists inside our documents we have a list style of not.

00:09:49.050 --> 00:09:54.830
Now let's move to the links inside the lists and just style these.

00:09:55.080 --> 00:10:08.460
We are going to access the sidebar class first and then the lists and then list items and then the link

00:10:08.480 --> 00:10:08.550
.

00:10:08.610 --> 00:10:09.390
OK.

00:10:11.200 --> 00:10:15.070
If you do only the class followed by the link will still work.

00:10:15.200 --> 00:10:16.830
OK.

00:10:17.410 --> 00:10:21.780
So let's just keep this syntax.

00:10:22.910 --> 00:10:25.000
We don't want our links to be underlined.

00:10:25.660 --> 00:10:33.940
So as we did before we're going to change the text decoration to none.

00:10:34.390 --> 00:10:34.850
OK.

00:10:34.890 --> 00:10:39.500
And then the other night any more words.

00:10:40.760 --> 00:10:49.640
And also we want a bigger font for our legs so we can change the font size

00:10:52.700 --> 00:11:02.660
to destroy 15 pixels or 20.

00:11:02.670 --> 00:11:04.080
That looks fine.

00:11:04.230 --> 00:11:06.720
OK.

00:11:07.280 --> 00:11:10.970
And for the color it's use.

00:11:10.970 --> 00:11:15.620
Our goal is either to pick the color from here.

00:11:15.870 --> 00:11:18.780
OK so we can use this color.

00:11:19.220 --> 00:11:21.780
Actually it's the same color that we use for our menu.

00:11:21.800 --> 00:11:22.810
So I just copy from there

00:11:28.280 --> 00:11:31.160
is this one.

00:11:33.550 --> 00:11:36.350
All right.

00:11:36.410 --> 00:11:38.460
That looks OK now.

00:11:39.500 --> 00:11:39.800
All right.

00:11:39.800 --> 00:11:43.140
Now let's tile our links when they have it.

00:11:43.220 --> 00:11:43.800
OK.

00:11:43.820 --> 00:11:46.940
And then the transition effect.

00:11:47.000 --> 00:11:47.510
So

00:11:51.230 --> 00:11:59.480
we are going to access the links inside the sidebar class just like this.

00:11:59.930 --> 00:12:05.330
And we are going to count on over.

00:12:05.710 --> 00:12:06.330
OK.

00:12:06.500 --> 00:12:10.630
And we'll use the same style for the active things.

00:12:11.330 --> 00:12:12.050
OK.

00:12:12.170 --> 00:12:16.360
That's going to be a lot actually like we did before.

00:12:16.840 --> 00:12:17.570
OK.

00:12:17.750 --> 00:12:24.860
So first the text decoration is still going to be done.

00:12:25.070 --> 00:12:29.540
OK.

00:12:30.500 --> 00:12:39.190
And the color is going to change.

00:12:39.680 --> 00:12:47.120
So we're going to use the same color that we use for the menu links

00:12:54.320 --> 00:12:58.460
which is this one.

00:13:01.380 --> 00:13:02.930
OK.

00:13:03.050 --> 00:13:07.240
And the font size is going to get bigger.

00:13:07.490 --> 00:13:08.450
OK.

00:13:08.450 --> 00:13:09.380
So let's try

00:13:12.350 --> 00:13:13.220
20 pixels

00:13:19.170 --> 00:13:21.910
or 23 pixels.

00:13:23.230 --> 00:13:25.140
Ok that's better.

00:13:26.180 --> 00:13:35.020
And also we want the font weight to become bold.

00:13:35.170 --> 00:13:37.070
All right.

00:13:37.720 --> 00:13:38.210
OK.

00:13:38.510 --> 00:13:41.190
And so are the transition effects.

00:13:41.340 --> 00:13:49.190
We're going to use exactly the same code we have used earlier but we're going to add to the link styling

00:13:49.200 --> 00:13:49.900
.

00:13:50.630 --> 00:13:57.630
So we are going to copy paste exactly the same code from there.

00:13:58.270 --> 00:14:00.290
OK so we're looking at the font size.

00:14:00.290 --> 00:14:05.490
We want the same duration and the same transition timing function.

00:14:05.510 --> 00:14:05.930
So

00:14:09.460 --> 00:14:10.070
here we go

00:14:14.240 --> 00:14:16.650
and it looks all right.

00:14:16.940 --> 00:14:18.820
Okay.

00:14:20.450 --> 00:14:20.900
All right.

00:14:21.020 --> 00:14:23.760
Now let's add more styling to the left hand side.

00:14:24.620 --> 00:14:33.750
So if we look at our target styling we'll see those We're going to need some space between the links

00:14:34.010 --> 00:14:38.930
and we can do that in an easy way just by adding some padding to the list items.

00:14:38.960 --> 00:14:39.780
OK.

00:14:40.160 --> 00:14:47.240
So we're going to access the list items inside

00:14:50.480 --> 00:14:53.140
the left hand side bar.

00:14:54.050 --> 00:15:04.710
We're not going to use the class are going to use the ID of the sidebar that's left sidebar.

00:15:05.020 --> 00:15:06.980
OK.

00:15:08.280 --> 00:15:09.580
And let's add some padding.

00:15:09.620 --> 00:15:10.010
Bottom

00:15:12.920 --> 00:15:16.770
of five pixels for example.

00:15:17.240 --> 00:15:21.240
All six.

00:15:22.270 --> 00:15:22.740
OK

00:15:23.960 --> 00:15:28.990
.

00:15:33.640 --> 00:15:35.380
And it looks fine.

00:15:35.660 --> 00:15:36.460
OK.

00:15:36.560 --> 00:15:36.830
All right.

00:15:36.830 --> 00:15:41.450
Now let's style our list using this picture.

00:15:41.570 --> 00:15:41.980
OK.

00:15:42.170 --> 00:15:54.060
So first let's go to the logo maker Web site and look for a similar picture.

00:15:59.690 --> 00:16:02.150
So we're going to search.

00:16:03.380 --> 00:16:05.030
I don't know.

00:16:06.010 --> 00:16:07.040
OK.

00:16:07.100 --> 00:16:07.400
And

00:16:13.230 --> 00:16:20.890
it's get this one and let's change the color to this color here.

00:16:20.940 --> 00:16:28.180
Let's pick it and go.

00:16:29.500 --> 00:16:29.920
Great.

00:16:29.930 --> 00:16:30.830
And they save this

00:16:34.320 --> 00:16:40.030
and just don't forget to copy the all the information using the spasm.

00:16:40.180 --> 00:16:41.100
OK.

00:16:41.170 --> 00:16:44.300
And place it somewhere in your web sites.

00:16:44.330 --> 00:16:44.750
OK.

00:16:44.810 --> 00:16:46.880
This could be in another page.

00:16:46.970 --> 00:16:50.180
You can link it to your Web site.

00:16:50.240 --> 00:16:52.640
Right now I've got the file in my desktop.

00:16:52.670 --> 00:16:53.320
OK.

00:16:53.340 --> 00:16:56.180
We're going to change the name of the file to

00:16:58.840 --> 00:16:59.540
erro.

00:16:59.870 --> 00:17:00.940
OK.

00:17:01.110 --> 00:17:06.640
Then I'm going to copy it's inside my images.

00:17:07.100 --> 00:17:07.870
OK.

00:17:07.880 --> 00:17:16.330
So if we use the picture just like this it's going to be too big for our list items.

00:17:16.430 --> 00:17:21.440
So we're going to do going to open is using panes like we did before.

00:17:23.240 --> 00:17:27.290
And we will resize our picture.

00:17:27.420 --> 00:17:30.240
You can click on resize pixels.

00:17:30.650 --> 00:17:37.900
I'm going to go for 20 pixels since outtakes of a size of 20 pixels with us.

00:17:38.180 --> 00:17:44.400
OK so let's say and there is this.

00:17:44.460 --> 00:17:45.980
Now if we go to our

00:17:48.740 --> 00:17:49.490
list items

00:17:52.670 --> 00:17:57.330
we can use the list style image property.

00:17:57.910 --> 00:17:58.650
OK.

00:17:58.650 --> 00:18:05.620
And we will say that using the you are able of the image which is going to be in images and then we

00:18:05.620 --> 00:18:07.670
can choose the arrow.

00:18:07.670 --> 00:18:08.890
Those Bangi picture.

00:18:09.110 --> 00:18:09.950
OK.

00:18:10.530 --> 00:18:16.860
Now we look our Web site we can see the styling there.

00:18:17.870 --> 00:18:19.780
OK.

00:18:20.130 --> 00:18:22.500
We're going to need to add more padding there.

00:18:22.730 --> 00:18:23.580
OK.

00:18:23.780 --> 00:18:26.570
So let's go back.

00:18:27.210 --> 00:18:35.150
Oh a list items and just add some padding left and just go for white pixels

00:18:38.330 --> 00:18:42.990
or 10 pixels and it looks a mess.

00:18:43.730 --> 00:18:47.910
OK.

00:18:52.290 --> 00:18:52.660
OK.

00:18:52.660 --> 00:18:58.950
Also we need to add a little bit more space on top of the list itself.

00:18:59.150 --> 00:19:05.080
So let's select the list OK

00:19:09.770 --> 00:19:12.440
and give it some

00:19:17.240 --> 00:19:17.960
putting up

00:19:26.150 --> 00:19:27.920
of pixels

00:19:31.640 --> 00:19:32.820
.

00:19:33.660 --> 00:19:38.170
All right.