Original subtitles

Let's now continue building

and actually finish building or hero section.

And in this part three of building the hero,

let's actually start by selecting a new typeface.

So, for that we will again use Google fonts.

And of course we need to keep in mind

the website personality that we chose.

And so that's why I will first show you

the Inter typeface, which as I mentioned before

is kind of my new favorite.

So let's just select a couple here.

Maybe four, five and 700 here.

And then we just copy these two lines here.

So we already did this a couple of times before.

And then remember we need to paste it

before our own style sheet.

And now I will simply add, Inter here first.

And then as a fallback, if Inter doesn't work somehow

then sans-serif will be used.

So let's check that out.

And now indeed, if you ask me,

it does look a lot better than before,

however, I'm not sure if this really fits

our personality type so well.

I mean, if it was just the startup personality,

then I think Inter is actually a perfect font.

But remember that we're also trying

to mix some of the personality traits

of the calm personality into our design.

And so I think that we should use

a little bit of a rounder typeface here.

So Inter is a little bit harsh.

So look just at this L here.

It's like a complete square,

like a complete rectangle

and there is nothing round about it.

And so maybe this doesn't fit so nice

with the overall message of the site,

and of course with the website personality.

So we will not choose Inter actually.

So I will remove all here and instead let's go back.

And now here of course, you could now spend a lot of time

searching for the right typeface for this design, right.

But I already did that work before

because otherwise, we would lose a lot of time here

and the perfect typeface that I think fits

really nicely into our design, is called Rubik.

So exactly this one here.

Now, okay.

And so let's now select a couple here.

So 400 as always, then I'm actually going

with four, five, six and 700, okay.

And in case we wanted italic text,

then we would actually also have to select

these italic styles, but I think we will not need that.

And so for now I will just leave it like this.

And then up here we have our selected families.

And then we can just copy this one again.

Okay.

Replace this one here, add in Rubik right here.

And wait for it.

And there we go.

So this typeface I think is really,

really beautiful and it's really a nice mix

between the startup personality,

but making it a little bit more approachable

and looking a bit more caring

by being basically a bit more round.

So comparing this L here with the one we had before.

Now it has these nicely rounded corners.

And the same is of course true

for all the other characters here as well.

So really nice.

Let's make this here actually the whole size and yeah.

So I think this is the perfect typeface.

But as I said, usually when I build a project like this,

I keep experimenting throughout the entire project

with different typefaces, even at the very end

to see which one fits best.

And so when we reach the end of this project,

we might also do that again.

Because then it's actually a perfect time

to see the entire layout changing the way it looks

simply by using some different typefaces.

But for now as a work in progress,

I think this one here is great.

Let's just make these buttons here a little bit bolder

now that we have that 600 font weight.

So you see that by default we have 400.

And then 700 is like really bold.

But to make it just a little bit less bold, we can use 600.

So that's what I want to use here on the button.

So font weight now of 600 and that does look a lot nicer.

Okay but finally, let's now build that component

that I mentioned in the very first part

of building this hero which is to have

some customer photos here and then with some relevant data.

And I thought of that because here in this description,

we have this sentence here.

So basically saying that Omnifood

delivered 250 000 meals last year,

which is kind of really impressive, right?

And so I think this gets a bit lost here in this sentence.

And so I thought that we could add a nice component here

that I saw in that other inspiration.

So in that other example, and yeah.

I wanted to do the same thing here,

basically based on that example.

So let's do that.

And if we take a look at our images, we actually do have.

It should be here in the customers.

So we have a lot of photos here

of customers that we can use.

So, six of them.

So, let's come back here into our hero-text-box

and basically add that here after these buttons.

So again, using a very generic div element.

And then I will call it delivered meals.

Then here inside of these meals,

we need one box for the face images

and then another box for the text,

or maybe just some paragraph for that text.

But anyway let's call this one here, delivered faces.

Okay, it could be delivered images as well.

Let's actually call it imgs, for images

to be a bit more consistent.

And then of course, our image element source.

So that's in img and here we have yet another folder.

So img slash customers slash customer ones.

Okay, and here, let's add some very simple alt text.

So this is just some customer photo.

Okay.

Now I'm copying this and pasting it

a couple of times because we have six of them.

So this looks a bit strange.

So here I don't really agree with the prettier formatting.

