WEBVTT

00:00:06.900 --> 00:00:10.220
So far we have made some really good progress in our projects.

00:00:10.350 --> 00:00:13.250
We have created our background video.

00:00:13.470 --> 00:00:16.730
We have created the collapsible navigation bar.

00:00:17.280 --> 00:00:21.780
We finished the home section and the About section.

00:00:21.780 --> 00:00:29.180
Now we are ready to move to the promise section which contains a nice carousel slide.

00:00:29.730 --> 00:00:30.490
OK.

00:00:30.660 --> 00:00:37.830
So let's go ahead and create this.

00:00:38.430 --> 00:00:48.770
So we're going to go to the index there's a stable file and then go to the carousel section.

00:00:49.020 --> 00:00:49.590
OK.

00:00:49.890 --> 00:00:52.140
So to create our carousel.

00:00:52.140 --> 00:01:04.290
First of all we're going to create a div of gloss or ID promise to link it to the links in the location

00:01:04.290 --> 00:01:04.800
bar.

00:01:05.110 --> 00:01:16.950
OK then we're going to need to use a container and just for simplicity I'm going to make the same div

00:01:17.640 --> 00:01:20.730
a container by giving is a class containing a float

00:01:23.980 --> 00:01:28.270
OK or container or ice.

00:01:28.320 --> 00:01:30.880
Now let's create our Carrousel.

00:01:31.680 --> 00:01:37.260
So first of all we need to create a div of class

00:01:39.930 --> 00:01:40.530
carrousel

00:01:44.010 --> 00:01:45.910
and slide.

00:01:47.160 --> 00:01:57.930
And we're going to give it an ID my carrousel will need the ID to link the carousel to the carousel

00:01:57.960 --> 00:02:04.050
indicators and the previous and next links.

00:02:04.200 --> 00:02:09.760
Ok then we will need a data butes which is data right.

00:02:10.040 --> 00:02:14.520
Are we're going to set to Carrousel.

00:02:15.340 --> 00:02:15.620
OK.

00:02:15.630 --> 00:02:20.240
So inside these elements we can replace a few elements.

00:02:20.460 --> 00:02:29.790
So first of all we can create an ordered list which corresponds to the carousel indicators and then

00:02:30.420 --> 00:02:38.620
we are going to create a death ok of class carrousel

00:02:41.910 --> 00:02:55.800
in a k which corresponds to the items of the Carousel which include images and text.

00:02:55.890 --> 00:03:00.980
And finally we're going to have a couple of links.

00:03:02.100 --> 00:03:13.480
So the first thing is going to be the previous link and the other one is going to be the next link.

00:03:14.040 --> 00:03:14.820
OK.

00:03:15.090 --> 00:03:18.320
So let's go back to the carousel indicators.

00:03:18.660 --> 00:03:26.740
So this list is going to have a class carrousel indicators.

00:03:26.790 --> 00:03:27.610
OK.

00:03:28.020 --> 00:03:34.020
So to start just for simplicity we'll create a simple carousel of two items.

00:03:34.020 --> 00:03:34.750
OK.

00:03:34.830 --> 00:03:35.100
So

00:03:37.920 --> 00:03:46.830
inside the list of indicators we are going to place to list items.

00:03:46.830 --> 00:03:59.210
So each list item is going to have a data targets going into the ID of the Carousel which is my Garcelle

00:03:59.220 --> 00:03:59.650
.

00:04:00.150 --> 00:04:02.990
OK.

00:04:03.210 --> 00:04:09.150
And also we need a data slide to us butes

00:04:12.300 --> 00:04:18.080
which will link the indicator to one of the items inside the carousel.

00:04:18.430 --> 00:04:19.040
OK.

00:04:19.560 --> 00:04:26.210
So the first one is going to the element of index 0.

00:04:26.240 --> 00:04:27.690
All right.

00:04:28.650 --> 00:04:32.220
So if we duplicate this list item

