WEBVTT

00:00:06.570 --> 00:00:07.460
But you will lose.

00:00:07.500 --> 00:00:08.680
That's our concern.

00:00:08.700 --> 00:00:10.600
Dave now has collapsed.

00:00:10.620 --> 00:00:22.620
The reason why is because if we select our head that if we will see that it's collapsed as well.

00:00:22.620 --> 00:00:26.760
And that's because all the elements inside the head know they are losing.

00:00:26.770 --> 00:00:32.080
EDWARDS OK so resealable elements that consists of floating elements only.

00:00:32.910 --> 00:00:38.640
Is going to behave as if he doesn't have any elements inside his that is what's happening here.

00:00:38.640 --> 00:00:44.800
So to avoid this we get to go to our head and give him the height of how to bake sales.

00:00:45.490 --> 00:00:45.870
OK.

00:00:46.020 --> 00:00:52.360
So I get to select the header using ID with a PSA just before the brand.

00:00:52.800 --> 00:00:57.720
Let's give it a height of 100 pixels

00:01:01.390 --> 00:01:07.610
and we can see our Pedda with the divergence with the right images.

00:01:07.650 --> 00:01:09.960
OK.

00:01:10.110 --> 00:01:16.690
Now let's continue styling our search box and let's give it a background color so we can see here that

00:01:16.740 --> 00:01:18.480
you got some great in there.

00:01:18.480 --> 00:01:22.070
So are going to use the property background not background color.

00:01:22.260 --> 00:01:22.470
OK

00:01:27.510 --> 00:01:29.890
so we're going to use a couple of colors.

00:01:29.920 --> 00:01:32.320
So going to start with the top color.

00:01:32.670 --> 00:01:38.520
So let's use our colors you know to select that.

00:01:39.170 --> 00:01:42.100
So it is good for this one.

00:01:43.080 --> 00:01:51.030
So the syntax is linear gradients that inside are going to place our colors so first one is this one

00:01:51.480 --> 00:01:55.220
and then the second one is going to be the top on the bottom.

00:01:55.620 --> 00:01:59.020
And they go for this one.

00:01:59.420 --> 00:02:00.590
OK.

00:02:01.670 --> 00:02:02.030
OK.

00:02:02.070 --> 00:02:04.730
That's basically that.

00:02:06.890 --> 00:02:07.140
OK.

00:02:07.140 --> 00:02:12.210
And then we can see this our search box has got some background color there but we can't see it very

00:02:12.210 --> 00:02:18.540
well because the text inputs and the submit button are taking most of the space inside the search box

00:02:18.540 --> 00:02:18.920
.

00:02:18.960 --> 00:02:22.590
So it is strange the dimensions of our search box.

00:02:22.650 --> 00:02:35.890
Let's give it a width of 300 pixels for example at a height of 40.

00:02:38.280 --> 00:02:40.200
OK let's make it a little bit bigger.

00:02:40.770 --> 00:02:43.410
Let's go for a way of 100

00:02:45.810 --> 00:02:46.600
.

00:02:46.880 --> 00:02:53.970
A height of 50.

00:02:54.170 --> 00:02:55.710
All right.

00:02:56.220 --> 00:02:57.370
Now we can see.

00:02:57.420 --> 00:03:01.560
Our submit button is floating to the right.

00:03:02.310 --> 00:03:10.950
So are you gonna do to make the summits Busson flow to the right and the text inputs floats to the left

00:03:10.970 --> 00:03:11.340
.

00:03:11.740 --> 00:03:19.380
OK so if you have a look at our index those foil we can see those were your quotes a text class for

00:03:19.380 --> 00:03:21.130
the text inputs.

00:03:21.350 --> 00:03:28.620
We're going to use that clause to silence and let's add a clause for our submit wasn't let's call it

00:03:28.620 --> 00:03:29.290
submits.

00:03:29.400 --> 00:03:33.070
So we're going to use to style the subject.

00:03:34.270 --> 00:03:34.570
OK

00:03:38.880 --> 00:03:45.740
so he selects Our Takes it puts first using is class text.

00:03:46.060 --> 00:03:49.390
I'm going to make it float to the left.

00:03:50.420 --> 00:03:52.540
OK.

00:03:52.630 --> 00:03:57.230
Then for these are places you can use the class submits.

00:03:57.300 --> 00:04:01.400
We'll make it float to the right.

00:04:02.800 --> 00:04:03.340
OK

00:04:06.520 --> 00:04:08.530
that looks better.

00:04:09.690 --> 00:04:10.180
All right.

00:04:10.290 --> 00:04:15.570
Now we really need to add some padding to our search box to allow some gap between the inputs inside

00:04:15.570 --> 00:04:18.710
the box and the borders of the box.

