Original subtitles

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.

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

All right, 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, right?

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

Okay, 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 here.

And so we need some kind of a 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, okay?

So let's call this one, the testimonial

and then, well, first let's start with the image,

actually this is our 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.JPEG, right?

And now for the actual testimonial content,

we can use the block quote element.

So a block quote, 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 example.

So block quote 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, okay?

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 like 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,

that 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, I need to go back.

Let's copy all this.

And I will immediately paste it actually

into this block quote element

and then we just remove the name here, also here

and then, 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 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, right?

So that's easy.

So let's do that.

And for that, we need to select these 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 used 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 a new grid.

So basically that reusable grid that we created

is more for the overall page layout, all right?

So grid, template columns, 1FR and 1FR

and then let's create some smaller gap.

So maybe 4.8rem that's always a good value to start with.

And let's also make the image immediately a bit smaller.

So testimonial image, 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, right?

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 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 of 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 the 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, right?

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 the 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 the 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, okay?

So here we need to, of course also change the text.

So well here we actually didn't get any title.

So the subheading is quite simple.

It's simply gonna be testimonials,

but in here we need to come up with another heading.

And so the one that I decided to use here

is a 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, okay?

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.

And so that's great progress already.

And so now in the next lecture,

we will start building the gallery here on the right side.