Testimonials

Testimonials bootstrap 4 snippet

Download Files

Download Files contains - HTML,CSS,JS,Images Files

With cover and overlapped profile picture

                                        
                                      /* ------------------------------------------------------------------- */
/* Import Section
---------------------------------------------------------------------- */
@import url("base.css");    /* Default Reset, Typography, Forms, etc. */
@import url("bootstrap.min.css");   /* Bootstrap 4.3.1 */
@import url("fontawesome.all.min.css");  /* Font-awesome 5.9.0 */
@import url("https://fonts.googleapis.com/css?family=Pacifico");
@import url("https://fonts.googleapis.com/css?family=Rokkitt");
@import url("https://fonts.googleapis.com/css?family=Abhaya+Libre");

/* ==========================================================================
   Header Section
   ========================================================================== */

.section--landing {
 height: 100vh;
 width: 100%;
 
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 text-align: center;
 
 color: #707ca3;
 padding: 5rem 1.3rem;
}
.section, .section .container {
 padding: 3rem 0;
}
.section--landing h2.title {
 font-family: 'Rokkitt', serif; 
 color: #14245a;
 font-weight: 500;
 text-transform: none;
 margin-bottom: 40px;
}
.card {
 background-color: #fff;
 box-shadow: 0 2px 3px rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.1);
 color: #242c41;
 max-width: 100%;
 position: relative;
}
.card {
 padding: 2rem;
 border-radius: .2rem;
}
.card--testimonial{
 background: url(../img/testimonial-quote.png) no-repeat;
 background-position-x: 0%;
 background-position-y: 0%;
 background-position: 2rem 2rem;
}
.card{
 box-shadow: 0 20px 50px #e4eaf0;
 padding-top: 3.2rem;
 min-height: 13rem;
}
.card--testimonial .content{
 font-family: 'Abhaya Libre', serif; 
 color: #707ca3;
 font-size: 16px;
 line-height: 1.8rem;
 min-width: 4rem;
}
.media {
 align-items: flex-start;
 display: flex;
 text-align: left;
 padding-top: 15px;
}
.media-left, .media-right {
 flex-basis: auto;
 flex-grow: 0;
 flex-shrink: 0;
}
.media-left {
 margin-right: 1rem;
}
.image.is-48x48 {
 height: 48px;
 width: 48px;
}
.image {
 display: block;
 position: relative;
}
.image img {
 display: block;
 height: auto;
 width: 100%;
}
.media-content {
 flex-basis: auto;
 flex-grow: 1;
 flex-shrink: 1;
 text-align: left;
}
.card--testimonial .title{
 font-family: 'Rokkitt', serif;
 font-size: 16px; 
 color: #14245a;
 font-weight: 600;
 margin-bottom: 0;
}
.title.is-6 {
 font-size: 1rem;
}
.card--testimonial .subtitle{
 font-family: 'Abhaya Libre', serif;
 font-size: 16px; 
 color: #707ca3;
 font-weight: 600;
 margin: 0;
}
@media (max-width: 768px) {
 .section--landing{
   height: 300vh;
   width: 100%;
 } 
 .card{
  margin: 1rem;
 } 
}      
                                        
                                    

                                        
                                      Js      
                                        
                                    

More Bootstrap UI Components

Contact Form and Footer

169 1 Work,Contact

Nice Services Cards with Image

228 0 cards,BS4

Call to Action

151 0 CTA,BS4

Simple Contents Section

156 0 contents,BS4

Blog Post

170 0 blog post

Clean & Simple Navigation

183 0 navigation.BS4

Clean Features Design

159 0 features,BS4

Mobile Content Block

166 0 contents,BS4

Tired of Opening One Strap After Another?

Go to Pricing and start using AJAX Filter Options, no need to open multiple pages.

Get Started