WEBVTT

00:00:06.780 --> 00:00:10.790
Now we're going to move to the featured content of our website.

00:00:10.980 --> 00:00:19.590
So if you remember the way we used the jumbotron in the bootstrap chapter we created a Jumbotron div

00:00:19.620 --> 00:00:26.900
or devil class jumbotron and inside it we created a container div all day of class contain.

00:00:27.480 --> 00:00:30.300
So I'm going to copy the image

00:00:34.200 --> 00:00:39.410
and create a difficult class container.

00:00:41.340 --> 00:00:45.980
So if you want to go for full width you can go for content containing that flute.

00:00:46.350 --> 00:00:54.600
OK I'm going to go for container which is going to be a limited with rather than a full width and inside

00:00:54.600 --> 00:00:59.220
the container I'm going to paste the picture or the logo

00:01:02.400 --> 00:01:06.860
Gateless on a comment before the logo.

00:01:07.260 --> 00:01:13.970
To make sure that our code is easily readable.

00:01:16.380 --> 00:01:21.400
So that was create logo.

00:01:22.500 --> 00:01:23.560
OK.

00:01:24.090 --> 00:01:30.600
So now we're going to move to the featured parts list a commander

00:01:33.900 --> 00:01:45.680
create featured parts so we can have a header a paragraph because we're going to break that using a

00:01:45.680 --> 00:01:51.780
line break and then a couple of things that are going to syle using the bootstrap bussing class and

00:01:51.870 --> 00:01:53.460
some siestas.

00:01:53.700 --> 00:01:56.780
So let's add another requirement for our web sites.

00:01:57.300 --> 00:02:03.990
Let's say that we want the title to be limited in terms of space.

00:02:04.080 --> 00:02:14.400
So if you have a big title you want to occupy less than mine columns out of the container 12 columns

00:02:14.400 --> 00:02:15.010
.

00:02:15.060 --> 00:02:19.600
So that's our container and we can see the width of a container.

00:02:20.250 --> 00:02:28.890
So if the title is too big if you go for a big title let's make sure that's the space taken by the title

00:02:28.890 --> 00:02:35.400
is less than nine columns in medium and larger devices.

00:02:35.400 --> 00:02:46.080
So to do this if you remember we're going to use the row class and then we place our elements inside

00:02:46.140 --> 00:02:51.860
another class which is going to be column medium mine.

00:02:52.200 --> 00:02:53.510
OK so let's go ahead and do this.

00:02:53.520 --> 00:02:57.090
So I will create a div

00:03:00.450 --> 00:03:08.870
of class row but it's a good practice to place the row inside another day.

00:03:09.580 --> 00:03:13.510
Then we can use to style elements inside the row.

00:03:13.650 --> 00:03:18.900
So let's call this Dave ogive is a class feature.

00:03:19.710 --> 00:03:23.490
And then inside this Dave create a row

00:03:26.820 --> 00:03:29.940
that's going to be a div of class row

00:03:30.000 --> 00:03:36.540
.

00:03:42.730 --> 00:03:43.840
OK.

00:03:44.010 --> 00:03:48.690
And then we're going to have another div

00:03:56.490 --> 00:04:02.590
of class column medium.

00:04:03.720 --> 00:04:10.950
Because we want to limit the space of these elements to nine columns out of the container 12 columns

00:04:12.090 --> 00:04:15.480
in medium and large devices.

00:04:15.750 --> 00:04:16.130
OK.

00:04:16.200 --> 00:04:17.520
So if you go for medium.

00:04:17.780 --> 00:04:20.700
Is going to be applied for medium and large.

00:04:20.880 --> 00:04:23.040
OK so let's add some comments there so

00:04:26.820 --> 00:04:28.110
we are creating a

00:04:33.750 --> 00:04:34.110
row

00:04:38.460 --> 00:04:49.160
to use the grid system and also limits space taken by the feature content.

00:04:50.330 --> 00:04:53.340
Ok then

00:04:56.910 --> 00:05:01.020
we are using here only nine columns

00:05:05.910 --> 00:05:08.280
out of the 12 columns

00:05:12.280 --> 00:05:16.970
for medium and large devices.

00:05:19.740 --> 00:05:25.250
OK now let's place elements inside this Dave.