00:04:35.980 --> 00:04:41.810
then now we're going to have two indicators for our first example.

00:04:41.990 --> 00:04:43.760
OK.

00:04:45.000 --> 00:04:48.190
Now let's move to the carousel.

00:04:49.220 --> 00:04:54.900
And before we do that let's just make the first list item or the first indicator active or the beginning

00:04:55.920 --> 00:04:57.930
by adding a class

00:05:03.990 --> 00:05:05.720
actually.

00:05:07.110 --> 00:05:07.570
OK.

00:05:07.780 --> 00:05:10.960
So inside the carousel are we're going to place all our items.

00:05:11.130 --> 00:05:17.900
So each item is going to be a div of class item.

00:05:19.380 --> 00:05:21.930
OK.

00:05:22.060 --> 00:05:28.260
And inside this item we are going to place an image.

00:05:29.380 --> 00:05:29.830
OK.

00:05:29.840 --> 00:05:32.570
Going to need to give us a source attributes.

00:05:33.370 --> 00:05:33.930
OK.

00:05:34.120 --> 00:05:37.980
And a death

00:05:41.250 --> 00:05:44.190
which is going to be our carrousel caption.

00:05:44.710 --> 00:05:48.570
So going to give us a class carousel cups.

00:05:51.430 --> 00:05:53.110
OK.

00:05:54.670 --> 00:05:58.210
So inside the div we're going to place a heading

00:06:04.500 --> 00:06:07.360
H2.

00:06:09.750 --> 00:06:15.630
OK so let's duplicate this item to create the second one.

00:06:16.930 --> 00:06:18.780
All right.

00:06:20.560 --> 00:06:24.660
So let's get the text for the headings.

00:06:24.750 --> 00:06:25.920
So the first heading

00:06:28.690 --> 00:06:30.890
is going to be this one

00:06:37.790 --> 00:06:44.260
and the second one is going to be this way.

00:06:47.720 --> 00:06:48.890
OK.

00:06:48.910 --> 00:06:49.980
So let's

00:06:53.010 --> 00:06:59.690
save this and if we go back to the first item we are going to make its Occy as well.

00:06:59.810 --> 00:07:04.610
So this difference I assume that we're going to see when we load the page.

00:07:04.840 --> 00:07:05.800
So if we

00:07:09.430 --> 00:07:10.410
refresh the page

00:07:13.180 --> 00:07:17.650
we still don't see anything.

00:07:18.880 --> 00:07:26.220
And now we are going to populates the previous and next links.

00:07:27.040 --> 00:07:36.940
So the previous link is going to have a few classes so left of then carrousel control.

00:07:37.690 --> 00:07:38.220
OK.

00:07:38.380 --> 00:07:46.460
And we need to give us any ref going to the ID of the Carousel which is my Carrousel.

00:07:47.560 --> 00:07:49.090
OK.

00:07:49.380 --> 00:07:51.550
Also we need to give is a data slide

00:07:54.750 --> 00:07:59.680
that we're going to set to previous like this.

00:07:59.690 --> 00:08:01.080
OK.

00:08:01.500 --> 00:08:06.150
Now to create Steig if I can we're going to use a span.

00:08:07.310 --> 00:08:08.000
OK.

00:08:08.290 --> 00:08:12.480
Of glass leaf icon

00:08:15.900 --> 00:08:20.080
and belief icon.

00:08:23.740 --> 00:08:24.910
Chevron left

00:08:29.010 --> 00:08:37.920
for technologies we can add another span a hit and once going to give it a close it's only so that it's

00:08:37.920 --> 00:08:44.390
hidden OK and we can play some text inside saying previous.

00:08:45.700 --> 00:08:48.830
OK so that's the left arrow.

00:08:49.500 --> 00:08:53.700
We can just duplicate this to create the other row.

00:08:53.750 --> 00:09:02.380
And I just change everything saying left to right previous to next.

