Original subtitles

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

and, well let's increase it actually even more to 1.05,

and also let's make it darker.

So we have all our texts at 5, 5, 5,

and this one we will make 3, 3, 3, so another gray color.

So let's add that here to our pallette, 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 2 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 H 1 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 a 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 a 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 H one, 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 a 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 this spacing here.

And so let's not actually tackle all of the spacing

in the 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 the 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 a 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 will copy this hex coat.

And then remember about this tool that I mentioned to you.

Which is the tints and shades generator.

And as always, this linker will be on my resources page.

But the one that I like to use is this one.

So maketintsandshades.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.

So, or actually the section hero.

So let's move that up here by hitting alt or option up,

give it a safe 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 palettes 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,

so, well, maybe not this much,

but 96 pixels, I think will look good.

And this is also developer

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 also dial 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 visit 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 2 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 it's 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?

And 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.

And of course we are forgetting the text decoration

and a 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.

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 like a lot smaller.

So let's say 9 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 5, 5, 5.

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 to this

and I'd 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 3 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 insight.

And so we 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 3 pixels.

So that's basically the same 3 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 in facture.

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 to 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 to 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 1 second.

So here we can choose S for second,

or we could also specify milliseconds.

So that would be for 1 second, 1000 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 not 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 it 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.

We'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 it is, 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 side.

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 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 make 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 to visit the 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 the small components 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 type phase for our project, okay.

And so we will do all of that in the next part

of building this hero section.