WEBVTT

00:00:06.870 --> 00:00:12.210
Now we are going to create our products files and structure our work by going through the different

00:00:12.210 --> 00:00:15.180
steps we follow to build our Web sites.

00:00:15.180 --> 00:00:25.170
So first of all let's go to our Web sites folder and creates a new folder there and call it company

00:00:25.170 --> 00:00:26.080
Web sites

00:00:30.060 --> 00:00:35.190
and then we shop.

00:00:35.410 --> 00:00:36.130
OK.

00:00:36.480 --> 00:00:41.940
So since we are going to be using bootstrap we can go to the bush trust Web site as we did in the previous

00:00:41.940 --> 00:00:45.260
projects and get a bootstrap templates from that.

00:00:45.420 --> 00:00:50.220
Otherwise we can just go to the previous projects and copy all the files from the

00:00:53.970 --> 00:00:57.920
page and paste them in our new products.

00:00:58.740 --> 00:01:02.970
So you've got all the bush drop components there.

00:01:03.660 --> 00:01:04.170
OK.

00:01:04.440 --> 00:01:10.820
And the index does SML file was built using the bookshops templates.

00:01:10.920 --> 00:01:14.480
So I just need to customize that for our new products.

00:01:14.490 --> 00:01:15.740
OK.

00:01:16.860 --> 00:01:23.080
Now let's open brackets and open our programs for the

00:01:29.570 --> 00:01:31.210
ISS.

00:01:31.650 --> 00:01:31.910
OK

00:01:34.030 --> 00:01:36.480
.

00:01:36.960 --> 00:01:40.420
OK let's go for the preview

00:01:40.470 --> 00:01:47.210
.

00:01:54.530 --> 00:01:57.510
OK so I see the code corresponding to our previous products.

00:01:57.570 --> 00:02:03.640
So are you going to do we are going to change the title to company websites.

00:02:05.030 --> 00:02:05.650
Okay.

00:02:05.770 --> 00:02:16.630
And then we are going to empty the body elements we keep only the equerry files

00:02:24.900 --> 00:02:33.670
and will also empty our CNS file.

00:02:33.860 --> 00:02:35.770
All right.

00:02:35.830 --> 00:02:42.540
Now together we are going to go through the structure of our index those a sample file and the structure

00:02:42.540 --> 00:02:48.480
of our styling Dozier's as file and then we'll solve the video.

00:02:48.930 --> 00:02:52.520
And then I will suggest as you do the work on your own.

00:02:53.100 --> 00:02:57.810
And after that you can come back and compare what you have done with what I would have done.

00:02:58.010 --> 00:02:58.550
OK.

00:02:58.770 --> 00:03:00.210
So let's do this.

00:03:00.210 --> 00:03:05.640
So first of all inside our index there's a simple file We're going to go inside our body elements.

00:03:06.180 --> 00:03:12.100
And the first thing we're going to do is create our navigation bar.

00:03:12.370 --> 00:03:13.870
OK.

00:03:14.130 --> 00:03:21.450
Then after doing that we are going to create our title.

00:03:21.840 --> 00:03:22.140
OK.

00:03:22.170 --> 00:03:26.210
Oh Hedda.

00:03:29.130 --> 00:03:36.780
And after that we are going to move to the section showing these pictures.

00:03:36.870 --> 00:03:37.430
OK.

00:03:37.590 --> 00:03:45.550
And text is going to be create icons with text.

00:03:46.890 --> 00:03:53.750
And after that we're going to create our contacts.

00:03:55.910 --> 00:03:57.740
OK.

00:03:59.550 --> 00:04:04.090
And finally we'll create our footer.

00:04:05.660 --> 00:04:06.840
OK.

00:04:07.800 --> 00:04:11.750
So these are the steps we will go through for the index this issue about file.

00:04:11.760 --> 00:04:15.320
Now let's have a look at our siestas file.

00:04:15.370 --> 00:04:22.460
So first of all we are going to style the body elements.

00:04:22.710 --> 00:04:24.910
OK.

00:04:25.740 --> 00:04:28.470
By adding the background image

00:04:35.670 --> 00:04:41.510
we'll set it to cover as we did in the previous products.

00:04:43.020 --> 00:04:43.890
OK.

00:04:44.280 --> 00:04:51.180
And we'll see how to make it fixed when we scroll down.

00:04:51.180 --> 00:04:55.620
Also we are going to add this nice funds family

00:05:00.080 --> 00:05:02.890
body elements.

00:05:05.070 --> 00:05:05.960
OK.

00:05:06.900 --> 00:05:15.030
Then we are going to style this brand image.

00:05:17.320 --> 00:05:17.880
OK.

00:05:17.890 --> 00:05:23.580
And also we will style our navigation bar.

00:05:24.490 --> 00:05:25.250
OK.

00:05:25.620 --> 00:05:33.240
Using some the odd colors and also style.

00:05:33.320 --> 00:05:35.730
The other states of these things

00:05:36.150 --> 00:05:45.280
.

00:05:46.500 --> 00:05:47.600
OK.

00:05:48.310 --> 00:05:52.610
When are you going to move to the title which is going to be inside a double trone.

00:05:52.740 --> 00:05:53.090
OK.

00:05:53.150 --> 00:05:58.030
And who will style this Jumbotron.

00:05:59.390 --> 00:06:05.670
So we're looking at putting takes align and so on and

00:06:08.550 --> 00:06:13.360
then we'll syle these section where we have these icons with text.

00:06:13.380 --> 00:06:15.250
Ok using the bootstrap grid system

00:06:18.150 --> 00:06:31.500
OK it's going to be style icons section using criticism.

00:06:33.800 --> 00:06:44.080
And right after that we're going to style our contacts.

00:06:49.730 --> 00:06:50.700
OK.

00:06:51.060 --> 00:06:53.270
And finally we'll style of what

00:07:03.090 --> 00:07:12.340
you will notice that these icons in small devices they will change their size.

00:07:12.870 --> 00:07:14.460
OK.

00:07:14.490 --> 00:07:20.560
So if you remember we have used the media queries before.

00:07:21.450 --> 00:07:23.080
We're going to use it again.

00:07:23.400 --> 00:07:25.040
OK.

00:07:25.800 --> 00:07:30.470
To change the size of these icons in small devices.

00:07:30.920 --> 00:07:38.340
So use media queries to change size icons

00:07:41.280 --> 00:07:43.860
size in small device

00:07:43.860 --> 00:07:49.410
.

00:07:49.410 --> 00:07:58.310
Also if we increase the width of the screen or the window you can see that unlike the navigation bar

00:07:59.400 --> 00:08:06.710
the icons section is going to be limited for the way.

00:08:07.380 --> 00:08:19.260
So we're going to add another step just before signing the icons which is going to be to limit the width

00:08:20.460 --> 00:08:24.390
of the icon section.

00:08:24.400 --> 00:08:26.200
All right.

00:08:26.970 --> 00:08:27.240
OK.

00:08:27.240 --> 00:08:34.930
Now we've gone through the structure of our files and you know exactly what you need to do.

00:08:35.310 --> 00:08:44.050
So I suggest you post the video now and you build the website your way and you can come back.

00:08:44.160 --> 00:08:47.820
And then you can compare what you have done with what I would have that