WEBVTT

00:00:06.630 --> 00:00:08.750
Now we're going to move to our adult section.

00:00:08.940 --> 00:00:12.430
So we're going to be placing our title Inside a jumbotron.

00:00:12.720 --> 00:00:20.850
So we're going to create a div of glass Jumbotron

00:00:20.860 --> 00:00:28.700
.

00:00:36.650 --> 00:00:37.470
OK.

00:00:37.500 --> 00:00:46.160
And inside the Dave we are going to place a container OK or Concini fluid.

00:00:46.470 --> 00:00:54.420
I'm going to go for a container which is a div of class container.

00:00:56.260 --> 00:00:56.730
OK.

00:00:56.730 --> 00:01:02.830
And then we're going to place a header inside.

00:01:04.790 --> 00:01:05.630
OK.

00:01:05.910 --> 00:01:07.890
And we'll just copy this text

00:01:16.550 --> 00:01:17.890
is refresh our life review

00:01:17.900 --> 00:01:24.040
.

00:01:30.550 --> 00:01:31.570
OK.

00:01:31.650 --> 00:01:33.550
Now we can see our Jumbotron there.

00:01:33.720 --> 00:01:34.670
OK.

00:01:34.680 --> 00:01:37.370
He's got a great background by default.

00:01:37.470 --> 00:01:38.150
OK.

00:01:38.160 --> 00:01:39.970
We're going to need to teach you that so let's go to these.

00:01:39.970 --> 00:01:46.680
He has his file his go to the demo Tron section.

00:01:48.420 --> 00:01:48.840
So

00:01:52.680 --> 00:01:56.490
we're going to access the Jumbotron using the Jumbotron class

00:02:02.130 --> 00:02:04.050
and we'll change the background color

00:02:07.180 --> 00:02:11.260
to transparence OK.

00:02:11.960 --> 00:02:13.070
Now it looks better.

00:02:13.320 --> 00:02:15.330
Now we need to change the text color.

00:02:15.680 --> 00:02:20.560
OK.

00:02:21.370 --> 00:02:24.490
Two whites.

00:02:25.680 --> 00:02:26.010
OK

00:02:26.040 --> 00:02:31.670
.

00:02:31.950 --> 00:02:32.460
And

00:02:35.790 --> 00:02:41.620
also we're going to censor our text using the text align properly.

00:02:43.260 --> 00:02:46.580
As we said to Santa.

00:02:47.880 --> 00:02:48.690
All right

00:02:51.420 --> 00:02:56.680
now we're going to look at the magic property.

00:02:56.730 --> 00:03:05.070
So by default the Jumbotron class has got some Margene top and bottom.

00:03:05.290 --> 00:03:15.990
OK so we're going to get rid of that by setting margin to zero.

00:03:20.130 --> 00:03:21.120
And also

00:03:23.910 --> 00:03:27.930
the class comes with some default padding.

00:03:28.950 --> 00:03:31.990
So if we said the putting to zero.

00:03:32.590 --> 00:03:36.580
Now you can see that's our number 20 second less space.

00:03:36.630 --> 00:03:43.920
It's a little bit more putting the 10 pixels.

00:03:45.390 --> 00:03:47.410
And that looks fine.

00:03:47.910 --> 00:03:50.330
Now you add some spacing between the letters.

00:03:50.400 --> 00:03:51.620
OK.

00:03:52.140 --> 00:04:03.260
So to do that we're going to use the letter spacing property and go for 2.5 pixels.

00:04:05.370 --> 00:04:05.690
OK.

00:04:05.820 --> 00:04:08.460
That looks good.

00:04:10.590 --> 00:04:11.120
OK.

00:04:11.310 --> 00:04:15.610
Now we are ready to move to the icons section.

00:04:15.840 --> 00:04:23.280
OK so we're going to be creating these pictures with some text a header and paragraph for each picture

00:04:23.290 --> 00:04:23.670
.

00:04:24.180 --> 00:04:30.560
So we'll will use the push Trump grid system to allocate proper space for each component.

00:04:30.720 --> 00:04:39.060
OK so let's go to our indexers semifinal and let's go to the on section

