Original subtitles

Let's continue building our Testimonial Section

by now adding the gallery.

So here we already have

the element with the class of gallery.

And so this is where now we are going to add

our 12 images.

And so also the gallery will then, of course,

be our grid container.

Right?

Now, here I could, of course, now simply put

all these 12 images one after another,

but I actually will want to build a very nice

hover effect on these images.

And so for that, we'll need each of them to be inside

of a container element.

And for that, I will use again, the figure

with the class of

gallery

item

So, not "galltey"

but more like this.

And now let's add the image here.

So img

and then

reach into the gallery folder

and then here "gallery 1"

and the alt text is,

and here I'm actually just going to write a generic alt text

and instead of describing each of the images perfectly,

so I will just write "photo of...

beautifully...

...arranged food"

because this is what all these images here are all about

Here forgetting to close the element.

Yeah, that's it.

So the figure element is really

the perfect container element for images.

So many times when you see, for example,

in a blog post images,

then usually they also have some kind of caption.

And for that we can use the fig caption element

and then write something basically below it,

something like this.

All right. Now, in this case,

we actually don't want any caption.

We simply want to display the image

inside of this container.

And again, the reason for that

is a really cool hover effect

as I'm going to show you in a minute.

So I will turn this off here, just so you know,

that we can also use the fig caption element

inside of the figure element.

So we can not use this one outside.

It is only allowed to be used inside of figure.

Okay.

But anyway, let's copy that here.

Let's remove this and now just "gallery 2",

and you'll see here it is now a different image

and

Yeah, so just an image inside of a figure.

And so now let's just copy this a couple of times,

I'm not even counting here.

If it's too much, we just delete the remaining ones.

So "3",

"4",

"6",

So we're halfway through

Because it's 12 images

"8",

"9",

"10",

and we're just missing one

pasting that here again.

And number 12.

And there we go.

So that's the HTML or our gallery, very simple.

But here, of course, it is going to look crazy.

And it does.

So of course we need to make them a lot smaller

and notice these... a small space here between the images

That is actually because the images

are inline elements by default.

And so if we made them a block element,

then this would disappear.

And this is something important that you need to know,

because sometimes we get these annoying white spaces

around images, and then this is how you fix that.

So

gallery-

item,

and then I didn't add a class here to these images.

So I'm simply using the descendant selector here.

And so

to fix that space,

all we have to do is to set them to a block level element.

And so now you see that the spacing is gone.

Okay.

But now of course, what we will want to do

is to actually create our grid.

So that's right here on the gallery element.

So gallery, and once again,

here we are creating like our own new grid

instead of using the predefined one.

So display: grid,

and then

grid-template-columns.

And we want three equal sized columns.

So three times, 1fr.

All right,

but still that will not fix the problem

because now the images are still huge

and they no longer even fit our page.

All right.

And so of course the solution here

is to make these images here flexible.

So simply giving them a width of 100%.

And so that should fix it.

And it did.

Nice.

That's starting to look like something already.

Let's just add some small spacing between the images.

So not to have them glued together like that.

And a very small gap here should be enough,

Like just 16 pixels.

Something like this.

Then let's go back.

And that looks beautiful.

Okay. So the gallery itself is actually already done.

Right?

And so let's think now about this entire section,

because there is still a lot of stuff

that we need to fix here.

So first of all,

to make this section here stand out a little bit more,

especially because we have these

two content blocks here, side by side,

we should now give this section here

a different background color.

So you see that we have these three sections,

which all have to white background color,

and the first one here.

So the one here has this very light orange tone.

And so I think we should now

finally go back to having a section

with that orange tone as well

to make it stand out a little bit more from the rest

and to create some nice visual contrast here

between the sections.

So let's do that.

And I think it is this one here.

Right.

So that looks already a lot nicer.

I think at least,

but now there's still something strange going on

because it would be a lot nicer,

if the spacing, for example, here at the top

would be exactly the same as it is here between these images

and also here at the right side.

So the gallery is glued right now,

here to the side of the browser.

And it would be nice to basically also have

the exact same spacing that is here

inside of the gallery around it.

So that would make it look a bit more natural.

And so what we need to do is to basically remove

this huge padding from the section,

and instead put it inside of this container right here.

So having this big padding only inside of this left side.

Okay.

So I'm going to remove that from here

and put it in the testimonials

and actually we will want it basically around

