Instructor: Welcome back to our next project section,
which is the very exciting testimonial section.
And here, remember, we had already decided
in the very beginning of the project,
that we were gonna put the customers
and the photo gallery side by side.
So, what we're gonna do here
is a very different section this time
which is going to go all the way from the left side
to the right side of the browser.
So, not having a centered container
but instead filling up basically the entire available width.
And so that is what we call a full bleed section.
So, again, we will have the gallery on the right side
and on the left side we will have
this two by two grid of customer testimonials,
just like in this first design example
that we have here on the right side, okay?
So, this is going to be really exciting
because it's gonna be quite different
from the other sections.
And so let's get to work.
All right.
And as always, let's add a new section
right after the previous one.
And I'm calling this one, as you can guess,
the section-testimonials.
And now, as I just said before,
here we are not going to use a container,
so that container element that we created before,
to center the context in the page.
So, instead, we will basically have two boxes,
one for the testimonials and one for the gallery.
So, let's do that here.
So, let's write that just here.
And then another one for the gallery.
And so these two, we want them to be side by side, right?
And so what we can do here is to use our grid class
right here on this section.
So, grid and grid, two columns.
So, let's just quickly check that out.
And I need to reload the browser here manually.
So, sometimes that is necessary.
And indeed, now here we have the testimonials
all the way to the left side
and the gallery all the way to the right side, great.
So, let's add some padding here to this section for now
to give ourselves some more space,
and then we will simply start by filling up the content
for the testimonials.
So, I will again copy this
and then section
like this.
So, let's actually reach into our content file
and get the testimonials from there.
So, yeah, right here.
So, this is the first one here from Dave Bryson.
So, let's paste that here.
And now we need to mark this up.
So, we want a customer photo,
we then want this text here in another element
and then below that is the name.
So, Dave Bryson in here.
And so we need some kind of container element
for all of this, right?
Now, we could of course use a simple div element,
but here, actually, there is another element
which makes a bit more sense,
which is the figure element.
And I'm not sure if we have used the figure element before,
but in any way, we can use it to represent
some self-contained content,
and which sometimes has a caption.
So, this is perfect for things like diagrams or photos
or code listings or really anything that can have a caption
and that is self-contained.
And a testimonial, like the one we are about to write here,
I think qualifies quite nicely for that.
So, you will see the figure element
being used for this kind of thing all the time.
So, let's call this one the testimonial.
Well, first, let's start with the image, actually.
So, image, then it's probably in the customer's folder.
And there we have actually a named photo
for each of them.
So, this is Dave.
And so the photo is probably Dave.jpg, right?
And now for the actual testimonial content
we can use the blockquote element.
So, blockquote, as the name says,
is basically for representing quotes.
So, things that someone else said.
And so a testimonial is exactly that.
And the same is true for something like a product review
or even to quote someone in the context of an article
or a blog post, for example.
So, blockquote is perfect in this case.
Let's call it a testimonial text.
And then put that right there.
Here we forgot the class right here.
So, testimonial image and also the alt text.
Let's say photo of customer Dave Bryson.
And now we just need to mark-up the name here.
And for that we can use a simple paragraph
or a span element.
So, that doesn't really matter.
I'm just gonna use a paragraph here.
So, testimonial name, let's say,
and then let's add his name right there.
And then it's also common to add a dash
in front of the name.
So, for that, we can use just another HTML entity.
And this one is called mdash.
So, if we hover over that, you see, there it is.
So, instead of just using this,
which wouldn't look so great,
the mdash is exactly what we're looking for.
So, checking that out.
Here we go.
So, the image is always a bit too big,
but this time it's not so bad.
So, we can actually, I think, start adding
the rest of the content here
before having to adjust the CSS first.
So, let's copy all of this
and put them all one after another.
So, we have four testimonials,
so four code blocks here.
And the next one is...
Oh, need to go back.
Let's copy all this.
And I will immediately paste it actually
into this blockquote element.
And then we just remove the name here
also here.
And then...
Ah, here we go.
So, let's see.
Indeed now the second one is great.
And now let's just replace the third and the fourth one.
And so this part of filling up the the content
is always a bit boring,
but well, the content is the most important thing
so we have to do it, of course.
So, here and here.
And just one last time.
And just replacing the name here one last time.
Okay, great.
So, let's check that out.
And there we go.
So, now what we want to do next
is to put these four here into a two by two grid.
So, that's easy.
So, let's do that.
And for that we need to select this testimonials
which is basically the parent of these four.
And so we will make this one here, our grid container.
Now, you might think that we could use, of course,
the reusable grid that we created before
and indeed we could,
but probably the spacing on that one is not ideal.
So, the gap that we use there,
which makes sense for bigger layouts,
is probably too big for a smaller component like this one.
And so here we simply create our own new grid.
So, basically that reusable grid
that we created is more for the overall page layout.
So, grid template columns, 1fr and 1fr.
And then let's create some smaller gap.
So, maybe 4.8 rem.
That's always a good value to start with.
And let's also make the image immediately a bit smaller.
So, testimonial-img.
And now this image, we actually don't want it
to be flexible.
So, let me show you what would happen if we did.
So, setting a width of 100%
would make it probably way too big.
So, that's not what we're looking for.
Indeed, it is nicely fluid like this.
But again, yeah, these images here,
we want them to be a fixed width.
So, let's say instead 64 pixels.
And since these images are squared,
the height will then automatically be figured out
by the browser.
We also want to make them round,
and again, since they are squared already,
we can just use border radius 50%.
Okay, nice.
That's starting to look a lot better.
Now, there is no spacing here yet on the side here
but we will fix that a little bit later.
So, for now, let's just take care here of the visual styling
just of this text here.
So, very quickly we want
the testimonial-text
and the testimonial-name.
So, here we're going to use our common 1.8rem again.
So, this is the one that we have been using all the time
for all kinds of contents.
And so it's nice to keep it consistent.
And the same for the line height as well.
So, again, using 1.8rem here
or actually of course not rem just 1.8.
Because this is basically a multiplier.
So, this will multiply default font size here by 1.8.
And that will then be the line height.
Remember that?
And then let's also add some margin here to the bottom.
And here we will not have a lot of space
so let's keep it small at 16 pixels.
And, of course, we also need some space below the image.
So, margin-bottom 1.2.
So, that's the previous step in our spacing system.
And then here the name.
And here, as for a visual hierarchy,
this one is a lot less important.
So, let's make it smaller.
Let's say 1.6rem.
And let's also make it even lighter.
Now the main text is 555
and the darker text is 333, right?
And so let's try for this one here 777.
And we will actually change this here in a minute
because of the color contrast ratio.
But for now, let's go with this.
So, let's check it out.
And, beautiful.
That looks really cool.
Now let's actually just add the section heading here.
And that heading, we will actually do it right here
inside of the testimonials container.
So, here before these testimonials,
we will have our usual subheading and secondary heading.
So, let's go back
and we can, again, copy that from the previous section.
So, just this here,
right here.
And so as I just said before,
we want these headings to be, basically,
before these testimonials here, right?
So, just like this.
But then we don't want them to be centered
and we don't want them to be inside of a container.
So, actually we don't need any of this here.
But now we actually do have another problem
and let me illustrate that to you.
And so here you can see it.
So, now remember how we made this entire section
a grid container, right?
And so now this subheading and the secondary heading here,
they simply became grid items as well, right?
But that's not what we want.
We want them to be basically inside
of this left side here of this section.
So, what we're going to do is to wrap all of this here
into another new container element.
And with container, I don't mean the container class
that we created,
but instead, I mean like a parent element.
So, let's call this the testimonials-container.
And then let's put the closing tag here
after all of this.
So, right here in the end
but of course before the gallery.
So, here we need to, of course, also change the text.
Well, here we actually didn't get any title.
So, the subheading is quite simple.
It's simply gonna be Testimonials.
But then here we need to come up with another heading.
And so the one that I decided to use here
is kind of a catchy one saying
once you try it,
you can't go back.
Which is basically the overall message
that these four testimonials here give to the user.
So, let's check it out.
And now it is fixed.
So, just to see here in the inspector.
Now, this one here is a grid container, right?
And it contains both the testimonials container
and the gallery on the other side, right?
And then inside of the testimonials,
we have then again another grid
which is for these four individual testimonial figures here.
Okay? Great.
So, that's great progress already.
And so now in the next lecture,
we will start building the gallery here on the right side.