Jonas: Well, welcome back and let's keep working
on our beautiful Omnifood project.
And if you will remember correctly
we actually did skip one section
which is the featured-in section.
So I first wanted to show you some stuff
in the how it works section
and so that's why we skipped the featured in one
but now let's go back a step and work on that one.
And so here what I want to do
is basically exactly what is here in this design example.
So just without the text that is there in the bottom
because we don't have that.
But still what I want to do is to have these logos there
all basically with the same height
and then some featured in text on top of all that.
So that shouldn't be all too hard.
And so let's get started.
So let's add that right here before
well actually after the section hero.
So here between the hero and the how it works section
we will add this section
that I'm gonna call section featured.
And once again we're going to want this content
to be centered in the view port.
And so for that
we have our a nice container already created.
So remember that this container gives our element
basically a fixed width of 1200 pixels.
It also gives it that nice padding at both sides
and makes it also centered in the view port.
And so now let's fill it in with first the heading
and then also the five logos there side by side.
Now for the heading here
I will actually use again an H2 element.
So H2, and you might be surprised by that
because this H2 element will look completely different
than all the secondary headings that we have
on the rest of the page,
because here we don't want a huge title
but instead just like in that example
that I just showed you,
we just want like this very small great text
just basically introducing this section
and saying that, well basically Omnifood has been featured
in these five publications.
So again, you might be surprised why I'm using the H2 here.
But the reason is very simple
because this is yet another section
and this heading is the main heading of that section.
And so it should be a secondary heading.
So we have an H1 in the very beginning
and then in each section we want an H2.
So even if it looks very different
from the secondary heading
the meaning should still be the same.
So of course I will not call it here a heading secondary
so I'm not gonna reuse that style.
So instead I'm gonna call it heading featured in.
So as featured in.
Now, okay.
Then here I'm adding like a container element
for the five logos and I'm gonna call it logos.
And then here finally we have the five local images.
So that's again in img, and then here is in logos.
And then let me start with TechCrunch here.
So TechCrunch logo for the old text.
And now I will again use that shortcut
of option or Alt Shift down just to copy it five times.
So next, let's use Business Insider
then the New York Times.
So I actually experimented here
around a little bit before to find what looks best here.
So the best combination
or the best order of these icons or these logos.
And that doesn't really matter here,
but well I'm a bit of a perfectionist.
And finally the USA Today.
And if we take a look now
then that will look pretty terrible.
Yep, just like expected, because these logos are all huge
and they have all these different colors.
But nevermind, we can style all of that easily as always.
And let's start at the top.
So with the featured in heading and doing that of course
before the how it works section here
let me copy this one here
again to also create a nice visual section here
in our CSS file.
Okay, the font size, let's make it quite small really
because we will actually make it upper case.
So just like these subheadings
like we had in the previous section
I also want to make this one upper case
just to make it consistent with that.
And also for consistency, I will add the same letter spacing
of 0.75 pixel, remember that.
And also the font weight of 500.
So I think that's also what we have in the subheading.
Let's just check that out.
And indeed, here it is.
We're just making this one even a bit smaller.
Okay, let's see.
Okay, that's already looking good.
Let's just center it
and then we will also adjust the color a little bit.
But let's do that actually after fixing the logos
so that we can find a nice gray color
that combines well with the logos.
So text align center.
And since we're here, let's give it some margin
to the bottom of 24 pixels.
And we should also add some padding
to the entire section actually.
So padding and top and bottom,
and will go a lot less than 4.8 rem
or 4.6, which is what we usually had.
So I will just use half here for now.
So this is a very small section
and so we don't need all of that padding.
So this looks quite okay,
but of course now let's make the icon smaller
or the logo smaller and also put them side by side.
So logos is the class name of the container.
And once again, to put them side by side
I will make this a flex container.
Now you might say here
these images are already in line or inline block elements.
So they will automatically be side by side, won't they?
And there you actually have a point
but if I don't use Flexbox
then it will be a little bit harder to space them.
All right, and so even with images
I always like to use Flexbox.
Now here I'm gonna use justify content
but let's actually do that later
because for now I want to make the logos themselves smaller.
So notice how I didn't add a class to each of them.
So I'm just selecting them here
with the descendant selector.
So let's give them a height of 32 pixels
which is one of our values.
Or let's try 40 pixels for rem.
And yeah, for now that should be enough
just to see what happens.
And that's way too big actually,
let's go one step down actually to 3.2.
And I'm using the height here to style them
and not the width, because that looks a lot more natural.
Well, there is still something wrong here.
Let's see.
So this is not even applying, oh, it's called logos.
So that is why.
Ah, and that's better.
So let's again try with four, which is what I had before
but still this is a bit too big.
So let's leave it at 3.2 actually, now okay.
And now here as for the spacing
let's simply use Flexbox
to automatically figure out the spacing for us.
So justify content space between
let's start with that one and yeah, so here we go.
So this looks already quite nice, doesn't it?
However, actually I visually I think that this content here,
so these five logos they should not be as wide
as the rest of the content.
So here they are perfectly aligned,
and that is of course, okay,
but I want to show you another way.
So here, instead of using a space between
we can also use space around.
So let me show you the difference.
And so basically what it will do is that
now half the space that is here between these two
is now also here on the right side
and that becomes nicely visible like this.
All right, so basically this space here
is now both on the left and the right side.
So it's here, and then imagine it's here.
So it ends here,
and then here starts another of those blogs
and yeah, all the way here to the end.
Where then again, we have this small one,
and I think that in this example
it actually looks a little bit nicer.
So having it a bit more narrow
then I think that the spacing here is a little bit too big.
So let's fix that before we can then finally
make these images here all like gray.
So we don't want them colored like this
because this way they do take away a lot of the attention.
And yeah, so we don't want that.
So they should just take like a supporting role
here on our page, but shouldn't be so attention grabbing.
And also it just makes the design look messy
if there are so many colors around.
So instead we just want or design to be orange
then with all the variations of that orange, of course
but not with green and blue
and another shade of blue and so on.
So of course we could go
into some image manipulation program
and make them all like gray
but that is not the point of this lecture
because we can actually do this in CSS with some tricks.
So let me show you how
but first we're gonna reduce that spacing there.
So we have 4.8 which looks okay at the top,
but at the bottom let's take it down a notch
and then zero at the other side.
And now here, let's talk about making these images gray.
So on images we have a new property
that we have never seen before
which is called filter.
And with filter you can do all kinds of stuff.
So if you take a look at the list
that VS codes suggests to you here,
then the main one that might come here to your attention
is gray scale.
So let's try that.
And then here we need to define a value
between zero and one or between 0% and 100%
and I prefer somehow to use percentages.
So let's do this and let's see the result.
Okay, so that is indeed a lot better already.
But still the images are not like completely gray.
So here, for example,
this part here is a lot lighter than this one,
which is like almost black.
And here this is also quite black and a text here as well.
But again, we don't want that.
We just want everything to be gray.
So just exactly like in the example
that I showed you in the beginning of this lecture.
So I will show you how in a second
but let's also play around a little bit with these.
So with these filters, because they are quite fun.
So for example, we can blur images
with different pixel values, and as we increase them
the images get more and more blurred.
So that can be fun.
Then we also have things like hue rotate
so it will then like completely change the colors
but maybe more useful, we can have change in saturation.
So we can hyper saturate images like this if we want.
But the real one that we're looking for
is actually in this example, it's brightness.
So the brightness here, it's now like at 50%
but if we change it all the way to zero
then you see the images turn completely black.
So now it is not like before
where one half of the logo has one color
and the other one has another color, and the same here.
So now everything is black.
And so this for now is perfect.
So let's actually use that here.
So brightness zero.
So this will make the image black.
But we want it gray.
So we can use the opacity property.
And I'm not sure if we talked about this one before
but basically it does exactly what the name says.
So like 100% is no opacity at all
which makes the image just completely visible.
So again, nothing changes now because it is at 100
but if we take it down
and I will use now Shift down to go in bigger steps,
then you see it becomes all the way to completely invisible.
And so this is now the trick
to make it basically gray instead of black.
So if we used like an opacity of 50%
I think this is a very nice gray color for us.
So of course we could have used, I mean not we could have
but we could use this on any other element.
So not just on images, but here it's just another image.
So making it also 50%, well, I don't know, opaque maybe.
But yeah, giving it an opacity of 50%
makes it basically look fade out a little bit.
So that's 50% here.
And again, here we could also use 0.5 instead of 50%.
That works exactly the same way.
Okay, so that's beautiful.
And now just this text, which is a bit too dark.
So let's fix that.
So right here, and again,
I'm gonna go with one of these
where all the three numbers are the same
and in this case 999,
and we could experiment with different ones
but I think that this one is the best.
Yeah, so this color is now quite similar to these ones
while maybe a bit darker would be better, like 888.
So again, going down is going in the direction of black
because black is 000.
And so if we increase the values, the color becomes darker.
And yeah, that looks perfect to me.
And again, the color contrast here is probably not perfect.
So I don't think that this will pass
but this is another one of those cases
where it is not 100% important.
It is actually quite close.
So if the text was large or bold, then it would be okay.
And yeah, well, we can actually say that the text is bold,
but it is very small.
so we can say that it doesn't really pass.
And so this is one more time
where actively breaking the rule here,
but as I mentioned before
I don't think it's a big deal here
because what matters are really the logos.
And so now they are here look very nicely
and still play just a supporting role.
So without being too attention grabbing
but still showing the user that Omnifood has been featured
and this big publications like TechCrunch
or the New York Times.
And so immediately this company seems a lot more legit.
Okay, but anyway, that's actually it for this small section.
And so now let's move on to the next one
which is going to be after this one.
So that will be our meal section.
And that's yet another really exciting one
because we will design
some very, very nice looking carts there.
And so hopefully I see you there as soon as possible.