<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 ----------> <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://bootstraplily.com/demo/architectural/css/owl.carousel.css"> <div class="container-fluid ff" id="home" > <div class="row align-items-center"> <div class="col-md-4 ss mb-5 mb-md-0 mt-5 mt-md-0"> <p class="lead">ARCHITECTURE AGENCY</p> <h2 class="display-3 mb-3">Build Your Dream Place</h2> <p class="lead text-muted mb-5">In it except to so temper mutual tastes mother. Interested cultivated its continuing now yet are. Out interested acceptance </p> <a href="" class="btn btn-lg shadow-lg btn-dark px-4 py-3">Learn More →</a> </div> <div class="col-md-8"> <div class="owl-carousel"> <div class="hh"><div class="border-top22"></div> <img src="https://bootstraplily.com/demo/architectural/img/slide-1.jpg"> </div> <div class="hh"><div class="border-top22"></div><img src="https://bootstraplily.com/demo/architectural/img/slide-2.jpg"> </div> <div class="hh"><div class="border-top22"></div><img src="https://bootstraplily.com/demo/architectural/img/slide-5.jpg"> </div> <div class="hh"><div class="border-top22"></div><img src="https://bootstraplily.com/demo/architectural/img/slide-3.jpg"> </div> <div class="hh"><div class="border-top22"></div><img src="https://bootstraplily.com/demo/architectural/img/slide-4.jpg"> </div> <div class="hh"><div class="border-top22"></div><img src="https://bootstraplily.com/demo/architectural/img/slide-6.jpg"> </div> </div> </div> </div> </div> <!--Slider banner ends here--> <div class="container py-5"> <div class="row py-5"> <div class="col-12 font-weight-bold text-center"><h2> Want to see full website template with this slider use check our website <a href="https://bootstraplily.com/new-free-bootstrap-template-for-any-interior-architect-or-construction-company/" target="_blank">bootstraplily.com</a>. You can also download this template from our website. </h2> </div> </div> </div> <script src="https://bootstraplily.com/demo/architectural/js/owl.carousel.js"></script>

body { font-family: 'Roboto Condensed', sans-serif; } .border-top22{ cursor:pointer; transition:all 0.3s ease; position:absolute; width:88%; height:92%; box-sizing:border-box; margin:6%; border-style: solid; border-width: 5px 5px 5px 5px; border-color: rgba(212, 168, 103, 0.3); } .border-top22:hover{ border-color: rgba(212, 168, 103, 0.9); }

$(document).ready(function(){ $(".owl-carousel").owlCarousel({ dots:false, responsiveClass:true, responsive:{ 0:{ items:1, nav:false }, 600:{ items:2, nav:false }, 1000:{ items:2, nav:false, loop:false } } }); });