Yeah. That's a lot better.

So here you see they're called,

one, two, three, four, five, six.

So we just need to replace them here

and I will leave the alt text without any change.

Okay and then here, I want that paragraph with the text.

So let's get that actually.

So it's this one here, right.

So of course actually it's also here.

So let me just cut it from here and paste that here.

And just to make it a little bit nicer and shorter.

Let's just say 250 000 meals delivered last year.

Okay. Let's check that out again.

And indeed, that doesn't look so correct.

And so we now need to build

this small layout for this small component.

So that's called delivered meals.

And again, I will fix the CSS file here a little bit later

because it's starting to get a bit confusing.

But anyway, so we want the delivered meals

to be side by side with that paragraph.

So a good use case for using display flex.

And this time I'm actually using flex

and not grid because here I don't really care

about the size of the columns.

We will simply let the content determine the sizes.

Okay.

Then delivered, well, not meals but images.

So here, we also want these images to be side by side.

So all the child elements here of delivered images,

which are these images should also become flex elements.

And so now let's format these images.

But here I didn't give them any class.

And while I usually don't do that,

when it goes so many levels deep.

So here I would now have to call them delivered img.

But that's a bit too much trouble, maybe.

So I'm just going to select the img

using this descendant selector.

So let's give them some height.

So based of course again here on our rules.

So maybe 64 pixels and if that is too big,

we go one step down to 48.

So 64, which means 6.4rem.

And well, usually we do not need to specify a width,

because it will automatically get adjusted.

But there is some bug in the Safari browser

when the images are flex items.

And so we need to do that here as well.

So we simply set the width

to the exact same thing to make them squared.

Okay and then we also want to make them round.

And since they are squared,

we can set the border radius to 50%.

Remember that?

And so let's check it out maybe, or actually,

let's first also style this paragraph here,

which I didn't actually give a class yet.

So that's delivered text, let's say.

Okay, so to give it some visual hierarchy here,

let's make it smaller than the paragraph texts

that we had before that summary.

So where is that? It's right here.

So it's at 2rem.

And so let's go one step down, which is 1.8rem.

So 18 pixels.

So here we are using all of these ideas

about visual hierarchy with text

and with the entire layout in general as well.

And let's give it some font weight.

Maybe of 600 to make it stand out

than a bit more from the rest.

Okay, so that's starting to look like something,

but these images are way too big for now.

So let's fix that and we also need some spacing here.

So some vertical spacing between

this component and this button.

So let's start with that actually.

And well, we can not really add any spacing,

simply to the buttons here, right.

So again, that would then be against the idea

that these buttons should be stand-alone components.

So, which is also the reason why here,

I edit this margin using this helper class, right.

So I could create a margin bottom

or something class like that.

But then I would have to add it to both these buttons.

And I think that's not really worth it

because what we can do instead

is to simply add some margin

to the top of this element here.

So delivered meals.

So margin-top in this case.

And here let's use a lot.

So maybe 80 pixels.

So not quite the 96, that would be a bit too much.

But let's try 8rem here.

Okay and then yeah, make the images smaller.

So stepping down from 64, the next one is 48 pixels.

So 4.8rem.

Okay and so that is a lot better already.

Great.

Now what we need to fix is,

to add some spacing here and align these vertically.

And then one very nice thing

that we can do here is to kind of overlap

these images here on top of each other.

So that's something that we see quite often

when we have a situation like this.

Because, well, like this, it looks a bit strange.

So we can just overlap them.

And I'm sure you have seen this also in practice before.

So starting with the spacing and vertical aligning.

That is right here on this delivered meals, flex container.

And so here we need to then add align-items.

Remember to center everything vertically.

And then to add some spacing.

We use our gap property and let's use 16 pixels.

So 1.6rem.

Okay. So that fixes that first part.

And now remember, the second thing

that we wanted to do is to put these images

on top of each other.

So basically we want to decrease the spacing between them.

And so we might think that

since we are using a flex container here.

So this delivered images, which contains the images

is also a flex container.

And so we might think that here we could set

the gap property to a negative value.

However, for some reason that doesn't really work.

And so here we actually need to work

on the individual images themselves.

So here we can add a margin to the right,

with a negative value.

And so let's again, use for consistency, 1.6rem.

But then, negatively.

