slider2

CSS 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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 .testimonial{ padding: 20px; margin: 20px 10px; } .testimonial .pic{ width: 122px; height: 122px; float: left; margin-right: 50px; position: relative; } .testimonial .pic:before, .testimonial .pic:after{ content: ""; display: block; height: 50%; width: 50%; position: absolute; } .testimonial .pic:before{ bottom: -10%; left: -10%; border-bottom: 3px solid #E16B47; border-left: 3px solid #E16B47; } .testimonial .pic:after{ top: -10%; right: -10%; border-top: 3px solid #e16b47; border-right: 3px solid #e16b47; } .testimonial .pic img{ width: 100%; height: auto; } .testimonial .testimonial-content{ display: table; position: relative; } .testimonial .testimonial-content:before{ content: "\f10d"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; top: -30px; left: -15px; font-size: 60px; color: #d8dad6; z-index: -1; } .testimonial .testimonial-title{ font-size: 24px; color: #e16b47; text-transform: capitalize; } .testimonial .post{ font-size: 13px; font-weight: 600; color: #585f62; border-left: 1px solid rgba(0, 0, 0, 0.1); margin-left: 5px; padding-left: 5px; } .testimonial .description{ font-size: 13px; color: #7c7c7c; line-height: 22px; margin-top: 12px; font-style: italic; } .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span{ background-color: #e16b47; } @media only screen and (max-width: 980px){ .testimonial{ padding: 20px 0; margin: 20px 15px; } .testimonial .pic{ float: none; } .testimonial .testimonial-content{ display: block; margin-top: 30px; } .testimonial .testimonial-content:before{ z-index: 1; top: -200px; } } JavaScript (Testimonial depend on jQuery and Owl carousel.) 1 2 3 4 5 6 7 8 9 10 11 12 13