1 00:00:00,390 --> 00:00:07,620 OK, guys, and this video, we will add the home section and also make it responsive, the first thing 2 00:00:07,620 --> 00:00:13,830 we can do right now is to go to this part and delete all what we typed inside here. 3 00:00:14,930 --> 00:00:17,860 OK, let's make it here. 4 00:00:19,830 --> 00:00:28,200 OK, as you can see here, the first thing we will start with is adding a tag off section and then we 5 00:00:28,200 --> 00:00:36,400 will add container and then row and then we will divide the page into two columns of the same with. 6 00:00:37,880 --> 00:00:47,140 We can go here, add a tag section and give it an idea of home, because we will add a background image 7 00:00:47,150 --> 00:00:57,050 for it, and then after this part, we can make together with class of container assets and we can close 8 00:00:57,140 --> 00:00:58,130 this tag. 9 00:00:58,910 --> 00:01:06,200 And here we can make the cast of rope, which is having the display a flex and flex wrap into. 10 00:01:06,480 --> 00:01:06,890 Right. 11 00:01:07,460 --> 00:01:12,500 And then after this part inside here, we will add the cones. 12 00:01:13,130 --> 00:01:23,510 We can make Javin with class of Cobden, with a class of cool X X, large optics and also cold. 13 00:01:23,720 --> 00:01:25,400 That's large six. 14 00:01:26,300 --> 00:01:27,590 OK, that's good. 15 00:01:28,010 --> 00:01:37,190 After this party, we can call and go six, call Smol 12 and call off 12. 16 00:01:37,940 --> 00:01:43,460 So for the next X, not a screen X large medium they would be six and four. 17 00:01:43,460 --> 00:01:47,750 The small and the extra small, they will be 12. 18 00:01:48,170 --> 00:01:54,200 And here we will add the class of display four and some colors. 19 00:01:55,260 --> 00:02:06,720 We can go here and one with class of this plane for and then after this party, we can make, uh, we 20 00:02:06,720 --> 00:02:08,800 can just make it from here, OK? 21 00:02:09,270 --> 00:02:11,190 We can't copy this text from here. 22 00:02:11,970 --> 00:02:15,600 You can also find all of the text for this. 23 00:02:15,870 --> 00:02:16,370 We're screwed. 24 00:02:17,760 --> 00:02:27,240 And here based OK, after the SPART, we can go to the source and add a class for this color, which 25 00:02:27,240 --> 00:02:27,980 is purple. 26 00:02:28,440 --> 00:02:34,040 We can go to the pilot sees us down there, you know. 27 00:02:36,760 --> 00:02:38,600 Or we can make it at the bottom here. 28 00:02:38,740 --> 00:02:46,450 OK, here we can type purple to be having the color of hash. 29 00:02:47,650 --> 00:02:51,380 Oh one two nine seven zero. 30 00:02:52,360 --> 00:02:54,450 Sorry, this color, not color. 31 00:02:55,720 --> 00:03:00,280 And then we can go and visit here, hear purple. 32 00:03:01,600 --> 00:03:04,610 Let's see what we have right now inside our white page. 33 00:03:05,200 --> 00:03:06,160 So now we got this. 34 00:03:06,400 --> 00:03:09,700 But this is Polder right here. 35 00:03:09,940 --> 00:03:21,430 We can go to the style system where we can and each has a home which divides your home and things like 36 00:03:21,430 --> 00:03:23,200 that and each one. 37 00:03:23,710 --> 00:03:27,730 And then we can make phone to wait to be polder. 38 00:03:29,230 --> 00:03:34,060 We can now see the polder or we can just make it fold I think will be the same. 39 00:03:34,270 --> 00:03:35,170 Yes, the same. 40 00:03:35,470 --> 00:03:43,500 But it's good right now after this part, what we can do or we can just make it to five five zero. 41 00:03:45,540 --> 00:03:47,100 OK, that's it. 42 00:03:47,630 --> 00:03:56,550 And here we can add this text, which will be having a different color, we can just go to this text 43 00:03:56,550 --> 00:04:01,250 and let's make get with the display five. 44 00:04:01,680 --> 00:04:11,490 We can just go here covid this text this to be displayed for Thatcher because we will add on another 45 00:04:11,520 --> 00:04:12,780 each one right here. 46 00:04:13,620 --> 00:04:19,570 We can go here and each one and give it a class of display five. 47 00:04:20,090 --> 00:04:26,190 And here we can type gray because we will, in fact, a new color right now. 48 00:04:26,580 --> 00:04:32,120 And then we can copy this text from here and pasted here. 49 00:04:32,730 --> 00:04:35,700 If the class is not good, we can change it. 50 00:04:36,240 --> 00:04:42,910 We can go now to the CFF and add the color for this one here for that. 51 00:04:42,990 --> 00:04:45,750 Great to be having the color of that. 52 00:04:45,780 --> 00:04:52,440 Four four four three color hash four four four. 53 00:04:55,470 --> 00:04:59,740 OK, I think this will be good when we go and we load. 54 00:05:00,120 --> 00:05:01,470 No, that's not very good. 55 00:05:04,200 --> 00:05:06,060 What about this color right here. 56 00:05:06,540 --> 00:05:06,960 Yes. 57 00:05:07,070 --> 00:05:15,450 This is navigate this darker and now we can just go to this part and say one. 58 00:05:16,290 --> 00:05:18,210 Let's make this a display of six. 59 00:05:20,940 --> 00:05:21,720 This is better. 60 00:05:22,530 --> 00:05:25,050 And then here we need some margin. 61 00:05:25,380 --> 00:05:28,080 We can go to this right here. 62 00:05:29,340 --> 00:05:38,670 This this to be fixed, to be having the margin top off before it says, OK, good margin. 63 00:05:39,570 --> 00:05:47,000 And actually this part, what you can see from here, we will add this button we can just go to. 64 00:05:50,390 --> 00:06:00,140 Or to this one first, look where instead it's here and we can also go here and at large and put on 65 00:06:00,280 --> 00:06:07,290 up peaks because the margin job are not enabled for the attack. 66 00:06:08,270 --> 00:06:14,410 And here we can add a with nothing class of and purple. 67 00:06:15,680 --> 00:06:24,260 And then after this part, we can just, uh, make here something like the content here and get started 68 00:06:24,710 --> 00:06:24,980 here. 69 00:06:24,980 --> 00:06:27,680 We can get to charge it. 70 00:06:28,820 --> 00:06:33,670 And after this part we can go to our page and see what we have right now. 71 00:06:34,940 --> 00:06:41,920 The first thing we will do is to give it a different background and color and also we will make text 72 00:06:41,940 --> 00:06:46,310 decoration on and add some translation. 73 00:06:46,310 --> 00:06:47,720 So transform property. 74 00:06:47,720 --> 00:06:51,590 As you can see from here, we can make it in the form of Martien. 75 00:06:52,130 --> 00:06:56,040 We can go here and right there. 76 00:06:56,510 --> 00:07:01,800 This is how we type arrows when we go to your game. 77 00:07:01,850 --> 00:07:02,830 OK, that's good. 78 00:07:03,320 --> 00:07:13,090 We can now go to this part of the in purple with be so we can make Putin purple to be having the. 79 00:07:14,190 --> 00:07:27,300 And yes, we can give it a color of Wiveton and then background, color of passion for one five four 80 00:07:27,540 --> 00:07:29,010 four one isn't good. 81 00:07:29,940 --> 00:07:43,740 And here we can give it a book, shadow of zero pixels, five pixels, 30 pixels of our DP, a six five 82 00:07:44,070 --> 00:07:46,580 eight four two four one. 83 00:07:47,250 --> 00:07:49,570 I think we got something wrong. 84 00:07:49,620 --> 00:07:51,300 This part, yes. 85 00:07:51,930 --> 00:07:53,530 Divided by 40 percent. 86 00:07:54,880 --> 00:07:59,350 OK, I think this color would be great, but what wrong with it here? 87 00:08:01,390 --> 00:08:03,310 I think we got something wrong here. 88 00:08:03,730 --> 00:08:05,080 Let's delay this part. 89 00:08:07,000 --> 00:08:08,620 Let's do what we have here first. 90 00:08:08,950 --> 00:08:13,430 OK, now we've got this picture that we got, no problem with it, OK? 91 00:08:13,990 --> 00:08:17,500 And after this part, we don't need the 40 percent. 92 00:08:17,500 --> 00:08:19,570 We can make it by any color we wish to. 93 00:08:19,900 --> 00:08:22,840 We can make purple or just covid color. 94 00:08:23,360 --> 00:08:26,530 And so now we got this. 95 00:08:27,340 --> 00:08:29,730 We can now make this can be 20. 96 00:08:31,090 --> 00:08:32,500 This is better right now. 97 00:08:32,920 --> 00:08:43,990 And at this part, we can add some paintings and margins we can make here, adding left of pixels burning 98 00:08:43,990 --> 00:08:57,670 right off the top 15 pixels and also padding put him off 15 pixels that paint job and put on are very 99 00:08:57,670 --> 00:08:58,140 large. 100 00:08:58,450 --> 00:09:01,510 Let's just send them to seven point five. 101 00:09:02,410 --> 00:09:04,930 Again, seven point five. 102 00:09:05,110 --> 00:09:06,530 Let's see what we have right now. 103 00:09:07,240 --> 00:09:09,640 OK, that's good after this. 104 00:09:09,640 --> 00:09:12,750 But we just need that poder radius. 105 00:09:13,120 --> 00:09:21,340 We can go here and order a radius of four pixels, I think for pixel enough. 106 00:09:22,980 --> 00:09:28,230 Yes, and then here we can just look at what we have here. 107 00:09:28,260 --> 00:09:30,340 OK, here it's larger. 108 00:09:30,690 --> 00:09:36,810 Let's try to make this with 14, 14 and this to be 15 and 16. 109 00:09:36,840 --> 00:09:38,640 I think this would be better right now. 110 00:09:39,090 --> 00:09:40,490 OK, now that's good. 111 00:09:40,950 --> 00:09:45,900 And then we will we want to delete this on under line right here. 112 00:09:46,110 --> 00:09:50,340 We can just sit here, just decoration and turn up. 113 00:09:51,900 --> 00:09:53,060 OK, that's good. 114 00:09:53,520 --> 00:09:55,830 And then add to this part instead. 115 00:09:55,830 --> 00:09:58,380 Can the the size of one of them. 116 00:09:59,730 --> 00:10:01,370 OK, that's good right now. 117 00:10:01,770 --> 00:10:04,800 And after this part we want to start here. 118 00:10:04,980 --> 00:10:06,050 More margin. 119 00:10:06,720 --> 00:10:10,350 We can go here, what, about four to four pixels. 120 00:10:11,130 --> 00:10:12,160 OK, that's good. 121 00:10:12,510 --> 00:10:16,860 And here we can just add that transition. 122 00:10:17,550 --> 00:10:23,700 We can add here a span and then take this one chipping side here. 123 00:10:24,960 --> 00:10:25,860 What about now? 124 00:10:26,060 --> 00:10:26,870 OK, that's good. 125 00:10:27,960 --> 00:10:42,420 And then we can just go to this part and and Putin purple or the whole poem and inside that Putin purple. 126 00:10:42,840 --> 00:10:47,910 And when we come over the Putin purple, I want to change something in the span. 127 00:10:48,180 --> 00:10:49,490 So Putin purple. 128 00:10:49,500 --> 00:10:55,010 And then when I put on purple, we will change something in the span. 129 00:10:56,120 --> 00:10:59,710 And here we can set Margon left of 20 pixels. 130 00:11:00,140 --> 00:11:03,230 Let's see what we have right now inside the Web page. 131 00:11:04,280 --> 00:11:06,110 OK, so here we got the Martin. 132 00:11:06,350 --> 00:11:10,190 We just need to add some timing, something we can make here. 133 00:11:10,190 --> 00:11:19,120 Transition of oil point three seconds or just one point five or four point one seconds and the same 134 00:11:19,310 --> 00:11:19,580 here. 135 00:11:21,100 --> 00:11:22,570 Let's see what we have right now. 136 00:11:23,670 --> 00:11:31,910 OK, the problem is getting back, we can cut this one and yes, we can cover this one right here, 137 00:11:32,310 --> 00:11:36,750 that closure, and then we can cover this one. 138 00:11:38,110 --> 00:11:42,340 Pasting just put in purple and inside at us. 139 00:11:43,330 --> 00:11:44,350 Let's go here. 140 00:11:45,980 --> 00:11:53,450 So here we got some time function to do respond after this one, we need to make this a light center, 141 00:11:53,450 --> 00:12:00,660 but after we add the image, we can go to the index card and check out this one right here. 142 00:12:01,850 --> 00:12:03,130 Where is the closure? 143 00:12:03,870 --> 00:12:08,060 Yes, based on the closure of this division. 144 00:12:08,630 --> 00:12:16,050 And then we can imagine where the thought of this was watching. 145 00:12:16,790 --> 00:12:17,930 Where is the image? 146 00:12:19,050 --> 00:12:19,640 Yes. 147 00:12:21,780 --> 00:12:30,390 We can just that image we have here with image and then we just had a class of image flood, if it's 148 00:12:30,390 --> 00:12:32,340 not already there, it's not there. 149 00:12:32,800 --> 00:12:40,620 The image flight to make the image responsive as we learn it before you mention flight to be having 150 00:12:40,620 --> 00:12:49,530 the width of one hundred percent and then we can go to the index of A.M. and give it a class of Imanishi 151 00:12:50,340 --> 00:12:53,460 and let's see what we have here inside the Web page. 152 00:12:54,720 --> 00:12:56,220 OK, so now we got this. 153 00:12:56,610 --> 00:13:01,860 We can add some padding job and put in for the idea of home. 154 00:13:02,340 --> 00:13:04,150 We can scroll down right here. 155 00:13:05,970 --> 00:13:06,630 Yes. 156 00:13:08,710 --> 00:13:19,810 Starting from here, we can get it home for two 200 bucks and getting put off to five zero pixels. 157 00:13:20,220 --> 00:13:26,540 This would be better than to hide because to hide MacOS problem in the responsive design. 158 00:13:26,850 --> 00:13:35,820 So I always prefer to use bedding job and to calculate the hunt and then we can give it a background 159 00:13:35,820 --> 00:13:37,470 color background in. 160 00:13:37,530 --> 00:13:45,770 Sorry you are l of hero background of PMG background Forsythe's to cover. 161 00:13:45,780 --> 00:13:53,430 I had to learn it before and also background position center and center. 162 00:13:53,700 --> 00:13:55,020 And then I see this part. 163 00:13:55,290 --> 00:14:03,390 We will add something which is called background attachment to sorry background, attachment to everything 164 00:14:03,540 --> 00:14:07,150 and we will know what the background attachment to fix it. 165 00:14:07,380 --> 00:14:10,620 Let's just call it now so we can see the difference. 166 00:14:11,640 --> 00:14:14,180 OK, so now we got this and this is great. 167 00:14:14,700 --> 00:14:23,060 Let's change this one to be one or just one point fifty and one fifty pixels. 168 00:14:23,070 --> 00:14:23,920 What about now? 169 00:14:24,390 --> 00:14:25,290 OK, that's good. 170 00:14:25,890 --> 00:14:31,530 And after this part, we want to make this to be a line item to center. 171 00:14:31,890 --> 00:14:42,630 We can go to the X L and just add inside the row Netflix box of center, which is having this kind of 172 00:14:42,870 --> 00:14:45,120 a line I can call center. 173 00:14:45,870 --> 00:14:49,110 And now we got this center with this Hober function. 174 00:14:49,860 --> 00:14:51,690 OK, that's very good. 175 00:14:52,110 --> 00:14:56,610 And we just got a problem with the response to find out what's the problem here. 176 00:14:56,640 --> 00:14:57,000 Yes. 177 00:14:57,060 --> 00:14:57,720 The larger 178 00:15:00,420 --> 00:15:03,220 fix and large. 179 00:15:03,600 --> 00:15:04,830 It's right here again. 180 00:15:06,230 --> 00:15:08,970 OK, so now we would make the screen smaller. 181 00:15:11,020 --> 00:15:13,090 Let's talk from the beginning right here. 182 00:15:14,620 --> 00:15:17,490 OK, no problem until now. 183 00:15:19,450 --> 00:15:21,680 Can't we just meet here some margette? 184 00:15:24,900 --> 00:15:31,560 In the next year, we will edit the response design, I want this to be centered until we go to the 185 00:15:31,560 --> 00:15:34,560 medium screen or the small screen. 186 00:15:34,590 --> 00:15:37,130 Yes, until we reach the medium screen. 187 00:15:37,590 --> 00:15:40,540 And also I want to get into the margin of this image. 188 00:15:40,950 --> 00:15:42,800 So good luck and have fun.