BrianaJHunter
4/6/2020 - 10:57 PM

card with text and icon

card-text-icon
content_copyfile_download
<!DOCTYPE html>
<head>
<style>
img { height: 100px; }
.orange-fade {
    background: #black;
    background: linear-gradient(135deg,gray 0,black 100%);
}
.pos-r {
    position: relative!important;
}
.white {
    background: #fff;
}
.text-white {
    color: #fff!important;
}
.text-gray {
    color: #363636;
}
.testimonial {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.separator {
    width: 14%;
    height: 3px;
    margin: 1.2em auto 1em;
    background: #bada55;
}
.one-slide {
  border-radius: 3px;
  margin-left: 1rem;
  margin-right: 1rem;
  font-size: 1.1rem;
  height: 300px;
}
.one-slide img {
  width: 60%;
}
.carousel-controls .control {
  position: absolute;
  cursor: pointer;
  top: 56.4%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.prev {
  left: -1.875rem;
}
.next {
  right: -1.875rem;
}
.testimonial-carousel { 
  &.slick-initialized { 
    display: block; 
  }
 .message {
    width: 100%;
    font-size: .9rem;
  }
  .icon {
    width: 100%;
  }
  @media (max-width: 575px) {
    .one-slide {
      height: 200px;
    }
    img {
        width: 40%;
      }
  }
}
</style>
</head>
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet">
<link href="slider-boxes.scss" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></script>
<script src="slider-boxes.js"></script>

<section class="orange-fade p-5 margin-top-xl pos-r">
  <div class="container">
    <div class="row">
    <div class="col-sm-12">
        <h2 class="text-center font-weight-bold text-white">Your Title Here</h2>
        <p></p>
       <div class="mt-5 pos-r">
          <div class="carousel-controls testimonial-carousel-controls">
            <div class="control prev"><i class="fa fa-chevron-left text-white">&nbsp;</i></div>
            <div class="control next"><i class="fa fa-chevron-right text-white">&nbsp;</i></div>
          </div>
          <div class="testimonial-carousel">
            <div class="one-slide white">
              <div class="testimonial w-100 h-100  p-3 text-center">
                <div class="message text-center text-gray">Testimonial text</div>
                <div class="separator">&nbsp;</div>
                <div class="icon"><img alt="blue flower" src="https://i.ibb.co/k8vTTyr/blue-flower.jpg" class="mx-auto"/></div>
              </div>
            </div> 
            <div class="one-slide white">
              <div class="testimonial w-100 h-100  p-3 text-center">
                <div class="message text-center text-gray">Testimonial text</div>
                <div class="separator">&nbsp;</div>
                <div class="icon"><img alt="purple pink flower" src="https://i.ibb.co/b13yZDW/purplep-pink-flower.jpg" class="mx-auto"/></div>
              </div>
            </div>
            <div class="one-slide white">
              <div class="testimonial w-100 h-100  p-3 text-center">
                <div class="message text-center text-gray">Testimonial text</div>
                <div class="separator">&nbsp;</div>
                <div class="icon"><img alt="red purple flower" src="https://i.ibb.co/qWRCm29/red-purple-flower.jpg" class="mx-auto" /></div>
              </div>
            </div>
            <div class="one-slide white">
              <div class="testimonial w-100 h-100  p-3 text-center">
                <div class="message text-center text-gray">Testimonial text</div>
                <div class="separator">&nbsp;</div>
                <div class="icon"><img alt="flower field" src="https://i.ibb.co/c2sz99Z/flower-field.jpg" class="mx-auto" /></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
</body>
<script>
$(document).ready(function() {
    $(".testimonial-carousel").slick({
        infinite: !0,
        slidesToShow: 4,
        slidesToScroll: 1,
        autoplay: !1,
        arrows:true,
        prevArrow: $(".testimonial-carousel-controls .prev"),
        nextArrow: $(".testimonial-carousel-controls .next"),
        responsive: [{
            breakpoint: 1200,
            settings: {
                slidesToShow: 3
            }
        }, {
            breakpoint: 992,
            settings: {
                slidesToShow: 2
            }
        }, {
            breakpoint: 600,
            settings: {
                slidesToShow: 1
            }
        }]
    });
});
  </script>