And so that will basically pull each of the images,

16 pixels, more to the left.

All right, yeah, so exactly like this.

Now for some reason the margins,

this gap here is not really being applied.

Let's see what's happening there.

And so this is where once again,

the div tools come in very handy.

Let me just make this a bit bigger so you can actually see.

So the problem here is that

the flex container basically ends right here.

And the reason for that is that all the images

have this negative margin.

Well, it's not really visible here.

But we need to basically remove

the negative margin from this last one here.

That should then fix it.

So then this end of the flex container should be back here.

And then we should be able to see that margin

that is now on top of the image.

So let's select the last one.

And for that, fortunately we have

our very handy last-child pseudo class.

And so here we set the margin back to zero,

So we could have written margin right as well.

But here basically we're setting

all the margins back to zero.

Now, okay.

And now that is fixed indeed.

Right, now just one more thing

or actually two more things.

So first I want to make this one here a bit more visible.

And so I'm also giving it this orange color here.

And then another thing that we do many times

when we overlap images like this is to then

add a nice small border to each of them

to create basically some visible space between them.

And you will see what I mean

in a second here once I do that.

So basically what I just said is to add a border.

Let's say three pixel solid

with the exact same background color

as the color that is around the images.

So if that was white, we would use white.

But in this case, that is this background color right here.

Actually it is this color, but it's not coming from here.

I mean, it is here from this section-hero, right.

So that's right here.

Right, so this looks a bit nicer.

It's just a small detail you might think in the small touch.

But it makes it immediately look a bit more designed.

So, as if someone thought

a little bit more about this component.

And so that is always a good thing to do.

Now, finally, as I said,

I want to make this text here also orange

in order to make it stand out a bit more.

So let's wrap it in a span element,

which is like a generic text element.

So a bit like a div element, but for in line elements.

So let's select that again with a descendant selector

instead of adding just another class there.

So our brand color is this one here I think.

Let's just make sure.

Yeah, it's always the one that ends in 22.

And since we're already here,

let's make it even a little bit bolder.

So we going all the way to 700.

Okay, nice, let's just make sure

that the contrast ratio is actually good here.

Because here we are actually using

this orange color on top of another orange color.

Even though this one here is very light.

But I'm actually not sure

if it has the correct color, contrast ratio.

So to check this, we go to this coolors

or something website,

which one more time it is on my resources page.

Then we click away all this stuff.

Then here on more, we come to contrast checker.

Then we paste our text color here.

Well, I'm not sure what that is.

It was this text that I copied before.

So indeed I want this

and the background color is this one here.

And so you see it is very poor.

So this red background here means that we are in trouble.

So let's use the next dark that we have.

So this one here.

Let's copy this.

Let's just make sure it's here already.

Actually, it's not.

So just again, to make sure we have everything

in one place, let's put that here.

And it is still poor here, but down here,

it just became yellow, which is for our large text.

But if we take a look here,

then we see that level AA requires 3.1 for a large text.

So at least 18 pixels or bold text.

And in our case, the text is actually very bold.

And so I think we're good to go with that color here.

So let's replace that and there we go.

So you think that this might be

a very minor thing to worry about.

But as I said, I believe

and the whole web developer community

believes as well, that we should really strive

to make our websites as accessible as possible.

And so I think it's not too much

to worry about a small detail like this.

Okay and with this, we actually finished

building this hero section.

So I hope that you like this result.

I think it looks really, really beautiful.

So great result here.

We have some nice visual hierarchy

where this text here is closer a little bit

to this one because they belong kind of together.

Then we have a bit more space between the buttons

and then a lot more space.

Well, actually not that much space.

But still, there's a lot more space here than here.

And so again, we create some,

a nice visual hierarchy right there.

Let me just remember how much we used here.

Looks like it's not that much.

It was 8rem, while here we have...

Yeah, we have 4.8rem.

But then because of the line height,

it is actually a bit more

as we can see here in this blue box that is around it.

But still I think this looks good.

Also the spacing between these columns

and around everything here looks quite decent.

And so, yeah, I think this is done for now.

And so in the next lecture,

we will then also build the header here.

So putting the logo here

and also start working a bit on the navigation.

So that is yet another exciting step

to really polish off and finish

this whole introduction to our website.

And so hopefully I see you there very soon.