00:09:04.870 --> 00:09:07.460
OK.

00:09:09.310 --> 00:09:10.020
OK.

00:09:10.020 --> 00:09:12.400
Now we will need to get some pictures.

00:09:12.490 --> 00:09:13.120
OK.

00:09:13.120 --> 00:09:15.150
So there's a good Web sites we can use for this.

00:09:15.150 --> 00:09:17.410
It's called picks or battles.

00:09:17.910 --> 00:09:21.500
So if you really said there then you can download pictures for free.

00:09:21.730 --> 00:09:30.840
OK and once you've done that you can place the pictures inside the images folder.

00:09:31.420 --> 00:09:34.900
It is going to drag and drop them.

00:09:36.150 --> 00:09:40.820
OK and now we are ready to use these pictures inside our items.

00:09:40.990 --> 00:09:43.870
So will just feel the source as abuse.

00:09:43.990 --> 00:09:51.130
So when I use images like this one and images

00:09:53.910 --> 00:09:55.800
puzzle Well the second one.

00:09:56.320 --> 00:09:57.190
OK.

00:09:57.250 --> 00:10:03.940
Now if we save and refresh our page there we can see hours later there.

00:10:04.330 --> 00:10:05.370
OK.

00:10:05.380 --> 00:10:10.260
So by default the slide it takes the full width of the page.

00:10:11.050 --> 00:10:20.160
So now you will need to add some styling in the siestas file to our carousel slide.

00:10:24.950 --> 00:10:27.180
It's going to go to the promise section.

00:10:27.380 --> 00:10:27.740
OK.

00:10:27.790 --> 00:10:29.910
So I've got a list of actions to do.

00:10:30.380 --> 00:10:31.920
OK.

00:10:33.520 --> 00:10:39.040
So first of all like we did with the other sections we're going to be adding some Putting up to the

00:10:39.040 --> 00:10:40.170
promise section.

00:10:40.540 --> 00:10:44.750
OK so to do this we're going to access the section using ID.

00:10:45.040 --> 00:10:47.780
Promise.

00:10:48.130 --> 00:10:48.490
OK.

00:10:48.500 --> 00:10:54.980
And then it will set the putting it up to 100 pixels.

00:10:55.870 --> 00:11:00.070
OK then we're going to style the carousel.

00:11:00.110 --> 00:11:07.420
So first of all we are going to reduce the width of the carousel so that it occupies only 60 percent

00:11:07.450 --> 00:11:08.870
of the width of the page.

00:11:09.260 --> 00:11:11.480
OK.

00:11:12.350 --> 00:11:16.400
Just like this.

00:11:16.750 --> 00:11:27.370
So to do this we're going to select the carousel using its ID which is my carousel and we're going to

00:11:27.380 --> 00:11:32.030
assess the width using a percentage 60 percent.

00:11:32.770 --> 00:11:35.560
OK.

00:11:36.110 --> 00:11:38.890
Now you can see that the carousel is not scented anymore.

00:11:38.890 --> 00:11:41.420
So the sensor is we're going to use the emergent property.

00:11:41.890 --> 00:11:46.200
And I'm going to set it to zero and also.

00:11:47.460 --> 00:11:48.130
OK.

00:11:48.590 --> 00:11:53.530
So zero for the top and bottom sides and also for the left and right sides.

00:11:53.750 --> 00:11:57.240
And we end up with a scented carousel.

00:11:58.500 --> 00:12:01.270
Now we will need to

00:12:05.240 --> 00:12:10.300
center the elements inside the carousel as well.

00:12:10.300 --> 00:12:17.970
So to do this we are going to use the text align property and reset it to sensor.

00:12:19.120 --> 00:12:24.930
OK so we're not going to see this clearly now because the pictures at the moment they are big.

00:12:25.120 --> 00:12:29.150
But if we had a small picture we'd see a difference.

