Code so let's go to the HTML file and and uh this is where the blog section ends so I'll just create a comment I'll just Ty end of blog section and uh then for the testimonial.
Section if you go back to our design here we can see that it has this full width and uh for the content we have a Max width so here we can see that this yellow background color is spanning the.
Whole width of the browser window but all the text content is inside a Max width so if we zoom out we can see that it has this Max width so we need to create a section first so let's tap.
Section and uh let's give it an ID of testimonials and in this section we'll create a container division because we need to have this Max width so let's tab do container now for all the content.
Paste it over here and then we need to have this slider so we have already used the slider in this header section so we will use the same Library over here as well so if you go back to the header.
Here we can see that we are using this Library called swiper JS so let's go ahead and do the same so I just copy this swiper division from here because we need to write almost the same code so.
Let's copy this and let's paste it over here after this heading and here we need to change the class to testimonials.
Swiper and then we have the swiper wrapper and then we have the swiper slide then we have the content and we need to change the content so we don't need to have this image and we also.
Don't need to have this slide title so let's delete both these elements from here and we'll just keep this paragraph and uh let's go ahead and add this text over.
Posts Related:
- Planilha Cadastro de Membro Grátis - Apresentação
- 50 Professional Facebook Cover Design Download In PSD Files English Photoshop Tutorial
- Design A CSS Box Shadow Generator Using HTML, CSS & JS (Part 3) BlogSpot
Here right so I have added the text over - ID Card Make
Here and after the text we need to add this name so let's create a division with the class of name and let's add the name over here.And uh then we need to add this designation so let's create a division with the class of designation and here we will add the designation and we need to do the same.
For the other slides as well so let's copy this content and let's paste it down here and let's paste it over here as well and let's change the content and.
Let's add the name and let's add the designation and let's do the same for the third slide and let's add the name and then let's add the.
Designation and and with that we have added all the content of the slides and now if you go back to our website here we can see that we have the first slide displayed over here but the.
Functionality is not working so for that let's go back to our HTML and if you scroll down here we have created this script and this is for the header swiper so let's do the same for the.
Testimonials swiper so I just go ahead and copy this and paste it down here and I'll just change this to testimonials Swip swiper and here in the selector we need.
To add the class name which is testimonials swiper so let's add this class over here and then we have swiper button next and Swiper button PRI and we have the.
Same classes over here and for the testimonial slider I'll just remove this autoplay and now if you go back to our website here we can see that the functionality is working all right now.
The last thing we need to do is we need
To style this using CSS so let's go back to our CSS file and let's go ahead and create a comment I'll just testimonial section and first of all let's target.The section with this ID of testimonials so I'll just typ hash testimonials and let's add a background color of VAR yellow color right now let's go ahead and style this swiper.
Slide so here we have this division with the class of swiper slide so let's go ahead and type testimonials swiper and in that we have swiper slide and first of all let's set the.
Text align to Center and let's set the font size to 18 pixels and let's go ahead and set a padding of 30.
Pixels right now let's style this paragraph so let's type testimonial swiper swiper slide p and let's set the font size to 24.
Pixels and let's set the font style to italic right now let's style this name so for the name we have this division with the class of name so let's type testimonial swiper.
Swiper slide name and let's set the font weight to Bal and let's add a margin of 8 pixels top and bottom and zero for left and right right now we need to add a subtle.
Animation for this paragraph So if you go to the next slide here we can see that we have this animation where the paragraph comes in from the.
Bottom so let's go back and by by default let's set the opacity of the paragraph to zero and let's tap transform Translate Y and let's set it to 40.
Pixels and let's go ahead and add a transition of all 800 milliseconds e now just like we did for the header swiper we'll just copy the same code over here so when the slide is active we.
Have this class of swiper slide active so I just copy this and let's paste it down here and here we need to change this to testimonials.
Swiper and here we need to type opacity of one and transform Translate Y to0 and now if you go back and if you go to the next slide we have this animation right now let's go ahead and.
Style these arrows so let's type testimonials swiper and we had this class of swiper button next and Swiper button pre so let's type swiper button next and.
Testimonial swiper swiper button pre and let's add a background color of light gray let's set the width to 50 pixels and the height 250 pixels as well if you go up to to the header.
Swiper here we can see that for changing the size of these arrows we are accessing the after selector so let's do the same so just copy these two.
Selectors and let's paste it down here and here let's type column colum after and here let's type column colum after and let's go ahead and set the color to Black and let's the font size.
To 20 pixels and this is how it looks and with that we have completed styling the testimonial section so that's basically it for this video if.
You have any doubts you can ask in the comments below and if you like this video please click on the like button and subscribe to this channel to get the latest video updates thanks a lot for.
Watching have a nice day a.
