1 00:00:00,270 --> 00:00:00,720 Beautiful. 2 00:00:01,170 --> 00:00:08,790 And once we have the bare setup in place now, it's enough where we'll place a logo and right next to 3 00:00:08,790 --> 00:00:08,940 it. 4 00:00:09,360 --> 00:00:15,780 There's going to be some going up there with few classes that will add for styling and then in there 5 00:00:16,020 --> 00:00:22,320 set up hitting one with a name, maybe a little bit of text, as well as button that eventually will 6 00:00:22,320 --> 00:00:24,060 navigate your way along and register. 7 00:00:24,180 --> 00:00:27,000 Once we set up the reactor or not at the moment. 8 00:00:27,510 --> 00:00:30,030 And then right next, that will place our main image. 9 00:00:30,750 --> 00:00:32,009 So let's go back here. 10 00:00:32,340 --> 00:00:38,940 As far as my main return, I think I'm going to go with main tags and I want to place the logo in the 11 00:00:38,940 --> 00:00:39,450 nav. 12 00:00:40,110 --> 00:00:41,520 So let's go here with nav. 13 00:00:41,700 --> 00:00:42,720 So now element. 14 00:00:43,140 --> 00:00:45,000 We're not going to add any classes for now. 15 00:00:45,420 --> 00:00:48,990 We're just going to go with image than for the source. 16 00:00:49,170 --> 00:00:52,320 We want to look for a logo online for alternative. 17 00:00:52,330 --> 00:00:53,720 Let's just write job five. 18 00:00:54,650 --> 00:00:57,470 And then we also want to add a glass of logo. 19 00:00:57,890 --> 00:01:01,670 So let's say here, class name now will be equal to your logo. 20 00:01:01,880 --> 00:01:07,100 Again, there's going to be no styling at the moment since we haven't started using style components, 21 00:01:07,100 --> 00:01:11,750 but we should say something on a page then right next to it. 22 00:01:11,750 --> 00:01:13,670 Like I said, there's going to be a there. 23 00:01:14,120 --> 00:01:19,760 We have the main content, so I'm going to create a name for the class of container and page. 24 00:01:20,090 --> 00:01:22,580 Now container comes from the global glasses. 25 00:01:23,030 --> 00:01:24,560 Let's just set up the width. 26 00:01:25,100 --> 00:01:27,680 Pretty much that I can use in any component. 27 00:01:28,010 --> 00:01:34,070 And there's also going to be a page glass that we use in our style component of an inside of it. 28 00:01:34,370 --> 00:01:35,690 We have two columns. 29 00:01:36,290 --> 00:01:39,890 Effectively, we have one column where we have all the info. 30 00:01:40,830 --> 00:01:47,070 And in the other column, we're going to have our image, so therefore inside of the container, we'll 31 00:01:47,070 --> 00:01:51,330 start with info first in line for the info we want to go with anyone. 32 00:01:51,630 --> 00:01:57,810 Let's just say job and add a little bit of styling showplace, a Spanish side sidetracking here. 33 00:01:58,230 --> 00:02:00,480 And then right next to it, let's say up. 34 00:02:00,730 --> 00:02:02,940 Let's say that again, there's no styling. 35 00:02:03,330 --> 00:02:06,540 So at the moment it's going to look somewhat ugly. 36 00:02:06,840 --> 00:02:09,090 One i30 think one. 37 00:02:09,479 --> 00:02:13,650 We want to go with paragraph and usually I use. 38 00:02:14,590 --> 00:02:15,580 Hipster ipsum. 39 00:02:16,090 --> 00:02:18,220 So if I go here with hipster. 40 00:02:19,210 --> 00:02:24,490 Ipsum, that's a text that I use, but you can always use just regular lorem as well. 41 00:02:24,850 --> 00:02:28,900 So I go here with whatever paragraphs and then I just pick. 42 00:02:30,010 --> 00:02:33,100 Whichever text I want in this case, I think I'm going to go with this one. 43 00:02:33,520 --> 00:02:36,130 So inside of this paragraph, I'm just going to set it up. 44 00:02:36,490 --> 00:02:42,130 And then lastly, like I said, there's going to be a link that goes back to a register page. 45 00:02:42,640 --> 00:02:47,620 But at the moment, we haven't covered React router, so I'll just start simply by creating a button 46 00:02:47,650 --> 00:02:49,330 that will turn this into a link. 47 00:02:49,810 --> 00:02:52,210 And here we have two classes. 48 00:02:52,240 --> 00:02:54,160 We have the global median class. 49 00:02:54,490 --> 00:02:58,570 And we also have between hero and as far as the name, let's just say logging. 50 00:02:59,570 --> 00:03:00,850 And register. 51 00:03:01,550 --> 00:03:07,760 So once we set this one up, only thing that's missing here is side by side with this there with this 52 00:03:07,760 --> 00:03:08,180 info. 53 00:03:08,480 --> 00:03:09,080 And you know what? 54 00:03:09,080 --> 00:03:10,100 Let me add a comment here. 55 00:03:10,100 --> 00:03:16,820 Let me say here info and not right next to it or place our image because again, there's going to be 56 00:03:16,820 --> 00:03:19,100 a two column layout on the big screen. 57 00:03:19,170 --> 00:03:25,700 And in fact, on a small screen, if you looked at the job before I went on the phone, you noticed 58 00:03:25,700 --> 00:03:27,200 that there's actually no image. 59 00:03:28,120 --> 00:03:32,110 So this image we're actually displaying only once we get to the big screen. 60 00:03:32,560 --> 00:03:39,150 So right next to our info, Dave, we want to go here with second image and here we on display main. 61 00:03:39,550 --> 00:03:42,730 And as far as the alternative, I'm going to go on job hunt. 62 00:03:43,300 --> 00:03:45,340 And let's add some classes here as well. 63 00:03:45,340 --> 00:03:46,780 Let's just say I am. 64 00:03:47,290 --> 00:03:51,250 So this is pretty much a global image class that I'm using. 65 00:03:51,680 --> 00:03:58,810 And then I also want to add main image because again, it will will be showing and hiding this particular 66 00:03:58,810 --> 00:04:00,430 image on different screens. 67 00:04:01,000 --> 00:04:05,860 And once we are done with the basic set up and once we have our sample return. 68 00:04:06,220 --> 00:04:09,700 Now let's talk about the styling that we're going to use throughout the project.