1 00:00:00,840 --> 00:00:08,970 OK, guys, in this video, we will check the responsive design of this part and we will also add this 2 00:00:08,970 --> 00:00:13,670 section, but we will make it with that center and not in this form. 3 00:00:14,160 --> 00:00:19,350 We can just go now to this page and take the responsible line. 4 00:00:19,740 --> 00:00:25,990 We can make it smaller than the Explorer, which is this one right here, OK? 5 00:00:26,370 --> 00:00:32,970 And after this party, as you can see from here, after the explosion, it will be having that width 6 00:00:32,970 --> 00:00:34,350 of one hundred percent. 7 00:00:34,710 --> 00:00:39,420 Let's go to our team balance to what we can add here. 8 00:00:39,870 --> 00:00:50,430 We can add Colombe large three and then with this one here and also here, we can go and reload the 9 00:00:50,430 --> 00:00:50,880 page. 10 00:00:52,650 --> 00:00:54,340 OK, that's good for the large. 11 00:00:54,780 --> 00:00:56,250 Let's go to the medium. 12 00:00:59,120 --> 00:01:07,160 Let's try the scene for the meeting, and if it's OK, we can make it to different one column, maybe 13 00:01:07,520 --> 00:01:12,710 three, and then we can cover this class based here and here. 14 00:01:13,160 --> 00:01:15,590 Let's go and reload our Web page. 15 00:01:17,870 --> 00:01:18,810 OK, that's good. 16 00:01:18,830 --> 00:01:23,300 Until now, when we go to this good. 17 00:01:23,300 --> 00:01:23,840 Until now. 18 00:01:23,840 --> 00:01:29,830 Also, let's go to the smaller and smaller, the small. 19 00:01:29,840 --> 00:01:31,270 We can make it 12. 20 00:01:32,090 --> 00:01:39,560 Let's go to this part and meet Colen mom of a 12 and Colen of 12. 21 00:01:40,010 --> 00:01:45,770 After this part, we can't cover this place that your and your. 22 00:01:49,470 --> 00:01:50,590 OK, that's good. 23 00:01:51,780 --> 00:01:54,990 We're just going to be having some margin put in. 24 00:01:55,450 --> 00:02:10,020 Let's do the margin put in for this part where yes, it's, uh, here we can go his -- right now and 25 00:02:10,060 --> 00:02:12,800 add value or we can just cover this part, 26 00:02:15,720 --> 00:02:22,440 this to be column X like last week, and then we can add it for the media. 27 00:02:22,680 --> 00:02:32,670 This media will be starting from all the screen and max width of the beginning or the end of more than 28 00:02:32,970 --> 00:02:46,350 we can make off minimum width, sorry, or we can make a screen and max, which we can go into for the 29 00:02:46,350 --> 00:02:51,240 width of the screen, we can crawl up here and that. 30 00:02:51,270 --> 00:02:52,490 Where is the media? 31 00:02:53,220 --> 00:02:54,450 This one right here. 32 00:02:54,450 --> 00:03:03,240 So we can just cover this and then go back to the first as part of the bracket. 33 00:03:05,670 --> 00:03:10,110 OK, and this to be a big margin of twenty pixels. 34 00:03:10,410 --> 00:03:12,640 Let's go and see what we have right now. 35 00:03:13,890 --> 00:03:15,990 So you would get some margin. 36 00:03:17,040 --> 00:03:18,590 OK, that's good. 37 00:03:19,110 --> 00:03:20,760 And we got a problem with it. 38 00:03:21,810 --> 00:03:24,210 We can try to make this thirteen. 39 00:03:25,350 --> 00:03:27,300 So it's larger right now. 40 00:03:28,350 --> 00:03:30,480 And we got also this horror effect. 41 00:03:30,990 --> 00:03:32,370 OK, that's good. 42 00:03:32,700 --> 00:03:39,450 After this part, what we can add inside our right page is this one. 43 00:03:40,020 --> 00:03:42,780 So how can we add these icons? 44 00:03:43,270 --> 00:03:50,760 There is a website which is called Seante Also, which is helping us to download or use these items. 45 00:03:51,270 --> 00:03:52,860 You got the script? 46 00:03:53,460 --> 00:03:57,450 Uh, it's, uh, icons. 47 00:03:57,450 --> 00:03:59,790 We can copy it from the demo version. 48 00:04:00,750 --> 00:04:05,550 We can copy you can find it in The Wizard of the video. 49 00:04:05,850 --> 00:04:18,060 And then we can basically inside our indexed estimate, we can pasted here, OK, and then we can scroll 50 00:04:18,060 --> 00:04:25,380 down and let's just think about as first here we got one, two, three, four columns. 51 00:04:25,680 --> 00:04:34,020 We can use column X of two so we can be having some padding and maybe justify content of evenly. 52 00:04:34,230 --> 00:04:35,340 Where is the row? 53 00:04:35,730 --> 00:04:37,830 The row is ending here. 54 00:04:38,940 --> 00:04:51,930 OK, we can together with class of row and justify just find content of even evenly and style with the 55 00:04:51,930 --> 00:04:53,940 margin of pixels. 56 00:04:54,330 --> 00:05:07,110 And then we can type inside, we can dab in the middle class column or large two column two and then 57 00:05:07,110 --> 00:05:08,250 uploads the bracket. 58 00:05:08,250 --> 00:05:20,810 And after this part we can uh, type here on and then we will add I can this kind of text, uh, can 59 00:05:21,780 --> 00:05:29,010 and here we can at P with class of F of two and also purple 60 00:05:31,920 --> 00:05:39,240 style font weight of older and then inside we can type two three to add the number. 61 00:05:39,840 --> 00:05:44,460 We can go and see what we have right now inside the Web page. 62 00:05:45,240 --> 00:05:46,530 So can we get the item. 63 00:05:46,530 --> 00:05:49,880 Let's try to make this FSL one. 64 00:05:51,210 --> 00:05:52,260 OK, that's good. 65 00:05:52,590 --> 00:05:59,430 And after this part, we want to get this item from here and know how we can get it. 66 00:05:59,820 --> 00:06:09,120 We can go to the front of some dot com and search for faith and enter. 67 00:06:11,670 --> 00:06:22,830 OK, we can just take that, we can select the free because there are some probe and then we can just 68 00:06:22,830 --> 00:06:24,480 take this one right here. 69 00:06:24,760 --> 00:06:32,460 You can choose anyone you want loading the Elsom, and then we can just click on this part and it will 70 00:06:32,460 --> 00:06:33,180 be Coupet. 71 00:06:33,660 --> 00:06:38,430 Let's go to our source code and paste instead of this one. 72 00:06:38,910 --> 00:06:40,950 And we can just give it a class. 73 00:06:41,160 --> 00:06:42,270 Let's do a classroom. 74 00:06:42,270 --> 00:06:48,850 And here or the color here, I've got the SVT so we can copy that color. 75 00:06:49,320 --> 00:06:53,040 This is for the other friends, I think. 76 00:06:53,910 --> 00:06:55,140 Or surprize. 77 00:06:55,590 --> 00:06:57,120 I do not remember. 78 00:06:57,900 --> 00:06:59,400 We can't scroll here. 79 00:07:01,550 --> 00:07:11,330 We can just take this one, copy this one, and go to this part where the index attached to and found 80 00:07:11,870 --> 00:07:15,750 this to be having style of color of this color. 81 00:07:16,490 --> 00:07:20,780 We can go now and see what we have inside our Web page. 82 00:07:23,450 --> 00:07:30,890 So here we got this, we can, of course, change it from here, the font size, font size, let's try 83 00:07:30,890 --> 00:07:33,430 to make pixels and go Patkin. 84 00:07:34,640 --> 00:07:36,560 So here we got the 50 pixels. 85 00:07:36,890 --> 00:07:37,900 OK, that's good. 86 00:07:38,150 --> 00:07:40,210 We can just add Martien Putin. 87 00:07:40,220 --> 00:07:49,520 We can go here and add some margin put in for this part and March and Putin off because I think it will 88 00:07:49,520 --> 00:07:50,270 be fine. 89 00:07:50,810 --> 00:07:56,150 We can go back to our Web page, Champix as fine. 90 00:07:56,450 --> 00:08:00,080 And then here we will add this text. 91 00:08:00,410 --> 00:08:01,670 We can make it. 92 00:08:03,550 --> 00:08:12,940 Where here people are fleeing the office mall and they must be having a type of challenge and then we 93 00:08:12,940 --> 00:08:20,130 can cover the same text from here, we can cover this text, OK? 94 00:08:20,980 --> 00:08:27,400 And from here, we can go now to our page and see what we have right now. 95 00:08:28,870 --> 00:08:30,230 Uh, what's the problem here? 96 00:08:30,250 --> 00:08:31,270 We did something wrong. 97 00:08:31,660 --> 00:08:33,040 Yes, we deleted. 98 00:08:33,730 --> 00:08:37,240 Um, I'm not sure what's the problem here. 99 00:08:37,660 --> 00:08:38,650 Yeah, yeah, yeah. 100 00:08:38,650 --> 00:08:39,140 I got it. 101 00:08:40,180 --> 00:08:43,950 Let's just do the same and then go back to the index A.. 102 00:08:43,960 --> 00:08:44,290 Oh. 103 00:08:49,850 --> 00:08:56,830 Sometimes it's the language of the Internet that is working great for the icon, but it's OK right now 104 00:08:57,170 --> 00:09:01,430 and then you would get the happy clients after this point. 105 00:09:01,430 --> 00:09:11,360 What we can do is to copy this and four or three times to three and four. 106 00:09:13,280 --> 00:09:15,870 So we got one, two, three, four. 107 00:09:16,160 --> 00:09:26,600 And in this part, we will add some shadow or we can just give it the same shadow we can get here where 108 00:09:26,600 --> 00:09:32,300 the idea of the shadow, we can try to make it here first. 109 00:09:37,550 --> 00:09:38,660 OK, that's good. 110 00:09:38,990 --> 00:09:40,580 We can apply to the rest in. 111 00:09:43,940 --> 00:09:46,400 And then for this is the last one. 112 00:09:47,300 --> 00:09:51,820 No, we got the first one, where is the first one here? 113 00:09:52,490 --> 00:09:53,570 It's here. 114 00:09:54,440 --> 00:09:58,590 OK, so now that's good at this party. 115 00:09:59,420 --> 00:10:00,080 Yes. 116 00:10:01,340 --> 00:10:05,230 Where is I'd like you to leave the file and check it. 117 00:10:06,830 --> 00:10:07,820 Yes, it's here. 118 00:10:08,960 --> 00:10:12,290 We can get everything back and leave the margin. 119 00:10:14,720 --> 00:10:15,770 So now we got this. 120 00:10:16,070 --> 00:10:21,500 We can just edit for the class of margin. 121 00:10:22,820 --> 00:10:23,390 I can. 122 00:10:23,390 --> 00:10:25,520 And then we can go to Ulysses S.. 123 00:10:25,940 --> 00:10:26,840 From here, 124 00:10:29,880 --> 00:10:34,940 Marjo put off the chain of pixels and here we got no like. 125 00:10:35,510 --> 00:10:41,350 And then after this part, what we can do is to go here and see what icons we will. 126 00:10:41,360 --> 00:10:44,340 And here we got the new pope. 127 00:10:44,360 --> 00:10:48,950 We can just search here for just click, OK? 128 00:10:51,670 --> 00:11:00,190 And then we can just see what we can take from here, we can take that, we can select the three. 129 00:11:02,330 --> 00:11:10,000 And then at its part, we can take this one right here and then we can change its color from the original. 130 00:11:13,480 --> 00:11:17,860 And fixed, and now we can go here. 131 00:11:20,100 --> 00:11:33,630 Where where the second one, this is the first, this is the second, I can give it a class here of 132 00:11:33,630 --> 00:11:40,440 large an icon, and then we can copy the same styling function from this one. 133 00:11:40,440 --> 00:11:47,870 And through here we will just change the color it would cover and we can't change it from here. 134 00:11:48,210 --> 00:11:59,270 Just search for fill this one here by clicking on control plus F if you are Windows or Linux and Kumite 135 00:11:59,310 --> 00:12:08,010 plus F for the Mac, copy this one and go in there and to an L and pasted here. 136 00:12:09,090 --> 00:12:15,300 We can go now and see what we have inside the web page so we can go here. 137 00:12:16,470 --> 00:12:17,750 What's the problem again. 138 00:12:17,850 --> 00:12:26,850 Yes, it was a like again and then he, we got this book OK, and after this part we can change the 139 00:12:26,850 --> 00:12:27,750 third one. 140 00:12:28,740 --> 00:12:36,090 We can go here, see here this be having for the headphones and so on. 141 00:12:37,860 --> 00:12:43,890 And here you can find also the entry G if you want to edit in the form of image tag. 142 00:12:44,910 --> 00:12:53,790 And then here we can just take this one or this one is OK, is perfect, and then we can click on copy, 143 00:12:54,690 --> 00:12:58,740 go back to our source code from here. 144 00:12:58,920 --> 00:13:09,120 And this third one, we can just paste this to be having a class of margin come and then we can copy 145 00:13:09,120 --> 00:13:18,900 this type of function and paste inside here and we will change the color of this, what we can to the 146 00:13:18,900 --> 00:13:30,120 headphones for film and come this color, go here and we can just pick this color up here. 147 00:13:30,750 --> 00:13:34,620 Let's go and see what we have inside our Web page right now. 148 00:13:35,160 --> 00:13:39,300 We can reload a like a game. 149 00:13:40,020 --> 00:13:41,130 I don't like this. 150 00:13:41,250 --> 00:13:45,540 Like, OK, we can try to add the last one right now. 151 00:13:46,080 --> 00:13:54,240 We can't copy the same end here or we can just change a class margin of icon. 152 00:13:55,200 --> 00:13:57,320 Let's reload in the like. 153 00:13:57,330 --> 00:13:57,660 Done. 154 00:13:57,900 --> 00:13:58,440 Yes. 155 00:13:58,830 --> 00:14:01,980 And then after this part, we will add the last one. 156 00:14:02,190 --> 00:14:13,830 The last one here is for the user friendly, OK, can search for their friendly click enter. 157 00:14:16,950 --> 00:14:24,660 And then here we have the friendly we can click on this one and then we can change its color from the 158 00:14:24,990 --> 00:14:30,600 V click on or we can just make F a U with their friends. 159 00:14:30,930 --> 00:14:33,870 You were their friends. 160 00:14:34,860 --> 00:14:36,990 And then we can go to the U. 161 00:14:37,000 --> 00:14:44,290 The French insert for Phil can tell you this color and go back to the index and. 162 00:14:44,370 --> 00:14:49,200 Oh yes, here and that page. 163 00:14:50,190 --> 00:14:56,130 And now we can go to the index, the best team alongside the web browser and see what we have. 164 00:14:57,690 --> 00:15:11,030 OK, so like a green or ruxton, this to be where I a s and not are f a. 165 00:15:11,040 --> 00:15:12,810 S reloader. 166 00:15:13,050 --> 00:15:17,220 OK, so you got these icons and everything is working fine. 167 00:15:17,610 --> 00:15:24,720 We can just edit the Martian put on, we can go to Tyldum and make this to be twenty 168 00:15:27,380 --> 00:15:28,470 the like again. 169 00:15:29,040 --> 00:15:30,060 But it's OK right now. 170 00:15:30,060 --> 00:15:34,680 We can make the responsible design until it comes OK. 171 00:15:35,190 --> 00:15:38,370 After this part we can make a change. 172 00:15:39,930 --> 00:15:47,180 OK, so here, this is good right now with 15 and then we can go and take the response design. 173 00:15:47,640 --> 00:15:53,670 This is for the exact law and the lorsch when we go smaller than that and. 174 00:15:57,680 --> 00:16:10,250 OK, or we can just go here for the weather if we can make the theme for the last OK, and also for 175 00:16:10,430 --> 00:16:14,060 the maintenance column, go to. 176 00:16:19,540 --> 00:16:20,380 This is the last one. 177 00:16:20,470 --> 00:16:21,120 Yes, sir. 178 00:16:23,380 --> 00:16:27,400 And let's go and see what we have right now. 179 00:16:27,940 --> 00:16:31,210 Uh, no, don't say reload. 180 00:16:32,190 --> 00:16:34,150 OK, let's make this smaller. 181 00:16:36,040 --> 00:16:37,630 No, that's not very good. 182 00:16:37,870 --> 00:16:43,270 We can just make this for the last and for the medium to be five. 183 00:16:44,290 --> 00:16:49,500 OK, five and five. 184 00:16:49,870 --> 00:16:51,760 We can go in reloaded. 185 00:16:52,730 --> 00:17:00,010 OK, so that's good for the meeting, which just got a problem with the icons like and then we can add 186 00:17:00,010 --> 00:17:02,610 more and put them for the media. 187 00:17:02,830 --> 00:17:10,900 This will be starting from screen and the screen, which is the last thing for the medium, which is 188 00:17:10,900 --> 00:17:18,190 nine nine one point nine eight pixels, and then we can check the rest. 189 00:17:19,150 --> 00:17:21,520 This is small for the small. 190 00:17:21,700 --> 00:17:30,520 We can make the same calls, mobile five and then we can cover this one and apply it to the rest. 191 00:17:37,010 --> 00:17:39,250 OK, let's go and reloaded. 192 00:17:40,490 --> 00:17:44,660 OK, that's good, and then we can make Colen five. 193 00:17:46,150 --> 00:17:53,610 It's already here, so we don't need to it after this part, we just need to add some margin right here. 194 00:17:54,040 --> 00:18:06,430 We can go here where you can find make media or we can just cover this one live to be four nine nine 195 00:18:06,430 --> 00:18:06,840 one. 196 00:18:07,630 --> 00:18:09,460 And then here we can start that. 197 00:18:11,890 --> 00:18:20,300 We are where this road, we can just give it an idea of where I come. 198 00:18:21,100 --> 00:18:33,160 And then you can go to the states and add your values and this idea and this would be having a margin 199 00:18:33,670 --> 00:18:36,820 of 10 pixels inside. 200 00:18:36,820 --> 00:18:43,180 And Colefax, like Lord of the Rings, we can reload. 201 00:18:43,840 --> 00:18:45,030 We don't have a margin. 202 00:18:45,040 --> 00:18:47,470 So what's the problem again with this part? 203 00:18:49,290 --> 00:18:50,340 Yes, sir. 204 00:18:50,730 --> 00:18:52,190 We need to check it again. 205 00:18:54,340 --> 00:18:58,250 Yes, yes, you can go again right here. 206 00:18:59,150 --> 00:19:01,290 OK, let's try 20. 207 00:19:01,470 --> 00:19:07,650 So now we don't have the margin, but, um, so we get the same problem again. 208 00:19:08,230 --> 00:19:10,200 We can get this one right here. 209 00:19:11,500 --> 00:19:15,220 We don't have this plus, too, I think. 210 00:19:16,510 --> 00:19:16,980 No. 211 00:19:17,260 --> 00:19:18,250 So what's the problem? 212 00:19:18,260 --> 00:19:22,420 This part we can go to the index at stimulating the problem. 213 00:19:24,780 --> 00:19:27,390 OK, this was the. 214 00:19:30,560 --> 00:19:42,920 And yes, the idea the wrong this to be here in this context sort of tune, and he would got the margin, 215 00:19:43,160 --> 00:19:44,740 we can make this smaller. 216 00:19:45,470 --> 00:19:47,540 OK, we got no small screaming gaine. 217 00:19:47,810 --> 00:19:58,220 We can just make one of 12 for the smallest screen column 12, and then we can cover this face that 218 00:19:58,490 --> 00:19:59,660 it's already there. 219 00:19:59,870 --> 00:20:01,880 They're in there. 220 00:20:02,720 --> 00:20:06,750 And the last one here likes to reload. 221 00:20:07,340 --> 00:20:10,370 So you've got the 12 for the split screen. 222 00:20:10,760 --> 00:20:12,550 We just got a problem here again. 223 00:20:13,910 --> 00:20:18,470 So, yes, it will be starting from here. 224 00:20:19,010 --> 00:20:23,480 Colon, Twelver Colon, 12. 225 00:20:23,540 --> 00:20:24,980 Let's check it right now. 226 00:20:26,130 --> 00:20:27,110 OK, that's good. 227 00:20:28,100 --> 00:20:30,950 And we got no problem with the responsive design. 228 00:20:31,130 --> 00:20:34,960 We can just up in that respect to check everything is OK or not. 229 00:20:35,180 --> 00:20:37,820 Yes, everything is working fine. 230 00:20:38,090 --> 00:20:46,250 And again, no problem with anything inside our Web page just with this one, because the text is longer. 231 00:20:47,760 --> 00:20:48,860 OK, that's good. 232 00:20:48,860 --> 00:20:50,720 And we did all of that. 233 00:20:51,050 --> 00:20:57,500 And the next year we will add this section, make the responsive and we will add a different our function 234 00:20:57,500 --> 00:20:57,830 here. 235 00:20:58,160 --> 00:21:01,640 I want to change the color of this icon when I hope over. 236 00:21:01,910 --> 00:21:04,310 We will know how to make it in the next video. 237 00:21:04,320 --> 00:21:06,380 So good luck and have fun.