Krishna Tower, Heera Nagar Mode, Ajmer Rd, DCM, Jaipur
infonicsolutions@gmail.com+91-8306599033

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

 


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



About the author

Infonic