Summer Training batches for B.Tech students are starting in may and june - Registration Open
Brand
(+91) - 78915-90002 - 97828-60519

How To Make Good Testimonials Section With CSS3 and HTML

How To Make Good Testimonials Section With CSS3 and HTML

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