How To Make Good Testimonials Section With CSS3 and HTML 136

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 
Job Oriented Diploma Programme for Graduate & Undergraduate Students

Join Job oriented computer Diploma programme and learn practical skills from industry experts. Join the best.. Be Ready for Industry..


Infonic Training & Development Center