"testimonial section"
Bootstrap 4.1.1 Snippet by vickysharmaadmin

<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"> <div class="row"> <div class="the-quotes-container"> <div class="quote-style" id="quote_1"> <div class="quote-person-image"> <img src="/wp-content/uploads/2020/02/ic-benjamin-graham.jpg"> </div> <div class="quote-text"> <blockquote> <p>Confronted with a challengeto distill the secret of sound investment into three words, we venture the motto - Margin of Safety.</p> <cite>Benjamin Graham </cite> </blockquote> </div> </div> <div class="quote-style" id="quote_2"> <div class="quote-person-image"> <img src="/wp-content/uploads/2020/02/ic-warren-buffett.jpg"> </div> <div class="quote-text"> <blockquote> <p>A truly great business must have an eduring 'moat' that protects excellent returns on invested capital.</p> <cite>Warren Buffett</cite> </blockquote> </div> </div> <div class="quote-style" id="quote_3"> <div class="quote-person-image"> <img src="/wp-content/uploads/2020/02/ic-charlie-munger.jpg"> </div> <div class="quote-text"> <blockquote> <p>The number one idea is to view a stock as an ownership of the business and to judge the staying quality of the business in terms of its cometitive advantage.</p> <cite>Charlie Munger</cite> </blockquote> </div> </div> </div> </div> </div>
.quote-style .quote-text { font-family: initial; } .quote-text p { line-height: 27px; } .the-quotes-container { margin-right: 25px; margin-left: 25px; } div#quote_1 { display: inline-flex; border: 2px solid #2b8867; position: relative; left: 88px; width: 56%; height: 280px; } div#quote_1 .quote-person-image { position: absolute; top: 35px; left: -100px; } #quote_1 .quote-text { position: absolute; top: 45px; left: 100px; border: none; width:31em; } div#quote_2 { display: inline-flex; position: relative; top: -60px; height: 250px; background-color: #2b8867; width: 50%; float: right; } #quote_2 .quote-person-image { position: absolute; top: -40px; right: -50px; } div#quote_2 .quote-text cite { color: #fff; } div#quote_2 .quote-text blockquote { padding-top: 25px; } div#quote_2 { display: inline-flex; position: relative; top: -40px; height: 250px; background-color: #2b8867; width: 50%; float: right; } div#quote_2 .quote-text { width: 24em; } div#quote_2 .quote-text p { color: #fff; } #quote_2 .quote-person-image { position: absolute; right: -50px; top: -50px; } div#quote_3 { position: relative; width: 37%; top: 150px; background-color: #f7f8fa; } #quote_3 .quote-person-image { position: absolute; top: -137px; left: 24%; } #quote_3 .quote-text { padding-top: 75px;0 padding-left: 20px; } /*Responsive css*/ @media only screen and (max-width: 1024px) { div#quote_1 { width: 65%; } div#quote_2 .quote-text { width: 20em; } } @media screen and (max-width: 1023px){ div#quote_1 { left: 0px; width: 100%; height:auto; margin-bottom :15px; } #quote_1 .quote-text { position: absolute; top: 15px; left: 200px; } #quote_2 .quote-person-image { position: unset; width: 15em; } div#quote_2 { top: 0; width: 100%; float: none; height: auto; margin-bottom: 15px; } div#quote_3 { width: 100%; top: 0; display: inline-block; border:2px solid #2b8867; } #quote_3 .quote-person-image { top: 0; left: 0; } div#quote_1 .quote-person-image{ position: unset; } div#quote_2 .quote-text { width: 30em; } #quote_3 .quote-text { padding: 0px; border: none; width: 30em; float: right; padding-top: 15px; padding-bottom: 15px; } } @media screen and (max-width: 767px){ #quote_1 .quote-text{ position: unset; width:100%; } div#quote_1 { display: block; } .quote-person-image img { width: 100%; } .the-quotes-container{ margin:0px; } #quote_3 .quote-person-image{ position: unset; } #quote_3 .quote-text{ width: 100%; padding:15px; } div#quote_2{ display:block; } #quote_2 .quote-person-image{ width:100%; } div#quote_2 .quote-text { width: 100%; } }

Related: See More


Questions / Comments: