WEBVTT

00:00:07.050 --> 00:00:09.360
Now let's create our home section.

00:00:09.810 --> 00:00:20.040
So we're going to go to our index those ASML file and simply create a div of class Jumbotron Where are

00:00:20.040 --> 00:00:26.250
we going to place all these featured elements including the title The subtitle or goal and this join

00:00:26.250 --> 00:00:27.420
us.

00:00:27.840 --> 00:00:28.330
OK.

00:00:28.590 --> 00:00:37.600
So we're going to place our div there.

00:00:41.890 --> 00:00:42.850
OK.

00:00:42.880 --> 00:00:47.080
So I'm going to give it a glass jumbotron

00:00:49.670 --> 00:00:55.130
and also going to give you an I.D. to link it to our leagues.

00:00:55.410 --> 00:00:56.090
OK.

00:00:56.550 --> 00:01:00.790
So the I.D. is going to be home.

00:01:02.400 --> 00:01:03.200
OK.

00:01:03.210 --> 00:01:10.670
And then inside the deck we are going to create a container.

00:01:12.650 --> 00:01:13.180
OK.

00:01:13.200 --> 00:01:15.710
Or the glass container.

00:01:16.710 --> 00:01:22.020
I'm going to go for container rather than contain the fluid so that we don't occupy the full width of

00:01:22.020 --> 00:01:22.750
the page

00:01:25.830 --> 00:01:31.010
and then we're going to create a couple of headings and each one and then an issue.

00:01:31.350 --> 00:01:36.420
So inside the trunk I'm going to copy this title.

00:01:37.490 --> 00:01:38.620
OK.

00:01:39.420 --> 00:01:48.430
And then inside the heading to I'm going to copy this subtitle.

00:01:48.560 --> 00:01:50.460
All right.

00:01:52.080 --> 00:02:00.560
And finally we are going to place our button inside a paragraph.

00:02:01.140 --> 00:02:02.310
OK.

00:02:02.670 --> 00:02:08.700
So it's going to be a link that we're going to style as a person using the bootstrap classes so we're

00:02:08.700 --> 00:02:16.290
going to give it a class button and you can give it in a chef if you want.

00:02:17.530 --> 00:02:18.180
OK.

00:02:18.450 --> 00:02:20.580
Now let's have a look at our Jumbotron.

00:02:20.700 --> 00:02:22.930
So that's how it looks like now.

00:02:23.070 --> 00:02:23.560
OK.

00:02:23.670 --> 00:02:28.360
So we'll need to sign it so that we gets that OK.

00:02:28.440 --> 00:02:33.850
So let's go to our styling sheet and go to the home section.

00:02:34.990 --> 00:02:35.220
OK.

00:02:35.220 --> 00:02:36.170
Here it is.

00:02:36.570 --> 00:02:41.640
So let's access the home section using its ID.

00:02:42.600 --> 00:02:42.990
OK.

00:02:43.040 --> 00:02:45.650
And let's start with the background color.

00:02:45.690 --> 00:02:51.960
So by default the Jumbotron we have this gray background color but we can override that by signing the

00:02:52.470 --> 00:02:54.260
home elements.

00:02:55.020 --> 00:03:06.270
So we're going to set the background color property to transparence because we want a transparent background

00:03:06.280 --> 00:03:06.660
.

00:03:07.040 --> 00:03:08.620
OK.

00:03:08.670 --> 00:03:15.960
Also we going to set the text color to a white color using the color property

00:03:19.560 --> 00:03:25.690
and we're going to censor the text inside the Jumbotron by using the text aligned property.

00:03:25.740 --> 00:03:28.050
They're going to set two cents.

00:03:29.490 --> 00:03:29.720
OK

00:03:33.480 --> 00:03:37.620
let's just go back to the button and play some text inside the link

00:03:40.240 --> 00:03:44.470
to us now.

00:03:45.810 --> 00:03:48.010
OK.

00:03:51.690 --> 00:03:53.670
OK.

00:03:54.440 --> 00:04:00.390
Let's just refresh the page.

00:04:05.090 --> 00:04:06.210
OK.