the entire thing, so not just top and bottom,

because with this we would then finally

also create some space around it.

And actually that was the wrong element.

So let's go back.

Oh yeah.

So it should, of course, be here

in the testimonials container.

So not just around the grid container,

but really inside this entire thing.

So including the headings.

Right.

And yeah, so that is what I was going for.

So at this, we have the exact same spacing here

as we had in the other sections.

And also below it.

And also we have the same spacing here on the left side.

So that looks perfect like this.

But now let's think about the spacing

that I was talking about earlier.

So basically adding this spacing around the gallery,

that is also inside of it.

So that shouldn't be too hard.

We can simply add some padding, also inside the gallery.

So padding 1.6rem.

And so again, the exact same spacing as we have here, right?

And that is exactly what I was talking about.

So that looks really cool, I think.

And it's nicely integrated now, basically into this section.

Now we just have some problems here.

I would say, for example, that here,

the text is quite narrow

and it is breaking here into these five lines in this one.

And in this one while here at the top,

we only have four lines.

So all in all, it is looking a bit narrow.

And I think even the spacing between these two

is not enough.

So the spacing here, I think between the rows is good,

but it's many times to case that for the columns,

we need some more spacing.

So let's actually increase that

before we do the other thing that I was talking about.

So...

The row gap is,

is good already,

but now let's add a lot more column gap.

So many times it doesn't look so natural

to have the same gap in the row and in the column.

And so the column many times needs a lot more.

So that looks a lot better in terms of spacing,

but then we made the problem even worse

of the content here being too narrow.

So there are two things that we need to fix here.

First of all, there is too much space

between the gallery and the testimonials here.

And let me show you that in the inspector.

So the inspector, once again,

it's really an invaluable tool here.

So what I mean here is that, of course,

around the testimonials container,

we have our padding of 9.6, right?

And so that's basically the space that we would want

between these testimonials and the gallery.

However, here, inside this grid, we also have this spacing,

Right? And so this space we actually do not want here.

So instead of using this predefined grid here,

So our big layout grid,

we will actually once again, create our own grid.

So for this reason that we can remove then the gap here,

but there's also a second reason

which I will talk about next.

So that is the second thing that I mentioned earlier.

So I said, the first thing is that

the spacing here is too much,

which is because we're adding the padding

plus the column gap.

But then the second problem is that

I think that actually this gallery here is a bit too wide.

So right now, of course, these columns have the same size,

but we should fix that.

Okay. But first let's do that first thing.

So removing this predefined grid from here

and creating our own grid for the section testimonials.

So that's here.

And so display: grid

and then grid-template-columns,

and for now, I will again make them equally sized

just so we can see that first problem being fixed.

Okay.

And so now you see that the only spacing that we have here

is basically coming from this padding

and then also that 1.6rem of padding

that is coming here from the gallery.

But I would say that we can neglect that one, right?

So this is a bit better now,

but still we have these two here

in five lines of text and not just four,

which would make them look a lot better, like here.

Also this content here is very dense.

It's like a big wall of a lot of colorful and big content.

And so if you take a look at this,

it kind of looks as though this right side here

would be a lot bigger than the left side, right?

It has a huge visual impact.

And so I think we can fix that a little bit

simply by making this gallery a little bit more narrow.

And so that will then of course

free up some space here for this left side.

And we'll also visually make it look a lot more balanced.

Okay.

Now here, of course we don't want to make huge changes.

So for example, we don't want this column

to be twice as wide as the other one

That would be way too much. Right?

So like this, it also doesn't look good.

So one trick that I like to use when I'm using frs here

is to use them as though they were percentages.

So remember that these two values here,

they actually don't need to be one

in order for the columns to have the same size.

They simply need to be the same number.

So we could also say 50,

and 50.

Right?

So that would then look exactly the same as before.

And so now this looks a little bit like percentages

where this one is like 50% and this one is another 50%.

Just remember that we do not use percentages here

because then we wouldn't take care of the gap.

Now, here, we don't have a gap, but anyway,

we always should use fr.

Now the point of this is that now we can say

that this one should be like 55% and this one, just 45.

And so with this, we still have 100.

And so the width is the same as before,

but it is now going to be a bit more balanced.

So you see that?

So this is I think a lot better.

And again, of course,

these two together do not need to be 100.

We just do it like this,

