<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <section class="pt-5 circle-1"> <div class="ourworks-box container pb-5 pt-5"> <h1 class="our-works-head">Our Clients say</h1> <p>Check out what clients say about my services. Happy clients all over the world. Share your experience with me by submitting your reviews</p> </div> <div class="container pb-5 position-relative"> <div id="demo" class="carousel slide position-relative" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class=""></li> <li data-target="#demo" data-slide-to="1" class="active"></li> <li data-target="#demo" data-slide-to="2" class=""></li> </ul> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active carousel-item-left"> <div class="d-flex"> <div class="col-lg-4 col-sm-12 col-12 d-flex flex-column "> <a href="#" class="introduce pb-3"> <div class="flex-column-1 "> <p class="pr-2 pl-3 pt-4">What a Service!!!!!Antony is one of the top Classy designer in the world.Exceeded expectation and designed my website to my requirments.Will be usingfor ongoing work.</p> </div> <div class="flex-column-2 d-flex"> <div class="pic p1"></div> <div class="information flex-column pl-3 pt-2"> <p>David Beckham</p> <p class="text-gray">Managing Director</p> </div> </div> <span></span> </a> </div> <div class="col-lg-4 col-sm-12 col-12 d-flex flex-column "> <a href="#" class="introduce pb-3"> <div class="flex-column-1 "> <p class="pr-2 pl-3 pt-4">What a Service!!!!!Antony is one of the top Classy designer in the world.Exceeded expectation and designed my website to my requirments.Will be usingfor ongoing work.</p> </div> <div class="flex-column-2 d-flex"> <div class="pic p2"></div> <div class="information flex-column pl-3 pt-2"> <p>David Luiz</p> <p class="text-gray">Ceo & Founder</p> </div> </div> </a> </div> <div class="col-lg-4 col-sm-12 col-12 d-flex flex-column"> <a href="#" class="introduce pb-3"> <div class="flex-column-1 "> <p class="pr-2 pl-3 pt-4">What a Service!!!!!Antony is one of the top Classy designer in the world.Exceeded expectation and designed my website to my requirments.Will be usingfor ongoing work.</p> </div> <div class="flex-column-2 d-flex"> <div class="pic p3"></div> <div class="information flex-column pl-3 pt-2"> <p>Donna Karan</p> <p class="text-gray">Fashion Designer</p> </div> </div> </a> </div> </div> </div> <div class="carousel-item carousel-item-next carousel-item-left"> <div class="d-flex"> <div class="col-lg-4 col-sm-12 col-12 d-flex flex-column "> <a href="#" class="introduce pb-3"> <div class="flex-column-1 "> <p class="pr-2 pl-3 pt-4">What a Service!!!!!Antony is one of the top Classy designer in the world.Exceeded expectation and designed my website to my requirments.Will be usingfor ongoing work.</p> </div> <div class="flex-column-2 d-flex"> <div class="pic p1"></div> <div class="information flex-column pl-3 pt-2"> <p>David Luiz</p> <p class="text-gray">Ceo & Founder</p> </div> </div> <span></span> </a> </div> <div class="col-lg-4 col-sm-12 col-12 d-flex flex-column "> <a href="#" class="introduce pb-3"> <div class="flex-column-1 "> <p class="pr-2 pl-3 pt-4">What a Service!!!!!Antony is one of the top Classy designer in the world.Exceeded expectation and designed my website to my requirments.Will be usingfor ongoing work.</p> </div> <div class="flex-column-2 d-flex"> <div class="pic p2"></div> <div class="information flex-column pl-3 pt-2"> <p>David Luiz</p> <p class="text-gray">Ceo & Founder</p> </div> </div> </a> </div> <div class="col-lg-4 col-sm-12 col-12 d-flex flex-column"> <a href="#" class="introduce pb-3"> <div class="flex-column-1 "> <p class="pr-2 pl-3 pt-4">What a Service!!!!!Antony is one of the top Classy designer in the world.Exceeded expectation and designed my website to my requirments.Will be usingfor ongoing work.</p> </div> <div class="flex-column-2 d-flex"> <div class="pic p3"></div> <div class="information flex-column pl-3 pt-2"> <p>Donna Karan</p> <p class="text-gray">Fashion Designer</p> </div> </div> </a> </div> </div> </div> <div class="carousel-item "> <div class="d-flex"> <div class="col-lg-4 col-sm-12 col-12 d-flex flex-column "> <a href="#" class="introduce pb-3"> <div class="flex-column-1 "> <p class="pr-2 pl-3 pt-4">What a Service!!!!!Antony is one of the top Classy designer in the world.Exceeded expectation and designed my website to my requirments.Will be usingfor ongoing work.</p> </div> <div class="flex-column-2 d-flex"> <div class="pic p1"></div> <div class="information flex-column pl-3 pt-2"> <p>Donna Karan</p> <p class="text-gray">Fashion Designer</p> </div> </div> <span></span> </a> </div> <div class="col-lg-4 col-sm-12 col-12 d-flex flex-column "> <a href="#" class="introduce pb-3"> <div class="flex-column-1 "> <p class="pr-2 pl-3 pt-4">What a Service!!!!!Antony is one of the top Classy designer in the world.Exceeded expectation and designed my website to my requirments.Will be usingfor ongoing work.</p> </div> <div class="flex-column-2 d-flex"> <div class="pic p2"></div> <div class="information flex-column pl-3 pt-2"> <p>David Luiz</p> <p class="text-gray">Ceo & Founder</p> </div> </div> </a> </div> <div class="col-lg-4 col-sm-12 col-12 d-flex flex-column"> <a href="#" class="introduce pb-3"> <div class="flex-column-1 "> <p class="pr-2 pl-3 pt-4">What a Service!!!!!Antony is one of the top Classy designer in the world.Exceeded expectation and designed my website to my requirments.Will be usingfor ongoing work.</p> </div> <div class="flex-column-2 d-flex"> <div class="pic p3"></div> <div class="information flex-column pl-3 pt-2"> <p>Donna Karan</p> <p class="text-gray">Fashion Designer</p> </div> </div> </a> </div> </div> </div> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo" data-slide="prev" style="opacity: 1; left: -10%;"> <i class="fas fa-chevron-left" style="color:#5969f6; font-size:30px;"></i> </a> <a class="carousel-control-next" href="#demo" data-slide="next" style="opacity: 1; transform: rotate(-180deg); right: -10%;"> <i class="fas fa-chevron-left" style="color:#5969f6; font-size:30px;"></i> </a> </div> </div> </section>

