Jonas: Let's now start adding some more visual styles
to our hero section.
And let's start by styling the text.
So our primary heading here and our hero description.
So just copying that,
let's put it here.
And for now I'm simply putting all the styles here,
one after another.
So first of all, let's select a font size.
And so let's go to our list of options.
And let's try to go maybe with this 61 here.
So 61 pixels,
which, remember, means 6.2 rem.
And so, again, we will now use the rem unit
to really size everything on our page.
So all the length like this one here
and all the font sizes as well.
Okay?
Then let's make it bold
by giving it a font weight of 700.
And then let's check it out here.
And that looks huge,
so that's probably a bit too big.
And there's also a bit too much space
between the lines here.
So we used 62 pixels.
So let's go one down to 52.
So 5.2 rem.
And then the line height, let's set it to 1.1.
Okay.
So that looks a little bit better.
Well, let's increase it actually even more to 1.05.
And also, let's make it darker.
So we have all our text at 555,
and this one we will make 333.
So another gray color.
So let's add that here
to our palette, let's say.
And yeah.
And I will talk a little bit more
about these colors a bit later on.
So the reason why we chose them.
And we might also experiment a little bit with other colors.
But for now, just follow what I'm doing here.
Okay?
Then let's try the hero description.
So as always, changing the font size, of course.
Here, let's try to go with 20 pixels, maybe.
So two rem.
And here we can use a little bit more line height as well.
Okay. Nice.
Maybe a little bit more line height even.
And then, of course,
we finally need some spacing here as well.
So we need some spacing here.
So after the h1.
And then some spacing here
after this paragraph, right?
And remember that we're still iterating
with our design here.
So we're just trying out here things a little bit for now
because actually, we don't even have yet
a font family selected, right?
And so we can tweak all of this later.
We just need some starting base here
from which we can then improve.
Okay?
For example, I can actually see here in this heading
that we should probably decrease the letter spacing
because this text here is very large.
And as we learned in one of the design rules,
many times it then looks unnatural
with the big spacing between the letters.
And here that is actually the case.
So let's remove that a little bit as well.
So let's say half a pixel.
So minus 0.5 pixels.
And here, notice how I'm not using rem.
And that's because this is just a very small distance here,
and it's also distance that we don't really need
to scale up or down.
And so then we can simply keep using pixels
in those situations.
So here I said I was going to increase this a little bit.
And now let's think about our spacing.
So after the h1,
let's add like 32 pixels.
And then after the paragraph, a little bit more.
So maybe 48 here.
And so that's because the heading
and the paragraph belong kind of together.
And then after that,
we want more space between the buttons
because they are a bit separated
from these two text contents.
So as I said, here,
we're going to use a margin bottom
of 32 pixels, so 3.2 rem.
And then here,
I'm going with 4.8 rem.
So 48 pixels.
Okay. Nice.
So this one looks a bit more natural now
with the decreased letter spacing.
And here, we have some nice spacing going on as well.
Now, let's just quickly vertically center this content here.
So all of this, what's in this box.
And that should be fairly easy, right?
Because remember that we are using a grid.
And so on the grid container,
we can simply, as always,
use align-items and set it to center.
Okay. Nice.
But of course then we have some problem
with the spacing here.
And so let's now actually tackle all of the spacing
in this section.
So of course there's also no spacing here,
kind of between the beginning of the page
and this hero image.
So this entire section here.
And so let's now indeed think a bit more
about the visual style of this section,
which includes not only the spacing, but also the colors.
So remember that we're using
the startup website personality here.
And in that personality,
it's quite common to have very light background colors
in some of the sections.
So usually that is using a gray color.
But here in this design,
we actually also want to include some elements
of the calm personality.
Remember that?
And so I think it would be nicer
to not use a gray color,
which is a little bit colder,
but actually use a very, very light shade,
or a tint, maybe,
I don't remember which one it is,
but basically a very light version
of our primary orange color.
So let's get that color here.
So I'll copy this hex code.
And then remember about this tool
that I mentioned to you,
which is the Tint and Shade Generator.
And as always, this linker will be on my resources page,
but the one that I like to use is this one.
So make tintsandshades.com.
So we just come here,
then paste the code here,
and then simply make tints and shades.
And so here we now get these 10 shades,
so the darker versions,
and then all of these lighter versions.
So it starts basically at the color that we selected
and goes all the way to white here.
And here it starts at our selected color
and goes all the way to black, right?
And so let's now choose this very first color here
as our background color,
just to see if that looks nice.
So we can click here. That will then copy it.
And so let's try that.
So we want this entire hero section, right?
So not just the hero.
Let me first put that here
so that you can see why we don't want it just here.
Right?
So that would look quite strange
because usually what we see is
that the entire section from left
to right has the background color, right?
And so here we have actually one more reason why we needed
this hero container element inside of the hero section,
or actually the section-hero.
So let's move that up here
by hitting Alt or Option + Up.
Give it a save.
And, well, I think that this looks quite nice.
If we went with a darker color like this one here,
then I think it would look like, too dark.
So the contrast would be too high.
Yeah.
so you could go with this one,
but yeah, I honestly prefer the little bit lighter version.
So let's just keep it like this.
And I will now copy it here
and basically add it to our color palette here.
So for now, we just have this tint,
but probably we will have more a bit later on.
Okay. And now we need to add some spacing here.
So we want space inside of this element,
not outside of it.
So in order to preserve the background color, basically.
So when we have background color, we always use padding.
And so top and bottom we want a lot of space
because this is basically now the space
that's between sections.
And so here we want a lot of space.
Well, maybe not this much,
but 96 pixels I think will look good.
And this is also the value that we used
in our other project.
So let's go with that.
So 9.6 rem, top and bottom.
And then on the sides, for now, we need nothing.
And then since we're talking about spacing here,
let's add the exact same space also inside of the grid.
So as the gap between these columns.
So that's gap.
And then for consistency,
I'm going to use the exact same value here.
All right. Yeah, beautiful.
So this is starting to look like something, right?
Now, here we can now style these buttons maybe
as a next step.
I think that would be a good idea.
So that's the button class here.
So let's just put that here.
And actually, since this is a link
and not an actual button element,
we need to actually style these pseudo classes.
So button link and button visited here at the same time.
Let's give it our primary color as a background.
So that's where the branding of the client comes in.
And so this is one design decision we don't have
to take, fortunately.
Then the font size, let's put it at two rem.
So 20 pixels.
As for the text color, let's also make it white.
So fff.
Then let's take care of the padding.
And remember, this is an inline element.
And so in order for the padding to work as expected,
we need to make it an inline block
so that the box model applies as usual.
So this is something
that we have done multiple times already, right?
So here I'm going to go with 16 pixels,
top and bottom, and 32 pixels,
so 3.2 rem to the left and right.
So once more,
here I like to use double the size on the sides
than on top and bottom.
Okay.
And then let's experiment with some border radius here.
Maybe 15 pixels.
Of course, we are forgetting the text decoration.
And the border radius, I think,
looks a little bit too much.
Now, we could, of course, also make it really big.
Let's just see what that looks like.
Let's just remove the text decoration here very quick.
Now, and as I said,
we need to make it an inline block as well.
So display I like to use at the very top.
Inline block. Okay?
So here we have the completely rounded corners, right?
But for some reason I don't really like it in this design.
And we might circle back to it a little bit later,
but for now, I just want to make them really like,
a lot smaller.
So let's say nine pixels here.
And yeah, that's actually a lot better.
Okay.
Now, there is just one problem here,
which is that right now
these two buttons here do have exactly
the same color, right?
But that is not exactly what we want
because now both of these buttons are competing
for the user's attention.
However, only this one here is important,
and this one is a lot less important.
And so we only want this one here to be orange.
And this here should be a bit more invisible, so to say.
So the focus or the emphasis should really,
really lie on our main call-to-action button
and not on this one.
And so here we need two different styles.
And so what I will do is to,
of course, leave this one orange,
and then we can make this one white
because with this background color here,
that should then look quite nice.
So let's add here what I call a modifier class.
And once again, we have done this multiple times already,
which is to basically define the common styles
in the button, so just in this,
and then we can add some more specific styles
to this button full class,
and then also here to this other button,
which I'm calling button outline.
Okay?
So let's see what I mean by that.
So button full.
And of course I could have called it
also button CTA for call to action
or really any other thing.
But this one will have the full background color.
And so that's why I like to call it full.
And then, again,
we need all these different pseudo classes, right?
And so now what is actually specific to this one here?
Well, it is the background color, right?
So let's put that one here,
and then let's just copy this to make it a bit easier.
So the outline should be white.
Okay. Nice.
Except that we cannot see the text here.
And so that's because the white text
is also specific to this one.
And then here we want to have the darker color.
So then we will get the default color of 555.
Well, actually, we don't.
So we get this blue default link color.
And so let's set that here as well.
And now let's actually worry
about our hover states here.
So this button here, when we hover it,
we want to make it a little bit darker.
And this other outline button here,
we can actually give it the same background color
as the rest of the section when it's hovered.
Okay? So let's just copy this here.
And so here let's say hover
and active.
So how do we get the darker color?
Well, we actually already generated it.
So it's right here.
And so the darker colors are these ones here.
And so let's simply get this next one here,
which is just a tiny bit darker, but it should be enough.
So let's copy that.
And yeah.
Here, we don't need this.
And let's do the same right here.
So hover.
And here, the background color
that we want is this one.
Oh, and here, we don't need this.
And let's see.
Nice.
So it gets darker as intended.
And here, the button kind of disappears now.
So this does actually look a little bit unnatural.
So we should add maybe some kind
of white border here around this button.
And that's actually harder than it sounds like.
So let me show it to you.
So let's just try to add a border
of three pixels, solid white.
So just like this.
And you see what happens,
the border kind of gets added to the outside.
And so then when we hover it,
the entire layout jumps a little bit.
Right? Can you see that?
And so, of course, we don't want that.
So what we need basically is to add the border
to the inside of the button.
Okay?
And for that, we can use a trick
that I'm going to show you now,
which is actually not using the border property,
but the box shadow property.
So that sounds strange.
So this trick, let me actually write it down here,
to add border inside.
And so use box shadow
without any offset in any direction.
So not horizontally and not vertically.
We also don't want it to have any blur, right,
but we want to scale it basically by three pixels.
So that's basically the same three pixels
that we had here in the border.
And then, finally, we again simply make the color white just
as we did here.
Okay?
So like this,
it would basically create the same effect as here.
And so let's add the missing piece here,
which is the inset keyword.
So with this inset keyword,
the shadow will basically be added
to the inside of the element.
So exactly what we want.
And it would be helpful
if we had this inset keyword on the border,
actually, but we don't.
So we cannot do that.
So we need to use this box shadow trick
to basically replicate the border,
and then put it inset.
And so with this,
you see that we now achieve this nice-looking effect here.
Okay?
Now, right now, these hover effects here,
they don't look really nice and really professional
because if we were to go to a real-world website
and hover over some button,
then we would actually see a nice animation
from one color to the other.
But that's not at all what we have here, right?
Here, it simply jumps basically
from one color directly to the other one.
And so now let me show you yet another trick
in which we can fix that.
So basically create a nice animation using just CSS.
So to do that,
we basically come to the element,
so to the rule, which has the original state.
And so that is, in this case,
simply this link and visited, right?
So this is the state before any hover.
And so here we can now add the transition property.
So transition property is a property
that allows us to do just what it says.
So to transition between two values using an animation.
Then here we can specify multiple things,
but at least we need two things.
We need the property that we actually want to animate,
and we need to say over
how much time we want the animation to happen.
Now, in this case,
we want to animate both the background color and the color.
Right?
Now, in this case,
we want to animate both the background color
and the color, right?
And so we can actually just say all.
And so with this,
all the properties will be animated.
Okay?
And then, again,
over how many times we want the animation to happen.
And so let's just start here with one second.
So here we can choose s for second,
or we could also specify milliseconds.
So that would be, for one second, 1,000 milliseconds.
But I like to always use seconds.
It's a bit more natural.
And so let's see what happens now
as we hover over the button.
And you see that it nicely changed the color here
over one second.
You see that?
And the same is now happening here.
Now, of course, this is way too slow,
but this was just to show you the effect.
To make it even a bit more visible,
let's put the hover state to another color.
Let's say red as my favorite color here.
All right.
And you see that changed over one second.
And here, of course, it's still the same.
Okay?
And I noticed that actually we are only changing
the background color and not the color.
And so here we could also have written this.
So instead of all,
we can say just background-color, right?
Then here, we could also specify a third value
to change the type of the animation.
But that is a little bit more complex,
so I'm gonna leave that for later.
Okay?
So here, I just wanted to introduce you
to this brand-new CSS property.
So at least brand new for you
because it's been around for some years.
But for you, it is a new property,
and it is actually a really exciting one
because it allows us to do animations
in a very, very simple way.
And with animation here,
basically what we mean is to change the value
of a certain property, or of multiple properties,
from one value to another one.
So in this case,
that is from this background color to this one here.
All right?
And remember, we always put the transition here
on the original state.
I'll actually write that down here for you.
So state is not really a correct CSS term,
but I think you know what I mean there.
Now, here one second is, of course, way too long.
So let's use a better value.
And something that is commonly used is 0.3 seconds.
So that's 300 milliseconds.
And so with this,
we have a nice and snappy animation
which feels quite natural.
Beautiful.
Now there's just one more thing that we need to fix,
which is the space here between these buttons.
So this is, of course, not enough space that we have here.
So this doesn't look natural at all.
And so we need to add some spacing here between those two.
Now, how should we do this?
I mean, this button full here should probably be reused
in a later point on this site.
And so therefore, I will not simply add a margin
to the right here in this element.
Right?
I mean, of course I could do this.
Like 1.6 rem.
And that would then work quite nicely, right?
But then if I added this button here somewhere else
on the page, that would also get the same margin-right.
And so that's not what we want.
Now, another option here would
to wrap these two buttons into some grid container
or some flex container,
and then add some gap into that one, right?
But that seems like a bit too much work here.
So that's also not what I want.
But instead, what I'm going to do here
is to add a special helper class to this button here.
So let me just write it,
and then I will explain what this is.
So I'm going to call it margin-right
and sm for small.
Okay?
And so this will be like a reusable
and very generic helper class
that I can now define in my CSS,
and then add to multiple elements
to give them some space on the right side.
So let's say 1.6 rem.
Okay?
And so now here it looks exactly the same as before,
but we achieved that using this technique
of using a helper class like this.
Okay?
Now, when we use a helper class like this,
we really, really want the style
that it has to be applied
and no matter what other styles are already on the element.
So in order to ensure that,
we usually then add the important keyword here.
Because remember, that then makes sure
that this style here,
so this declaration here always has the highest priority.
So in this case, that wouldn't be necessary,
but that's just a good practice to do.
Okay?
And with experience, you will, of course,
then know when you should use a class like this.
And also, I will show you a couple more use cases
throughout this project.
But many times it is actually related to margins
that we want to reuse in multiple places,
but that we do not want to add to specific elements.
Because then, when we want to reuse them somewhere else,
it might create some conflicts that we don't want.
Okay? And I hope that made sense.
And here, of course, yeah,
we don't need to use the link
and the visited pseudo classes
because this class here is intended
to use on all kinds of elements, not just on buttons.
But anyway, let's go back here.
And now this section here looks quite nice already.
So really great work up until this point.
It looks really, really beautiful already.
Now, next up, we want to add this small component down here,
which has these customer faces
that I showed you by the start of the last lecture.
And then I think it's also time
to select a really nice typeface for our project.
Okay?
And so we will do all of that
in the next part of building this hero section.