00:05:25.320 --> 00:05:27.960
OK so are you going to create a header

00:05:38.150 --> 00:05:44.610
go for H-1 and it's mine it's there.

00:05:47.190 --> 00:05:48.090
OK.

00:05:48.210 --> 00:05:51.630
And then we're going to have a paragraph

00:05:56.220 --> 00:05:59.900
so we can go for two paragraphs if you want.

00:06:00.150 --> 00:06:04.920
OK let's let's try this in this place.

00:06:04.920 --> 00:06:07.740
This text in the first paragraph.

00:06:07.800 --> 00:06:12.430
This one in the second part.

00:06:15.780 --> 00:06:21.790
OK so if we do this we can have a big gap between the two paragraphs.

00:06:22.130 --> 00:06:22.830
OK.

00:06:23.160 --> 00:06:30.900
So it's a void that's going to place everything inside one paragraph and just use a line break and then

00:06:30.900 --> 00:06:33.500
we're going to have a smaller gap.

00:06:33.840 --> 00:06:43.380
So if we use one paragraph only then have a line break there and we can see that the gap now is small

00:06:43.390 --> 00:06:43.690
.

00:06:43.980 --> 00:06:57.840
OK now let's just go to the siestas file and style text inside the feature parts.

00:07:00.000 --> 00:07:06.320
So first of all we are going to set the color of the text inside the featured pants.

00:07:07.740 --> 00:07:16.610
So I said textes color featured content.

00:07:18.210 --> 00:07:20.520
So we're going to access the class

00:07:23.160 --> 00:07:23.840
featured.

00:07:23.960 --> 00:07:26.820
Okay.

00:07:29.790 --> 00:07:36.290
And then we'll set the color property to white.

00:07:37.420 --> 00:07:37.770
OK.

00:07:37.840 --> 00:07:41.090
Now Tex is white also.

00:07:41.790 --> 00:07:50.430
We are going to put some space between the heading and the image.

00:07:50.430 --> 00:07:52.210
There are many ways of doing that too.

00:07:52.260 --> 00:08:00.360
So now let's add some space between the image and the heading.

00:08:00.750 --> 00:08:05.460
So there are different ways to do this.

00:08:05.520 --> 00:08:10.560
You can either use the margin top and apply to the heading.

00:08:10.740 --> 00:08:13.860
Otherwise we can use the buddying top.

00:08:13.860 --> 00:08:18.120
So I'm going to go for the budding top and

00:08:27.720 --> 00:08:35.000
that creates space between the title and the logo.

00:08:35.100 --> 00:08:35.430
So

00:08:38.780 --> 00:08:49.130
we're going to access the heading using H-1 following the class featured.

00:08:49.320 --> 00:08:50.760
I'm going to go for the putting.

00:08:50.840 --> 00:08:57.080
Up and say that to 60 pixels.

00:08:57.630 --> 00:08:58.120
No.

00:08:58.170 --> 00:09:04.540
You can see the space between the heading and the logo.

00:09:04.590 --> 00:09:05.860
All right.

00:09:06.270 --> 00:09:09.230
Now let's move to our links.

00:09:09.450 --> 00:09:10.810
So what are you going to do.

00:09:11.130 --> 00:09:17.280
We're going to create a paragraph and insert these two links inside the paragraph and then we'll sell

00:09:17.280 --> 00:09:21.030
them using Bush wrap and some sketches.

00:09:21.030 --> 00:09:29.670
So this goes on in Dexters a shameful file and create a new paragraph.

00:09:29.700 --> 00:09:39.520
So inside the paragraph we're going to have a couple of things.

00:09:41.100 --> 00:09:45.670
So we're going to go for a few clauses.

00:09:45.680 --> 00:09:48.050
They're going to use bootstrap clauses.

00:09:48.280 --> 00:09:53.600
So you can use the Butson class and Busson defaults.

00:09:54.960 --> 00:10:00.400
OK you can give the link and the ref if you want

00:10:03.390 --> 00:10:05.440
to play cases and write some text there.

00:10:05.570 --> 00:10:07.890
So the first one is find out more.

00:10:08.450 --> 00:10:13.110
And the second one is don't load.

00:10:15.000 --> 00:10:19.030
Ok so of course our links to now we need to style them.