00:04:06.870 --> 00:04:17.580
Now we are going to add some padding top to the Jumbotron so that we can get a big gap there between

00:04:17.580 --> 00:04:22.000
the title and the top border of the Web sites.

00:04:22.500 --> 00:04:30.310
So we're going to use the putting up property and this time I'm going to go for a percentage.

00:04:30.510 --> 00:04:38.730
So when we use the percentage for batting it's relative to the containing elements in our case the body

00:04:38.730 --> 00:04:39.400
elements.

00:04:39.600 --> 00:04:46.590
So if you go for 50 percent for example then the padding is going to be half the height of the body

00:04:46.600 --> 00:04:46.790
.

00:04:46.980 --> 00:04:47.680
OK.

00:04:48.030 --> 00:04:56.970
And if you go for hundred percent then only to scroll down to see our home section.

00:04:57.780 --> 00:04:59.060
OK so let's keep it.

00:04:59.120 --> 00:05:06.690
It's 15 percent for now and let's move to the headings so we'll need to add some merging bosome to both

00:05:06.750 --> 00:05:07.760
these headings.

00:05:07.950 --> 00:05:08.840
OK.

00:05:09.270 --> 00:05:10.410
Let's get that.

00:05:10.830 --> 00:05:18.630
So you access the first heading we're going to access the home section first using its ID and then H-1

00:05:18.630 --> 00:05:20.010
.

00:05:20.010 --> 00:05:27.330
So we're going to use the margin bottom property and I'm going to set that to 30 pixels.

00:05:27.920 --> 00:05:28.290
OK.

00:05:28.350 --> 00:05:33.700
So it's increased a little bit and let's do the same thing for age 2.

00:05:34.550 --> 00:05:35.190
OK.

00:05:35.190 --> 00:05:43.980
And this time we are going to go for 50 pixels to create more gap.

00:05:44.490 --> 00:05:45.550
OK.

00:05:46.440 --> 00:05:47.150
All right.

00:05:47.340 --> 00:05:52.770
Let's move to the Busson link so to access the button we're going to access the home section and then

00:05:52.770 --> 00:05:56.010
we're going to use the bus and.

00:05:56.730 --> 00:06:03.010
So we'll start by changing the background color of the Butson to this nice color.

00:06:03.240 --> 00:06:10.360
So we're going to use the background color property right.

00:06:10.710 --> 00:06:14.580
And I'm going to use the IDB values to set the color.

00:06:15.240 --> 00:06:22.690
So I'm going to go for 29 and sixty seven and a 79.

00:06:23.830 --> 00:06:33.040
OK then let's change the text color using the color property and they that to a white color.

00:06:33.060 --> 00:06:37.110
Also let's increase the font size to

00:06:40.710 --> 00:06:42.420
20 pixels.

00:06:43.480 --> 00:06:45.880
And also let's add some padding.

00:06:46.210 --> 00:06:53.670
So for the top unbosom values I'm going to go for 8 pixels and for the left and right sides you know

00:06:53.700 --> 00:07:01.390
we're going to go for 20 pixels so 8 pixels and 20 pixels.

00:07:02.580 --> 00:07:03.360
OK.

00:07:03.750 --> 00:07:04.960
And finally that's odd.

00:07:05.010 --> 00:07:07.500
Some border radius but I'm

00:07:12.650 --> 00:07:15.980
going to say that two pixels.

00:07:17.430 --> 00:07:21.030
Now let's Syal the harvest states of our present.

00:07:21.390 --> 00:07:24.740
So let's use the same syntax.

00:07:25.420 --> 00:07:30.060
OK is the button an odd going on hover.

00:07:30.410 --> 00:07:31.170
OK.

00:07:31.350 --> 00:07:39.130
So we want to change the background color only to a transparent color.

00:07:39.300 --> 00:07:43.150
So we're going to keep the same color but we're just going to make it transparent.

00:07:43.350 --> 00:07:51.510
So rather than IDB we're going to use ICBA and we're going to the transparency factor at the end.

00:07:51.690 --> 00:07:55.890
I'm going to go for points right.

00:07:56.560 --> 00:07:58.940
That's work.

00:07:59.640 --> 00:08:03.550
Right.