title = "Experiences"
url = "/experiences"
layout = "default"
is_hidden = 0
==
<?php
use RainLab\Blog\Models\Category;
	use RainLab\Blog\Models\Post;
    function onStart()
    {
        $posts = Category::where("slug", "experiences")->first();
        $this['experience'] = Post::where("slug", "static-excurtions")->first();
        $this['posts'] = $posts->posts;
		$this['js'] = "assets/js/facilities.min.js";
	}
?>
==
{% put styles %}
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
    {% endput %}

	{% put scripts %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" type="text/javascript"></script>
    {% endput %}

    {% put scripts_inline %}
    {% endput %}

    {% put additional_flying_elements %}
    {% endput %}

    {% put footer_pusher %}
    {% endput %}

    {% put modal %}
    {% endput %}

    <section class="ktpid-002" id="facilities-01">
        <!-- <div style="background: url('{{experience.featured_images[0].path}}');" class="ktpid-003 full-bg-img"></div> -->
        <div style="background: url('https://ketapangindahhotel.com/storage/app/media/pulau%20merah%202.jpg');" class="ktpid-003 full-bg-img"></div>
    </section>

    <section id="facilities-02">
        <div class="container">
            <h1 class="mb-3 text-center">{{experience.title}}</h1>
            <p class="ktpid-005 text-center">
                {{experience.excerpt}}
            </p>
        </div>
    </section>

    <section id="facilities-03">
        <div class="container">
            {% for post in posts %}
            <div class="row mt-4 mt-lg-0">
                <div class="col-lg-12 d-flex">
                    <h2 class="border-bottom mb-3 pb-3" style="text-transform: uppercase;">{{post.title}} | <span class="subtitle">{{post.excerpt}}</span></h2>
                </div>
                <div class="col-lg-6 d-flex">
                    <div class="ratio-box ratio4_3">
                        <div class="ratio-box-content">
                            <div class="facilities-carousel-01 owl-carousel owl-theme">
                                {% for img in post.featured_images %}
                                <div class="ratio-box ratio4_3">
                                    <div style="background: url('{{img.path}}')" class="full-bg-img ratio-box-content"></div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 px-lg-5 pt-3">
                    <div>
                        {{post.content_html|raw}}
                    </div>
                    <!-- <a class="text-alfa ktpid-006" href="#">Learn more</a> -->
                </div>
            </div>
            {% endfor %}
        </div>
    </section>
    <div class="ktpid-017"></div>