00:10:19.320 --> 00:10:26.840
So let's go to our CSSA file.

00:10:27.390 --> 00:10:27.780
So

00:10:33.550 --> 00:10:38.780
we can solve them using the button defaults glass.

00:10:38.890 --> 00:10:47.530
So we're going to access this class and add some siestas styling which is going to override some of

00:10:47.530 --> 00:10:54.920
the properties that are already embedded in the inn was dropped so we're going to go to the featured

00:10:54.910 --> 00:10:55.950
class.

00:10:56.360 --> 00:11:03.120
And then inside the class we are selecting the button defaults class.

00:11:03.800 --> 00:11:04.390
OK.

00:11:04.900 --> 00:11:10.780
So first of all we can to set the font weight to bolt

00:11:12.200 --> 00:11:15.090
.

00:11:17.870 --> 00:11:23.510
Also will change the color to white

00:11:36.500 --> 00:11:42.250
and the background color.

00:11:43.930 --> 00:11:50.530
So we'll use the R-GA function.

00:11:50.530 --> 00:12:06.640
So the code of the color as you have chosen there is 1 4 5 8 2 and then 5 8 and for the transparency

00:12:07.060 --> 00:12:09.230
I went for 0.5

00:12:13.740 --> 00:12:17.440
.

00:12:19.820 --> 00:12:22.040
OK.

00:12:23.710 --> 00:12:27.350
Also let's add some border radius

00:12:34.190 --> 00:12:38.720
and say that 210 pixels you can see those are corners.

00:12:38.740 --> 00:12:42.450
Now they are around.

00:12:42.560 --> 00:12:49.940
And also let's set some margin between the length and the other elements.

00:12:50.100 --> 00:12:56.790
I'm going to go for merging two up and I'm going to say that 220 pixels.

00:12:58.560 --> 00:12:59.240
OK.

00:12:59.600 --> 00:13:07.760
And also we want these two buttons to have the same width.

00:13:08.950 --> 00:13:13.330
OK so I'm going to go for a width of

00:13:16.220 --> 00:13:17.440
hundred sixty pixels

00:13:17.440 --> 00:13:23.320
.

00:13:23.410 --> 00:13:30.850
Now we need to make the font bigger for our links so to do that we can either use the font size property

00:13:31.850 --> 00:13:37.420
or odd A close to the links but not.

00:13:37.490 --> 00:13:39.410
So let's go for lunch.

00:13:39.830 --> 00:13:47.190
So we're going to go back to the index of a simple file and on another class there but not

00:13:52.140 --> 00:13:53.170
OK.

00:13:53.250 --> 00:13:59.750
And now we can see that font size is what you want.

00:14:01.370 --> 00:14:03.590
OK.

00:14:03.590 --> 00:14:08.240
Now it's a bit of space between the two links.

00:14:08.290 --> 00:14:12.740
So for this we're going to use the margin proxy.

00:14:14.050 --> 00:14:20.030
And since we don't have anything on the right hand side of the second button we can just use margin

00:14:20.090 --> 00:14:20.600
right

00:14:23.780 --> 00:14:29.260
which is going to set to 15 pixels.

00:14:32.200 --> 00:14:35.210
All right.

00:14:35.240 --> 00:14:37.150
Now let's Syal the buttons.

00:14:37.210 --> 00:14:39.070
When we hover on them.

00:14:39.720 --> 00:14:40.420
OK.

00:14:40.780 --> 00:14:41.170
So

00:14:46.960 --> 00:14:54.010
we're going to access the feature class and then inside the class to access again the button default

00:14:54.400 --> 00:15:04.500
class and this time we can write call on hover with no spaces between the colon and the text.

00:15:04.580 --> 00:15:10.020
So when we hover on the buttons we want to change the background color.

00:15:10.410 --> 00:15:12.910
OK.

00:15:13.000 --> 00:15:14.020
So we're going to do.

00:15:14.090 --> 00:15:17.470
We're going to use exactly the same color.

00:15:18.780 --> 00:15:28.960
OK but we're not going to use any transparency that I would use only the IDB function and we'll take

00:15:28.960 --> 00:15:31.970
the transparency time.

00:15:33.180 --> 00:15:37.150
Now when we hover on the buttons the background color changes