Our website except the testimonials section so if you go back to our progress here we can see we have designed all of these sections over here.
And the last section we need to design is the testimonial section so this is a space for the testimonial section so let's do that in this video let's get started.
now if you go back to the original design we can see that we have a slider for the testimonial so if you click and drag over here we can go to the next and.
The previous testimonials and we also have these buttons for next and previous testimonials now for this we are using a library called swiper.js so if you go back to.
Our source code and if you go to the html file we can see that we have already linked the swiper.js css file and if you scroll down we also have the link of the.
Division over here so in that we will add the code for the testimonial slider so for that let's go to the swiper.js official website you can just google for swiper.js and you will find this website.
Called swiperjs.com and here let's click on get started and if we scroll down we can see that we have the guide for getting started now we have already linked these files.
In our html file so let's scroll down and here we can see this is the code that we need to add in our html and we need to replace all these slide 1 slide 2 slide 3 text with our testimonials.
So let's copy this code from here and let's go back to our html file and i'll just paste it over here inside the wrapper division now let's go back and if we scroll down.
We need to set the height and the width of the swiper division in our css so we will do that as well but before that let's copy this javascript so let's copy all of this.
And let's paste it inside our javascript Wesdigital
File so here we can see we have the main.js file and we have already linked the javascript file over here so let's paste the code over here.Now we don't need to have the scroll bar so let's delete this right now let's go to our index.html file and let's make changes to the slides.
So here we can see we have slide 1 slide 2 and slide 3. so here we have to add the code of our testimonials so let's delete this from here.
Now let's go back to the original design and first of all we need to have this image so let's create an img tag and in the src i'll just type images forward slash.
And i have this image called testimonial1.p and the next thing we need to add is this text so let's create a paragraph tag.
And here i'll just add the text so here i have added the text now the next thing we need to add is the name so for that let's create a division with a class of name.
And let's add the name over here and we also need to add the image of this code icon so for that let's add the image over here and just create an img tag and i'll just.
Type images forward slash and i have this image called code icon dot png all right so that's it with the first slide so let's copy this and.
Let's paste it down here for the second slide and i'll just change some things over here i'll just change the image to testimonial two dot png and you can even.
Change the text over here i'll just
Leave it as it is and for the second one we have a different name so i'll just add this name over here.And let's copy and paste it over here as well for the slide three and you can add as many slides as you want over here so here i'll just type testimonial three.
Png and i'll just leave the text as it is and for the name we need to have this name right here right so that's it with the html of our slides.
Now let's go back to our website and this is how it looks right now now let's add some css to make it look good so let's go to our style.css file.
And let's create a comment over here and i'll just type testimonials section and if you go back to the index.html file here we can see we have this.
Division with a class of swiper so let's target this here i'll just type swiper and let's set the width to 100 of the.
Parent now let's go back to our website and uh i think we have some problems in our code so let's go to the main.js file and here we need to change the direction.
To horizontal right now it is set to vertical so i'll just type horizontal over here and now let's go back and now you can see we have the option of going to the next testimonials.
And everything is working all right now let's style these elements so let's go back and let's go to the style.css file and first of all let's text align everything to the center so.
If you go back to the index.html file and here we can see we have this division with a class of swiper slide so let's target that here let's type.
Testimonials swiper slide and let's set the text align to center and we'll also add a padding of 0 pixels top and 60 pixels right and.
60 pixels bottom and 60 pixels left and now we can see everything is aligned to the center now the next thing we will style is the squat icon right here now we will position this relative to the.
Swiper slide so here i'll just type position relative and let's target the code icon so if we go back to the index.html file here we can see we have the img tag.
Let's also add a class so for the code icon i'll just add a class of code icon and for the profile image i just create a class called profile image.
And let's add these classes to the other slides as well so here i'll just type class code icon and here class profile image.
We will do the same over here right now let's go back and let's target the quote icon so i'll just stop testimonials swiper slide code icon.
And let's set the position to absolute and we'll set the top position to 90 pixels and left position to 50 pixels so here we can see it is positioned.
Correctly now let's style this profile image so let's tap testimonials swiper slide profile image and let's see the border radius to 50 so.
That we have a round shape and we'll set the height to 150 pixels and the width to 150 pixels right now let's style the paragraph.
So let's type testimonials swiper slide p and let's set the font family to enter and sensative and let's set the color of the text to white and we'll set the font.
Size to 18 pixels and we will set the line height to 180 percent right now if you go back we can see that we have the paragraph style but we want it to be on top of.
This quart icon so let's add a z index over here let's set it to 200 and we still don't have the z index added because for the chord icon we have.
A position set so we need to add some position over here for the paragraph so here just a position of relative and now we can see that it is styled.
Correctly now let's style the name so for the name we have a division of the class of name so here i'll just type testimonials.
Swiper slide name and let's set the font size to 30 pixels and let's set the text transform to uppercase and reset the font weight to.
800 and reset the color of the text to white and let's also add a margin top of 40 pixels and now we can see we have the name.
Style right now the last thing we need to do is change the color of these next and previous buttons and also these dots over here so if you right click.
Over here and click on inspect and if you scroll down and take a look at the css here we can see for the color we have a variable called swiper theme.
Color and even if you take a look at this dots so let's right click over here and click on inspect let's go into this division and let's.