00:04:18.900 --> 00:04:24.660
But before doing that let's just get the dimensions of the inputs right first OK and then move to the

00:04:24.660 --> 00:04:25.580
body.

00:04:26.160 --> 00:04:28.510
So let's start with the text input.

00:04:28.830 --> 00:04:32.560
So we get a need to change the width of the inputs.

00:04:32.910 --> 00:04:39.900
OK so let's go for a width of 150 pixels.

00:04:40.650 --> 00:04:46.830
OK so too small is go for 200.

00:04:46.850 --> 00:04:47.830
That looks fine.

00:04:48.090 --> 00:04:49.740
OK.

00:04:49.740 --> 00:04:56.960
So let's have a look at the text inside the inputs.

00:04:57.370 --> 00:05:03.420
You can see that we are going to need some padding in the UK which is going to change the height of

00:05:03.450 --> 00:05:05.730
our input as well.

00:05:05.730 --> 00:05:09.480
So it's say a body.

00:05:09.720 --> 00:05:15.820
Let's go for five big cells for example that looks OK.

00:05:16.370 --> 00:05:18.740
And also the height looks fine no.

00:05:18.810 --> 00:05:20.160
OK.

00:05:21.110 --> 00:05:23.790
And they said the font size

00:05:30.160 --> 00:05:38.760
you pixels small 15 pixels that looks fine.

00:05:39.040 --> 00:05:40.860
OK.

00:05:41.190 --> 00:05:42.550
All right.

00:05:43.200 --> 00:05:52.850
And then we're going to change the color of the text and to do that's going to do color.

00:05:53.050 --> 00:05:56.100
And you going to use this orange color.

00:05:56.590 --> 00:06:01.590
Well it's Alexis using our colors.

00:06:01.980 --> 00:06:08.070
Here we go.

00:06:08.600 --> 00:06:10.110
No it looks fine.

00:06:10.170 --> 00:06:11.590
All right.

00:06:12.510 --> 00:06:17.350
OK now let's move to the submit button.

00:06:20.420 --> 00:06:23.880
And first we can see that

00:06:26.850 --> 00:06:31.090
we've got some padding OK between the text and the border.

00:06:31.940 --> 00:06:37.390
It's us putting the go for five pixels.

00:06:38.530 --> 00:06:39.580
Right.

00:06:39.630 --> 00:06:44.400
And also you can see that text is also going to change the font.

00:06:44.400 --> 00:06:45.500
Wait.

00:06:45.820 --> 00:06:49.890
You going to say that too bold.

00:06:49.920 --> 00:06:51.580
All right.

00:06:51.720 --> 00:06:54.180
Also the text color is white

00:07:00.750 --> 00:07:04.990
and the background color as well.

00:07:05.340 --> 00:07:06.590
We need to change it.

00:07:06.660 --> 00:07:11.340
So for the Submit mustn't we can't use background color.

00:07:11.790 --> 00:07:18.870
OK so the problem is how about background color cannot be used for buttons so we going to use background

00:07:18.880 --> 00:07:19.430
.

00:07:19.980 --> 00:07:20.790
OK.

00:07:21.050 --> 00:07:22.370
We're going to say that too.

00:07:22.710 --> 00:07:26.410
This purple color.

00:07:28.540 --> 00:07:29.840
OK.

00:07:31.600 --> 00:07:35.230
Here we go.

00:07:35.490 --> 00:07:36.150
So

00:07:46.500 --> 00:07:52.380
text that he's actually a little bit bigger than this one.

00:07:52.380 --> 00:07:54.120
So we're going to change the font size

00:07:58.410 --> 00:08:02.670
to 15 pixels.

00:08:02.700 --> 00:08:03.940
That was fine.

00:08:04.110 --> 00:08:05.490
OK.

00:08:06.330 --> 00:08:06.870
OK.

00:08:07.020 --> 00:08:11.510
So now it looks like we've caused the right dimensions for our inputs.

00:08:11.550 --> 00:08:17.290
OK so now we are ready to add some padding to our search box.

00:08:17.370 --> 00:08:26.130
OK so let's go to the search box and add some padding.

00:08:32.880 --> 00:08:40.810
So we're going to need some putting up some padding right and some padding left.

00:08:40.880 --> 00:08:42.300
So we're going to use four values.

00:08:42.420 --> 00:08:47.170
First one is for the top and then writes the bottom on the left.

00:08:47.190 --> 00:08:47.920
OK.

00:08:48.030 --> 00:08:56.510
So we're going to go for 10 pixels the big cells then 0 then to big cells.

00:08:57.650 --> 00:09:01.390
OK.

00:09:02.650 --> 00:09:05.310
You need a little bit more.

