And if you're interested working on CSS, let's just navigate to the wrappers.
And more specifically, we're looking for the lining one.
Let's go to the Rapper one.
Notice we're returning a section.
Okay.
Hopefully that is clear.
And then let me remove all of the styles from my styled component.
Let's save it.
This is what we should see on the screen.
And before we start styling the styled component, let me just mention that here and there I'm going
to use some global classes as well.
So in this case it's a container one.
So that's something that we're going to use in a few pages and that's why I just set it up globally
so I don't have to repeat myself.
So let me keep on scrolling in the index CSS notice I'll have some width, which is going to be equal
to my CSS variable, something I'm going to showcase in a second.
And then the max width and then margin zero auto.
So effectively this.
Just adds some kind of width on a small screen, which is going to be equal to 90% of the screen width,
then the max width.
So it's never bigger than specific number.
And I believe in this case it's 1120 or something along those lines.
So notice it's never going to be spanning more than that.
And then also I always want to place it in the center again, a class, we will reuse it.
And therefore I set it up globally.
And if you want to take a look at the values, let's just navigate up and notice.
So for the fluid width.
This is 90% of the screen width.
So we're using these view width units.
And when it comes to max width, it's 1120 and there's also a fixed width and nav height.
So the nav height we'll actually use in our landing page styled component.
So let's navigate to the landing page.
JS And yes, I purposely use that extension to kind of distinguish between the component, which is
JSX, again, remember, and V8, and then the styled component, which is just JS.
And let's start by targeting the NAV.
Remember, whatever elements we have inside of the style component we can simply access.
And let's just go here with width.
And again, it's going to be equal to that fluid width.
So I want to make a nav bar.
The same width as my container.
So we're going to go over here with fluid and then width.
And also we want to set up the max width.
So max hyphen width and that is going to be equal to that max width value.
So hyphen, hyphen, max width over here.
Then let's set it up always in the center.
So margin zero auto and then let's add the height to our NAV and this is going to be equal to our CSS
variable.
So nav hyphen and height.
Okay, let's save this.
We should.
Have this type of lock.
And then I also want to place the logo in the center vertically.
So we're going to go with display, flex and align items and we'll set it equal to a center.
So now our logo is going to be sitting inside of the NAV.
Exactly.
In the center.
Then let's target the page class.
Remember, we added a container as well as the page.
And now for the page we just want to set up some kind of min height.
So basically I want rest of the content to take up almost the entire height of the page.
And why I say almost.
Well, because the NAV also has the height.
Right?
So we're going to go here with Min.
All right.
And that is equal to.
So we'll calculate and effectively I'm going to go with 100% of the.
Page height and we'll subtract the nav height.
So I'm going to go with Var and then whatever is the nav height.
Now in this case, of course I know it's six, so technically in both cases we can hard code.
But the reason why I like to keep using.
The X variables because that way if I change this value, I don't have to do it in multiple places.
Hopefully that is clear.
So now let's place all of the content here in the center.
Now the problem is going to be the image.
So why don't we do this?
Why don't we target first the class of main IMG and I'm just going to give it a display.
None.
So on a small screen, I don't want to showcase that.
So I'm going to go here with display none.
And now the image is going to disappear effectively and.
Let's go back to the page and we're going to go with display grid.
And let's place everything in the center vertically.
And in order to do that, we go with align items.
Sorry.
For some reason I went with center and we want to set it equal to the center.
So now all of our content is in the center.
But.
I also want to lift it up a little bit.
I just like it better when it's a little bit higher.
So we're going to go with margin top and set it equal to negative three Rems and as a result, we'll
just lift the entire thing.
Then we want to go with heading one.
So we want to style it.
And first, let's go with font weight.
We'll set it equal to 700.
And then remember, we have this span for the tracking.
And basically I just want to give it a different color.
And what's really cool, we can nest inside of the style component.
So notice I have the heading one.
That's the element in the styled component, correct?
This one over here.
But just like in Sass, since the span is inside of the heading one, I don't have to go with heading
one and then span like you normally would in the CSS because of course in the vanilla CSS you cannot
just nest things effectively.
It would be heading one and then span.
When we're using styled components, we simply go okay, so span inside of the heading one now one gotcha.
We need to keep in mind about this is the fact that it has more specificity.
So let's say if I want to add some styles on hover or when the screen size changes or something along
those lines, you'll have to repeat this pattern.
So why am I telling you that?
Is because I usually avoid nesting more than two levels deep.
Because at that point, at least in my opinion, you're asking for trouble.
So yes, nesting is an awesome option you can use in styled components, but I usually don't go too
crazy with it because if you want to add some different styles later, you'll have to repeat this pattern.
Otherwise this one will have more specificity so the following styles won't be applied.
Hopefully that is clear.
Then we want to go with color and I'll set it equal to my primary 500 primary.
And 500.
So that's my primary color.
Let's save it.
And then also let's add the margin bottom to the entire heading one.
Margin hyphen bottom.
And let's set it to 1.5 Rems.
Then we have the paragraph.
So let's keep on moving.
Right after the heading, we're going to go with paragraph.
We'll set up the line height.
And this one is going to be equal to two.
So we'll just increase that.
And as far as the color, I'm going to go with this variable.
And at the moment, maybe it's not going to make too much sense, but we'll cover that once we set up
the dark mode.
So again, all of that is coming up for now.
We'll just use this CSS variable.
So text secondary color and it will make all of the sense in the world once we get to the dark mode.
Then we want to go with margin bottom.
We'll set it equal to 1.5 Rems.
And then let's also set up a max width for our paragraph.
And in my case, I'm going to go with 35 EMS.
Then we have a register link.
Remember, there is a global button class, so pretty much all of my buttons look like this.
And we also added this register link, so let's just go here with the register link and we want to add
the margin to the right.
So margin right and we'll set it equal to one Rems.
Okay, good.
Then main image displayed none.
We already have that.
And after that, let's just add a little bit more padding to our buttons.
And since we have that global class, we can simply go with BTN padding.
So again, this is something interesting to keep in mind.
So the global button class brings its own styles, but of course we can still target in this specific
styled component.
So what happens in this particular component, buttons are going to have more padding.
Hopefully that is clear.
Then we'll go here with zero.
75 Rmse and then one Rmse left and right.
Okay, awesome.
And then let's also add a media query.
So basically this is going to be the look on a small screen and now we want to set up the styles for
the big screen and in the styles component.
If we want to set up the media screen, we go with media.
Then let's come up with a min width.
In my case, it's going to be 992 pixels.
And once we get to this screen size, what do we want to do?
Well, remember, we have this page class.
And now I just want to add two columns.
So we're going to go with grid template columns.
Remember, it is already a grid parent and effectively the info is going to be spanning all across.
And for the image, I'm going to add a fixed width of 400 pixels.
So two columns.
One is going to be taking up rest of the space and one is going to be 400 pixels.
And as far as the gap, I'm going to go with column gap and we'll set it equal to three Rems.
And then lastly, remember, by default, we're hiding the image.
So once we get to 992, we're going to go with main IMG and we'll go with display.
And let's set it equal to block now.
You'll also notice that we used over here this IMG class that's also a global class.
So let me use here the fine option.
I'm just going to type here IMG and notice.
So these are the styles pretty much that we add to the image if there's a class.
So this is one of my global classes, IMG, where I add the width to be 100, so it's not outside of
the specific content, then it's always going to be display block and object fit cover.
So it nicely fits there without distorting the image.
And if we navigate to the big screen, this is the look we should see.
And with this in place, we're ready to move on to the next step.