1 00:00:00,420 --> 00:00:07,620 OK, guys, in this video, we will build this part and also make it responsive, the first thing we 2 00:00:07,620 --> 00:00:15,900 will do right here is to go in that drop everything else, crawl up, up, up and overall so we can 3 00:00:15,900 --> 00:00:21,060 search for services we can take from here to here. 4 00:00:23,130 --> 00:00:33,570 This is the closure of the container or we can make from here and then we can scroll down for this to 5 00:00:33,570 --> 00:00:42,180 be here, OK, and then you're inside, we can make the closure of the container and also the section. 6 00:00:43,170 --> 00:00:48,010 And here we can make it to class just to make it different. 7 00:00:48,030 --> 00:00:59,100 We can make cards one, this won't be the same if we can cover the pricing and it here and then we can 8 00:00:59,100 --> 00:01:04,380 go to this part company, check our pricing and basics here. 9 00:01:05,550 --> 00:01:11,370 And then as you can see from here, we will add four cards we can make here, call them off. 10 00:01:11,670 --> 00:01:16,020 And if we want to make it to, we will do it here. 11 00:01:16,020 --> 00:01:23,140 We can get it down for the cost of road and then Dabwido class of kopeks, explorer. 12 00:01:23,630 --> 00:01:26,990 We call them the back of the week. 13 00:01:27,630 --> 00:01:34,360 And then inside we can make Danfung or we can make it. 14 00:01:34,380 --> 00:01:44,340 Yes, we have here the text center the first and we will add here and the CEO says we can go here and 15 00:01:44,340 --> 00:01:53,310 make here the idea of cards for walnut and inside that row and inside the row column. 16 00:01:55,800 --> 00:01:58,200 And then inside we can give you the padding. 17 00:01:59,070 --> 00:02:08,980 Padding fills a shadow of whump itself for so-called two for itself won't. 18 00:02:09,240 --> 00:02:14,540 So like we can see what we have here inside our trouser. 19 00:02:15,450 --> 00:02:22,780 OK, and after this part, we can try to add something inside just to make sure it's working. 20 00:02:23,400 --> 00:02:23,830 Yes. 21 00:02:23,880 --> 00:02:26,610 That's to be free and not too. 22 00:02:28,290 --> 00:02:35,690 And now we got this book, which I think was just added that degree of the color, but not now, OK? 23 00:02:35,820 --> 00:02:39,720 And after this part, we can get it also. 24 00:02:39,720 --> 00:02:40,680 But it's OK. 25 00:02:40,890 --> 00:02:42,840 We can make margin 26 00:02:45,540 --> 00:02:54,120 about this one to be put in and then we can go to this says, copy this class, go here and make this 27 00:02:54,120 --> 00:02:57,830 one to be having margin of seventy five. 28 00:03:00,420 --> 00:03:01,440 OK, that's good. 29 00:03:01,650 --> 00:03:04,980 And now we can decrease the degree of the black. 30 00:03:05,520 --> 00:03:12,660 We can go here and let's make it to one five one. 31 00:03:12,660 --> 00:03:14,130 We can even go back. 32 00:03:14,660 --> 00:03:15,690 OK, that's good. 33 00:03:16,380 --> 00:03:21,060 And as you can see from here, the first thing we will add is the title. 34 00:03:21,540 --> 00:03:23,130 We can go to this part. 35 00:03:23,130 --> 00:03:24,660 I think we have this color here. 36 00:03:24,690 --> 00:03:25,130 Yes. 37 00:03:25,470 --> 00:03:30,060 So we can just cover the color or we can up in the back to check that color. 38 00:03:31,790 --> 00:03:42,890 We can go to the index and I'll let me respond to but class -- off the wing and f -- off italic, 39 00:03:44,150 --> 00:03:48,670 and then after this part, we can make here the free plan. 40 00:03:48,920 --> 00:03:50,850 We can go back to our page. 41 00:03:51,470 --> 00:03:53,810 But let me just up in the inspect here. 42 00:03:54,910 --> 00:03:55,220 Right. 43 00:03:55,220 --> 00:04:00,050 Click inspect so we can check the color. 44 00:04:00,320 --> 00:04:00,770 Yes. 45 00:04:00,770 --> 00:04:03,860 It's having this color so we can apply here. 46 00:04:06,080 --> 00:04:09,950 We don't need to apply for the seats and we can just put it here. 47 00:04:12,080 --> 00:04:13,010 Color. 48 00:04:16,720 --> 00:04:17,250 OK. 49 00:04:17,810 --> 00:04:28,560 And after this part, we got here that transformer so we can just search for trons for an image, image, 50 00:04:28,560 --> 00:04:29,390 whatever skill. 51 00:04:29,690 --> 00:04:36,060 We can just cover this class and place it here like a reload. 52 00:04:36,350 --> 00:04:37,430 No, not this one. 53 00:04:37,520 --> 00:04:38,070 This one. 54 00:04:38,660 --> 00:04:40,060 And here we have this. 55 00:04:40,400 --> 00:04:43,870 But you want to make it for all of the column. 56 00:04:44,480 --> 00:04:51,160 We can go back here again and copy this one is to be for the column. 57 00:04:52,190 --> 00:04:54,110 We can go and reload. 58 00:04:55,540 --> 00:05:00,940 OK, that's good, after this part, we can give it. 59 00:05:00,970 --> 00:05:06,130 Yes, it is already having this one we can try the phones off to. 60 00:05:07,870 --> 00:05:08,950 OK, that's great. 61 00:05:09,250 --> 00:05:14,100 After this bath, as you can see from here, we will add the image. 62 00:05:14,260 --> 00:05:19,900 Let me just up and expect to get the image or I can just remember it from here. 63 00:05:20,290 --> 00:05:28,810 We can actually imagine with a source of pride, he got to be managing the pricing free. 64 00:05:29,080 --> 00:05:36,040 And here we can give it a classic image, like let's see what we have here now inside the Web page. 65 00:05:38,080 --> 00:05:46,150 OK, that's good, we can just edit that transform, we can give it the title of Transforming of scale 66 00:05:46,150 --> 00:05:47,560 of Old Point eight. 67 00:05:49,600 --> 00:05:52,840 OK, I think that's good after this part. 68 00:05:53,110 --> 00:05:58,050 As you can see from here, we will add here a zero per month. 69 00:05:58,720 --> 00:06:11,020 We can give it here before we can give people a sense of one and style or we can make it in the form 70 00:06:11,020 --> 00:06:11,890 of a spell. 71 00:06:13,390 --> 00:06:15,520 OK, you like this one right here. 72 00:06:16,240 --> 00:06:24,700 We can add that we can delete this closure and inside here we can expand the first span. 73 00:06:24,700 --> 00:06:33,500 We can give it a class of Aswang and time off for weight off polder and then inside we can make all 74 00:06:34,540 --> 00:06:34,980 her. 75 00:06:35,380 --> 00:06:37,300 That's what we have inside the Web page. 76 00:06:38,590 --> 00:06:43,250 OK, we've got this or it's OK, we can make it to. 77 00:06:43,310 --> 00:06:44,230 Yeah, it's good. 78 00:06:44,890 --> 00:06:52,420 We can delete this one, make out another spane, give it a class of small and green. 79 00:06:52,840 --> 00:06:58,360 And here we can make per month, we can cover this part. 80 00:06:58,360 --> 00:07:00,820 And now job is aimed because it's perfect. 81 00:07:01,300 --> 00:07:05,320 After the Spartech, you can see from here, we will add a list. 82 00:07:06,100 --> 00:07:13,390 We can get to this part and let's search for a list or I think unstyled. 83 00:07:14,110 --> 00:07:15,540 We can search from here. 84 00:07:16,060 --> 00:07:18,770 Let's to this one here list. 85 00:07:20,170 --> 00:07:21,490 We can use this class. 86 00:07:21,910 --> 00:07:23,500 We can scroll down now. 87 00:07:24,220 --> 00:07:33,160 We typed all of that and here we can make a line about you on the first L with a class of life style 88 00:07:33,310 --> 00:07:40,000 often we can make here and then we can copy the content of that list. 89 00:07:40,330 --> 00:07:42,400 We can cover the first one here. 90 00:07:43,060 --> 00:07:48,940 You can find the content with the SPELLBIND and the second one. 91 00:07:52,120 --> 00:07:54,790 We can also give it a class believe just in case. 92 00:07:55,810 --> 00:07:57,040 Okay, copy. 93 00:07:59,020 --> 00:08:08,040 And by and for this one and this one, they will be having a check of linked we can make here like an 94 00:08:08,050 --> 00:08:16,750 inside at class of rain and here we can make the L is it for the delete and paste. 95 00:08:17,140 --> 00:08:21,280 But we got something wrong with this part so we can just take this one right here. 96 00:08:22,030 --> 00:08:28,930 And I guess it at what we have here inside our page, we just need some margin. 97 00:08:29,290 --> 00:08:37,890 We can go here and that because having the idea, of course, one, we can't cover this one here. 98 00:08:38,270 --> 00:08:42,250 Go to the scroll down. 99 00:08:42,880 --> 00:08:43,800 Not like this. 100 00:08:43,890 --> 00:08:44,080 Like. 101 00:08:44,540 --> 00:08:45,130 Oh, no. 102 00:08:48,200 --> 00:08:48,900 OK. 103 00:08:48,920 --> 00:08:59,450 And inside it, growing inside a log, they could be having margin job of 15 pixels, try 15. 104 00:09:00,890 --> 00:09:01,910 It's is not working. 105 00:09:02,300 --> 00:09:03,050 What's the problem? 106 00:09:03,080 --> 00:09:03,350 Yes. 107 00:09:05,390 --> 00:09:06,300 OK, that's good. 108 00:09:06,320 --> 00:09:07,680 We can make it smaller. 109 00:09:08,300 --> 00:09:12,140 We can give it to just 10 pixels. 110 00:09:13,460 --> 00:09:15,110 I think it's OK. 111 00:09:16,550 --> 00:09:19,940 And after this part we can make here. 112 00:09:20,510 --> 00:09:22,710 OK, scroll down for this one. 113 00:09:22,710 --> 00:09:25,760 We can be too small to be smaller. 114 00:09:27,740 --> 00:09:28,730 But what's the problem? 115 00:09:28,970 --> 00:09:30,350 We can apply here. 116 00:09:30,650 --> 00:09:33,460 OK, we don't have the small. 117 00:09:33,510 --> 00:09:33,890 OK. 118 00:09:36,290 --> 00:09:44,340 And then after this part, we can add the last one right here, what passement? 119 00:09:44,480 --> 00:09:46,790 Sorry, and here it's OK. 120 00:09:47,420 --> 00:09:55,370 And now we got the small ethical spark that can top this one and biggest or we can also give it here. 121 00:09:57,500 --> 00:09:59,210 And you've got one and two. 122 00:09:59,460 --> 00:10:02,180 It will just change the content of the last one. 123 00:10:02,720 --> 00:10:07,070 We can get it from here and based. 124 00:10:09,590 --> 00:10:16,880 OK, we can reload and now the last thing I can see from here, we will at this point, but we will 125 00:10:16,880 --> 00:10:19,220 add some over effect for this put. 126 00:10:19,910 --> 00:10:24,380 We can just go here and we can edit in the form. 127 00:10:24,380 --> 00:10:28,130 I thought we will use a number of child. 128 00:10:28,640 --> 00:10:31,760 They won't be having a heart attack, nothing. 129 00:10:32,040 --> 00:10:41,450 And to be having the class of button purple light and then side became tight by now. 130 00:10:43,790 --> 00:10:47,530 And then let's see what we have here inside of our Web browser. 131 00:10:48,360 --> 00:10:49,280 OK, that's good. 132 00:10:49,670 --> 00:10:55,340 We can cover this class and go from here and here. 133 00:10:55,340 --> 00:10:56,570 We can give it a color. 134 00:10:56,990 --> 00:11:00,740 We can start for class of purple. 135 00:11:01,400 --> 00:11:06,050 This color right here, people use it, OK? 136 00:11:10,250 --> 00:11:11,570 -- here. 137 00:11:13,120 --> 00:11:21,130 This color and for the border, we can make it three pixels, solid color, and we can give also some 138 00:11:21,510 --> 00:11:33,730 the radius border radius of 20 pixels, and for the font size, we can make it to 20 pixels, font size. 139 00:11:34,390 --> 00:11:37,560 We can go back to the Web, page it, OK? 140 00:11:37,660 --> 00:11:38,910 We just need some padding. 141 00:11:39,220 --> 00:11:46,670 We can try to edit being from here and left, standing right after 15 pixels. 142 00:11:46,780 --> 00:11:48,530 Let's check in right now. 143 00:11:49,960 --> 00:11:51,090 We can make it larger. 144 00:11:51,100 --> 00:12:02,660 We can make it to 30 and 30, and then we will meet for the top and then we can go from here and add 145 00:12:02,830 --> 00:12:14,150 a pad and chop up cubicles and put them all sort of keep back so we can know that we can go now and 146 00:12:15,010 --> 00:12:16,030 see what we have. 147 00:12:16,900 --> 00:12:17,480 No, no. 148 00:12:18,730 --> 00:12:27,340 Let's just make it seven point five and the same as we are seven point five. 149 00:12:28,660 --> 00:12:30,280 OK, that's very recall. 150 00:12:30,280 --> 00:12:35,890 So we can make it to five and OK, that's good. 151 00:12:36,200 --> 00:12:39,700 And you just need to be having some margin for. 152 00:12:40,180 --> 00:12:49,000 We can go to the as Communist Party and you can read a number of a child which we used before I think. 153 00:12:49,630 --> 00:12:56,250 And then here we've got uh one, two, three, four, five. 154 00:12:56,530 --> 00:12:56,980 Yes. 155 00:12:57,970 --> 00:12:58,830 Uh, five. 156 00:12:59,410 --> 00:13:03,730 We can go there at five and this to be having margin. 157 00:13:03,730 --> 00:13:05,940 But, uh, I don't think so. 158 00:13:07,210 --> 00:13:09,270 OK, so here we've got some margin for error. 159 00:13:09,290 --> 00:13:13,750 We can get to 13 and then we can apply margin. 160 00:13:13,750 --> 00:13:19,900 Voting for the last one, which is the sixth margin, could have also hurt itself. 161 00:13:20,680 --> 00:13:27,130 OK, and now we just what people do right now is to copy the same and apply it to the rest. 162 00:13:27,970 --> 00:13:31,020 We cannot copy that. 163 00:13:31,030 --> 00:13:33,100 Division it from here. 164 00:13:33,880 --> 00:13:37,690 OK, the first one, we can add some whitespace. 165 00:13:38,740 --> 00:13:40,630 Let's see what we have inside the back page. 166 00:13:41,290 --> 00:13:42,700 OK, we got this. 167 00:13:42,700 --> 00:13:48,030 We can just decrease the padding from here, the padding for the column. 168 00:13:48,050 --> 00:13:52,200 We can just make it OK. 169 00:13:52,450 --> 00:13:53,530 It's not a good padding. 170 00:13:54,160 --> 00:13:58,950 So let's make this to be true, OK? 171 00:13:58,960 --> 00:14:09,760 In the back here, there's to be two, two and for the first one to keep having also the same to and 172 00:14:10,030 --> 00:14:14,440 say, OK, we got a problem. 173 00:14:14,440 --> 00:14:17,720 This part could be mystified content of even. 174 00:14:17,950 --> 00:14:30,910 Yes, we can set everything back, OK, we can go to the row and and, uh, justify content of evenly 175 00:14:32,080 --> 00:14:34,300 on all the flexible center. 176 00:14:35,500 --> 00:14:40,120 OK, so now we got this, we just got a problem with the time function. 177 00:14:40,120 --> 00:14:42,190 We can sit here two, three. 178 00:14:43,850 --> 00:14:44,830 OK, this good. 179 00:14:45,130 --> 00:14:51,940 After this part we can edit the content of this one for this one is to continue from here before, before 180 00:14:51,940 --> 00:14:53,110 the start of playing. 181 00:14:53,680 --> 00:14:55,660 We can just copy this. 182 00:14:55,660 --> 00:14:55,930 Uh. 183 00:14:57,750 --> 00:15:05,250 Up and expect to get the color, we can now go to the second one from here, they said the second one 184 00:15:05,650 --> 00:15:07,950 knowing that this is the second one. 185 00:15:07,990 --> 00:15:08,410 Yes. 186 00:15:10,130 --> 00:15:11,220 No, not here. 187 00:15:11,240 --> 00:15:12,340 The chartered plane. 188 00:15:12,610 --> 00:15:16,060 And for the came of this color from your. 189 00:15:18,160 --> 00:15:26,290 Or this color, just this one copy and paste it here, there's one to be, I think, a lot of chain 190 00:15:27,040 --> 00:15:28,270 link through from here. 191 00:15:28,270 --> 00:15:29,490 You can scroll down. 192 00:15:29,860 --> 00:15:30,880 Yes, 19. 193 00:15:31,540 --> 00:15:38,470 We can now stay and go back to the Web page, which we are quoting, and we got the 19th. 194 00:15:38,680 --> 00:15:40,690 We will just change the image. 195 00:15:41,020 --> 00:15:42,950 We can give it an image of pride. 196 00:15:43,170 --> 00:15:43,810 Starger. 197 00:15:46,200 --> 00:15:47,300 OK, that's good. 198 00:15:47,710 --> 00:15:59,470 And now we can go in the margin for this row, we can go up here and plenty of margin top of itself, 199 00:15:59,490 --> 00:16:00,720 I think this will be good. 200 00:16:01,030 --> 00:16:02,850 We can go and reload. 201 00:16:03,810 --> 00:16:05,040 Yes, that's good. 202 00:16:05,760 --> 00:16:09,270 I have to this part or just let me 70 doctors. 203 00:16:09,720 --> 00:16:17,160 We can now apply for the third one, which is the one before the last copy. 204 00:16:17,550 --> 00:16:27,180 And then we can scroll down and we load, OK, instead of the starter template we will make for the 205 00:16:27,180 --> 00:16:31,700 business template, we can open the inspect so we can get the color. 206 00:16:32,250 --> 00:16:35,280 Let's just based the business plan right here. 207 00:16:35,820 --> 00:16:45,540 We can go to scroll down down down this and the third one and then we can get the color from here, 208 00:16:47,190 --> 00:16:48,060 OK? 209 00:16:48,630 --> 00:16:52,350 And we can go now and check it out. 210 00:16:53,400 --> 00:16:54,720 We can reload. 211 00:16:54,820 --> 00:17:01,220 OK, now we got this, but it's instead of the 19, we will make the twenty nine. 212 00:17:02,900 --> 00:17:04,090 Twenty nine. 213 00:17:04,150 --> 00:17:08,110 OK, we can go and reload. 214 00:17:08,510 --> 00:17:09,360 OK, that's good. 215 00:17:09,650 --> 00:17:16,700 And now we can make for the last one, which will be for here the ultimate. 216 00:17:17,180 --> 00:17:26,570 We can expect that we can get that color text or first we can copy the last one from. 217 00:17:27,830 --> 00:17:29,070 Yes, from here. 218 00:17:29,120 --> 00:17:31,850 Copy, copy. 219 00:17:31,850 --> 00:17:34,250 And then add some white space. 220 00:17:35,240 --> 00:17:38,980 And they just want to be for the ultimate aim. 221 00:17:38,990 --> 00:17:40,940 We forgot to make this one to business 222 00:17:43,370 --> 00:17:44,010 business. 223 00:17:45,880 --> 00:17:48,200 Let's get this one 49. 224 00:17:48,650 --> 00:17:53,500 And this could be for all team plans. 225 00:17:54,860 --> 00:17:57,110 Let's see what we have here inside the Web page. 226 00:17:57,950 --> 00:17:59,320 OK, we've got this. 227 00:17:59,330 --> 00:18:00,350 So we got a problem. 228 00:18:00,390 --> 00:18:02,510 There's a of the sign and check it. 229 00:18:03,460 --> 00:18:05,090 OK, ok, OK. 230 00:18:05,480 --> 00:18:09,800 We can make this to be two instead of three and we will take it clear. 231 00:18:10,550 --> 00:18:20,710 We can go to the document and get the color from there and we can we load right now. 232 00:18:20,930 --> 00:18:23,780 And here we got this for this one. 233 00:18:24,080 --> 00:18:34,800 We can go here and add a margin of 20 percent or let's just make it 35. 234 00:18:34,820 --> 00:18:36,200 I think this would be fine. 235 00:18:37,800 --> 00:18:42,730 OK, this is good right now or let's just make it for fun. 236 00:18:43,800 --> 00:18:46,190 OK, and now we this. 237 00:18:46,460 --> 00:18:52,580 Now we can add some style more for the poor and we can copy this one. 238 00:18:52,790 --> 00:19:01,520 Or at first we can make that declaration function and then we can apply for the bottom purple line over 239 00:19:02,420 --> 00:19:10,070 OPNET and is to be having that color background color first to be for color. 240 00:19:12,020 --> 00:19:17,960 And we can give it color Wiveton and let's see if we will need some transition. 241 00:19:21,170 --> 00:19:27,500 OK, I think we need some translation, but it's OK, we're done a transition or we can edit just in 242 00:19:27,500 --> 00:19:32,720 case transition all point out five seconds. 243 00:19:33,330 --> 00:19:35,510 You can't copy if we're. 244 00:19:38,480 --> 00:19:43,970 They come very quickly became one and one. 245 00:19:46,270 --> 00:19:51,250 OK, that's good, and the next video, you will check the responsible side of this part. 246 00:19:51,280 --> 00:19:52,180 So good luck. 247 00:19:52,180 --> 00:19:53,290 And Arthur.