{% extends "base.html" %}
{% block content %}
{# Owl Carousel #}
<div class="owl-carousel owl-theme" id="owl">
        <div class="site-slider">
          <div class="slider-img">
            <img src="/media/original_images/foto_1.jpg" alt="foto1">
          </div>
            <div class="slider-text">
                <h3> Lorem ipsum </h3>
                <p>Lorem ipsum</p>
                <button class="slider-btn">See More</button>
            </div>
        </div>
        <div class="site-slider">
          <div class="slider-img">
            <img src="/media/original_images/foto_1.jpg" alt="foto1">
          </div>
            <div class="slider-text">
                <h3> Lorem ipsum 1</h3>
                <p>Lorem ipsum 111</p>
                <button class="slider-btn">See More</button>
            </div>
        </div>
        <div class="site-slider">
          <div class="slider-img">
            <img src="/media/original_images/foto_1.jpg" alt="foto1">
          </div>
            <div class="slider-text">
                <h3> Lorem ipsum 1</h3>
                <p>Lorem ipsum 111</p>
                <button class="slider-btn">See More</button>
            </div>
        </div>
</div>
{# Content Card  #}
<div class="container-fluid">
    <div class="wood-wrapper">
        <div class="row">
            <div class="col-lg-12">
                 <div class="text-center pt-5 pb-2">
                    <h2 class="home-content-title">What we do</h2>
                </div>
            </div>
        </div>
        <div class="row content-row">

            <div class="col-lg-4 content-col">
                <div class="content">
                    <div class="content-overlay"></div>
                            <img src="/media/original_images/laurence-katz-MkTh65JGIlU-unsplash.png" class="content-image">
                            <div class="content-details fadeIn-bottom">
                                <h3 class="content-title">Lorem Ipsum</h3>
                            </div>
                </div>
            </div>

            <div class="col-lg-4 content-col">
                <div class="content">
                    <div class="content-overlay"></div>
                            <img src="/media/original_images/laurence-katz-MkTh65JGIlU-unsplash.png" class="content-image">
                            <div class="content-details fadeIn-bottom">
                                <h3 class="content-title">Lorem Ipsum</h3>
                            </div>
                </div>
            </div>

             <div class="col-lg-4 content-col">
                <div class="content">
                    <div class="content-overlay"></div>
                            <img src="/media/original_images/laurence-katz-MkTh65JGIlU-unsplash.png" class="content-image">
                            <div class="content-details fadeIn-bottom">
                                <h3 class="content-title">Lorem Ipsum</h3>
                            </div>
                </div>
            </div>

            <div class="col-lg-4 content-col">
                <div class="content">
                    <div class="content-overlay"></div>
                            <img src="/media/original_images/laurence-katz-MkTh65JGIlU-unsplash.png" class="content-image">
                            <div class="content-details fadeIn-bottom">
                                <h3 class="content-title">Lorem Ipsum</h3>
                            </div>
                </div>
            </div>

            <div class="col-lg-4 content-col">
                <div class="content">
                    <div class="content-overlay"></div>
                            <img src="/media/original_images/laurence-katz-MkTh65JGIlU-unsplash.png" class="content-image">
                            <div class="content-details fadeIn-bottom">
                                <h3 class="content-title">Lorem Ipsum</h3>
                            </div>
                </div>
            </div>

             <div class="col-lg-4 content-col">
                <div class="content">
                    <div class="content-overlay"></div>
                            <img src="/media/original_images/laurence-katz-MkTh65JGIlU-unsplash.png" class="content-image">
                            <div class="content-details fadeIn-bottom">
                                <h3 class="content-title">Lorem Ipsum</h3>
                            </div>
                </div>
            </div>
        </div>
    </div>

    </div>
</div>
{# Process cards #}
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="text-center pt-5 pb-2">
                    <h2 class="home-content-title">Our Process</h2>
            </div>
        </div>
    </div>
    <div class="row content-row">
        <div class="col-lg-4 content-col">
            <div class="card">
                <div class="border-number">1.</div>
                <div class="img-border">
                    <img class="card-img-top process-img" src="/media/original_images/icon_1.png">
                </div>
                <div class="card-body">
                    <h5 class="card-title">Take Your Measurements</h5>
                </div>
            </div>
        </div>

        <div class="col-lg-4 content-col">
            <div class="card">
                <div class="border-number">2.</div>
                <div class="img-border">
                    <img class="card-img-top process-img" src="/media/original_images/icon_2.png">
                </div>
                <div class="card-body">
                    <h5 class="card-title">Take Your Measurements</h5>
                </div>
            </div>
        </div>

        <div class="col-lg-4 content-col">
            <div class="card">
                <div class="border-number">3.</div>
                <div class="img-border">
                    <img class="card-img-top process-img" src="/media/original_images/icon_3.png">
                </div>
                <div class="card-body">
                    <h5 class="card-title">Take Your Measurements</h5>
                </div>
            </div>
        </div>

        <div class="col-lg-4 content-col">
            <div class="card">
                <div class="border-number">4.</div>
                <div class="img-border">
                    <img class="card-img-top process-img" src="/media/original_images/icon_4.png">
                </div>
                <div class="card-body">
                    <h5 class="card-title">Take Your Measurements</h5>
                </div>
            </div>
        </div>

        <div class="col-lg-4 content-col">
            <div class="card">
                <div class="border-number">5.</div>
                <div class="img-border">
                    <img class="card-img-top process-img" src="/media/original_images/icon_5.png">
                </div>
                <div class="card-body">
                    <h5 class="card-title">Take Your Measurements</h5>
                </div>
            </div>
        </div>

        <div class="col-lg-4 content-col">
            <div class="card">
                <div class="border-number">6.</div>
                <div class="img-border">
                    <img class="card-img-top process-img" src="/media/original_images/icong_6.png">
                </div>
                <div class="card-body">
                    <h5 class="card-title">Take Your Measurements</h5>
                </div>
            </div>
        </div>
    </div>
</div>

{# Contact Home #}
<div class="contact-wrapper">

    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="text-center pt-5 pb-2">
                        <h2 class="home-content-title">Contact Us</h2>
                </div>
            </div>
        </div>
        <div class="row rr_row">
            <div class="col-lg-6 content-col">
                <div class="map_wrapper col-sm-12">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d11973.41168536614!2d19.7575212!3d41.3881414!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xfc96e9a3ac7d506d!2sMobileri%20ABA!5e0!3m2!1sen!2s!4v1640599950576!5m2!1sen!2s" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="contact-info">
                    <h2 class="contact_title">Request An Appointment</h2>
                    <div class="contact-text">
                        <p>Do you have a kitchen project? Whether it’s a detailed vision or just some vague ideas, your design starts with an appointment in our store. A designer can meet with you and assist you throughout your project.</p>
                    </div>
                    <h2 class="contact_title">Give Us A Call</h2>
                    <span class="phone_number">+355 69 77 30 000</span>
                </div>
                <button class="slider-btn">Get in touch</button>
            </div>
        </div>
    </div>

</div>
{% block extra_js %}
<script>
    $(document).ready(function () {
    $("#owl").owlCarousel({
        items:1,
        loop:true,
        dots:true,
        numbers:true,
        // {#autoplay:true,#}
        // {#autoplaySpeed:1000,#}
        // smartSpeed:1500,
        // autoplayHoverPause:true,
    })
});
</script>


{% endblock %}
{% endblock %}