WEBVTT 00:00:07.020 --> 00:00:09.500 Now we're going to move to the About section. 00:00:09.630 --> 00:00:19.410 So this section is going to consist of a bootstrapped row consisting of three columns inside each column 00:00:19.410 --> 00:00:23.370 we're going to have an image a heading and a paragraph. 00:00:23.980 --> 00:00:24.500 OK. 00:00:24.900 --> 00:00:31.780 So let's go ahead and create this inside our index that's a similar file. 00:00:33.510 --> 00:00:33.840 OK. 00:00:33.840 --> 00:00:45.490 So we're going to create a div and we're going to give it an ID about to link it to the about link inside 00:00:45.540 --> 00:00:47.260 our navigation bar. 00:00:47.730 --> 00:00:48.730 OK. 00:00:48.960 --> 00:01:02.800 So inside that if we are going to create a container which is a div of class contain it. 00:01:04.510 --> 00:01:05.030 OK. 00:01:05.070 --> 00:01:16.350 And inside we are going to create a row or day of class. 00:01:17.440 --> 00:01:18.160 OK. 00:01:18.300 --> 00:01:20.900 So inside they're going to create our columns. 00:01:21.060 --> 00:01:23.520 So each column is going to be a div 00:01:26.250 --> 00:01:32.370 of class column medium for. 00:01:32.570 --> 00:01:36.860 All right so you want three columns the total number of columns is going to be 12. 00:01:36.930 --> 00:01:43.850 So each column is going to occupy four columns of the grid system. 00:01:45.270 --> 00:01:58.550 So inside it if we're going to have an image paint you need to give it a source. 00:01:58.860 --> 00:02:03.850 So for now let's just try any image we have available. 00:02:05.190 --> 00:02:07.370 OK. 00:02:09.600 --> 00:02:21.540 And then we're going to give each image a class of about image but we're going to use later to style 00:02:21.540 --> 00:02:24.340 these images and change their dimensions. 00:02:24.590 --> 00:02:25.190 OK. 00:02:25.650 --> 00:02:37.610 So next we're going to have a heading H2 and after that we're going to have a paragraph so heading paragraph 00:02:37.630 --> 00:02:38.430 . 00:02:38.790 --> 00:02:40.350 OK. 00:02:41.020 --> 00:02:46.810 So we will need three columns. 00:02:46.870 --> 00:02:50.710 So religious duplicate this. 00:02:52.380 --> 00:02:53.840 OK. 00:02:53.850 --> 00:03:00.780 So let's feel the headings and the paragraphs. 00:03:00.780 --> 00:03:03.810 The first heading is going to be this one. 00:03:05.480 --> 00:03:13.350 And they just copy the text for the paragraph and do the same for the other two columns 00:03:13.360 --> 00:03:32.570 . 00:03:51.780 --> 00:03:55.920 OK so let's save this and refresh the page 00:03:59.920 --> 00:04:01.790 OK. 00:04:02.330 --> 00:04:08.490 And now we can see oh I row and columns. 00:04:08.550 --> 00:04:10.230 OK. 00:04:10.310 --> 00:04:10.500 Right. 00:04:10.500 --> 00:04:13.140 So we will change the pictures later. 00:04:13.260 --> 00:04:13.890 OK. 00:04:13.890 --> 00:04:19.140 So for now let's style the elements inside the columns. 00:04:19.260 --> 00:04:19.810 So it is good. 00:04:19.840 --> 00:04:24.850 Oh yes it's fine. 00:04:27.240 --> 00:04:32.380 So let's go to the About section right there. 00:04:32.670 --> 00:04:33.740 OK. 00:04:33.750 --> 00:04:36.960 So we're going to access the About section using ID 00:04:40.210 --> 00:04:40.460 . 00:04:41.200 --> 00:04:50.290 OK so first of all let's change the text color to a white color. 00:04:51.740 --> 00:04:59.510 Also let's make sure the text is censored using the text align property. 00:05:00.240 --> 00:05:01.050 OK. 00:05:01.480 --> 00:05:07.770 And also let's add some padding top right. 00:05:07.900 --> 00:05:08.500 So if you 00:05:11.350 --> 00:05:13.930 use the links there 00:05:16.690 --> 00:05:17.530 while at the moment 00:05:21.150 --> 00:05:26.770 this is the first we can go where we click on the about link and the reason why is because there is 00:05:26.920 --> 00:05:30.550 no contents after the About section. 00:05:30.550 --> 00:05:44.350 OK but if we reduce the width of the page and click on the about link then this is what happens. 00:05:44.830 --> 00:05:45.250 So 00:05:48.250 --> 00:05:53.960 to make sure we see the whole contents including this picture we're going to add some padding up. 00:05:54.120 --> 00:05:54.610 OK. 00:05:54.700 --> 00:06:02.520 So that's when we click on the about link we gets something like this. 00:06:03.030 --> 00:06:04.270 OK. 00:06:04.390 --> 00:06:09.120 Rather than something like that's what it is. 00:06:09.180 --> 00:06:19.110 So I'm going to add some padding top of one hundred pixels. 00:06:19.330 --> 00:06:20.180 OK. 00:06:20.200 --> 00:06:27.610 So now if we try that link again go to the home you go to the About section. 00:06:27.820 --> 00:06:30.470 Now it looks better. 00:06:30.490 --> 00:06:31.270 All right. 00:06:31.780 --> 00:06:32.460 OK. 00:06:32.950 --> 00:06:37.640 Next let's go to the heading. 00:06:37.780 --> 00:06:38.440 OK. 00:06:38.440 --> 00:06:43.480 So you know access the About section and then Page 2. 00:06:44.920 --> 00:06:48.280 And we're going to do going to change the font weight. 00:06:48.390 --> 00:06:48.910 OK. 00:06:48.970 --> 00:06:51.190 I'm going to make it simple. 00:06:54.250 --> 00:07:01.780 And then we're going to access the paragraphs. 00:07:02.190 --> 00:07:02.550 OK. 00:07:02.620 --> 00:07:11.980 And we're going to do we going to increase the font size of the paragraphs to 17 pixels for example 00:07:12.000 --> 00:07:12.650 . 00:07:12.650 --> 00:07:13.380 OK. 00:07:13.840 --> 00:07:18.080 And also we're going to add some margin bottom. 00:07:19.250 --> 00:07:21.330 Oh about 30. 00:07:21.760 --> 00:07:23.480 Point. 00:07:25.270 --> 00:07:36.230 And finally we are going to style the images using the body image or the about image class. 00:07:36.610 --> 00:07:37.460 OK. 00:07:38.020 --> 00:07:45.610 So to keep the aspect ratio of the pictures we can says the height only. 00:07:45.850 --> 00:07:46.420 OK. 00:07:46.720 --> 00:07:52.710 And also to make sure that the elements are all aligned. 00:07:52.710 --> 00:07:55.630 We're going to make sure that's all the pictures we have the same heights. 00:07:55.660 --> 00:07:56.120 OK. 00:07:56.440 --> 00:08:03.010 So that we don't end up with a situation where the titles or the headings are not at the same level 00:08:03.030 --> 00:08:03.340 . 00:08:03.640 --> 00:08:06.100 OK. 00:08:06.100 --> 00:08:13.110 So let's set the height to 120 pixels. 00:08:14.570 --> 00:08:14.870 OK 00:08:14.870 --> 00:08:20.650 . 00:08:20.670 --> 00:08:24.260 All right. 00:08:24.340 --> 00:08:29.370 Now to get the pictures we can use the logo maker websites as we have done before. 00:08:29.560 --> 00:08:30.060 OK. 00:08:30.460 --> 00:08:36.390 So all you do is go to the Web sites and type a term in the search box. 00:08:36.430 --> 00:08:39.940 So for the first picture I'd say it's quality. 00:08:40.250 --> 00:08:43.060 And here is the picture I'm using. 00:08:43.060 --> 00:08:46.850 Then you can choose the color you want for the picture. 00:08:47.110 --> 00:08:49.170 OK. 00:08:51.050 --> 00:08:51.300 OK. 00:08:51.310 --> 00:08:57.130 And then we can download the picture and make sure you do not forget to copy the credits and place them 00:08:57.130 --> 00:09:00.680 somewhere on your Web site or have a link on the Web site. 00:09:00.700 --> 00:09:01.940 Go into the credits. 00:09:02.380 --> 00:09:03.030 OK. 00:09:03.310 --> 00:09:11.410 So once you've done that to all the other pictures and you've got all the pictures ready then you can 00:09:11.470 --> 00:09:18.630 take all the pictures and place them inside the images folder. 00:09:21.430 --> 00:09:22.030 OK. 00:09:22.270 --> 00:09:25.160 So it is Deles the old pictures. 00:09:25.330 --> 00:09:26.620 You don't need them. 00:09:27.580 --> 00:09:33.560 And they struggle to drop all these pictures inside of old. 00:09:33.880 --> 00:09:34.370 OK. 00:09:34.600 --> 00:09:42.270 Now let's go back to our indexers Ishmail file and change the source of abuse 00:09:45.670 --> 00:09:46.770 of pictures. 00:09:46.930 --> 00:09:54.520 So for the first one to use the quality one and then 00:09:57.880 --> 00:09:58.510 using 00:10:00.910 --> 00:10:03.500 tools it can. 00:10:04.000 --> 00:10:09.220 And the last one using the Help better 00:10:09.230 --> 00:10:15.750 . 00:10:22.280 --> 00:10:22.800 OK. 00:10:23.030 --> 00:10:25.430 And now we've got all our pages. 00:10:25.510 --> 00:10:25.960 OK. 00:10:25.960 --> 00:10:28.850 And they've got the right sites. 00:10:29.440 --> 00:10:34.320 So finally think all the about section. 00:10:34.630 --> 00:10:39.720 We will need to miss the width of the section in big devices to 1000 pixels. 00:10:39.880 --> 00:10:45.490 So to do this we are going to select the container class 00:10:48.340 --> 00:10:56.320 which is inside the abouts Dave and just sets the monks with property to 1000 pixels. 00:10:57.270 --> 00:10:57.600 OK 00:11:00.230 --> 00:11:03.530 . 00:11:03.700 --> 00:11:09.590 All right.