1 00:00:00,500 --> 00:00:06,720 And if you're interested working on CSS, let's just navigate to the wrappers. 2 00:00:06,740 --> 00:00:09,680 And more specifically, we're looking for the lining one. 3 00:00:10,430 --> 00:00:12,260 Let's go to the Rapper one. 4 00:00:12,290 --> 00:00:13,970 Notice we're returning a section. 5 00:00:13,970 --> 00:00:14,600 Okay. 6 00:00:14,630 --> 00:00:15,800 Hopefully that is clear. 7 00:00:15,800 --> 00:00:20,420 And then let me remove all of the styles from my styled component. 8 00:00:20,420 --> 00:00:21,440 Let's save it. 9 00:00:21,470 --> 00:00:23,960 This is what we should see on the screen. 10 00:00:23,960 --> 00:00:29,390 And before we start styling the styled component, let me just mention that here and there I'm going 11 00:00:29,390 --> 00:00:31,640 to use some global classes as well. 12 00:00:31,640 --> 00:00:34,640 So in this case it's a container one. 13 00:00:35,160 --> 00:00:41,370 So that's something that we're going to use in a few pages and that's why I just set it up globally 14 00:00:41,370 --> 00:00:43,730 so I don't have to repeat myself. 15 00:00:43,740 --> 00:00:49,710 So let me keep on scrolling in the index CSS notice I'll have some width, which is going to be equal 16 00:00:49,710 --> 00:00:53,100 to my CSS variable, something I'm going to showcase in a second. 17 00:00:53,130 --> 00:00:56,070 And then the max width and then margin zero auto. 18 00:00:56,070 --> 00:00:57,600 So effectively this. 19 00:00:58,380 --> 00:01:06,360 Just adds some kind of width on a small screen, which is going to be equal to 90% of the screen width, 20 00:01:06,360 --> 00:01:07,530 then the max width. 21 00:01:07,530 --> 00:01:10,710 So it's never bigger than specific number. 22 00:01:10,710 --> 00:01:14,010 And I believe in this case it's 1120 or something along those lines. 23 00:01:14,010 --> 00:01:16,860 So notice it's never going to be spanning more than that. 24 00:01:16,860 --> 00:01:23,430 And then also I always want to place it in the center again, a class, we will reuse it. 25 00:01:23,430 --> 00:01:25,710 And therefore I set it up globally. 26 00:01:25,950 --> 00:01:30,780 And if you want to take a look at the values, let's just navigate up and notice. 27 00:01:30,780 --> 00:01:32,700 So for the fluid width. 28 00:01:32,730 --> 00:01:35,490 This is 90% of the screen width. 29 00:01:35,490 --> 00:01:39,330 So we're using these view width units. 30 00:01:39,570 --> 00:01:46,020 And when it comes to max width, it's 1120 and there's also a fixed width and nav height. 31 00:01:46,750 --> 00:01:52,210 So the nav height we'll actually use in our landing page styled component. 32 00:01:52,210 --> 00:01:54,280 So let's navigate to the landing page. 33 00:01:54,280 --> 00:02:02,080 JS And yes, I purposely use that extension to kind of distinguish between the component, which is 34 00:02:02,080 --> 00:02:07,570 JSX, again, remember, and V8, and then the styled component, which is just JS. 35 00:02:08,539 --> 00:02:10,660 And let's start by targeting the NAV. 36 00:02:10,669 --> 00:02:15,560 Remember, whatever elements we have inside of the style component we can simply access. 37 00:02:15,560 --> 00:02:17,930 And let's just go here with width. 38 00:02:18,050 --> 00:02:21,240 And again, it's going to be equal to that fluid width. 39 00:02:21,260 --> 00:02:24,110 So I want to make a nav bar. 40 00:02:24,680 --> 00:02:27,110 The same width as my container. 41 00:02:27,110 --> 00:02:30,740 So we're going to go over here with fluid and then width. 42 00:02:31,040 --> 00:02:34,000 And also we want to set up the max width. 43 00:02:34,010 --> 00:02:39,170 So max hyphen width and that is going to be equal to that max width value. 44 00:02:39,170 --> 00:02:43,010 So hyphen, hyphen, max width over here. 45 00:02:43,070 --> 00:02:45,980 Then let's set it up always in the center. 46 00:02:45,980 --> 00:02:54,680 So margin zero auto and then let's add the height to our NAV and this is going to be equal to our CSS 47 00:02:54,680 --> 00:02:55,100 variable. 48 00:02:55,100 --> 00:02:58,430 So nav hyphen and height. 49 00:02:58,790 --> 00:03:00,230 Okay, let's save this. 50 00:03:00,620 --> 00:03:01,550 We should. 51 00:03:02,300 --> 00:03:03,580 Have this type of lock. 52 00:03:03,590 --> 00:03:07,670 And then I also want to place the logo in the center vertically. 53 00:03:07,670 --> 00:03:14,450 So we're going to go with display, flex and align items and we'll set it equal to a center. 54 00:03:14,450 --> 00:03:17,990 So now our logo is going to be sitting inside of the NAV. 55 00:03:18,020 --> 00:03:18,710 Exactly. 56 00:03:18,710 --> 00:03:19,730 In the center. 57 00:03:19,880 --> 00:03:22,520 Then let's target the page class. 58 00:03:22,520 --> 00:03:25,910 Remember, we added a container as well as the page. 59 00:03:25,910 --> 00:03:30,380 And now for the page we just want to set up some kind of min height. 60 00:03:30,380 --> 00:03:37,310 So basically I want rest of the content to take up almost the entire height of the page. 61 00:03:37,310 --> 00:03:38,540 And why I say almost. 62 00:03:38,540 --> 00:03:41,060 Well, because the NAV also has the height. 63 00:03:41,060 --> 00:03:41,360 Right? 64 00:03:41,360 --> 00:03:43,220 So we're going to go here with Min. 65 00:03:43,840 --> 00:03:44,350 All right. 66 00:03:45,360 --> 00:03:47,220 And that is equal to. 67 00:03:47,610 --> 00:03:52,860 So we'll calculate and effectively I'm going to go with 100% of the. 68 00:03:53,820 --> 00:03:58,020 Page height and we'll subtract the nav height. 69 00:03:58,050 --> 00:04:02,220 So I'm going to go with Var and then whatever is the nav height. 70 00:04:02,250 --> 00:04:07,820 Now in this case, of course I know it's six, so technically in both cases we can hard code. 71 00:04:07,830 --> 00:04:10,920 But the reason why I like to keep using. 72 00:04:11,730 --> 00:04:17,920 The X variables because that way if I change this value, I don't have to do it in multiple places. 73 00:04:17,940 --> 00:04:19,140 Hopefully that is clear. 74 00:04:19,140 --> 00:04:23,700 So now let's place all of the content here in the center. 75 00:04:23,730 --> 00:04:25,680 Now the problem is going to be the image. 76 00:04:25,680 --> 00:04:27,450 So why don't we do this? 77 00:04:27,540 --> 00:04:32,460 Why don't we target first the class of main IMG and I'm just going to give it a display. 78 00:04:32,460 --> 00:04:32,940 None. 79 00:04:32,940 --> 00:04:35,340 So on a small screen, I don't want to showcase that. 80 00:04:35,340 --> 00:04:36,960 So I'm going to go here with display none. 81 00:04:36,960 --> 00:04:42,900 And now the image is going to disappear effectively and. 82 00:04:43,610 --> 00:04:47,030 Let's go back to the page and we're going to go with display grid. 83 00:04:47,330 --> 00:04:50,480 And let's place everything in the center vertically. 84 00:04:50,480 --> 00:04:53,360 And in order to do that, we go with align items. 85 00:04:53,370 --> 00:04:54,110 Sorry. 86 00:04:54,350 --> 00:04:58,580 For some reason I went with center and we want to set it equal to the center. 87 00:04:58,580 --> 00:05:01,280 So now all of our content is in the center. 88 00:05:01,280 --> 00:05:01,970 But. 89 00:05:02,780 --> 00:05:04,700 I also want to lift it up a little bit. 90 00:05:05,000 --> 00:05:07,910 I just like it better when it's a little bit higher. 91 00:05:07,910 --> 00:05:14,810 So we're going to go with margin top and set it equal to negative three Rems and as a result, we'll 92 00:05:14,810 --> 00:05:16,390 just lift the entire thing. 93 00:05:16,400 --> 00:05:18,440 Then we want to go with heading one. 94 00:05:19,120 --> 00:05:20,410 So we want to style it. 95 00:05:20,410 --> 00:05:24,130 And first, let's go with font weight. 96 00:05:24,160 --> 00:05:26,770 We'll set it equal to 700. 97 00:05:26,770 --> 00:05:30,280 And then remember, we have this span for the tracking. 98 00:05:30,280 --> 00:05:33,640 And basically I just want to give it a different color. 99 00:05:33,640 --> 00:05:38,010 And what's really cool, we can nest inside of the style component. 100 00:05:38,020 --> 00:05:40,150 So notice I have the heading one. 101 00:05:40,150 --> 00:05:43,150 That's the element in the styled component, correct? 102 00:05:43,150 --> 00:05:44,200 This one over here. 103 00:05:44,350 --> 00:05:50,410 But just like in Sass, since the span is inside of the heading one, I don't have to go with heading 104 00:05:50,410 --> 00:05:56,080 one and then span like you normally would in the CSS because of course in the vanilla CSS you cannot 105 00:05:56,080 --> 00:05:58,690 just nest things effectively. 106 00:05:58,690 --> 00:06:00,940 It would be heading one and then span. 107 00:06:01,120 --> 00:06:06,970 When we're using styled components, we simply go okay, so span inside of the heading one now one gotcha. 108 00:06:06,970 --> 00:06:12,610 We need to keep in mind about this is the fact that it has more specificity. 109 00:06:12,610 --> 00:06:18,850 So let's say if I want to add some styles on hover or when the screen size changes or something along 110 00:06:18,950 --> 00:06:22,040 those lines, you'll have to repeat this pattern. 111 00:06:22,040 --> 00:06:23,840 So why am I telling you that? 112 00:06:23,870 --> 00:06:29,030 Is because I usually avoid nesting more than two levels deep. 113 00:06:29,030 --> 00:06:33,380 Because at that point, at least in my opinion, you're asking for trouble. 114 00:06:33,380 --> 00:06:40,700 So yes, nesting is an awesome option you can use in styled components, but I usually don't go too 115 00:06:40,700 --> 00:06:46,430 crazy with it because if you want to add some different styles later, you'll have to repeat this pattern. 116 00:06:46,430 --> 00:06:52,580 Otherwise this one will have more specificity so the following styles won't be applied. 117 00:06:52,580 --> 00:06:53,930 Hopefully that is clear. 118 00:06:53,960 --> 00:06:59,750 Then we want to go with color and I'll set it equal to my primary 500 primary. 119 00:07:00,440 --> 00:07:01,370 And 500. 120 00:07:01,370 --> 00:07:03,340 So that's my primary color. 121 00:07:03,350 --> 00:07:04,220 Let's save it. 122 00:07:04,220 --> 00:07:08,600 And then also let's add the margin bottom to the entire heading one. 123 00:07:09,470 --> 00:07:11,810 Margin hyphen bottom. 124 00:07:11,990 --> 00:07:15,440 And let's set it to 1.5 Rems. 125 00:07:15,590 --> 00:07:18,940 Then we have the paragraph. 126 00:07:18,950 --> 00:07:20,720 So let's keep on moving. 127 00:07:21,200 --> 00:07:23,990 Right after the heading, we're going to go with paragraph. 128 00:07:24,170 --> 00:07:26,090 We'll set up the line height. 129 00:07:27,180 --> 00:07:31,260 And this one is going to be equal to two. 130 00:07:31,560 --> 00:07:33,810 So we'll just increase that. 131 00:07:33,810 --> 00:07:36,810 And as far as the color, I'm going to go with this variable. 132 00:07:36,840 --> 00:07:44,520 And at the moment, maybe it's not going to make too much sense, but we'll cover that once we set up 133 00:07:44,520 --> 00:07:45,570 the dark mode. 134 00:07:45,600 --> 00:07:47,720 So again, all of that is coming up for now. 135 00:07:47,730 --> 00:07:49,620 We'll just use this CSS variable. 136 00:07:49,620 --> 00:07:56,010 So text secondary color and it will make all of the sense in the world once we get to the dark mode. 137 00:07:56,040 --> 00:07:57,690 Then we want to go with margin bottom. 138 00:07:57,690 --> 00:08:00,300 We'll set it equal to 1.5 Rems. 139 00:08:00,300 --> 00:08:05,730 And then let's also set up a max width for our paragraph. 140 00:08:05,730 --> 00:08:08,950 And in my case, I'm going to go with 35 EMS. 141 00:08:09,050 --> 00:08:10,800 Then we have a register link. 142 00:08:10,800 --> 00:08:17,730 Remember, there is a global button class, so pretty much all of my buttons look like this. 143 00:08:18,000 --> 00:08:25,440 And we also added this register link, so let's just go here with the register link and we want to add 144 00:08:25,440 --> 00:08:27,610 the margin to the right. 145 00:08:27,610 --> 00:08:33,130 So margin right and we'll set it equal to one Rems. 146 00:08:33,159 --> 00:08:34,080 Okay, good. 147 00:08:34,100 --> 00:08:36,280 Then main image displayed none. 148 00:08:36,280 --> 00:08:37,570 We already have that. 149 00:08:37,780 --> 00:08:43,630 And after that, let's just add a little bit more padding to our buttons. 150 00:08:43,630 --> 00:08:48,280 And since we have that global class, we can simply go with BTN padding. 151 00:08:48,280 --> 00:08:50,910 So again, this is something interesting to keep in mind. 152 00:08:50,920 --> 00:08:57,760 So the global button class brings its own styles, but of course we can still target in this specific 153 00:08:57,760 --> 00:08:58,750 styled component. 154 00:08:58,750 --> 00:09:03,370 So what happens in this particular component, buttons are going to have more padding. 155 00:09:03,670 --> 00:09:05,050 Hopefully that is clear. 156 00:09:05,210 --> 00:09:07,150 Then we'll go here with zero. 157 00:09:08,120 --> 00:09:12,760 75 Rmse and then one Rmse left and right. 158 00:09:12,770 --> 00:09:13,820 Okay, awesome. 159 00:09:13,820 --> 00:09:16,810 And then let's also add a media query. 160 00:09:16,820 --> 00:09:21,710 So basically this is going to be the look on a small screen and now we want to set up the styles for 161 00:09:21,710 --> 00:09:24,080 the big screen and in the styles component. 162 00:09:24,080 --> 00:09:27,350 If we want to set up the media screen, we go with media. 163 00:09:27,380 --> 00:09:29,600 Then let's come up with a min width. 164 00:09:29,600 --> 00:09:33,650 In my case, it's going to be 992 pixels. 165 00:09:33,740 --> 00:09:36,410 And once we get to this screen size, what do we want to do? 166 00:09:36,410 --> 00:09:39,140 Well, remember, we have this page class. 167 00:09:40,090 --> 00:09:42,430 And now I just want to add two columns. 168 00:09:42,430 --> 00:09:45,760 So we're going to go with grid template columns. 169 00:09:45,760 --> 00:09:53,380 Remember, it is already a grid parent and effectively the info is going to be spanning all across. 170 00:09:53,380 --> 00:09:58,990 And for the image, I'm going to add a fixed width of 400 pixels. 171 00:09:58,990 --> 00:10:00,100 So two columns. 172 00:10:00,130 --> 00:10:05,230 One is going to be taking up rest of the space and one is going to be 400 pixels. 173 00:10:05,230 --> 00:10:11,200 And as far as the gap, I'm going to go with column gap and we'll set it equal to three Rems. 174 00:10:11,200 --> 00:10:14,830 And then lastly, remember, by default, we're hiding the image. 175 00:10:14,830 --> 00:10:21,880 So once we get to 992, we're going to go with main IMG and we'll go with display. 176 00:10:22,090 --> 00:10:26,320 And let's set it equal to block now. 177 00:10:26,880 --> 00:10:33,090 You'll also notice that we used over here this IMG class that's also a global class. 178 00:10:33,090 --> 00:10:36,330 So let me use here the fine option. 179 00:10:36,420 --> 00:10:38,550 I'm just going to type here IMG and notice. 180 00:10:38,550 --> 00:10:45,390 So these are the styles pretty much that we add to the image if there's a class. 181 00:10:45,480 --> 00:10:51,930 So this is one of my global classes, IMG, where I add the width to be 100, so it's not outside of 182 00:10:51,930 --> 00:10:56,430 the specific content, then it's always going to be display block and object fit cover. 183 00:10:56,430 --> 00:10:59,670 So it nicely fits there without distorting the image. 184 00:10:59,670 --> 00:11:03,810 And if we navigate to the big screen, this is the look we should see. 185 00:11:03,810 --> 00:11:07,680 And with this in place, we're ready to move on to the next step.