00:12:29.890 --> 00:12:32.200
OK so what I see is for the carousel.

00:12:32.260 --> 00:12:34.470
Now we need to move to the images.

00:12:35.020 --> 00:12:41.800
So we want to control the heights of the images

00:12:46.270 --> 00:12:56.500
so to select the images we're going to go first to the inner or the carousel in the glass

00:12:59.380 --> 00:13:04.710
and then the item and then the image.

00:13:04.880 --> 00:13:10.520
OK if you remember the image was inside the item class.

00:13:11.240 --> 00:13:14.680
That's the image I was inside the item and the item is inside the

00:13:23.680 --> 00:13:24.860
carousel.

00:13:25.860 --> 00:13:27.370
OK.

00:13:28.300 --> 00:13:35.980
So it's syle this so you can assess the height to 400 pixels.

00:13:36.800 --> 00:13:38.550
OK.

00:13:39.790 --> 00:13:46.410
And see at the moment the picture is not censored.

00:13:46.810 --> 00:13:52.700
So to censor the picture we're going to use again the Margene

00:13:55.690 --> 00:14:00.340
0 0 2 trick.

00:14:00.350 --> 00:14:00.930
OK.

00:14:01.280 --> 00:14:05.900
Now the images are censored.

00:14:07.150 --> 00:14:12.650
OK.

00:14:12.640 --> 00:14:13.040
All right

00:14:16.750 --> 00:14:23.130
now we are going to move the captions and the pictures.

00:14:23.380 --> 00:14:24.030
OK.

00:14:24.040 --> 00:14:28.470
So at the moment they are inside the picture but would like them to become like this.

00:14:29.200 --> 00:14:29.830
OK.

00:14:29.840 --> 00:14:34.390
Don't worry about the size for now in small devices we're going to come back to that later.

00:14:34.390 --> 00:14:43.540
So let's move the caption under the picture now so to do this we're going to need to access the carousel

00:14:43.540 --> 00:14:50.160
captions using the carousel caption class.

00:14:51.780 --> 00:14:53.380
OK.

00:14:53.600 --> 00:15:02.650
And we are going to change the position property of these elements to relative.

00:15:04.670 --> 00:15:07.400
OK.

00:15:07.720 --> 00:15:09.850
Now you can see that it's outside the picture.

00:15:10.010 --> 00:15:22.610
OK but to censor the caption we are going to set two properties left to auto and right to otro and now

00:15:22.610 --> 00:15:24.480
it's censored.

00:15:25.660 --> 00:15:28.380
OK.

00:15:30.900 --> 00:15:32.050
And just to avoid

00:15:36.470 --> 00:15:46.720
Height's changing from one item to another we can fix the height of the caption to a specified height

00:15:48.670 --> 00:15:51.320
200 pixels for example.

00:15:51.320 --> 00:15:58.340
And now we are sure that the total height is all the time the same.

00:16:01.460 --> 00:16:01.680
OK

00:16:09.010 --> 00:16:16.240
just a quick change since we have censored the image using a matching 0 0 so we don't have to use the

00:16:16.250 --> 00:16:21.000
text align center inside the carousel.

00:16:21.190 --> 00:16:21.770
OK.

00:16:21.970 --> 00:16:27.610
So if you remember we used Margene 0 0 2 for the carousel to center at the Carousel itself inside the

00:16:27.620 --> 00:16:28.290
page.

00:16:28.430 --> 00:16:32.740
And we were trying to use the text align property to center elements inside the carousel.

00:16:33.080 --> 00:16:35.730
OK so now we don't have to use this.

00:16:36.000 --> 00:16:36.730
OK.

00:16:36.860 --> 00:16:44.050
Because the image is censored using the emergent property and also the text inside the caption is censored

00:16:44.060 --> 00:16:44.880
by default.

00:16:45.080 --> 00:16:48.290
OK so we can just get rid of this.

00:16:49.500 --> 00:16:49.940
OK