1 00:00:00,690 --> 00:00:07,910 Okay, guys, next up, it's a project which is going to create a simple website using Fleck's box. 2 00:00:08,100 --> 00:00:14,340 Now, the main focus of this project is to concentrate on using different methods for complex blocks, 3 00:00:14,340 --> 00:00:19,620 different properties of Xbox, not to create the best site in the world, but just to get used to using 4 00:00:19,740 --> 00:00:20,270 Xbox. 5 00:00:20,970 --> 00:00:23,790 OK, so let me show, first of all, how this site will look. 6 00:00:25,360 --> 00:00:31,780 I said basic website will have up here a small logo we created ourselves, then right here we have a 7 00:00:31,780 --> 00:00:32,290 navigation. 8 00:00:32,290 --> 00:00:36,370 This entire section will be actually the navigation and here will be the header. 9 00:00:36,390 --> 00:00:39,650 We will have a title, a subtitle, a contact us button. 10 00:00:40,180 --> 00:00:42,670 Now, this tool will be in the main section. 11 00:00:43,060 --> 00:00:50,980 And of course, when we click on Contact US, for example, this will send us down to the contact section 12 00:00:50,980 --> 00:00:57,310 of the page when we will hover over the buttons and each of them will do something down here, will 13 00:00:57,310 --> 00:00:58,080 have a flutter. 14 00:00:58,420 --> 00:01:02,290 And if that let me go up here, I will also have a about section. 15 00:01:02,560 --> 00:01:05,800 We just have an image then a subtitle. 16 00:01:05,830 --> 00:01:11,470 So the title of about us, a image on the left side, some kind of text, the more this button will 17 00:01:11,590 --> 00:01:12,520 do anything. 18 00:01:13,840 --> 00:01:19,960 And then we will have a service section of the service section will also have just a bit of an animation 19 00:01:19,960 --> 00:01:20,940 for the boxes here. 20 00:01:21,250 --> 00:01:26,370 And yeah, I think this is a pretty cool project for you to get used to flex box, so. 21 00:01:26,380 --> 00:01:26,820 Oh, yeah. 22 00:01:26,830 --> 00:01:29,200 And actually this would also be responsive. 23 00:01:29,210 --> 00:01:31,660 So if I would change. 24 00:01:31,700 --> 00:01:32,800 Let's go to inspect. 25 00:01:32,810 --> 00:01:33,010 Right. 26 00:01:33,010 --> 00:01:36,000 Click inspect and change to see. 27 00:01:36,100 --> 00:01:37,420 Let's zoom in here with. 28 00:01:38,530 --> 00:01:40,720 On Honda, 25 percent. 29 00:01:41,500 --> 00:01:45,870 OK, so this will be in the iPad format, as you can see, everything is response. 30 00:01:45,880 --> 00:01:48,400 Actually, let me go to Responsive. 31 00:01:49,040 --> 00:01:49,950 That's much better. 32 00:01:50,380 --> 00:01:52,390 And I think the need to zoom out. 33 00:01:52,540 --> 00:01:54,540 Oh, because they already have it here. 34 00:01:54,550 --> 00:01:57,280 Zoom out, zoomed in and then zoomed in. 35 00:01:57,580 --> 00:01:57,930 Hmm. 36 00:01:58,750 --> 00:01:59,260 Yeah. 37 00:01:59,260 --> 00:02:03,350 I will just show it to you using our basic method. 38 00:02:03,370 --> 00:02:07,030 Let's go with an iPhone format and yeah. 39 00:02:07,090 --> 00:02:07,700 That's much better. 40 00:02:08,440 --> 00:02:15,100 So without having the selection on this would be now, you know, one thousand ninety one thousand nine 41 00:02:15,100 --> 00:02:17,860 hundred something with that doesn't matter. 42 00:02:17,860 --> 00:02:27,850 But as soon as I go down to 900 receipt text changing, sizes changing and I could go down as far as 43 00:02:28,150 --> 00:02:32,530 a phone format and actually let me reset all my Zoom's. 44 00:02:33,200 --> 00:02:34,570 This is awful. 45 00:02:34,600 --> 00:02:35,350 OK, there we go. 46 00:02:36,040 --> 00:02:40,450 So this are on the 400 format. 47 00:02:40,510 --> 00:02:49,240 Again, reset my zoom so it will see everything will align in a column or a row depending on the width 48 00:02:49,240 --> 00:02:50,100 of the page. 49 00:02:51,370 --> 00:02:54,040 Okay, so excited for this project and let's get started. 50 00:02:54,640 --> 00:02:56,500 So see in the next video by.