00:09:05.930 --> 00:09:07.600
Because for 20 rather than 10

00:09:09.990 --> 00:09:15.260
and see that looks better.

00:09:15.420 --> 00:09:16.920
OK.

00:09:16.920 --> 00:09:26.720
Also you need to add some space between the search box and the border of our head.

00:09:27.340 --> 00:09:28.030
OK.

00:09:28.100 --> 00:09:32.430
We're going to use the mountain top property

00:09:35.570 --> 00:09:37.940
.

00:09:38.030 --> 00:09:42.860
Let's say that to 10 or 20

00:09:45.540 --> 00:09:51.030
a need a bigger gap and it's 40.

00:09:51.690 --> 00:09:59.220
OK so the problem now is if we add more margin the title the search box I'm going to be aligned anymore

00:09:59.280 --> 00:10:02.340
so we leave it at 20.

00:10:02.550 --> 00:10:03.140
Now.

00:10:03.270 --> 00:10:10.520
All right and to add more space we're going to use the potting property of our head.

00:10:10.920 --> 00:10:11.860
OK.

00:10:12.270 --> 00:10:20.640
So let's go to our header and change the padding.

00:10:21.870 --> 00:10:25.560
So we only need the top and bottom padding.

00:10:25.740 --> 00:10:27.690
OK so going to use two values.

00:10:27.690 --> 00:10:34.290
First one is going to be for the top and bottom padding and then the second value is going to be zero

00:10:34.350 --> 00:10:34.460
.

00:10:34.500 --> 00:10:37.270
We are going to use it for the left and right.

00:10:37.320 --> 00:10:39.590
So let's go for 10 pixels.

00:10:39.660 --> 00:10:42.020
Zero.

00:10:42.030 --> 00:10:48.430
Now we can see some padding at the top and bottom and no padding on the left and right.

00:10:49.320 --> 00:10:50.080
OK.

00:10:50.430 --> 00:10:54.600
So that looks quite OK.

00:10:57.400 --> 00:11:02.070
All right now let's add this search icon to our text input.

00:11:02.360 --> 00:11:07.550
So we're going to go to logo maker dot com

00:11:10.290 --> 00:11:13.610
where we're going to look for a similar icon.

00:11:14.060 --> 00:11:16.220
And then we're going to customize it.

00:11:17.090 --> 00:11:18.530
So let's look for search

00:11:21.240 --> 00:11:23.520
and Odilon for example.

00:11:24.190 --> 00:11:34.290
And let's change the color on again to use the same purple color that's already copied our clipart.

00:11:34.690 --> 00:11:35.050
OK.

00:11:35.180 --> 00:11:38.350
So if I click on Answer No the color has changed.

00:11:38.610 --> 00:11:43.250
OK so let's save this artist up.

00:11:43.900 --> 00:11:45.890
And very important.

00:11:46.130 --> 00:11:50.280
You would need to give the credits to the original OSes.

00:11:50.310 --> 00:11:50.960
OK.

00:11:51.170 --> 00:11:57.930
So I suggest that you copy the credits by clicking on the button here.

00:11:58.100 --> 00:11:58.890
OK.

00:11:59.410 --> 00:12:04.690
And then you can place all the credits in a separate page and you give a link to that page.

00:12:04.700 --> 00:12:10.250
So it's really important to give the credit to the author of this icon.

00:12:10.390 --> 00:12:11.920
OK.

00:12:11.990 --> 00:12:17.600
So now of course the picture on my desk top right

00:12:22.100 --> 00:12:26.790
here it is so going to change the name of the file to search.

00:12:28.220 --> 00:12:35.780
And I'm going to create a new folder in my project folder called images.

00:12:36.960 --> 00:12:37.740
OK.

00:12:37.900 --> 00:12:44.000
And then I'm going to open this folder using the Explorer and then inside the Explorer we're going to

00:12:44.930 --> 00:12:46.890
place this search image.

00:12:47.110 --> 00:12:48.940
OK.

00:12:50.240 --> 00:12:50.750
So

00:12:55.370 --> 00:13:04.000
we're going to need to resize this image to fit the dimensions of our inputs or our text input.

00:13:04.700 --> 00:13:14.610
If we go back to our text inputs we can see that the text size is 15 pixels and then we call it so padding

00:13:14.620 --> 00:13:14.800
.

00:13:14.880 --> 00:13:17.440
And I wasn't putting of white pixels.

00:13:17.480 --> 00:13:21.410
And I said pixels in total plus 15 plus 25 pixels.

00:13:21.560 --> 00:13:28.080
So you don't need to resize or I can do something under 25 pixels so that we can use it.

00:13:28.280 --> 00:13:32.960
OK so to resize it I'm going to open is using panes