1 00:00:00,420 --> 00:00:06,030 OK, guys, in this video, we will edit this part, but let's see first what we can do in order to 2 00:00:06,030 --> 00:00:08,230 make it more beautiful. 3 00:00:08,550 --> 00:00:16,230 We can just OK, we can go to this part of town where where is I? 4 00:00:16,760 --> 00:00:17,820 It's here. 5 00:00:18,370 --> 00:00:19,940 Let's try to get lunch. 6 00:00:19,950 --> 00:00:20,760 We ate. 7 00:00:21,990 --> 00:00:24,090 And what is it? 8 00:00:25,500 --> 00:00:29,160 OK, you can just take it back to night, OK? 9 00:00:29,460 --> 00:00:32,370 We can go and edit the function. 10 00:00:32,760 --> 00:00:41,280 We can go to the title that he says and the first and we will edit in the background the background. 11 00:00:41,280 --> 00:00:43,980 We can always make it to this one. 12 00:00:45,930 --> 00:00:48,870 OK, peg around. 13 00:00:49,320 --> 00:00:51,630 So it will be always having this color. 14 00:00:54,210 --> 00:01:01,440 OK, but with just one year to edit the or we can make it, uh, OK, it's OK. 15 00:01:01,440 --> 00:01:01,890 It's OK. 16 00:01:02,280 --> 00:01:13,920 And then for the purpose, like on cover, I want this to be having this color and then we can make 17 00:01:13,920 --> 00:01:16,810 it the original color to be black, 18 00:01:19,680 --> 00:01:21,380 reloading the icons. 19 00:01:22,320 --> 00:01:25,100 OK, that's better. 20 00:01:25,100 --> 00:01:33,080 Right now we can just to decrease the horror of this text or this background, it can delete the bankrupt 21 00:01:33,090 --> 00:01:33,420 word. 22 00:01:33,420 --> 00:01:34,350 We don't need it. 23 00:01:35,970 --> 00:01:37,250 OK, that's good. 24 00:01:37,260 --> 00:01:42,420 Right now, after this part, what we can do is to check for the rest of the screens. 25 00:01:43,140 --> 00:01:44,830 We can go here. 26 00:01:45,840 --> 00:01:50,010 This is good until now and the screen is good. 27 00:01:50,190 --> 00:01:51,510 This one is also good. 28 00:01:51,840 --> 00:01:53,940 But we can make here something different. 29 00:01:53,950 --> 00:01:59,190 I think this is the law so we can just go and edit for the larger. 30 00:02:00,390 --> 00:02:01,260 Yes, so. 31 00:02:04,180 --> 00:02:07,710 For that to attend, yes. 32 00:02:11,280 --> 00:02:15,090 Yes, here we can make comments, but let's see here first, it's OK. 33 00:02:15,120 --> 00:02:28,530 Right now we can just try to make from where exactly this column of five and it's here and it's closure. 34 00:02:30,180 --> 00:02:36,720 And here we can make Colen or empty or a large earthquake having sex. 35 00:02:37,920 --> 00:02:44,880 And then here we can cover the same and apply to this one right here. 36 00:02:46,080 --> 00:02:47,550 Let's check it right now. 37 00:02:48,420 --> 00:02:50,770 OK, that's good at this part. 38 00:02:50,770 --> 00:02:55,080 We can see what we can do again for the medium screen. 39 00:02:56,970 --> 00:02:58,710 OK, ok, ok. 40 00:02:59,370 --> 00:03:08,730 I think you would get something like the Facebook center to make it all with centered. 41 00:03:10,350 --> 00:03:20,240 It's K right now and then we can apply the same as your Xbox of Center like service center. 42 00:03:21,480 --> 00:03:29,280 And then we got this center and I think here we got no problem with this part and we can check the small 43 00:03:29,280 --> 00:03:29,850 screen. 44 00:03:30,180 --> 00:03:38,460 That small screen is good and we can apply because the medium I think this is the smaller and then we 45 00:03:38,460 --> 00:03:39,840 got the small. 46 00:03:40,110 --> 00:03:44,910 So now we got no problem with these screens and they are perfect. 47 00:03:45,930 --> 00:03:55,230 And after this part, you the see from here we can just add this class or this section. 48 00:03:55,440 --> 00:03:58,620 This section is very similar to this one. 49 00:03:58,950 --> 00:04:09,270 So we can just copy and paste, we can go to who we are and the closest one we can cover this section, 50 00:04:11,250 --> 00:04:17,630 OK, because this will be a response and we will not be directly responsive. 51 00:04:17,640 --> 00:04:19,570 Design, Haisten. 52 00:04:20,070 --> 00:04:23,400 And this one here, where is the image? 53 00:04:23,880 --> 00:04:32,850 I just want to add up and inspect to check the image name, the image name and features to features 54 00:04:33,060 --> 00:04:39,590 to dot PMG and we can change its features one. 55 00:04:40,320 --> 00:04:43,440 And then let's go and reload our web page. 56 00:04:45,030 --> 00:04:46,170 OK, that's good. 57 00:04:46,320 --> 00:04:53,710 We just need to add some margin put in for this part or martien chop any way we can go here and there 58 00:04:53,760 --> 00:04:57,170 for margin work. 59 00:04:57,420 --> 00:04:57,810 Yes. 60 00:04:57,810 --> 00:04:59,160 Margin top section. 61 00:04:59,550 --> 00:05:05,250 We can cover this class and go to the index on each team and basically 62 00:05:08,160 --> 00:05:09,560 we don't have margin. 63 00:05:10,680 --> 00:05:11,600 What's the problem? 64 00:05:11,610 --> 00:05:15,210 This part let's yes. 65 00:05:15,240 --> 00:05:20,180 The class and not on the Heidi class of this one. 66 00:05:21,060 --> 00:05:22,800 And here we get some margin. 67 00:05:23,490 --> 00:05:24,570 OK, that's good. 68 00:05:25,000 --> 00:05:27,090 And this is perfect. 69 00:05:27,100 --> 00:05:27,780 Yeah. 70 00:05:29,970 --> 00:05:31,590 And we got a problem with that. 71 00:05:35,520 --> 00:05:37,610 And we can just make this to be. 72 00:05:39,660 --> 00:05:44,100 OK, it's OK to be having this effect. 73 00:05:46,010 --> 00:05:56,750 OK, and now that's good after this part, as you can see from here, we have this section we can just 74 00:05:56,750 --> 00:06:02,200 add now we can copy this one, but first we will create a new section. 75 00:06:02,660 --> 00:06:05,960 We can go to our source code to make this smaller. 76 00:06:06,440 --> 00:06:08,870 Go here, scroll down. 77 00:06:09,510 --> 00:06:17,090 We can make a new section here, section with an idea of let's get an idea, often graph. 78 00:06:17,570 --> 00:06:29,220 And then inside we can make Java with a class of container and with a class of text center because it 79 00:06:29,270 --> 00:06:30,800 could be all centered. 80 00:06:31,280 --> 00:06:37,310 And then we can scroll upward and see what class we will add for this one. 81 00:06:40,390 --> 00:06:48,120 OK, we can just take this one and then scroll down. 82 00:06:50,690 --> 00:06:55,940 And big picture, let's see what we have right here inside our right page. 83 00:06:57,270 --> 00:06:59,250 OK, we just need some margin. 84 00:06:59,960 --> 00:07:03,560 We can go here and add a class 85 00:07:06,080 --> 00:07:16,970 margin, top or section, and he will get some margin job after this. 86 00:07:16,970 --> 00:07:20,390 But as you can see from here, we will have an image. 87 00:07:20,390 --> 00:07:28,970 And the same nesting method by the nesting method is to be without the shadow or Hoover effect. 88 00:07:29,390 --> 00:07:33,750 We can often to expect to change the name of this one right here. 89 00:07:35,720 --> 00:07:40,910 OK, to be features three, we can go here. 90 00:07:44,190 --> 00:07:45,330 Just be having. 91 00:07:47,650 --> 00:07:59,830 Where you're down with a Faroud column for column Explorer four and then inside we can imagine with 92 00:07:59,830 --> 00:08:07,870 the sorts of features that we need energy and give it a class of image flight to make it responsive, 93 00:08:08,530 --> 00:08:13,630 class of invention, flying to make it responsive. 94 00:08:14,080 --> 00:08:16,660 Let's do what we have here inside of our Web page. 95 00:08:17,140 --> 00:08:18,180 OK, that's good. 96 00:08:18,440 --> 00:08:21,720 It just need some margin talk for this role. 97 00:08:22,120 --> 00:08:25,300 We can go here and. 98 00:08:26,180 --> 00:08:27,140 Where is the road? 99 00:08:27,560 --> 00:08:30,350 We forgot about the road, the of road. 100 00:08:34,610 --> 00:08:43,350 OK, this to be having style with Martin chopped off of pixels, calixto, what we have right now. 101 00:08:43,380 --> 00:08:44,020 That's good. 102 00:08:44,460 --> 00:08:49,850 And after this part, we will use domestic method to do the second one. 103 00:08:50,250 --> 00:08:51,930 We can go here. 104 00:08:53,340 --> 00:08:54,540 The rest is eight. 105 00:08:54,540 --> 00:08:58,050 We can use seven in order to add some space. 106 00:08:58,950 --> 00:09:03,430 We can copy this one and then paste it here. 107 00:09:04,020 --> 00:09:06,570 This is seven and seven. 108 00:09:06,960 --> 00:09:13,460 And then we can use your flexible hooks of center and justify content easily. 109 00:09:13,860 --> 00:09:17,370 And then inside here we can use domestic method. 110 00:09:17,400 --> 00:09:24,060 We can use Java with class container Flindt. 111 00:09:24,570 --> 00:09:35,170 And then inside here we will create Java with class of pro, with the same category, with the center 112 00:09:35,370 --> 00:09:37,260 of the content of evenly. 113 00:09:38,130 --> 00:09:49,170 And then inside here we can create jobs with class of core five and five because we are using to justify 114 00:09:49,170 --> 00:09:50,150 content easily. 115 00:09:50,340 --> 00:09:52,400 Or we can just make it six and six. 116 00:09:52,410 --> 00:09:52,980 It's OK. 117 00:09:53,640 --> 00:10:00,990 Java class column, class of six and column a class of six. 118 00:10:01,530 --> 00:10:04,680 And after this part we can add a lisp. 119 00:10:04,680 --> 00:10:14,940 Inside this one we can make a list and search for the tag like it can be used to the where is it? 120 00:10:16,260 --> 00:10:17,760 What's the problem here? 121 00:10:17,880 --> 00:10:19,140 It was already there. 122 00:10:22,150 --> 00:10:27,350 Yes, I it's one of the list. 123 00:10:27,360 --> 00:10:33,240 And then you can scroll down or we can go to the house and check it right now. 124 00:10:34,020 --> 00:10:35,310 Scroll down. 125 00:10:37,170 --> 00:10:40,570 None left to be done. 126 00:10:40,910 --> 00:10:41,340 Yes. 127 00:10:41,550 --> 00:10:44,130 This class, we can cover this class 128 00:10:46,500 --> 00:10:48,410 and go to the index. 129 00:10:48,630 --> 00:11:00,500 Each team, L and L with class, and then we can create LTI for the blog as got here. 130 00:11:00,810 --> 00:11:09,240 And I come to you from the demo version, so let's get it from the font so we can go here and search 131 00:11:09,240 --> 00:11:11,100 for Gorev. 132 00:11:15,940 --> 00:11:19,390 And then we can scroll down, click on Free. 133 00:11:21,960 --> 00:11:24,240 We can just take the chart line. 134 00:11:26,780 --> 00:11:37,820 And then cupping your back here and we can use the nifty method also inside, we can make do with class 135 00:11:37,940 --> 00:11:39,680 of the colon. 136 00:11:40,700 --> 00:11:55,310 I have to call them explorative to call them large to colon, medium to colon, small little furry colon 137 00:11:55,820 --> 00:11:56,660 off the week. 138 00:11:58,190 --> 00:12:02,810 And we just need to add here the road Gever plus a furrow. 139 00:12:03,380 --> 00:12:05,860 Take this one right here and. 140 00:12:06,610 --> 00:12:06,970 Based. 141 00:12:07,950 --> 00:12:08,480 OK. 142 00:12:08,740 --> 00:12:16,500 And then inside we can paste this icon and give it a tiny little font size of 30 pixels. 143 00:12:16,900 --> 00:12:20,050 Let's see what we have here inside the Web page. 144 00:12:22,510 --> 00:12:25,060 OK, we can make it larger if we wish. 145 00:12:25,090 --> 00:12:27,880 So it's good like that. 146 00:12:27,880 --> 00:12:30,790 We can just make it to 40 pixels. 147 00:12:32,260 --> 00:12:33,340 OK, that's good. 148 00:12:33,610 --> 00:12:37,570 And as you can see from here, we will add some text. 149 00:12:37,840 --> 00:12:46,290 We can make this to be having the likes of center and also justify content of exactly the second column. 150 00:12:46,300 --> 00:12:55,090 We can make it to nine nine instead of 10 nine nine. 151 00:12:55,750 --> 00:13:01,390 OK, again, this one seems to be having nine, but we will make it eight. 152 00:13:03,520 --> 00:13:06,120 And then here we can add some text. 153 00:13:06,550 --> 00:13:14,380 We can make B with class of three or four and also the purple circle. 154 00:13:16,570 --> 00:13:19,810 And then we can take the text and basically side here. 155 00:13:20,290 --> 00:13:26,530 We can take this one and pasted here. 156 00:13:27,140 --> 00:13:29,650 Let's take it now inside our version. 157 00:13:30,100 --> 00:13:39,420 OK, so now we got this text after this part, we can't apply for that class of small, small. 158 00:13:39,430 --> 00:13:42,760 And then let's go back to the demo version. 159 00:13:43,420 --> 00:13:49,010 We can take this one from here and get it five here. 160 00:13:50,080 --> 00:13:53,050 Let's check it inside our version. 161 00:13:55,270 --> 00:13:57,750 OK, that's good at this part. 162 00:13:58,150 --> 00:14:09,760 We can just give it to leave with the title font size of one arm, or we can just give it smaller with, 163 00:14:09,820 --> 00:14:12,890 uh, the grade. 164 00:14:14,140 --> 00:14:15,820 OK, let's check it. 165 00:14:16,450 --> 00:14:17,800 That's good right now. 166 00:14:18,070 --> 00:14:21,390 And after this part we can apply the same list. 167 00:14:24,460 --> 00:14:25,370 One, two. 168 00:14:25,650 --> 00:14:26,860 OK, that's good. 169 00:14:29,470 --> 00:14:38,230 OK, this is perfect and I think this part we can copy, whereas we can't scroll down and just take 170 00:14:38,230 --> 00:14:39,310 the left method. 171 00:14:41,590 --> 00:14:53,220 Where where this one right here, let's copy it, copy, copy, copy this one right here and we will 172 00:14:53,470 --> 00:14:55,840 see the game for the second one. 173 00:14:57,460 --> 00:14:59,830 So here we got the first and the second one. 174 00:15:00,010 --> 00:15:01,540 We just got a problem with ICAM. 175 00:15:01,540 --> 00:15:03,380 It's being reloaded. 176 00:15:05,100 --> 00:15:07,460 OK, that's good after this part. 177 00:15:07,480 --> 00:15:14,620 Let's check the response sign off at first, but we'll check the response of the sport and the outer 178 00:15:14,620 --> 00:15:17,170 side of the nesting method. 179 00:15:17,710 --> 00:15:19,420 We can go to this part. 180 00:15:19,420 --> 00:15:21,340 And where. 181 00:15:24,210 --> 00:15:40,950 Starting from here, they can make a large A4 and colon medium of the seven seven, OK, I think, and 182 00:15:40,950 --> 00:15:43,710 colon small as well. 183 00:15:43,950 --> 00:15:47,730 Colon, colon 12. 184 00:15:47,830 --> 00:15:48,260 Yeah. 185 00:15:48,660 --> 00:16:00,180 And then we can scroll down to Spart and make colon large for colon, medium of 12, colon small 12 186 00:16:00,180 --> 00:16:01,190 and colon to. 187 00:16:01,200 --> 00:16:05,280 Well let's check now inside our web browser. 188 00:16:06,960 --> 00:16:08,630 We can make it smaller. 189 00:16:09,150 --> 00:16:10,740 So they said the larger. 190 00:16:14,700 --> 00:16:22,370 And this is the medium where we can make the laws saying we can make the laws. 191 00:16:23,310 --> 00:16:24,200 Yes, sir. 192 00:16:24,870 --> 00:16:27,180 This to be seven and not four. 193 00:16:27,510 --> 00:16:33,000 Let's go back to a larger the large now is good at this part. 194 00:16:33,000 --> 00:16:34,520 We can make this smaller. 195 00:16:34,890 --> 00:16:36,030 This is the medium. 196 00:16:36,340 --> 00:16:40,640 People just added the design of the inner nesting method very soon. 197 00:16:41,820 --> 00:16:44,010 And this is good. 198 00:16:46,700 --> 00:16:53,090 Yes, this is good and we just need to address the design of the inner nesting method. 199 00:16:53,120 --> 00:16:55,310 You can make this crane larger and gain. 200 00:16:58,220 --> 00:17:09,980 OK, and this to be having four column and six, but the large asterisked large six and here to be having 201 00:17:09,980 --> 00:17:24,440 column small 12 and koans more of 12, and then we can cover the same vein here scrolling down and Bastet 202 00:17:24,890 --> 00:17:25,270 here. 203 00:17:25,850 --> 00:17:31,280 Let's go and reload and see what we have right now when we go to the medium. 204 00:17:32,090 --> 00:17:34,550 OK, so now we got this and it's good. 205 00:17:34,970 --> 00:17:37,910 We just need some margin job for this espero. 206 00:17:38,420 --> 00:17:49,490 We can go here where it said to this column to be having the style or we can edit for the throw margin 207 00:17:49,490 --> 00:17:50,870 chopped up a bit. 208 00:17:50,950 --> 00:17:51,340 So. 209 00:17:53,690 --> 00:17:55,570 So now we have some margin target. 210 00:17:55,880 --> 00:17:57,680 We can make this dream smaller. 211 00:17:59,870 --> 00:18:03,050 OK, this is good. 212 00:18:06,370 --> 00:18:15,100 Okay, this is perfect, and at this part, I think we got here the same, so we don't need to add it 213 00:18:15,100 --> 00:18:15,700 inside. 214 00:18:16,420 --> 00:18:18,010 We just need the icons. 215 00:18:18,160 --> 00:18:20,380 And here we got the icons. 216 00:18:21,100 --> 00:18:24,800 OK, this is good right now, but I think. 217 00:18:25,030 --> 00:18:26,880 Yeah, no, no, no, it's OK. 218 00:18:27,190 --> 00:18:28,240 We got here. 219 00:18:29,290 --> 00:18:30,130 It's nine. 220 00:18:30,140 --> 00:18:31,810 We can't make it to be nine. 221 00:18:32,450 --> 00:18:35,270 This to be also nine nine. 222 00:18:36,220 --> 00:18:37,840 Let's check it right now. 223 00:18:39,100 --> 00:18:39,900 This is better. 224 00:18:39,910 --> 00:18:44,380 I think so we can just, uh, copy this one. 225 00:18:45,350 --> 00:18:46,330 This is three. 226 00:18:49,380 --> 00:18:57,720 OK, we can just copy this one right here, we can scroll down, I mean, this one to be nine and nine, 227 00:18:58,680 --> 00:19:07,110 the female here, or we can make this to be also, uh, nine plus three is 12. 228 00:19:07,160 --> 00:19:09,010 OK, it's been nine. 229 00:19:09,030 --> 00:19:13,800 Can't cover this one right here pasted to here. 230 00:19:14,490 --> 00:19:17,910 And then the second one here. 231 00:19:20,260 --> 00:19:25,490 Here and here, I think this is the last one. 232 00:19:25,760 --> 00:19:31,750 Yes, and man, we are just waiting for the icon to be overloaded. 233 00:19:34,560 --> 00:19:37,730 OK, we can reload the page and gain. 234 00:19:39,090 --> 00:19:41,350 It's OK, it will be responsive anyway. 235 00:19:41,730 --> 00:19:47,520 So now we are done from this part and become very responsive. 236 00:19:47,940 --> 00:19:54,090 In the next video, we will add to where we came in the screen larger. 237 00:19:54,480 --> 00:19:59,280 We will add this texture, but we will add some transitions and some. 238 00:20:00,300 --> 00:20:02,210 So good luck and have fun.