<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>
</div>
<!-- //testimonial end here -->
<!-- testimonial start from here -->
<div class="testimonialBox">
<img src="https://i.ibb.co/dcWs6jB/quotes.jpg" alt="">
<p>
I just wanted to take a minute today to let you know what a fantastic job you guys are doing in the module of
current affairs. Your newly launched segments of beebooster and beepedia are really impressive. A kind piece
of note : Only one suggestion i would like make is that kindly include ministry wise important section in your
beepedia which is exclusive for nabard, rbi and sebi. As most questions in nabard were directly asked FOR
ministry. Eg- 1)which ministry has launched this scheme or 2) the scheme comes under which ministry. Thanking
you for your great efforts.
</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/Msj2GXx/profile-user.jpg" class="imgAvailable" 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>
</div>
<!-- //testimonial end here -->
<!-- Video testimonial start from here -->
<div class="testimonialBox videoTestimonal">
<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="position-relative">
<p class="videoIcon">
<img src="https://i.ibb.co/1Zs5CRP/smallvideo-Icon.png" alt="">
</p>
</div>
<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>
</div>
<!-- // video testimonial end here -->
<!-- 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="col3 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>
</div>
<!-- //testimonial end here -->
<!-- testimonial start from here -->
<div class="testimonialBox">
<img src="https://i.ibb.co/dcWs6jB/quotes.jpg" alt="">
<p>
I just wanted to take a minute today to let you know what a fantastic job you guys are doing in the
module of
current affairs. Your newly launched segments of beebooster and beepedia are really impressive. A kind
piece
of note : Only one suggestion i would like make is that kindly include ministry wise important section
in your
beepedia which is exclusive for nabard, rbi and sebi. As most questions in nabard were directly asked
FOR
ministry. Eg- 1)which ministry has launched this scheme or 2) the scheme comes under which ministry.
Thanking
you for your great efforts.
</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/Msj2GXx/profile-user.jpg" class="imgAvailable" 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>
</div>
<!-- //testimonial end here -->
</article>
<article class="col-sm-6 col-md-6 col-lg-4 col-xl-4">
<!-- Video testimonial start from here -->
<div class="testimonialBox videoTestimonal">
<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="position-relative">
<p class="videoIcon">
<img src="https://i.ibb.co/1Zs5CRP/smallvideo-Icon.png" alt="">
</p>
</div>
<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>
</div>
<!-- // video testimonial end here -->
<!-- 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>
</div>
<!-- //testimonial end here -->
<!-- testimonial start from here -->
<div class="testimonialBox">
<img src="https://i.ibb.co/dcWs6jB/quotes.jpg" alt="">
<p>
I just wanted to take a minute today to let you know what a fantastic job you guys are doing in the
module of
current affairs. Your newly launched segments of beebooster and beepedia are really impressive. A kind
piece
of note : Only one suggestion i would like make is that kindly include ministry wise important section
in your
beepedia which is exclusive for nabard, rbi and sebi. As most questions in nabard were directly asked
FOR
ministry. Eg- 1)which ministry has launched this scheme or 2) the scheme comes under which ministry.
Thanking
you for your great efforts.
</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/Msj2GXx/profile-user.jpg" class="imgAvailable" 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>
</div>
<!-- //testimonial end here -->
</article>
<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>
I just wanted to take a minute today to let you know what a fantastic job you guys are doing in the
module of
current affairs. Your newly launched segments of beebooster and beepedia are really impressive. A kind
piece
of note : Only one suggestion i would like make is that kindly include ministry wise important section
in your
beepedia which is exclusive for nabard, rbi and sebi. As most questions in nabard were directly asked
FOR
ministry. Eg- 1)which ministry has launched this scheme or 2) the scheme comes under which ministry.
Thanking
you for your great efforts.
</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/Msj2GXx/profile-user.jpg" class="imgAvailable" 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>
</div>
<!-- //testimonial end here -->
<!-- Video testimonial start from here -->
<div class="testimonialBox videoTestimonal">
<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="position-relative">
<p class="videoIcon">
<img src="https://i.ibb.co/1Zs5CRP/smallvideo-Icon.png" alt="">
</p>
</div>
<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>
</div>
<!-- // video testimonial end here -->
</article>
</section>
</main>
</div>
/*
/* 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;
}
.imgNotAvailable {
padding-top: 12px;
}
.imgAvailable {
width: 48px;
height: 48px;
border-radius: 50%;
}
.testimonialUser {margin-top: 12px;}
.testimonialUser span{font-size: 16px; }
.videoTestimonal {
position: relative;
cursor: pointer;
}
.videoTestimonal:before {
content: "";
position: absolute;
background: url('https://i.ibb.co/7ghxNYt/video-Icon.png') no-repeat;
width: 207px;
height: 207px;
top: -50px;
right: -48px;
z-index: 0;
}
.videoIcon {
position: absolute;
margin-left: 28px;
top: -6px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #ee0808;
cursor: pointer;
box-shadow: 0 0 0 rgba(238,8,8, 0.8);
animation: pulse 2s infinite;
}
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(238,8,8, 0.8);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(238,8,8, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(238,8,8, 0);
}
}
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(238,8,8, 0.8);
box-shadow: 0 0 0 0 rgba(238,8,8, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 10px rgba(238,8,8, 0);
box-shadow: 0 0 0 10px rgba(238,8,8, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(238,8,8, 0);
box-shadow: 0 0 0 0 rgba(238,8,8, 0);
}
}
.videoIcon > img {
position: relative;
top: -5px;
right: -7px;
}