.ourworks-box{ width: 60%; justify-content: center; text-align: center; } .our-works-head{ font-size: 30px; font-weight: 400; color: black; } .introduce{ height: 250px; background-color:white; box-shadow: 0 3px 10px #5969f642; border-bottom: 4px solid #5969f6; color: black; } .introduce:hover{ box-shadow: 0 3px 15px #5969f666; border-bottom: 4px solid #B122e5; color: black; text-decoration: none; } .flex-column-1{ height: 70%; width: 100%; } .flex-column-2{ height: 30%; width: 100%; align-items:center; } .text-gray{ color: gray; } .pic{ height: 70px; width: 70px; margin-left: 20px; border-radius: 50%; transition: all .2s ease-in-out; } .introduce:hover .pic{ transform: scale(1.1); } .carousel-indicators .active{ background-color: #46eeaa; } .carousel-indicators li{ background-color: #c8e5ff; } .carousel-indicators{ bottom: -50px; } .p1{ background-image: url("http://lorempixel.com/150/150/nature"); background-position: center; background-repeat: no-repeat; background-size: contain; } .p2{ background-image: url("http://lorempixel.com/150/150/people"); background-position: center; background-repeat: no-repeat; background-size: cover; } .p3{ background-image: url("http://lorempixel.com/150/150/cats"); background-position: center; background-repeat: no-repeat; background-size: contain; }