Instructor: 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, I will need each
of them to be inside of a container element.
And for that I will use again a figure
with the class of gallery item.
So not gala T, 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 one.
And the alt text is
And here I'm actually just gonna write a generic alt
text 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 for getting 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.
Alright, 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 gonna 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 cannot 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 two.
And you 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.
So 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 of 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 small space here
between the images, that is actually
because the images are inline elements by default.
And so if we make 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 size columns.
So three times one f fr.
Alright, but still that will
not fix the problem because now the images are still huge
and they no longer even fit our page, 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.
And 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.
Cause 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 the white background color
and the first one here
so the hero 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 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 gonna 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
will then finally also create some space around it.
And actually that was the wrong element.
So let's go back.
Ah 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 with 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 dis 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.6 rem.
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 the 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 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
is 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 this play grid, that end 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.6 REM
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 will 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 or 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.6 REM 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 green size here
at least I think it looks 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 the contrast checker.
And so yeah, well, we are actually
using this one but still it is poor.
So it should be above 4.5.
And so what I'm gonna do now
is to basically drag this here
as low as it can before it becomes 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 VS Code converted it to the lowercase Fs.
And let me actually paste then this color here
in our design decisions.
And I'm gonna say lightest gray allowed
on this one now, right?
So let's go back and.
Yeah, nice, so it looks almost the same.
As before but it is still 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 this 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 these 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 care 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 in the transition property already.
And let's again, use all longer animation time.
So the same time that we used also in the carts
and this could actually be another design decision
that we could put here in general.
So animation times,
but well let's not overcomplicate things.
And so now the animation is nice
and smooth but still there is something missing
because while it works perfectly
but it doesn't look 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.
So 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
that 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.
Alright, 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 hover 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 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.