Voiceover: Hello, and welcome back
to building the customer testimonial section.
This is getting easier and easier.
Don't you think so?
So, let's have some more fun with CSS.
So, this is where we left our website in the last lecture
and now, let's start by adding a beautiful background image
that is actually in the folder of our contents.
In our project folder, so right here.
So, it will be a background image.
So, this image, right now, is here.
It is called back customers,
but since it will be a background image
it should be here inside our CSS folder.
So as you remember, all our background images
go right here into this folder.
So, now we are ready to use that image.
So, let's go back to our CSS file.
Let's create some space down here.
You are already used to this by now.
Let's start to define the code for this section.
Section testimonials.
So, let's start by defining again a background image.
Background image
and this is how we do it again and make customers.
Alright, so as before, we want this image to fill
the whole width of the browser,
so we say
background
size
cover.
So, this is probably what you will always want to do
with your images.
So, let's see the result of this.
Alright, so this is way too bright
and it's the same situation as we had before
on our header section.
So, we will once again make this image darker
and I hope you remember how we did that.
So, it's like setting multiple backgrounds here.
So, we have a gradient with a blank opaque color
and then the customer images.
So, we create a linear gradient
so as before, I will start with complete black
and then change it with the color picker
and command E
and let's set this to say 80 percent.
Enter the same exact thing, so 80 percent.
This looks probably way better by now.
Right.
So now what we have to do is of course,
to make all the text inside of this white
and then, believe me it will look great.
So, color and color white
and let's check it.
Okay, this looks cool.
Now, I want to show you a very cool effect
that you can achieve with background images in CSS
and I'm talking about this property.
It is background attachment
and if we set this to fixed
then let me show you what this will look like.
So, it's like the image always stays in the same place
and we scroll our website
and the image stays always in the same place.
So, I think this is a cool effect
and it's really easy to achieve
and in fact, we should do the same thing up here.
Okay?
So, I will just copy this to the header,
CSS block,
just to see if it looks cool there as well.
Okay?
And this is the effect.
So, the image stays in the same place and we just scroll
and I think this is really cool
and down here, it will look even cooler
once we add more sections below this.
So, the next step would be to define
these block quotes elements right here.
So, this is very straight forward, of course.
Just write our block quote,
select it.
And the first thing is we maybe want some penning there
because you saw that the boxes
were very close to each other
and I will say, two percent
and then it is quite usual
to show the customer testimonials
in an italic style.
So, in order to do that, I will say font, style, italic.
And I can do this only because I already incorporated
the italic style for my Google fonts here.
So whenever you need italics on your website,
you need to include that web font.
Now, another thing, is I want some line height here
as always, and I will again choose 145 percent here.
Okay, much better right?
And now, we can form it the side element
and the images that are inside of the side element as well.
So, this is, again very easy.
We can do this because we will only use the side
and block quote elements in this place.
So, we don't need to make any class for those.
So, in here, I would say that the font size
could be a little smaller, like 90 percent maybe.
And, let's add some margins to the top as well.
Margin top
of let's say 25 pixels
and now for the image,
so it's the image inside of the side
and by now, you're already really familiar with all of that.
So, the image, I will say, will have a height of 50 pixels
and a border, a border radius of 50 percent
and you already know as well,
that this makes any element round.
And we want some margins to the right side as well.
Let me say, here, 10 pixels.
So, we made some changes here.
So, let me check it again.
Okay, so what is going here?
We need a line break here.
So it's the text and then the text just continues
with the image then the rest of the text.
Now, the best way to actually do this,
is to define this as a block element.
So, what we can do, is to say, that the side element
should be a block element
and so, once more we use the display property with block.
And this should do the job.
Exactly.
So, this is what I hoped for.
Now, it's a block element and so it is aligned for itself.
Now, I want this text here to be aligned with this
and this is again, very easy.
We just say that we some vertical align through the middle.
And now it should look just as we wanted.
I think the images are a little too big.
Don't you think so?
They take up too much space, I guess.
Now, what's also missing here,
is a big quotation mark, which we can put here
and I will show you a great way to do this
and we will once again use the after zero class,
no, in fact, we will use the before
because this time we want it to appear before our text.
So, let's quickly do this
and first of all, let me change this,
said it was too big, so maybe 45 will work better
and now, let's find the before zero class.
So side, before
and we want it to be a quotation mark.
So, remember how do we put text on a website using just CSS.
It is with content.
The last time we used this we didn't want to see any words
so we just leave an empty space.
I will just to exemplify this, put an A,
and we will then put a quotation mark in a second.
For now, let me just show you how this looks
and we'll also ignore that we can see it
and change the font size here to 400 percent.
Alright, this is not what I wanted
because I actually wanted it before the block quote right?
So, it is block quote.
And here we go.
Alright, now, in order to put the quotation mark there
is not as easy as it may sound
because in order to do that we need to use
something called an ISO special character.
So, this here is a list that I'll include into the course
E-book and in here we can just choose some sign if you want
and then will have to copy this very code here.
So, in order to make it easier for me
I will just search for quotation mark
and this is not the one that I want.
It's this one right here.
I want this.
So, I need to copy this.
This code right here.
Alright.
Now, I'll paste it here.
So, let's check this.
Alright, here we go.
Cool, right?
Now, we need to have to set a new line once again.
So, we have to make this as a block element.
So, let's do that.
Just plain block, very easy.
Now, in order to position this exactly where we want it
we need to define its top and left attributes
because it is really the easiest way
is to change this around using absolute positioning.
So, position absolute and then we can change
its top, maybe, five pixels
and left to zero.
Alright?
And, before we can see how this looks
there's a very important thing that we have to do
and it's this.
When we make an element with absolute position
we have to ensure that its parent
has a relative position,
so in this case, we will have to say,
that this here is relative and if we didn't do this
this wouldn't appear where we want it.
And here we go.
Okay, this is way too close to the text.
So, let us put back to zero maybe,
but we can put the left to minus three for instance.
You see this?
Yeah, this looks cool.
Maybe what I should do is to give it some space
between this line here and those block quotes.
So, in order to have more space for this one here,
this quotation mark, and I should
probably also do this a little bigger.
So, I'll increase this to 500 percent actually
and then, I will say that we want some margin
to the top of this of 40 pixels.
And this can actually be also, let's say, minus five pixels.
And here, minus five pixels as well wouldn't hurt.
And, this is what it looks like now.
So, now we have one more section designed
and I really like what we achieved here in this section.
This background image is really cool
and also this effect that we added to this section
and to this one, it's really cool.
We're starting to get a really good looking website.
So, next up, we have the section with some pricing plans.
Remember, we'll use some new stuff.
So, don't wait and see you there.