September 27, 2021

Our services carousel

 <div class="container">
       <div class="row">
           <div class="col-md-5 about-info">
               <h3>We are with you , <br>
every step of the way</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga veritatis officiis labore ullam eaque, error, velit corrupti, esse sunt explicabo neque. Beatae eligendi illum doloremque assumenda earum distinctio! Corrupti, unde.</p>
           </div>
           <div class="col-md-7">
               <div class="full-width">
                   <div class="owl-carousel">
            <div class="item">
             <img src="http://www.tolmatol.com/uploads-images/our-services-carousel/data-center.png" alt="">
              <h4>Heading one</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga veritatis officiis labore ullam eaque, error, velit corrupti   </p>
              
              <a href="#"><i class="fa fa-chevron-right"></i></a>
            </div>
              <div class="item">
             <img src="http://www.tolmatol.com/uploads-images/our-services-carousel/artificial-intelligence.png" alt="">
              <h4>Heading two</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga veritatis officiis labore ullam eaque, error, velit corrupti   </p>
              
              <a href="#"><i class="fa fa-chevron-right"></i></a>
            </div>
              <div class="item">
             <img src="http://www.tolmatol.com/uploads-images/our-services-carousel/data-center.png" alt="">
              <h4>Heading three</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga veritatis officiis labore ullam eaque, error, velit corrupti   </p>
              
              <a href="#"><i class="fa fa-chevron-right"></i></a>
            </div>
              <div class="item">
             <img src="http://www.tolmatol.com/uploads-images/our-services-carousel/artificial-intelligence.png" alt="">
              <h4>Heading four</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga veritatis officiis labore ullam eaque, error, velit corrupti   </p>
              
              <a href="#"><i class="fa fa-chevron-right"></i></a>
            </div>
               <div class="item">
             <img src="http://www.tolmatol.com/uploads-images/our-services-carousel/data-center.png" alt="">
              <h4>Heading five</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga veritatis officiis labore ullam eaque, error, velit corrupti   </p>
              
              <a href="#"><i class="fa fa-chevron-right"></i></a>
            </div>
               <div class="item">
             <img src="http://www.tolmatol.com/uploads-images/our-services-carousel/data-center.png" alt="">
              <h4>Heading five</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga veritatis officiis labore ullam eaque, error, velit corrupti   </p>
              
              <a href="#"><i class="fa fa-chevron-right"></i></a>
            </div>
               </div>
               
               </div>
           </div>
       </div>
   </div>

 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <style>
         body { overflow-x: hidden; }
         .full-width { width: 85vw;}
         .owl-nav {
    display: inline-block;
}
            .about-info { margin: 40px 0px;}
            .about-info h3 { margin: 0px 0px 40px 0px; font-weight: 700; font-size: 3em;}
.owl-nav button {
    background: #f1f1f1 !important;
    margin: 0px 5px 0px 0px;
    width: 35px;
    height: 35px; outline: none;
}

.owl-nav button span {
    font-size: 40px;
    line-height: 25px;
    color: #333;
}
         .item { border-radius: 8px; background: #f7fcff; text-align: center; margin: 40px 0px; position: relative; overflow: hidden; padding: 30px;}
            .item img { width: 64px !important; margin: 10px auto 10px auto; }    
         .item h4 { display: block; margin-bottom: 30px;}
         .item:before{ content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: #2196f3;
    border-radius: 100%;
    top: -110px;
    right: -89px;
    opacity: 0.06;
    z-index: 1; }
            .item a { width: 40px; height: 40px; text-align: center; line-height: 40px; border-radius: 40px; background: #2196F3; display: block; text-align: center; margin: auto;        color: #fff;     font-size: 18px;}
                        
            
.owl-nav button:hover {
    background: #85c6f9 !important; 
}     </style>

 

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<script>
    $(document).ready(function(){
        $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
     dots: false,       
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:2,
            nav:false
        },
        1000:{
            items:3 ,
            nav:true,
            loop:false
        }
    }
})
    })
    </script>

 

Leave a Reply

Your email address will not be published. Required fields are marked *