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
MASTERS IN DIGITAL MARKETING
For Professional & Job Seeker
Learn how to market a business online just like experts & agencies do it.
Learn form real practitioners not just trainers
Infonic Training & Development Center