00:04:43.310 --> 00:04:49.610
so to use the bootstrap grid system we're going to use the Arrau class which goes inside a container

00:04:49.630 --> 00:04:50.340
.

00:04:51.280 --> 00:04:54.060
That's a good practice is to place everything inside another.

00:04:54.130 --> 00:04:57.450
Dave let's we're going to use for styling.

00:04:57.890 --> 00:05:01.520
So will create a div

00:05:04.370 --> 00:05:08.670
and we'll give it a class icons.

00:05:08.970 --> 00:05:09.410
OK.

00:05:09.740 --> 00:05:17.300
You can give you an ID rather than a class since we have only one item or elements that we refer to

00:05:17.300 --> 00:05:18.470
using icons.

00:05:18.470 --> 00:05:19.000
OK.

00:05:19.280 --> 00:05:26.750
So inside this Dave we're going to create another div for our container.

00:05:27.480 --> 00:05:34.480
So class container is going to go for container rather than contain that fluid.

00:05:34.730 --> 00:05:44.340
OK so we're not going for the full width and then we can replace our row in the gay day of class row

00:05:44.380 --> 00:05:46.550
.

00:05:49.190 --> 00:05:51.180
OK.

00:05:53.030 --> 00:06:01.770
So for medium and large devices we want to split the screen all the row into three sections.

00:06:01.930 --> 00:06:02.420
OK.

00:06:02.630 --> 00:06:12.450
So we are going to use a class for each of these components which is going to be column medium for.

00:06:12.940 --> 00:06:13.500
OK.

00:06:13.700 --> 00:06:16.340
So four columns out of 12 columns.

00:06:16.400 --> 00:06:19.650
So let's start with the first components.

00:06:20.240 --> 00:06:22.250
So we're going to need needs to give us a class

00:06:27.200 --> 00:06:30.640
column medium for.

00:06:31.200 --> 00:06:31.560
OK.

00:06:31.660 --> 00:06:34.130
So we're using four columns of 12.

00:06:34.730 --> 00:06:39.510
And then inside these components we're going to have a picture.

00:06:39.980 --> 00:06:43.040
OK.

00:06:43.620 --> 00:06:46.330
And it gives a source.

00:06:47.700 --> 00:06:54.520
Ok I'm also going to use a class for all these pictures and solve them using the same styling.

00:06:54.860 --> 00:06:58.940
And let's give them a class called Body Image.

00:06:59.990 --> 00:07:02.750
OK we'll take care of the sauce in a bit.

00:07:03.170 --> 00:07:06.580
So then we're going to have a header.

00:07:07.030 --> 00:07:08.560
Let's go for H2.

00:07:09.060 --> 00:07:10.290
That's the head.

00:07:10.910 --> 00:07:15.620
And we're going to have a paragraph after that last part.

00:07:15.910 --> 00:07:16.360
OK.

00:07:16.580 --> 00:07:22.400
And we're going to do the same thing with the other components.

00:07:23.540 --> 00:07:24.240
OK.

00:07:24.620 --> 00:07:32.370
So let's place text in the first one had it is Criseyde.

00:07:32.600 --> 00:07:33.830
It's copy the barograph

00:07:39.230 --> 00:07:52.390
and then the second one line it could be the paragraph and the last one is make it less copy the bottom

00:07:52.480 --> 00:07:55.580
.

00:07:58.580 --> 00:07:59.060
OK.

00:07:59.330 --> 00:08:04.400
Now to get these pictures we're going to use our logo maker those Web sites.

00:08:04.760 --> 00:08:07.150
OK.

00:08:11.090 --> 00:08:14.740
So for the first item we're going to look for money.

00:08:15.650 --> 00:08:16.240
OK.

00:08:16.250 --> 00:08:19.950
And we're going to go for this one.

00:08:20.420 --> 00:08:25.450
So let's use this green color

00:08:27.880 --> 00:08:30.710
.

00:08:31.510 --> 00:08:37.040
And basically the answer.

00:08:37.220 --> 00:08:39.050
It's fine it's save it's

00:08:44.020 --> 00:08:51.110
OK again make sure you copy the credits using this button and place them somewhere on your web sites

