1 00:00:01,020 --> 00:00:12,240 OK, guys, and we will add this part, so let's go to our source code and do it here in depth so we 2 00:00:12,240 --> 00:00:17,070 can create a new section and give it an -- of features. 3 00:00:20,280 --> 00:00:28,830 And then here we can type something like the code here, and then we will type our values and the text 4 00:00:29,220 --> 00:00:40,800 we can just go here, type Java with class of container, and then we can make Devant with a class of 5 00:00:40,830 --> 00:00:42,740 text center. 6 00:00:44,180 --> 00:00:48,810 And this will be having the class of text align center. 7 00:00:49,230 --> 00:01:02,260 And then here we can be with a class of lead with our values and then we can make peace with class as 8 00:01:02,340 --> 00:01:14,670 off to with the purple and must be having purple lines and then we can cover this text and paste inside 9 00:01:14,670 --> 00:01:15,030 here. 10 00:01:17,640 --> 00:01:21,180 Let's go now to our page and see what we have. 11 00:01:22,170 --> 00:01:23,230 OK, that's good. 12 00:01:23,590 --> 00:01:29,700 Let me just be having the font weight of poled here. 13 00:01:29,700 --> 00:01:31,430 We can make style font. 14 00:01:31,620 --> 00:01:33,480 Wait, let me get Polder. 15 00:01:35,700 --> 00:01:36,750 OK, that's good. 16 00:01:37,350 --> 00:01:39,540 Let's try to make it one. 17 00:01:41,370 --> 00:01:42,480 Yes, that's good. 18 00:01:42,900 --> 00:01:47,190 After this part we want to make this text a line to center. 19 00:01:47,550 --> 00:01:50,460 We can make it from here or we can just act from the. 20 00:01:50,810 --> 00:01:54,660 Yes, but we will add to this if asked in order. 21 00:01:54,990 --> 00:02:01,600 If we want to make it a game or use it again, we can go to the tyldum since Hessen. 22 00:02:02,940 --> 00:02:03,930 Scroll down. 23 00:02:05,070 --> 00:02:05,620 Sorry. 24 00:02:07,830 --> 00:02:17,670 OK, text center to text a line to the center. 25 00:02:19,890 --> 00:02:20,790 OK, that's good. 26 00:02:21,150 --> 00:02:23,160 Now we need some margin from here. 27 00:02:23,550 --> 00:02:27,390 We can just go to the title of the game. 28 00:02:28,140 --> 00:02:40,320 Scroll down and let's make this margin top section because we really it many times and this to be a 29 00:02:40,350 --> 00:02:43,170 big margin job that. 30 00:02:43,380 --> 00:02:44,700 Fifty seven pixels. 31 00:02:45,810 --> 00:02:46,890 Seventy five pixels. 32 00:02:46,890 --> 00:02:49,650 Sorry, I think this will be fine here. 33 00:02:49,650 --> 00:02:51,210 We can make margin 34 00:02:55,230 --> 00:03:00,630 type or we can just copy this class and five, six here. 35 00:03:04,530 --> 00:03:05,750 We don't have margin. 36 00:03:05,970 --> 00:03:07,200 What's the problem here. 37 00:03:09,080 --> 00:03:13,770 Yes, it is a class and not an idea we can add here. 38 00:03:13,770 --> 00:03:15,240 Class and paste. 39 00:03:16,680 --> 00:03:17,760 OK, that's good. 40 00:03:18,060 --> 00:03:23,520 And actually this part is see from here we will add three columns. 41 00:03:23,520 --> 00:03:27,420 They are equal in which we have some books shows. 42 00:03:27,930 --> 00:03:35,620 The first thing we will do right here is to add a dev with class of container and then we will add three 43 00:03:36,380 --> 00:03:43,430 dead because of fruit and then we will add three columns here we can wear. 44 00:03:43,530 --> 00:03:51,950 And yes, here, Devoy, the class of the row and add to this part that will have to print. 45 00:03:52,680 --> 00:04:00,630 I'm going to choose column three for the screen we can make here with Class of Poland. 46 00:04:00,720 --> 00:04:04,620 That's quite large three, column X, large three. 47 00:04:04,890 --> 00:04:12,630 And then we will check the response before we can cover this part paste and paste again. 48 00:04:12,960 --> 00:04:17,720 So here we will be having one, two, three columns here. 49 00:04:17,730 --> 00:04:22,770 We can make justified content evenly because the space here is equal. 50 00:04:24,660 --> 00:04:33,100 After this part, we can go here and we can cover the text center and build here. 51 00:04:33,120 --> 00:04:40,230 So everything inside this section will be having the text a line of center. 52 00:04:43,790 --> 00:04:45,610 Let's check it out. 53 00:04:45,760 --> 00:04:57,440 OK, and here we got the first colan we can go and edit, we can make here and then it with a source 54 00:04:57,620 --> 00:05:00,860 of features, I think this one right here. 55 00:05:00,890 --> 00:05:01,640 Let's check it. 56 00:05:03,720 --> 00:05:07,440 No, not this one, we can just up and inspect and check it. 57 00:05:09,720 --> 00:05:17,570 Or we can just use the same image here, values, yes, values, let's go. 58 00:05:17,610 --> 00:05:26,490 Here they have to be values one and then we can copy this here and here. 59 00:05:26,850 --> 00:05:29,250 This to be two and three. 60 00:05:29,820 --> 00:05:33,950 Let's go back to our to our Web page and see what we have right now. 61 00:05:37,200 --> 00:05:38,530 OK, that's good. 62 00:05:39,090 --> 00:05:41,730 Just have one what up here. 63 00:05:42,880 --> 00:05:45,930 We have this one just we just have values. 64 00:05:45,930 --> 00:05:53,850 One we can just type here from one and one, but we need to give it a class of enhanced flight to be 65 00:05:53,850 --> 00:05:56,080 taking the width of its colon. 66 00:05:56,460 --> 00:05:57,690 We can go here. 67 00:05:57,780 --> 00:06:01,790 A class of image flunked. 68 00:06:01,800 --> 00:06:06,810 We can copy this class and look here and here. 69 00:06:07,740 --> 00:06:10,920 Let's go and reload our Web page. 70 00:06:12,150 --> 00:06:14,480 OK, so here we got one, two, three. 71 00:06:14,820 --> 00:06:18,480 We can add four in order to make it smaller. 72 00:06:18,480 --> 00:06:29,250 As you can see here, we can give it an idea of immagine image, uh, values. 73 00:06:29,310 --> 00:06:37,160 OK, and then we can copy paste it here and also here. 74 00:06:37,800 --> 00:06:40,070 Next step is to go to the C. 75 00:06:40,260 --> 00:06:43,530 S and add transfer of scale. 76 00:06:44,280 --> 00:06:49,110 We can go here, delete this, add the hash. 77 00:06:50,760 --> 00:06:56,010 OK, this to be have a transform of scale. 78 00:06:56,280 --> 00:06:58,430 Let's try O point eight. 79 00:06:58,740 --> 00:07:01,570 We can go now to our web browser. 80 00:07:03,420 --> 00:07:04,860 OK, I think that's correct. 81 00:07:05,250 --> 00:07:09,210 And then we need a whole function to be the same in here. 82 00:07:10,350 --> 00:07:18,090 We can go here again, scrolled down, it can cover this one. 83 00:07:18,090 --> 00:07:21,860 And we consider this to be getting the overall function. 84 00:07:22,200 --> 00:07:24,830 Let's bring them over to be all point seven. 85 00:07:25,500 --> 00:07:28,350 Let's go and reload our Web browser. 86 00:07:32,270 --> 00:07:33,360 OK, that's good. 87 00:07:33,680 --> 00:07:38,960 We just need to be having transition again here. 88 00:07:43,250 --> 00:07:50,780 Sorry, we can't scroll down and this to be having a transition of old point one seconds. 89 00:07:50,800 --> 00:07:56,590 I think this will be very fun with the opening 20 seconds reload. 90 00:07:56,600 --> 00:07:57,560 We can make this here. 91 00:08:04,630 --> 00:08:15,610 OK, so now that speech and then here we will add this text list to be having three or four, we can 92 00:08:15,610 --> 00:08:20,320 go back to our source code inside the index edged out. 93 00:08:21,130 --> 00:08:23,890 Scroll down to the bottom of the page. 94 00:08:25,390 --> 00:08:28,590 OK, where is it now? 95 00:08:28,630 --> 00:08:29,240 Not this one. 96 00:08:29,330 --> 00:08:29,840 This one. 97 00:08:30,290 --> 00:08:32,370 This is for the demo version. 98 00:08:33,130 --> 00:08:44,800 And then here we can make it up with class of three and to be having the class of purple. 99 00:08:45,430 --> 00:08:49,210 And then inside you can just copy this text from here. 100 00:08:49,930 --> 00:08:51,220 We can cover this text. 101 00:08:55,160 --> 00:09:08,750 OK, and taste, let's go and see what we have, we can just make it font style of italic and then we 102 00:09:08,750 --> 00:09:15,710 can cover this class to be having a class or the styling of the font style of italic. 103 00:09:16,140 --> 00:09:26,120 We can go here to be having font style, this style of italic. 104 00:09:27,890 --> 00:09:29,510 Let's go and reload. 105 00:09:31,280 --> 00:09:32,310 OK, that's good. 106 00:09:32,660 --> 00:09:33,580 Let's make it. 107 00:09:34,940 --> 00:09:35,450 Yes. 108 00:09:35,450 --> 00:09:36,230 From here. 109 00:09:39,540 --> 00:09:42,200 Dial phone to wait all polder. 110 00:09:42,800 --> 00:09:52,030 Let's go to the Web page or just let's try episode of two, OK, let's try three right now or let's 111 00:09:52,030 --> 00:09:52,680 check here. 112 00:09:54,890 --> 00:09:58,070 OK, let's try that. 113 00:09:58,080 --> 00:09:59,630 OK, we can send it back to two. 114 00:09:59,940 --> 00:10:00,950 Yes, three. 115 00:10:01,710 --> 00:10:07,350 And after this part, we can cover this same text and paste it here and here. 116 00:10:07,830 --> 00:10:13,530 We can go back to the index edged out from here. 117 00:10:13,560 --> 00:10:14,130 Yes. 118 00:10:14,790 --> 00:10:15,840 Copy this one. 119 00:10:16,980 --> 00:10:20,380 And basically here and here. 120 00:10:22,890 --> 00:10:24,600 So here we got this test. 121 00:10:25,290 --> 00:10:29,070 And here, as you can see from here, we will add this test. 122 00:10:29,280 --> 00:10:33,750 We can just give it the class of lead, but a different font size. 123 00:10:34,350 --> 00:10:45,810 We can go here and clean the class of lenth that we can give it a title of font size of one already. 124 00:10:45,810 --> 00:10:54,450 And we can try to start from here and then we can copy this text and pasted inside our source code. 125 00:10:56,740 --> 00:10:58,240 OK, that's good. 126 00:11:00,450 --> 00:11:02,230 We can go and reload. 127 00:11:04,030 --> 00:11:05,050 OK, that's good. 128 00:11:05,200 --> 00:11:06,220 I think here. 129 00:11:06,730 --> 00:11:08,200 Yeah, no, no, no. 130 00:11:08,540 --> 00:11:12,050 Let's try here one point twenty five. 131 00:11:16,060 --> 00:11:17,660 No, that's very big. 132 00:11:18,070 --> 00:11:22,540 Let's try one on one and go back to the what page. 133 00:11:24,830 --> 00:11:27,000 OK, I think that's good right now. 134 00:11:27,340 --> 00:11:31,810 And then here we can copy and paste the same text. 135 00:11:32,320 --> 00:11:38,980 We can't keep this paragraph and pasted to the first one and the last one. 136 00:11:41,650 --> 00:11:43,990 Paste and paste. 137 00:11:44,320 --> 00:11:46,600 Let's now go and reload the page. 138 00:11:48,970 --> 00:11:49,960 OK, that's good. 139 00:11:50,620 --> 00:11:57,660 But as you can see from here, lectures at the book's shadow, we can go to the CS s. 140 00:11:59,860 --> 00:12:11,440 And me just being that you are valid, I think, OK, where is that picture, let's make it values and 141 00:12:11,440 --> 00:12:14,460 then we can cover this I.D. and go back to the left. 142 00:12:14,920 --> 00:12:17,470 That's inside. 143 00:12:18,010 --> 00:12:24,680 I wrote an op ed, Gavin, with a class of googolplex X Lord of the Rings. 144 00:12:25,990 --> 00:12:34,600 The first thing you do, as you can see from here, is to add the book's shadow we can make here of 145 00:12:34,910 --> 00:12:43,880 shadows or three pixels or pixels, pixels, one big slice of black. 146 00:12:44,380 --> 00:12:48,130 Let's see what we have right now inside our Web page. 147 00:12:51,120 --> 00:12:52,060 What's the problem? 148 00:12:52,690 --> 00:12:54,150 I think we got something wrong. 149 00:12:57,680 --> 00:12:58,190 Gan. 150 00:13:02,350 --> 00:13:03,880 That's the problem right here. 151 00:13:08,690 --> 00:13:13,570 Shadow, can we have something from this park? 152 00:13:13,610 --> 00:13:14,740 So let's check out. 153 00:13:17,670 --> 00:13:18,570 Yes, sir. 154 00:13:20,170 --> 00:13:24,940 Must be, or we can just believe this, I think, class with it. 155 00:13:27,370 --> 00:13:33,930 We can go here and try something like inside job with tons of container. 156 00:13:37,770 --> 00:13:38,070 No. 157 00:13:38,220 --> 00:13:39,240 So what's the problem? 158 00:13:39,270 --> 00:13:40,830 Can you believe this one? 159 00:13:42,910 --> 00:13:44,530 And John, handbook's shadow here. 160 00:13:44,560 --> 00:13:46,310 So what's the problem with Bart? 161 00:13:46,990 --> 00:13:53,720 Let's try to make something different to make sure it's really apply to this one color blue. 162 00:13:55,720 --> 00:13:57,710 No, we get something wrong with this part. 163 00:13:57,740 --> 00:14:00,430 So what's the problem right here? 164 00:14:05,460 --> 00:14:06,350 Yes, sir. 165 00:14:10,130 --> 00:14:12,800 Yeah, we need to check this part right here. 166 00:14:15,830 --> 00:14:23,690 We can try to give you an idea of shadow and then go back to the club upstairs as. 167 00:14:28,790 --> 00:14:36,940 Shadow and then you in the practice, and let's try to make color red. 168 00:14:37,910 --> 00:14:50,180 So now it's being applied and then here we can get a shadow one pixel for pixels, a big a plume of 169 00:14:50,180 --> 00:14:53,040 black lets go and reloading. 170 00:14:54,230 --> 00:14:56,510 OK, that's very large. 171 00:14:56,990 --> 00:15:05,540 Let's try to make it just, you know, again, we can try to make this one to be one. 172 00:15:08,060 --> 00:15:09,290 OK, I think that's good. 173 00:15:09,290 --> 00:15:15,680 We just need to decrease the degree of bad color we can support and decrease it from here. 174 00:15:16,170 --> 00:15:18,020 I just go and see what we have right now. 175 00:15:18,680 --> 00:15:20,270 OK, let's decrease. 176 00:15:20,270 --> 00:15:24,410 More likely to be one. 177 00:15:25,070 --> 00:15:26,660 Go and reload the page. 178 00:15:27,320 --> 00:15:28,240 OK, that's good. 179 00:15:28,490 --> 00:15:31,490 We just need here to add some padding. 180 00:15:31,910 --> 00:15:36,160 We can add go here and padding off. 181 00:15:36,290 --> 00:15:37,160 Let's try to 182 00:15:40,460 --> 00:15:47,170 reload, we can apply to the rest so we can test whether everything is OK. 183 00:15:47,470 --> 00:15:58,400 We can copy this idea from here, copy paste it here and here. 184 00:15:59,030 --> 00:16:02,710 We can go to this to the Web page and see what we have right now. 185 00:16:03,200 --> 00:16:05,660 OK, I think that's good right now. 186 00:16:06,380 --> 00:16:08,510 And here we need to add some margin. 187 00:16:08,510 --> 00:16:20,930 We can go to this one where yes, here this to be having style of more than top of search results. 188 00:16:21,560 --> 00:16:23,210 Let's see what we have right now. 189 00:16:24,800 --> 00:16:25,780 OK, that's it. 190 00:16:26,000 --> 00:16:28,040 But we get something different here. 191 00:16:28,370 --> 00:16:30,380 Indicates to you from the demo version. 192 00:16:30,800 --> 00:16:35,510 When we hold this one, we have this chance true of scale. 193 00:16:35,930 --> 00:16:40,970 We want it and the whole function to be for all of that. 194 00:16:41,900 --> 00:16:44,030 Let's go to this is a game. 195 00:16:44,240 --> 00:17:00,010 And, uh, yes, we can make values inside that container and inside at, uh, yes. 196 00:17:01,130 --> 00:17:08,820 The closure of this year in a row and column X X three life. 197 00:17:09,020 --> 00:17:11,270 And so we can come this part. 198 00:17:12,020 --> 00:17:12,890 That's right. 199 00:17:12,890 --> 00:17:14,240 Yes, it's already here. 200 00:17:14,750 --> 00:17:26,960 Or we can make a shadow of those shadow there's to be having this to be having for the whole. 201 00:17:28,280 --> 00:17:39,350 And then we can make inside the image and then we can cover this this year and check whether everything 202 00:17:39,350 --> 00:17:40,210 is OK or not. 203 00:17:41,060 --> 00:17:45,830 So here we got the note, then we guess something wrong. 204 00:17:45,840 --> 00:17:46,580 This part. 205 00:17:46,970 --> 00:17:48,350 What's the problem here? 206 00:17:52,120 --> 00:17:57,520 It started from the beginning when you was probably right here. 207 00:18:00,350 --> 00:18:07,050 Yes, we solved the problem, the problem was with the space, we shall not add space right here. 208 00:18:07,910 --> 00:18:09,110 It's OK right now. 209 00:18:09,470 --> 00:18:13,760 In the next video, we will change the responsive design of this part. 210 00:18:14,150 --> 00:18:16,090 So good luck and have fun.