Instructor: Let's now continue building
and actually finish building our 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 Funds.
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 enter 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 com 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.
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.
And so let's now select a couple here.
So, 400 as always.
Then I'm actually going with four, five, six, and 700.
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.
Replace this one here
and then 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.
And so that's what I want to use here on the button.
So, font weight of 600,
and that does look a lot nicer.
But finally, let's now build that component that I mentioned
in the very first part of building this Hero
which is to have like 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,
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 the delivered faces,
could be delivered images as well.
Let's actually called it IMGs for images
to be a bit more consistent
and then of course, or image element source.
So that's in IMG
and here we have yet another folder
so, img/customers/customer once.
And here, let's add some very simple alt text.
So this is just some customer photo.
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 are 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.
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.
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 like 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 him some height.
So based of course again here on all rules,
so maybe 64 pixels.
And if that is too big, we go one step down to 48.
So 64, which means 6.4 rem.
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.
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.
So, to give it some visual hierarchy here,
let's make it smaller than the paragraph text
that we had before that summary.
So, where is that?
It's right here.
So it's at 2 rem.
And so let's go one step down, which is 1.8 rem
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 fun weight
maybe of 600 to make it stand out then
a bit more from the rest.
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 cannot really add any spacing
simply to the buttons here, right?
So again, that would then be against the idea
that these buttons should be standalone components.
So, which is also the reason why here,
I added 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 lets use a lot.
So, maybe 80 pixels,
so not quite the 96,
that would be a bit too much,
but let's try 8 rem here.
And then yeah, make the images smaller.
So, stepping down from 64,
the next one is 48 pixels, so 4.8 rem.
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
'cause 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.6 rem.
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.6 rem,
but then negatively.
And so that will basically pull
each of the images 16 pixels more to the left.
Yeah, so exactly like this.
Now, for some reason the margin,
so this gap here is not really being applied.
Let's see what's happening there.
And so this is where, once again,
the dev tools come in very handy.
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.
And now that is fixed indeed.
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'll see what I mean in a second tier 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
and a color that is around the images.
So if that was white, we would use white,
but in this case, there 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.
So, that's right here.
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 spin element
which is like a generic text element.
So a bit like a diff* element, but for inline 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 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 Coolers or something website
which one more time it is on my resources page,
then we click away all this stuff.
Then here or 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 a 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.
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
'cause they belong kind of together,
then we have a bit more space between the buttons
and then a lot more space
while 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 8 rem,
while here we have,
yeah, we have 4.8 rem
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.