00:08:51.320 --> 00:08:53.390
or on another page with a link to it.

00:08:53.390 --> 00:08:55.980
OK so

00:08:59.630 --> 00:09:08.090
now let's look for the second picture as refresh the whole page.

00:09:08.720 --> 00:09:11.960
Let's look for planning.

00:09:13.940 --> 00:09:15.970
I'm going to go for this one.

00:09:16.660 --> 00:09:16.930
OK.

00:09:16.940 --> 00:09:25.650
Again go for this green color and click on safe again.

00:09:25.790 --> 00:09:29.430
Make sure you copy the credits and the final image.

00:09:29.760 --> 00:09:30.290
OK

00:09:33.940 --> 00:09:37.970
it's refresh the whole page.

00:09:37.970 --> 00:09:40.950
Let's look for finish.

00:09:41.020 --> 00:09:44.300
I'm going to go for this one.

00:09:47.080 --> 00:09:51.760
All the right color only safe again.

00:09:51.890 --> 00:09:53.370
Make sure you copy the credits.

00:09:53.510 --> 00:09:54.400
OK.

00:09:55.700 --> 00:10:03.870
Now let's get our pictures on the desktop and exchange first the name of each one.

00:10:04.550 --> 00:10:05.750
So we're going to go for.

00:10:06.110 --> 00:10:06.500
Let me

00:10:09.320 --> 00:10:15.580
finish and plan.

00:10:17.690 --> 00:10:20.300
Now let's place them inside our images fold

00:10:31.670 --> 00:10:40.210
and let's feel the source attribute so the first one is going to be images for slush money.

00:10:40.230 --> 00:10:41.680
Those PNB.

00:10:42.530 --> 00:10:50.450
And the second one is going to be images post-lunch learn those PFG.

00:10:50.570 --> 00:10:56.350
And the last one is going to be images finish those P.A..

00:10:56.670 --> 00:10:58.150
OK.

00:10:58.760 --> 00:11:00.740
Now if we look at our Web sites

00:11:03.920 --> 00:11:08.100
we can see our pictures there and our texts.

00:11:08.300 --> 00:11:18.850
So now we need to style these to go to the siestas file.

00:11:19.040 --> 00:11:21.180
So first of all they start with the pictures.

00:11:21.200 --> 00:11:22.880
OK so we're going to be using the

00:11:25.670 --> 00:11:38.760
image or body image class to style that we're going to give them each a height of 100 pixels.

00:11:39.210 --> 00:11:40.490
OK.

00:11:41.690 --> 00:11:50.990
Then we would need to a text inside the columns.

00:11:51.680 --> 00:11:59.890
So going to access the columns using the column medium for class.

00:12:01.230 --> 00:12:02.250
OK.

00:12:02.840 --> 00:12:12.470
And we used the text align prepossessed as we all said to center and also will change the color inside

00:12:12.470 --> 00:12:19.990
these columns to a white color.

00:12:23.590 --> 00:12:25.660
Okay.

00:12:25.940 --> 00:12:31.220
And finally they change the font size of the paragraphs

00:12:37.480 --> 00:12:43.910
so we can access the paragraphs from the icons class.

00:12:44.600 --> 00:12:45.080
OK

00:12:49.060 --> 00:12:50.780
who said the font size

00:12:54.110 --> 00:12:58.420
to 15 pixels.

00:12:59.870 --> 00:13:01.200
OK.

00:13:01.790 --> 00:13:08.660
Now if we look at the final Web sites we will see that the width of the icon section is smaller than

00:13:08.660 --> 00:13:10.730
the width of our screen.

00:13:11.450 --> 00:13:25.010
So to do this we are going to access the container class ok and reduce its with by giving us a month's

00:13:25.060 --> 00:13:27.360
worth of 1000 pixels.

00:13:27.950 --> 00:13:37.880
So what x is the class container it will use the mux with property.

00:13:38.570 --> 00:13:42.260
I would say that to 1000 pixels.

00:13:42.780 --> 00:13:44.040
OK.

00:13:44.340 --> 00:13:45.260
Now to express