How To Make Good Testimonials Section With CSS3 and HTML 155
In this tutorial you have learn that how to build a good testimonial section with CSS3 and HTMl.
<html> <head> <title>How To make a Testimonial with CSS3 and HTML Tutorial By - Infonic Training</title> </head> <body> <div class="background"> <div class="heading1">Write Your Heading Text Here</div> <div class="heading2">Write Your Sub Heading Text Here</div> <div class="arrow"><img src="img/Down_Arrow_Icon.png" alt="arrow image"></div> </div> <div class="box"> <div class="box11"> <div class="box1"> <img src="img/student1.jpg" alt="student"> <div class="text">this testiminial is about students review.students write here their thought this testiminial is about students review.students write here their thought this testiminial is about students review.students write here their thought</div> </div> </div> <div class="box11"> <div class="box1"> <img src="img/student1.jpg" alt="student"> <div class="text">this testiminial is about students review.students write here their thought this testiminial is about students review.students write here their thought this testiminial is about students review.students write here their thought</div> </div> </div> <div class="box11"> <div class="box1"> <img src="img/student1.jpg" alt="student"> <div class="text">this testiminial is about students review.students write here their thought this testiminial is about students review.students write here their thought this testiminial is about students review.students write here their thought</div> </div> </div> <div class="box11"> <div class="box1"> <img src="img/student1.jpg" alt="student"> <div class="text">this testiminial is about students review.students write here their thought this testiminial is about students review.students write here their thought this testiminial is about students review.students write here their thought</div> </div> </div> </div> </body> </html>
body{background-color:#CCC;}
.background{ width:80%; margin:0 auto; min-height:300px; background-image:url(img/plain.jpg); text-align:center; position:relative;}
.heading1{color:#fff; font-size:24px; position:absolute; top:60px; left:360px;}
.heading2{color:#fff; font-size:36px; position:absolute; top:100px; left:300px;}
.arrow{position:absolute; left:47%; top:275px;}
.arrow img{width:50px; height:50px; background-color:#fff; border-radius:50%;}
.box{width:80%; margin:0 auto; margin-top:30px;}
.box11{width:25%; float:left;}
.box1{width:80%; margin:0 auto; background-color:#666; text-align:center; padding:20px; box-shadow:2px 2px 2px 2px red;}
.box1:hover{opacity:.5;}
.box1 img{width:100px; height:100px; border-radius:50%; transition:all .2s ease;}
.box1 img:hover{transform:scale(1.2,1.2);}
.text{font-size:16px; text-transform:capitalize; margin-top:20px; text-align:justify;}
.text:hover{ color:#fff;}
explanation: A testimonial section is one of the most important part of our website because testimonials give authentication to the webiste
