WEBVTT 00:00:06.930 --> 00:00:07.200 All right. 00:00:07.200 --> 00:00:09.400 Now let's move to our question box. 00:00:09.420 --> 00:00:09.960 OK. 00:00:10.110 --> 00:00:14.690 So you got to go to our index those HMO file and create another Dave. 00:00:14.930 --> 00:00:17.170 OK. 00:00:17.250 --> 00:00:20.130 And give it an ID 00:00:23.100 --> 00:00:24.240 question. 00:00:24.500 --> 00:00:24.960 OK. 00:00:25.230 --> 00:00:27.360 So now let's style this. 00:00:27.430 --> 00:00:33.730 This using its ID. 00:00:33.900 --> 00:00:37.780 So first of all let's give it a whit 00:00:40.380 --> 00:00:50.390 of wondered for example a height of one hundred fifty. 00:00:52.010 --> 00:00:53.430 OK. 00:00:54.470 --> 00:00:58.530 And I'm going to need two centuries in the page. 00:00:59.220 --> 00:01:02.000 So we're going to use the magic property. 00:01:02.250 --> 00:01:04.200 So we're going to need some margin at the top. 00:01:04.200 --> 00:01:05.030 OK. 00:01:05.580 --> 00:01:11.460 And we don't need the left margin on the right margin to be set to auto so that it's censored. 00:01:11.760 --> 00:01:13.730 And we're going to use some both. 00:01:14.200 --> 00:01:15.240 OK. 00:01:15.270 --> 00:01:18.090 So here is our box. 00:01:18.390 --> 00:01:22.910 So the box is behaving as if these elements don't exist. 00:01:23.010 --> 00:01:29.440 The score box the Carex box and the right or the wrong box. 00:01:29.570 --> 00:01:30.050 OK. 00:01:30.180 --> 00:01:35.300 So it's behaving as if these don't exist because they are all positioned absolutes. 00:01:35.520 --> 00:01:41.470 OK so we're going to add some margin up. 00:01:41.490 --> 00:01:43.320 So we're going to use the module property. 00:01:43.790 --> 00:01:44.190 OK. 00:01:44.220 --> 00:01:49.380 Using four values to the first value is going to be for the top margin and I'm going to go for 50 pixels 00:01:49.390 --> 00:01:49.990 . 00:01:50.610 --> 00:01:52.410 Second one is the right. 00:01:52.440 --> 00:01:59.760 I'm going to see to 0 2 then the bottom one to get it to like 10 pixels. 00:02:01.410 --> 00:02:03.610 And then the left one or two as well. 00:02:03.810 --> 00:02:07.110 Then you can see that our box is positioned in the middle. 00:02:07.110 --> 00:02:10.730 So let's change its background color. 00:02:12.580 --> 00:02:13.510 OK. 00:02:13.530 --> 00:02:20.170 So let's use our callers ilah to pick this color. 00:02:20.270 --> 00:02:22.480 Here we go box there. 00:02:22.810 --> 00:02:23.540 OK. 00:02:24.090 --> 00:02:27.210 Let's make it slightly bigger. 00:02:27.640 --> 00:02:29.330 Change the with two. 00:02:29.380 --> 00:02:34.450 Four hundred fifty and. 00:02:37.350 --> 00:02:38.200 OK. 00:02:38.740 --> 00:02:41.470 Height looks white on it. 00:02:41.670 --> 00:02:48.440 Now let's add some books shadow using the vox shadow property. 00:02:48.450 --> 00:02:50.130 OK. 00:02:50.130 --> 00:02:58.560 So let's go for zero picks up of the horizontal value. 00:02:58.690 --> 00:03:04.410 OK because you only want the shadows to appear at the bottom and for the vertical value let's go for 00:03:04.740 --> 00:03:10.130 4 pixels OK and for the color. 00:03:10.950 --> 00:03:12.140 I'm going to use this card. 00:03:12.560 --> 00:03:13.690 OK. 00:03:13.790 --> 00:03:16.380 Nice look. 00:03:17.250 --> 00:03:17.670 OK. 00:03:17.730 --> 00:03:20.050 Our box looks fine. 00:03:21.090 --> 00:03:21.530 OK. 00:03:21.660 --> 00:03:24.400 Now let's go to our Dave. 00:03:24.450 --> 00:03:30.310 Just write some text inside the box to see how it's going to look like. 00:03:31.890 --> 00:03:40.330 OK so let's style text inside the box. 00:03:40.330 --> 00:03:44.570 So first of all let's make it bigger. 00:03:45.320 --> 00:03:49.130 Hey I said the font size 200 pixels for example. 00:03:49.350 --> 00:03:59.080 OK let's align the text in the center like this. 00:03:59.220 --> 00:04:01.170 So we're going to use the text align property 00:04:03.940 --> 00:04:07.000 and set it to center. 00:04:08.880 --> 00:04:10.650 That is good. 00:04:11.910 --> 00:04:16.710 And also we're going to need to change the font family. 00:04:16.830 --> 00:04:17.490 OK. 00:04:17.640 --> 00:04:23.350 So the phone's family use there is cursive. 00:04:24.220 --> 00:04:26.380 OK. 00:04:26.390 --> 00:04:28.170 So we're going to go for it. 00:04:28.390 --> 00:04:33.260 And I as a fallback we're going to go for. 00:04:33.390 --> 00:04:34.220 Sorry. 00:04:34.850 --> 00:04:40.320 OK so if it because if it doesn't work then we're going to go for Sunseri. 00:04:41.080 --> 00:04:42.240 All right. 00:04:45.080 --> 00:04:47.150 If the Heitz was bigger. 00:04:47.410 --> 00:04:53.110 So for example if you had 350 for the heights then text would appear at the top and we would have used 00:04:53.120 --> 00:04:56.850 the line Heights property to adjust text in the middle. 00:04:56.920 --> 00:04:57.160 OK 00:05:00.230 --> 00:05:01.360 let's remember this 00:05:04.900 --> 00:05:11.470 is one more points the color by default is going to be black but let's just say the color to black just 00:05:11.470 --> 00:05:12.770 in case. 00:05:15.010 --> 00:05:15.280 All right. 00:05:15.280 --> 00:05:20.320 Now we're going to move to our instruction books so we're going to create another div. 00:05:20.790 --> 00:05:22.050 OK. 00:05:22.150 --> 00:05:25.420 It really takes from the question books. 00:05:25.600 --> 00:05:32.020 So let's create our instruction div and give it an ID instruction 00:05:34.710 --> 00:05:40.530 and that style is using its ID. 00:05:43.500 --> 00:05:45.270 OK. 00:05:46.370 --> 00:05:56.000 So let's give it a width of 150 as we did with the question. 00:05:56.200 --> 00:05:58.320 OK. 00:06:00.340 --> 00:06:01.960 And a height 00:06:05.690 --> 00:06:11.520 of 50 pixels is quite small. 00:06:11.660 --> 00:06:14.920 Also this gives a background color 00:06:17.620 --> 00:06:20.010 using this color. 00:06:21.580 --> 00:06:24.440 OK. 00:06:27.340 --> 00:06:28.270 OK. 00:06:28.370 --> 00:06:33.310 And let's use the margin property to center this. 00:06:33.330 --> 00:06:38.430 Dave So we're going to need some margin of the bottom. 00:06:38.440 --> 00:06:39.040 OK. 00:06:39.250 --> 00:06:42.760 So it just said the top and bottom merge into big cells. 00:06:43.090 --> 00:06:44.500 OK. 00:06:44.590 --> 00:06:48.180 And the left and right margins too. 00:06:48.390 --> 00:06:54.780 So it says Now let's add some text inside the box. 00:06:54.940 --> 00:06:58.900 OK that just copy this text. 00:06:58.930 --> 00:07:00.760 Copy that. 00:07:01.790 --> 00:07:03.220 OK. 00:07:03.820 --> 00:07:16.550 So that's censer these text using the text align properly and say to censor and also to censor the text 00:07:16.560 --> 00:07:16.890 . 00:07:17.000 --> 00:07:21.960 Basically we're going to use the line height property. 00:07:22.000 --> 00:07:22.710 OK. 00:07:22.900 --> 00:07:30.730 Let's go for 20 pixels and see 40 00:07:33.550 --> 00:07:38.230 50 or five. 00:07:38.800 --> 00:07:40.760 That looks OK. 00:07:41.910 --> 00:07:50.260 And finally let's add some books shadow the wall some of the books OK using the books shadow property 00:07:50.260 --> 00:07:51.520 . 00:07:51.520 --> 00:07:57.970 So again it's going to be zero peaceful the and so will you and then going to go for four pixels for 00:07:57.980 --> 00:07:59.610 the vertical value. 00:07:59.830 --> 00:08:00.700 OK. 00:08:00.860 --> 00:08:05.330 And I'm going to use this dark purple color. 00:08:05.830 --> 00:08:07.060 OK. 00:08:07.780 --> 00:08:11.390 So it looks all right. 00:08:13.300 --> 00:08:13.580 All right. 00:08:13.570 --> 00:08:16.760 Now let's move to the multiple choices box. 00:08:16.810 --> 00:08:17.600 OK. 00:08:17.620 --> 00:08:20.360 So we're going to create a div. 00:08:20.560 --> 00:08:21.200 OK. 00:08:21.500 --> 00:08:25.750 And inside the div we're going to place all these boxes. 00:08:25.810 --> 00:08:32.740 So let's go to our indexers CML file creates a new div following the instruction. 00:08:33.620 --> 00:08:34.760 OK. 00:08:35.240 --> 00:08:38.900 Let's give it an ID choices. 00:08:40.630 --> 00:08:41.510 OK. 00:08:41.520 --> 00:08:46.820 And inside the Stiv we're going to create four Daves one div for each of these boxes. 00:08:47.050 --> 00:08:52.060 OK. 00:08:55.370 --> 00:09:00.250 So let's give the first box an ID of box 1. 00:09:00.280 --> 00:09:01.100 OK. 00:09:01.120 --> 00:09:06.890 Also we're going to give all these boxes one common class that we're going to use for all the common 00:09:07.180 --> 00:09:07.720 styling. 00:09:07.750 --> 00:09:12.810 Between all these boxes now we're going to call this class box. 00:09:13.030 --> 00:09:13.990 OK. 00:09:14.000 --> 00:09:20.680 So Republicain this second one is for box two then three and then four. 00:09:21.450 --> 00:09:24.390 OK. 00:09:24.430 --> 00:09:25.020 All right. 00:09:25.180 --> 00:09:29.530 Now let's style these boxes. 00:09:31.720 --> 00:09:35.430 Let's start with the containing containing the. 00:09:36.640 --> 00:09:41.890 Let's start with the containing div which is of ID choices 00:09:46.240 --> 00:09:53.640 so we're going to give it's a height of hundred pixels OK and a width of 150 as we did with the instruction 00:09:53.640 --> 00:09:57.810 books. 00:09:59.780 --> 00:10:08.190 OK let's go for one hand exults with heights OK. 00:10:08.400 --> 00:10:13.110 And two centuries we are going to use the magic in property. 00:10:13.130 --> 00:10:14.200 OK. 00:10:14.910 --> 00:10:15.360 So 00:10:18.720 --> 00:10:24.240 let's set the top and bottom margins to 5 pixels. 00:10:24.840 --> 00:10:34.610 OK then off to the left and right sides and then we can see that's our div looks sunset. 00:10:34.840 --> 00:10:35.120 OK. 00:10:35.130 --> 00:10:37.150 So he doesn't need any background color. 00:10:37.590 --> 00:10:46.060 OK so now we can move to the boxes and let's start with the common class. 00:10:46.080 --> 00:10:50.140 OK which is box. 00:10:50.160 --> 00:10:55.490 So the syntax is dot followed by the name of the class. 00:10:55.750 --> 00:11:02.930 Let's give each of these boxes a width of 85 pixels and a height of 85 pixels. 00:11:03.120 --> 00:11:03.970 OK. 00:11:04.400 --> 00:11:14.530 So with 85 and white 85 then I see how it looks. 00:11:14.880 --> 00:11:15.550 OK. 00:11:16.020 --> 00:11:24.590 Now let's give them a background color. 00:11:25.480 --> 00:11:27.310 They want that to be white. 00:11:27.900 --> 00:11:29.240 OK. 00:11:30.510 --> 00:11:40.550 And to have an inline styling like this we are going to make them float to the left. 00:11:41.750 --> 00:11:42.690 OK. 00:11:42.960 --> 00:11:44.550 Just like that. 00:11:45.780 --> 00:11:48.050 OK. 00:11:48.360 --> 00:11:53.560 Now to create some gap between the boxes we can add a margin. 00:11:53.620 --> 00:11:54.610 Right. 00:11:55.120 --> 00:11:55.570 So 00:11:58.870 --> 00:12:09.030 if we go for 20 pixels that's not enough we want the last box border to be at the same level as the 00:12:09.180 --> 00:12:10.120 containing the. 00:12:10.470 --> 00:12:19.570 So let's increase the margin until we get something like that's OK. 00:12:19.600 --> 00:12:22.860 So it looks too much. 00:12:25.020 --> 00:12:32.600 If we look at the last box we will notice that it doesn't have any margin. 00:12:32.640 --> 00:12:33.460 Right. 00:12:33.730 --> 00:12:34.550 OK. 00:12:34.980 --> 00:12:42.600 So are you going to do we are going to style the fourth box. 00:12:42.700 --> 00:12:43.640 OK. 00:12:43.870 --> 00:12:47.690 Which is the box ID box for. 00:12:48.300 --> 00:12:56.060 And we're going to set the margin right of this box to zero. 00:12:56.550 --> 00:13:01.230 OK. 00:13:01.480 --> 00:13:03.420 And then we can still see a gap there. 00:13:03.420 --> 00:13:06.010 So let's increase the margin right. 00:13:06.120 --> 00:13:08.010 OK. 00:13:08.010 --> 00:13:14.610 So one important point when we are sitting assessing the margin right to the box class this is going 00:13:14.620 --> 00:13:16.680 to be affecting all the boxes. 00:13:17.020 --> 00:13:26.030 OK but since this property of margin right of zero is coming after this one then he's going to overwrites 00:13:26.040 --> 00:13:30.670 the modularize property of books 4. 00:13:30.880 --> 00:13:32.260 OK. 00:13:32.970 --> 00:13:40.060 So let's continue adding someone merging there. 00:13:41.820 --> 00:13:44.300 And it looks like 36 is the right one. 00:13:44.730 --> 00:13:46.890 OK. 00:13:48.450 --> 00:13:53.680 Now let's add a little bit of border radius to tile the corners of our boxes. 00:13:54.210 --> 00:13:54.890 OK. 00:13:55.050 --> 00:13:56.550 Let's go for two pixels 00:14:00.740 --> 00:14:05.330 or three pixels. 00:14:05.380 --> 00:14:06.760 That looks fine. 00:14:07.320 --> 00:14:07.750 OK. 00:14:07.740 --> 00:14:20.190 And then let's add a cursor prophecy so that we change the cursor to a pointer when we get on the elements 00:14:20.210 --> 00:14:20.690 . 00:14:21.150 --> 00:14:31.170 OK so we're going to set the cursor property to Pointon and then when we have it on the boxes you can 00:14:31.170 --> 00:14:35.340 see as our cursor turns to a point ahead. 00:14:35.660 --> 00:14:36.860 OK. 00:14:38.070 --> 00:14:47.110 OK now let's add a box shadow property on some shadow at the bottom of the box. 00:14:47.720 --> 00:14:51.730 How we can assess the book's shadow using 00:14:55.690 --> 00:14:59.460 zero pixel where the horizontal value. 00:14:59.490 --> 00:15:00.140 OK. 00:15:00.450 --> 00:15:07.830 When the shadows appear on the bottom and we're going to set the vertical vital for pixels and regarding 00:15:07.840 --> 00:15:10.630 the color we're going to go for a gray color. 00:15:10.650 --> 00:15:14.900 OK so I going to use a black color and make a transparence. 00:15:14.900 --> 00:15:15.200 OK. 00:15:15.250 --> 00:15:17.900 To do that I'm going to use the R-GA function. 00:15:17.930 --> 00:15:18.630 OK. 00:15:18.840 --> 00:15:28.390 And I'm going to set all the first three values to zero for Black K and then I'm going to go for a transparency 00:15:28.380 --> 00:15:30.080 value of point two. 00:15:30.340 --> 00:15:30.760 OK. 00:15:30.890 --> 00:15:35.560 So we can see our side of that. 00:15:35.640 --> 00:15:37.380 OK looks great. 00:15:38.430 --> 00:15:39.240 OK. 00:15:39.370 --> 00:15:45.400 Now let's add some text inside one of the boxes and 00:15:50.160 --> 00:15:51.200 sign it. 00:15:51.480 --> 00:15:52.590 OK. 00:15:52.600 --> 00:15:53.050 So 00:15:58.870 --> 00:16:01.670 first we want our text to be censored. 00:16:01.920 --> 00:16:03.560 OK. 00:16:05.220 --> 00:16:16.710 Horizontally and vertically so we're going to use the text align property to center and vertically. 00:16:16.800 --> 00:16:31.570 We're going to use the line height and let's try 30 60 OK 80 looks fine. 00:16:31.870 --> 00:16:34.830 All right. 00:16:35.590 --> 00:16:39.660 Right now at least Smiley boxes when we move on them. 00:16:40.050 --> 00:16:49.540 So when we get on the books OK we can see that's the background color becomes purple. 00:16:49.620 --> 00:16:50.030 OK. 00:16:50.040 --> 00:16:56.480 And also the color of the shadow becomes dark purple color. 00:16:57.030 --> 00:16:59.670 And it takes becomes white. 00:17:00.150 --> 00:17:01.040 Right. 00:17:01.090 --> 00:17:03.930 So let's do this. 00:17:03.930 --> 00:17:11.730 So this is actually going to be dots followed by the last name and then called Hoba. 00:17:12.170 --> 00:17:13.600 OK. 00:17:15.240 --> 00:17:20.220 So first of all we're going to change the background color. 00:17:23.100 --> 00:17:28.540 Let's pick this color. 00:17:32.190 --> 00:17:34.910 OK. 00:17:37.200 --> 00:17:40.290 And the text becomes white. 00:17:40.300 --> 00:17:42.840 And I said the color property to white. 00:17:43.410 --> 00:17:44.010 OK. 00:17:44.170 --> 00:17:49.360 And the box shadow property is going to change. 00:17:49.400 --> 00:17:55.830 It's going to keep the same vertical or horizontal and vertical values but we're going to change the 00:17:55.870 --> 00:17:57.170 color. 00:17:57.470 --> 00:18:00.550 We're going to go for a dark purple color. 00:18:01.180 --> 00:18:02.320 OK. 00:18:02.400 --> 00:18:06.790 Know when we go over on the boxes you can see the changes. 00:18:07.700 --> 00:18:13.440 OK.