Original subtitles

welcome back

and let's keep working on our beautiful Omni-food 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. Right?

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 how it works section,

we will add the section that I'm going to call

section featured.

Okay. And once again,

we're going to want this content to be centered in the

Viewport.

And so for that we have,

or 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 Viewport.

Okay.

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, gray text,

just basically introducing the section and saying that,

well basically,

Omni-food has been featured in these five publications.

Right?

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.

Okay.

So of course I will not call it here,

a heading secondary.

So I'm not going to reuse that style.

So instead I'm going to call it heading featured in.

Okay.

So S featured in.

Okay.

Then hero.

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 logo images.

So that's again in IMG.

And then here is in logos.

And then let me start with Tech Crunch here.

So Tech Crunch logo for the, all the text.

Okay.

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 it doesn't really matter here, but, well,

I'm a bit of a perfectionist.

And finally the USA Today.

Okay.

And if we take a look now,

then that will look pretty terrible.

(Laughs softly).

Yup.

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

So just like the subheadings,

like we had in the previous section,

I also want to make this one uppercase.

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.

Okay.

And we should also

add some padding to the entire section actually.

So padding and top and bottom,

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

Okay.

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.

Okay.

Now you might say here,

these images are already in line or in line 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 a Flexbox.

Okay.

Now here, I'm going to use justify content,

but let's actually do that later,

because for now I want to

make the lowest 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,

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.

Okay.

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 4, which is what I had before,

but still, this is a bit too big.

So let's leave it at 3.2

actually.

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

Okay.

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 our designed to be orange

then with all the variations, often orange, of course.

But not with green and blue and another shade of blue

and so on.

Right.

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 going to 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 suggest 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.

And so let's do this and let's see the result.

Okay.

So that is indeed a lot better already.

Right?

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.

Then here this is also quite black

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

Right?

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 U-rotate.

So...

That will then like completely change the colors,

but maybe more useful,

we can have like change the saturation.

So we can hyper saturate images like this if we want.

Right?

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, right.

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.

Right?

And so this is now the trick to make it basically gray

instead of black.

So if we use like an opacity of 50%,

I think this is a very nice gray color for us.

Right?

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 a 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 going to go with one of these,

where all the three numbers are the same,

and in this case 9, 9, 9.

And we could experiment with different ones.

But I think that this one is the best.

Right?

Yeah.

So this color is now quite similar to these ones.

Well, maybe a bit darker would be better like 8, 8, 8.

So again, going down

is going into direction of black

because black is 0, 0, 0.

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.

Okay. 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 I'm 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.

Right?

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 Omni-food has been featured

in this big publications,

like Tech Crunch or the New York Times.

And so immediately this company seems a lot more legit.

Right?

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 or meal section.

And that's yet another really exciting one

because we will design

some very, very nice looking cards there.

And so hopefully I see you there as soon as possible.