WEBVTT 00:00:07.080 --> 00:00:10.570 Now we are ready to create our contact button. 00:00:11.070 --> 00:00:11.700 OK. 00:00:11.910 --> 00:00:15.340 So where are we going to do we going to create a Dave. 00:00:16.050 --> 00:00:21.780 And then inside that day we can create a container and place our Albertson inside the container. 00:00:22.500 --> 00:00:23.690 OK. 00:00:24.150 --> 00:00:26.400 So this goes our indexed with a simple file 00:00:29.940 --> 00:00:31.770 and create our idea of that. 00:00:32.070 --> 00:00:32.960 OK. 00:00:33.320 --> 00:00:40.240 So are we going to create a div and give it a class contact. 00:00:40.720 --> 00:00:41.460 OK. 00:00:41.760 --> 00:00:45.610 So we'll use this class later on to Centre the button. 00:00:45.970 --> 00:00:46.830 OK. 00:00:47.370 --> 00:00:50.160 And then we're going to create a div inside 00:00:53.280 --> 00:00:56.910 of glass container. 00:00:58.440 --> 00:01:00.970 And inside the container I'm going to create our button. 00:01:01.080 --> 00:01:07.450 So all of us and it's going to be a link that we're going to style using the muslin class. 00:01:08.480 --> 00:01:10.240 OK. 00:01:10.890 --> 00:01:12.720 So it can give us an age where if you've gone to 00:01:16.040 --> 00:01:18.630 and this gives a class Button 00:01:24.570 --> 00:01:30.480 and also displays some text there gets in touch 00:01:30.480 --> 00:01:39.500 . 00:01:40.070 --> 00:01:44.010 So that's our button. 00:01:44.010 --> 00:01:53.400 So now we going to style is using some senses. 00:01:54.330 --> 00:02:00.420 First of all to sensor the button we're going to access the containing div which is of close contacts 00:02:01.800 --> 00:02:07.500 and we'll use the text align property as well set to sounds. 00:02:07.950 --> 00:02:10.170 And now our button is censored. 00:02:10.290 --> 00:02:11.670 OK. 00:02:12.090 --> 00:02:23.250 Also we are going to add this gap between the button and the previous elements using some Marting top 00:02:23.260 --> 00:02:25.400 . 00:02:27.480 --> 00:02:28.070 OK. 00:02:28.410 --> 00:02:34.890 As we apply to the containing div use the contacts class and go for those pixels 00:02:38.980 --> 00:02:42.700 they look fine. 00:02:43.520 --> 00:02:52.120 Then we are going to style the button itself by accessing the Button class. 00:02:53.550 --> 00:02:57.530 So first of all we'll change the background of the button. 00:02:57.750 --> 00:02:59.100 OK. 00:02:59.100 --> 00:03:05.260 So the background is a transparent color through using the same color. 00:03:05.340 --> 00:03:11.820 We used our logo on it and add some transparency. 00:03:11.820 --> 00:03:12.240 So 00:03:21.220 --> 00:03:22.840 when you the odds values 00:03:27.630 --> 00:03:31.420 so we can read IDB 0 255. 00:03:31.440 --> 00:03:33.060 And when I was 84 00:03:36.700 --> 00:03:39.850 It's a background color. 00:03:42.420 --> 00:03:51.370 So I would use the IDBI function because you're going to print out some transparency so the values 0 00:03:51.640 --> 00:03:56.590 to beauty 5 and one hundred eighty four. 00:03:57.000 --> 00:04:02.690 And then for the transparency we're going to go for 0.5. 00:04:10.980 --> 00:04:18.090 So you take out the border by setting the border property to none. 00:04:19.260 --> 00:04:22.670 OK. 00:04:25.500 --> 00:04:29.280 Also we will set some more the radius 00:04:34.530 --> 00:04:35.670 of what the pixel 00:04:39.660 --> 00:04:43.980 will change the text color to white color 00:04:57.950 --> 00:05:02.360 and also will increase the font size 00:05:07.850 --> 00:05:11.380 and it's go for 18 pixels. 00:05:12.710 --> 00:05:14.340 OK. 00:05:15.560 --> 00:05:15.920 And 00:05:18.800 --> 00:05:22.010 also can add some padding. 00:05:25.670 --> 00:05:33.430 So top Muslim are going to go for 10 pixels and listen right I'm going to go for 70 pixels. 00:05:35.600 --> 00:05:37.510 That looks good. 00:05:38.050 --> 00:05:40.720 I mean some less spacing. 00:05:41.420 --> 00:05:41.900 So 00:05:45.530 --> 00:05:51.630 let's go for 1.3 pixels. 00:05:55.070 --> 00:06:05.690 And finally we're going to add some margin bottom so that when we create the footer we call this gap 00:06:05.690 --> 00:06:08.720 between the button and the foot. 00:06:08.720 --> 00:06:19.160 Apply that to the contact info on to Mugen the button. 00:06:19.860 --> 00:06:27.780 This apply to the contact Dave instead since we use the margin top already with the contacts Dave. 00:06:27.800 --> 00:06:35.520 So that sets margin bottom to 100 pixels. 00:06:37.590 --> 00:06:37.910 All right. 00:06:37.910 --> 00:06:39.910 Now let's create our future. 00:06:39.980 --> 00:06:42.610 So we're going to go to the index that's a shame file. 00:06:42.930 --> 00:06:44.830 I'm going to go to the food section. 00:06:45.110 --> 00:06:48.980 So we'll create a div of a glass futon 00:06:53.070 --> 00:06:54.110 inside the state. 00:06:54.110 --> 00:07:02.940 We can create a container cardif of glass container. 00:07:05.690 --> 00:07:06.240 OK. 00:07:06.380 --> 00:07:15.470 And we'll just place a paragraph in the way this x ray. 00:07:15.480 --> 00:07:19.110 So copy this text. 00:07:19.470 --> 00:07:27.570 Basically the way we need to replace this copyright symbol using an image and say So we're going to 00:07:27.600 --> 00:07:37.190 use sound followed by copy and then it's Mikol. 00:07:38.690 --> 00:07:41.530 OK. 00:07:46.400 --> 00:07:52.160 So our future is that we can see it's because of the color text. 00:07:52.310 --> 00:07:55.830 So it goes to the CSSA file and style of word. 00:07:55.910 --> 00:07:56.360 So 00:07:59.970 --> 00:08:03.400 we're going to access the futex class. 00:08:04.950 --> 00:08:05.990 OK. 00:08:06.920 --> 00:08:14.600 So first of all we're going to give it a background color OK. 00:08:15.790 --> 00:08:19.130 So we're going to go for a transparent black color. 00:08:19.130 --> 00:08:22.320 So for this we're going to use the IGDA function again. 00:08:22.670 --> 00:08:28.750 So we said the background color to IGDA. 00:08:29.590 --> 00:08:37.910 So with a black color are going to use 0 0 0 and fully transparent you're going to go for 0.5. 00:08:39.020 --> 00:08:41.840 OK. 00:08:41.840 --> 00:08:42.770 All right. 00:08:42.800 --> 00:08:52.150 Also going to change the color of the text to a nice gray color. 00:08:52.240 --> 00:08:59.810 Now our text is readable and will increase the font size 00:09:02.200 --> 00:09:08.330 K to 15 pixels. 00:09:08.510 --> 00:09:12.620 And finally we're going to add some padding top and bottom. 00:09:12.950 --> 00:09:18.540 So we'll set the padding property using two values. 00:09:18.860 --> 00:09:28.560 So and we're going to go for 10 pixels and for the left and right sides are going to go for zero. 00:09:29.910 --> 00:09:32.280 OK. 00:09:32.370 --> 00:09:35.160 All right. 00:09:36.020 --> 00:09:43.360 By the way I haven't styled the harvest dates of the contacts button so let's do that now so you going 00:09:43.360 --> 00:09:52.260 to access the button using the button class and then go on hover. 00:09:53.240 --> 00:09:53.830 OK. 00:09:53.990 --> 00:10:00.150 So we're going to change the background color to this transparent black color. 00:10:00.380 --> 00:10:04.500 It's going to be exactly the same Sahni we use for our water. 00:10:05.170 --> 00:10:08.350 OK. 00:10:08.690 --> 00:10:11.840 And also we once the 00:10:14.750 --> 00:10:16.850 text color to be white 00:10:25.550 --> 00:10:26.890 and 00:10:29.670 --> 00:10:35.390 no water. 00:10:39.170 --> 00:10:41.690 OK. 00:10:43.540 --> 00:10:43.890 Okay. 00:10:43.910 --> 00:10:47.120 And one final point before we finish. 00:10:47.180 --> 00:10:55.130 If we look at our final Web sites and we decrease the width of the window and the 760 pixels 00:10:57.890 --> 00:11:03.830 we notice that the size of the pictures is reduced. 00:11:03.850 --> 00:11:04.740 OK. 00:11:05.240 --> 00:11:14.290 So to do this we are going to use media queries to change the size of our eye on these small devices 00:11:14.300 --> 00:11:22.190 so if you remember to use media queries we are going to write us media. 00:11:22.850 --> 00:11:23.640 Okay. 00:11:23.660 --> 00:11:33.280 And then between princes we are going to set the condition which is moncks with seven hundred six pixels 00:11:33.320 --> 00:11:34.380 . 00:11:35.690 --> 00:11:36.960 Okay. 00:11:37.070 --> 00:11:41.690 And then we are going to rise our signing there. 00:11:41.810 --> 00:11:46.380 So we're accessing the images using the body image class. 00:11:46.790 --> 00:11:52.890 We're going to change the size by change the height to 70 pixels 00:11:55.030 --> 00:11:56.300 . 00:11:57.790 --> 00:12:06.230 And now we'll see that's when we go to small devices 00:12:09.980 --> 00:12:14.070 the icons they get smaller. 00:12:16.170 --> 00:12:18.950 And now our Web site is complex 00:12:18.990 --> 00:12:32.670 . 00:12:37.340 --> 00:12:45.380 Congratulations you have just created a very nice web site from scratch using a CML CSSA and bootstrap 00:12:46.250 --> 00:12:53.370 the Web sites you have created is completely responsive and will adapt to any device size. 00:12:53.660 --> 00:12:58.780 You got a chance to review and proxies many of the skills we have learned in the complete web development 00:12:58.790 --> 00:12:59.860 course. 00:12:59.990 --> 00:13:08.720 This includes creating responsive navigation bars adding a nice fixed background image to your websites 00:13:09.860 --> 00:13:15.790 and using the grid system for the best lay out for your website. 00:13:16.970 --> 00:13:23.360 If you changed the design or if you created something completely different then I would be very interested 00:13:23.360 --> 00:13:27.120 in seeing what you have done so please share with me and other students. 00:13:27.170 --> 00:13:33.140 I look forward to seeing you finishing other projects and becoming a highly skilled and professional 00:13:33.230 --> 00:13:39.370 web developer.