1 00:00:00,720 --> 00:00:08,230 OK, guys, and now we will add this section to our Web page, so let's go and do it and we can make 2 00:00:08,250 --> 00:00:09,180 a screen smaller. 3 00:00:10,740 --> 00:00:12,360 OK, now make it larger. 4 00:00:12,660 --> 00:00:14,460 Starting from here is OK. 5 00:00:15,060 --> 00:00:17,720 We can go now to the index dot to. 6 00:00:20,190 --> 00:00:20,810 Yes. 7 00:00:20,970 --> 00:00:26,250 Starting from here, we can add a section and give them idea of a pound. 8 00:00:26,820 --> 00:00:36,000 And then after this part we can make d'arvor with class of container and then we can make with class 9 00:00:36,000 --> 00:00:40,770 of throw and as you can see here from the last screen. 10 00:00:43,520 --> 00:00:52,250 Let's make it larger again, sorry, here, this is having the column six and column six until we go 11 00:00:52,790 --> 00:00:56,970 to the small screen, it will be having 12 and 12. 12 00:00:58,730 --> 00:01:02,420 OK, I think you're the smallest having the six all. 13 00:01:02,420 --> 00:01:03,200 So it's OK. 14 00:01:03,780 --> 00:01:05,220 You can see what we can do. 15 00:01:05,690 --> 00:01:07,420 Let's make a larger dinner. 16 00:01:10,980 --> 00:01:23,280 OK, here we can make Jennifer with class of call an act of sex, call them X large six Galán large 17 00:01:23,280 --> 00:01:31,390 sex column, medium six columns, small office six and the rest to be 12. 18 00:01:32,280 --> 00:01:41,220 OK, and answer this part of the crackhead and copy this again and paste, because I think we can use 19 00:01:41,220 --> 00:01:46,550 the same method for the center of this part to make it good and look good. 20 00:01:47,190 --> 00:01:53,130 And then here this is having the glass of lead, which we've added before, which adds 21 00:01:56,070 --> 00:02:04,880 this one, the font size of one point five orien and font weight of one side font weight off three hundred. 22 00:02:05,400 --> 00:02:13,440 We can go here and be and give it a glass of lead and just type who we are. 23 00:02:14,850 --> 00:02:21,570 And then I think here we got the purple light purple note. 24 00:02:22,170 --> 00:02:31,320 So let's say the print here, but we can copy this color because we believe that for this text and then 25 00:02:31,320 --> 00:02:41,130 we can go here and search for purple, purple color, this one, and let's give it a new class for the 26 00:02:41,130 --> 00:02:45,330 purple light color of this color. 27 00:02:46,170 --> 00:02:54,900 And then we can go back to the index, stood at temple here and give it a class of purple light. 28 00:02:55,590 --> 00:02:58,200 We can now go and reload. 29 00:03:00,860 --> 00:03:07,280 OK, that's good right now here we've got a different bit drunk to her, just let me up and inspect 30 00:03:07,550 --> 00:03:12,000 and get the color of the background, OK? 31 00:03:12,090 --> 00:03:14,140 And not sorry, sorry. 32 00:03:14,690 --> 00:03:20,930 And here we got the row and container, this background color. 33 00:03:21,260 --> 00:03:30,770 You can just come this background color and paste it inside the seats right here and just give it gas 34 00:03:31,760 --> 00:03:34,920 light or just big 35 00:03:37,940 --> 00:03:39,010 p.g. 36 00:03:39,380 --> 00:03:40,430 Why it's OK. 37 00:03:41,870 --> 00:03:53,550 And I'll this and make background color of this color and then we can go here and add a glass of white. 38 00:03:54,770 --> 00:03:56,180 Now what we have right here, 39 00:03:58,860 --> 00:04:01,540 OK, I think we got no difference. 40 00:04:01,730 --> 00:04:02,780 What is that. 41 00:04:04,770 --> 00:04:05,370 All right. 42 00:04:05,420 --> 00:04:06,770 So what's the problem here. 43 00:04:10,510 --> 00:04:15,520 Let's try again with a spark that can cut this part here. 44 00:04:19,750 --> 00:04:21,220 Yes, we already have it. 45 00:04:26,570 --> 00:04:34,100 OK, it's here, as you can see here, we can zoom in and you can find it here when we scroll. 46 00:04:35,550 --> 00:04:36,770 OK, that's good. 47 00:04:36,920 --> 00:04:44,780 And it's ending here, OK, after this part, we can go here and add some padding. 48 00:04:45,230 --> 00:04:59,450 We can go here and we can scroll down about and inside that room, we can give a so of pixels to be 49 00:04:59,450 --> 00:05:01,160 having padding in all directions. 50 00:05:01,190 --> 00:05:02,190 OK, that's good. 51 00:05:02,630 --> 00:05:07,910 And after the start, as you can see from here, we will add this text. 52 00:05:08,360 --> 00:05:11,920 We can just go to the index to it. 53 00:05:12,720 --> 00:05:17,480 And here this is having the F as of three. 54 00:05:17,900 --> 00:05:28,280 We can make a copy with class F of three and then we can close it and give it a class of purple and 55 00:05:28,280 --> 00:05:31,580 then we can copy this text to paste it in five here. 56 00:05:34,470 --> 00:05:38,070 Based, let's see what we have here inside our Web page. 57 00:05:38,730 --> 00:05:43,410 OK, so basically the last thing we will add here is the. 58 00:05:44,520 --> 00:05:56,940 We can just go here, make a great effort from nothing and class of potent purple, and then we can 59 00:05:57,300 --> 00:06:02,730 type here something like check our designs. 60 00:06:03,450 --> 00:06:13,500 And then for the Rintaro Rintaro, we can make a left arrow if we wish so we can go here. 61 00:06:14,500 --> 00:06:15,430 We get something wrong. 62 00:06:15,960 --> 00:06:21,200 Yes, they have to be here. 63 00:06:23,220 --> 00:06:30,030 We just need to apply to the whole function for this part so we can just go to the S and see what we 64 00:06:30,030 --> 00:06:30,680 can do. 65 00:06:31,230 --> 00:06:34,950 We can make Cuma now. 66 00:06:34,950 --> 00:06:40,710 We can cut this part and paste and start to take. 67 00:06:42,920 --> 00:06:47,710 And then after this started, we can where is this? 68 00:06:50,060 --> 00:06:57,280 Yes, I will lead the first right here I'm sorry, I've edited before myself and now it's also working 69 00:06:57,290 --> 00:06:57,750 great. 70 00:06:58,550 --> 00:07:01,580 Let's test it here, OK, no problem with it. 71 00:07:01,950 --> 00:07:02,480 I'm sorry. 72 00:07:03,920 --> 00:07:05,360 It's making a problem here. 73 00:07:05,360 --> 00:07:06,190 OK, it's OK. 74 00:07:06,590 --> 00:07:12,950 And then after this party, we can just go here and see what we can do. 75 00:07:13,790 --> 00:07:15,170 We can cover this part. 76 00:07:15,270 --> 00:07:17,000 Yes, we already have it for John need. 77 00:07:18,440 --> 00:07:23,600 You can see now what's going on. 78 00:07:23,870 --> 00:07:31,250 So here we got this overfunctioning function we just need to make here that's about to be having the 79 00:07:31,270 --> 00:07:32,960 transition when we go back. 80 00:07:33,830 --> 00:07:34,760 OK, that's good. 81 00:07:35,480 --> 00:07:38,450 And after this part, we need some margin here. 82 00:07:38,900 --> 00:07:40,540 We can go to this far. 83 00:07:40,550 --> 00:07:43,550 To where? 84 00:07:43,550 --> 00:07:45,290 Yes, scroll down. 85 00:07:46,550 --> 00:07:54,500 High powered and inside the glass row inside and three to be having the margin. 86 00:07:54,500 --> 00:07:59,780 Put them like say that for six months. 87 00:08:00,140 --> 00:08:01,310 Yes, more than margin. 88 00:08:01,310 --> 00:08:02,840 Put them and not job. 89 00:08:04,100 --> 00:08:08,900 So here we get some margin and also the A function then. 90 00:08:08,900 --> 00:08:15,380 Now, as you can see from here, we will add the image and this whole function. 91 00:08:15,380 --> 00:08:27,200 Also, we can go here and up the index of Acharn L, I imagine with a source about Dot GPG, you can 92 00:08:27,350 --> 00:08:34,760 it can already find all of the source could attach it to the first article of this section and here 93 00:08:34,760 --> 00:08:42,400 we can give it a class, uh, image light and now we can up in our file here. 94 00:08:43,670 --> 00:08:44,660 So now we got this. 95 00:08:45,140 --> 00:08:48,440 We just need to make a line items to center. 96 00:08:48,740 --> 00:08:52,460 We can go here and make Philips Center. 97 00:08:54,470 --> 00:08:56,270 So now we got the Flex Book Center. 98 00:08:56,570 --> 00:09:01,340 The next step right here is to make this with a hover function. 99 00:09:01,790 --> 00:09:12,350 We can update the system or we can just give it a class of image over scale because we will need it 100 00:09:12,350 --> 00:09:13,040 many times. 101 00:09:13,460 --> 00:09:25,400 We can go now to the title the as I at this to be having the transition of a one point one five seconds 102 00:09:25,880 --> 00:09:31,520 and then we can cover this part basic here, but this one to be for the whole function. 103 00:09:32,480 --> 00:09:43,250 Now we can make this to be having that transformer translate sorry, scale of one point one and now 104 00:09:43,250 --> 00:09:46,010 we can go and with our white page. 105 00:09:46,730 --> 00:09:49,790 So now we've got this whole function and we've got no problem with it. 106 00:09:49,880 --> 00:09:51,140 This is working perfect. 107 00:09:52,130 --> 00:09:54,140 OK, ok, OK. 108 00:09:54,770 --> 00:09:57,140 And also we got the background color. 109 00:09:58,760 --> 00:10:00,080 OK, that's good. 110 00:10:00,770 --> 00:10:04,490 After this party we got the problem now. 111 00:10:06,320 --> 00:10:15,110 OK, so now after this party let's see that, let's check that everything's OK for the small screen. 112 00:10:16,970 --> 00:10:21,080 OK, this is the small screen when we go smaller again. 113 00:10:22,670 --> 00:10:23,060 Yes. 114 00:10:23,060 --> 00:10:25,190 We got the problem here I think. 115 00:10:25,880 --> 00:10:26,690 No, no, no. 116 00:10:26,720 --> 00:10:27,260 No problem. 117 00:10:28,250 --> 00:10:28,730 Yes. 118 00:10:29,040 --> 00:10:30,020 Get a problem here. 119 00:10:30,320 --> 00:10:34,340 So we need to set a medium for margin for this part. 120 00:10:34,700 --> 00:10:43,850 We can just go to the input so that lnc the great system we will make from yes. 121 00:10:43,850 --> 00:10:48,020 The actors move on table until we reach the small screen. 122 00:10:48,440 --> 00:10:55,910 We can just go here, add a new medium which we did add before minimum or project. 123 00:10:55,910 --> 00:11:09,500 We can just mix cream and max with five seven five point ninety eight pixels, we can have a crack right 124 00:11:09,500 --> 00:11:19,490 here about it inside a glass of room and inside at excited to be having margin up of pixels. 125 00:11:19,490 --> 00:11:20,460 What about now. 126 00:11:21,260 --> 00:11:22,610 So now we've got some margin. 127 00:11:22,620 --> 00:11:25,100 Let's make it seventy two. 128 00:11:25,100 --> 00:11:26,240 We can see some difference. 129 00:11:26,780 --> 00:11:27,770 OK, that's good. 130 00:11:28,040 --> 00:11:37,360 We can cut this much and put it with this one here and we can just copy both of them and make it, make 131 00:11:37,370 --> 00:11:40,340 them at home so we can find them together. 132 00:11:41,570 --> 00:11:42,500 OK, that's good. 133 00:11:42,830 --> 00:11:46,850 Now we can make this text center, but I think it's OK like that. 134 00:11:46,850 --> 00:11:49,190 We don't we know how to. 135 00:11:49,720 --> 00:11:51,110 Let's try again. 136 00:11:51,700 --> 00:12:00,810 We didn't cover this class and here deluded it, just make your tax cut align to the center. 137 00:12:02,410 --> 00:12:05,670 So now we got this sentence, we can keep it centered. 138 00:12:05,680 --> 00:12:06,430 It's OK. 139 00:12:06,920 --> 00:12:13,260 This is good because we are testing and we want to know the C elements. 140 00:12:13,960 --> 00:12:14,960 OK, that's good. 141 00:12:15,080 --> 00:12:16,540 Let's up in to inspect. 142 00:12:18,070 --> 00:12:19,330 There's another big problem. 143 00:12:19,690 --> 00:12:22,330 Might be where this text prevented. 144 00:12:22,330 --> 00:12:24,440 We can just make overflow. 145 00:12:24,460 --> 00:12:24,910 Excellent. 146 00:12:24,930 --> 00:12:29,890 You hate it, but we will make it at the end to make sure that we got no problem with the responsive 147 00:12:29,890 --> 00:12:30,280 design. 148 00:12:30,700 --> 00:12:32,660 And also we may have a problem here. 149 00:12:32,720 --> 00:12:33,850 No, we got no problem. 150 00:12:36,160 --> 00:12:37,340 OK, this is good. 151 00:12:38,380 --> 00:12:39,810 OK, that's perfect. 152 00:12:39,820 --> 00:12:44,940 And now we are done from this part and also made it responsive. 153 00:12:45,700 --> 00:12:47,860 We just need to check the response design. 154 00:12:48,250 --> 00:12:49,160 In the next year. 155 00:12:49,180 --> 00:12:50,350 We will add this part. 156 00:12:50,350 --> 00:12:51,060 It's OK. 157 00:12:51,640 --> 00:12:55,570 Let's now check the responsive design of this section. 158 00:12:55,840 --> 00:12:59,950 We can up in the back right here and see what we can do. 159 00:13:01,330 --> 00:13:09,250 OK, let's start from the beginning and then we will test for each one hundred pixels. 160 00:13:09,430 --> 00:13:15,040 Is it OK and starting from here. 161 00:13:15,310 --> 00:13:17,730 OK, and we got this over. 162 00:13:17,810 --> 00:13:18,430 Perfect. 163 00:13:21,430 --> 00:13:27,430 OK, we get this text covering, but this is not a problem, we can just change and. 164 00:13:30,330 --> 00:13:36,030 The Great Satan, if we wish to, and then for the screen, no problem with it. 165 00:13:39,090 --> 00:13:39,920 OK. 166 00:13:41,600 --> 00:13:45,310 And now for the screen, OK? 167 00:13:48,950 --> 00:13:50,040 OK, that's good. 168 00:13:53,910 --> 00:13:56,400 Good again. 169 00:13:57,840 --> 00:13:58,630 OK. 170 00:14:00,150 --> 00:14:01,470 Six hundred pixels. 171 00:14:03,900 --> 00:14:07,710 Also gauge for the 500. 172 00:14:11,120 --> 00:14:20,630 OK, good for the 400, Alcibiades, 300. 173 00:14:25,800 --> 00:14:26,550 Very well. 174 00:14:29,320 --> 00:14:30,320 This is not a problem. 175 00:14:30,340 --> 00:14:34,360 OK, and OK, that's very good. 176 00:14:37,070 --> 00:14:41,990 If you wish to delete the problem, you can just go and delete the arrow. 177 00:14:42,260 --> 00:14:47,840 If I go and leave the area, we will be having a problem that we were to move this hover effect. 178 00:14:49,100 --> 00:14:52,010 Yes, here we load. 179 00:14:52,670 --> 00:14:57,610 So now we've got the problem with check our designs because of the padding. 180 00:14:57,620 --> 00:14:58,010 Maybe. 181 00:14:58,010 --> 00:15:00,500 I think we can just go here. 182 00:15:01,540 --> 00:15:08,180 You can't sit back and then we can go to the toilet, says, let's see here. 183 00:15:08,180 --> 00:15:18,860 The purple we can put in purple and go here that this green and this won't to be here in just 20 and 184 00:15:18,860 --> 00:15:19,540 20. 185 00:15:20,510 --> 00:15:22,460 We can go here every we load. 186 00:15:22,760 --> 00:15:26,320 So now we got no problem with responsive design of this one. 187 00:15:26,570 --> 00:15:35,180 We just have with the hopper, we can go and the creative team, let's make it to 15 and 16. 188 00:15:37,730 --> 00:15:46,960 The game, and we can believe this, this one to be zero zero right now. 189 00:15:48,430 --> 00:15:50,330 OK, so now we solved the problem. 190 00:15:51,820 --> 00:15:52,870 OK, that's good. 191 00:15:54,400 --> 00:15:57,770 But also no problem here with the response, the design of the problem. 192 00:15:58,840 --> 00:16:04,120 And now forward for the two hundred pixels. 193 00:16:04,870 --> 00:16:05,910 There's another problem. 194 00:16:05,920 --> 00:16:11,890 There is no screen with this, which is the last one, which is one five zero pixels. 195 00:16:12,160 --> 00:16:14,320 The problem is with this one. 196 00:16:14,830 --> 00:16:17,400 So now this page is very responsive. 197 00:16:17,590 --> 00:16:24,570 In the next video, we will add this page, this section we just need to add here some margin. 198 00:16:25,270 --> 00:16:30,430 We can go to the scissors or we can just make this smaller from here. 199 00:16:32,770 --> 00:16:34,270 Make it larger. 200 00:16:37,090 --> 00:16:51,340 And here we're about to talk, and from here we don't have to be on top of, uh, let's say 35 five, 201 00:16:51,570 --> 00:16:52,800 so it's OK. 202 00:16:53,350 --> 00:16:55,990 And then here we got some options. 203 00:16:55,990 --> 00:16:59,170 And also we have the pink brown color. 204 00:17:00,190 --> 00:17:01,180 OK, that's good. 205 00:17:01,570 --> 00:17:07,270 So in the next video, we will add a new section, which I told you about. 206 00:17:07,620 --> 00:17:09,190 Good luck and tackle.