so we can think of this in terms of percentages.

So that's just a nice trick that I like to use myself. Okay?

Now, if we check this out, this will create a problem.

Well, actually not right now,

but let's see that we make this a bit smaller.

Then we would get all this weird spacing here

between these rows. Right?

And we do not want that, of course.

And so here in our grid, let's define

align-items: set to center.

And so that will, or at least it should fix that problem

Right?

Now, of course, the spacing here is gone

like that uniform spacing

that we had with this 1.6rem at the top as well.

And so this is not ideal,

but we will fix this a little bit later with media queries.

Okay.

For now on this screen size here, at least, I think

it looks really, really nice.

Now just a small detail that I mentioned before

is the color of this text here.

So remember that it is 777 on now this background color.

And so the contrast ratio might not be great at this point.

So let's actually check that

here in contrast checker.

And so, yeah.

Well we're actually using this one.

But still it is poor. So it should be above 4.5.

And so what I'm going to do now

is to basically direct this here as low as it can

before it becomes a yellow, basically.

Right?

So yellow means that it is at least 4.5,

which means it is acceptable.

So this gray color here is basically the last one

that we can use safely on this background color.

So let me copy it and use this one instead.

Okay.

So we, as code, converted it to the lowercase F's

and let me actually paste then this color here

in our design decisions.

And I'm going to say

lightest gray allowed on...

this one.

All right.

So let's go back.

And...

Yeah, nice.

So it looks almost the same as before,

but it is still a significantly lighter than this one

creating this nice visual hierarchy

between this more important content and then this one.

All right. And with this,

we are almost finished with the section.

So we could actually say we are finished,

but remember how I said that I wanted to show you

a nice hover effect here on this images?

And so let me now show you what I'm talking about.

So basically what I want to do

is that whenever we hover over one of these images

that they'll scale up

so that they become a little bit larger.

So that's quite simple.

So we will again, select these images

and then we will define the hover state on the images.

So basically what happens as we hover over the images.

So here again, we use the transform property,

which remember has all kinds of different options.

So we have used all the time the translates functions here,

but there are other things that we can do.

For example, we could rotate them.

So let's try that like

45 degrees.

So "deg" stands for degrees.

And so that's yet another unit that we can use in CSS.

So of course this is not what we're going for,

but we could do this.

So now the images rotate.

And sometimes if you're building

something like a more creative layout,

then this might actually be a nice effect to go for.

But in this case, what I want to do is really to scale.

And I think we already did this before at some point.

Let's try 1.1.

Okay.

Like this.

But now of course let's make it smooth.

And so remember that all we have to do in order to do that

is to add the transition property on the original element.

So transition: all.

So which I'm always using, because then if later

I add some other things here to the hover effect,

then I can be sure that it is covered here

i the transitioned property already.

And let's again use our longer animation time.

So the same time that we used also in the cards,

and this could actually be another design decision

that we could put here in general.

So animation times,

but well, let's not over-complicate things.

And so, now the animation is nice and smooth,

but still there is something missing

because well, it works perfectly,

but it doesn't look really, really nice like this.

So I think it does look a bit weird and a bit off,

and so now that's where

this container element comes into place.

So the element into which we wrapped each of the images

still remember that down here,

each of the images is inside of a figure, right?

And so now as we scale up the images,

they will basically overflow their parent element.

Right?

And we can see that here in the inspector.

So if we keep this one selected,

Well...

Cannot really see that. But if we turn on the grid,

then it should become visible, and yeah.

So basically each of these squares here

is one of the figure elements.

And so now as we hover,

the image actually overflows dead figure, right?

And so what we can do to prevent that, remember

is to simply set overflow to hidden.

And so that is the missing part of this trick

and of this cool effect.

So...

gallery-item

overflow:

hidden.

And let's remove this,

or actually don't yet.

And so you see that now

it does no longer overflow the figure

because we fixed that with, once again, overflow: hidden,

which is a really important property

that we need all the time.

All right.

And so now the images look as though they were

the exact same size as before,

but they scale in a little bit.

So they kind of look as though they move towards the user

as we hovered them.

And so this is something that I really like,

and it is just another cool trick

that we can do using the power of CSS.

Nice.

So very, very beautiful section here, I think.

And I'm pretty sure that you also really like it.

So that's just putting all the design guidelines

that we used before into practice

together with the power of CSS to achieve it.