"Testimonial page "
Bootstrap 4.1.1 Snippet by karanjeet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container mb-4 mt-4">
<main class="mt-100">
<section class="row">
<article class="col-sm-12 text-center testimonialHead">
<h3 class="text-uppercase">testimonials</h3>
<h2 class="mainHeading">Our customers feedback</h2>
</article>
</section>
<section class="row mt-4">
<article class="col-sm-6 col-md-6 col-lg-4 col-xl-4">
<!-- testimonial start from here -->
<div class="testimonialBox">
<img src="https://i.ibb.co/dcWs6jB/quotes.jpg" alt="">
<p class="">
Interview with All India Rank 2 Candidate in SEBI Grade A 2018
</p>
<div class="row">
<div class="col-3 col-sm-4 col-md-3 col-lg-3 col-xl-3 float-left pr-2">
<div class="testimonialCircle text-center">
<img src="https://i.ibb.co/yfdd2fb/user.png" class="imgNotAvailable" alt="">
</div>
</div>
<div class="col-9 col-sm-8 float-left testimonialUser text-truncate pl-0">
<span class="mainHeading">Ms. Santwana Panda</span>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
/* Copyright (c) 2020 karanjeet singh
/* Author: karanjeet singh
*/
.testimonialHead > h3{
color: #9b9c9d;
font-size: 20px;
font-weight: normal;
}
.testimonialHead > h2 {
font-weight: 600;
}
.testimonialBox {
background-color: #ffffff;
padding: 30px;
margin-bottom: 30px;
-webkit-box-shadow: -1px -1px 31px -5px rgba(184,184,184,0.49);
-moz-box-shadow: -1px -1px 31px -5px rgba(184,184,184,0.49);
box-shadow: -1px -1px 31px -5px rgba(184,184,184,0.49);
overflow: hidden;
}
.testimonialBox > p {
color: #9b9c9d; margin: 30px 0; position: relative; z-index: 1;
}
.testimonialCircle {
width: 48px;
height: 48px;
background-color: #9a9a9a;
border-radius: 50%;
overflow: hidden;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: