S Ficha

<section class="s-ficha container mb-5">
    <div class="row">
        <div class="col-12 col-lg-6 mb-3">
            <div class=" col-6 col-lg-5 mb-3">
                <img src="../../../img/logo_brisas.png" alt="" class="img img-w">
            </div>
            <div class="captions w-100 position-relative mb-3">
                <h3 class="text text-color-primary text-size-1-5 text-w-bold mb-0">Brisas del Caribe</h3>
                <div class="d-flex flex-wrap w-100 mb-2">
                    <button class="btn btn-reset">
                        <img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
                    </button>
                    <button class="btn btn-reset">
                        <img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
                    </button>
                    <button class="btn btn-reset">
                        <img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
                    </button>
                    <button class="btn btn-reset">
                        <img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
                    </button>
                    <button class="btn btn-reset">
                        <img src="../../../img/star.png" alt="" class="img img-auto img-w">
                    </button>
                </div>
                <div class="w-100 mb-2 d-flex align-items-center">
                    <img src="../../../img/icon_hotel.png" alt="" class="img img-contain mr-2">
                    <p class="text text-uppercase mb-0">Hotel Brisas</p>
                </div>
                <div class="w-100 mb-3 d-flex align-items-start">
                    <img src="../../../img/icon_flag.png" alt="" class="img img-contain mr-2">
                    <div class="col-10 p-0">
                        <p class="text text-uppercase mb-1">Varadero</p>
                        <p class="text text-uppercase mb-0">Carr, Las Morlas, Km 12 1/2 Varadero</p>
                        <p class="text text-uppercase mb-0">Matanzas, Cuba</p>
                    </div>
                </div>
                <div class="c-flag position position-absolute position-z-2">
                    <img src="../../../img/flag.png" alt="flag-background" class="img img-auto">
                    <p class="value text text-color-white m-0 text-center text-size-0-8 text-lh-100 position-absolute">Desde<span class="d-block text text-size-1-5 text-color-white text-family-primary text-w-bold">41,00€</span></p>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-6 mb-3">
            <div class="main-carousel main-carousel-full dots dots-bullets dots-arrow dots-no-zoom dots-round border border-none w-100 pb-5">
                <div class="item col-12 px-0">
                    <img src="../../../img/dummy.png" alt="" class="img img-auto img-w img-h-lg-400 img-round">
                </div>
                <div class="item col-12 px-0">
                    <img src="../../../img/dummy.png" alt="" class="img img-auto img-w img-h-lg-400 img-round">
                </div>
                <div class="item col-12 px-0">
                    <img src="../../../img/dummy.png" alt="" class="img img-auto img-w img-h-lg-400 img-round">
                </div>
                <div class="item col-12 px-0">
                    <img src="../../../img/dummy.png" alt="" class="img img-auto img-w img-h-lg-400 img-round">
                </div>
                <div class="item col-12 px-0">
                    <img src="../../../img/dummy.png" alt="" class="img img-auto img-w img-h-lg-400 img-round">
                </div>
                <div class="item col-12 px-0">
                    <img src="../../../img/dummy.png" alt="" class="img img-auto img-w img-h-lg-400 img-round">
                </div>
                <div class="item col-12 px-0">
                    <img src="../../../img/dummy.png" alt="" class="img img-auto img-w img-h-lg-400 img-round">
                </div>
                <div class="item col-12 px-0">
                    <img src="../../../img/dummy.png" alt="" class="img img-auto img-w img-h-lg-400 img-round">
                </div>
                <div class="item col-12 px-0">
                    <img src="../../../img/dummy.png" alt="" class="img img-auto img-w img-h-lg-400 img-round">
                </div>
            </div>
        </div>
        <div class="col-12">
            <div class="w-100 mb-3">
                <p class="text">Pellentesque luctus risus efficitur lacus ultricies vulputate. Aliquam ut libero rhoncus, posuere nisl non, accumsan sem. Quisque sed nisl vel quam scelerisque suscipit nec eget lacus. Proin gravida est at enim facilisis pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam bibendum non augue a ullamcorper.</p>
            </div>
            <div class="mapa">
                <img src="../../../img/dummy_mapa.png" alt="" class="img img-auto img-w">
            </div>
        </div>
    </div>
</section>
<section class="s-ficha container mb-5">
    <div class="row">
        <div class="col-12 col-lg-6 mb-3">
            <div class=" col-6 col-lg-5 mb-3">
                <img src="../../../img/logo_brisas.png" alt="" class="img img-w">
            </div>
            <div class="captions w-100 position-relative mb-3">
                <h3 class="text text-color-primary text-size-1-5 text-w-bold mb-0">Brisas del Caribe</h3>
                <div class="d-flex flex-wrap w-100 mb-2">
                    <button class="btn btn-reset">
                        <img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
                    </button>
                    <button class="btn btn-reset">
                        <img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
                    </button>
                    <button class="btn btn-reset">
                        <img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
                    </button>
                    <button class="btn btn-reset">
                        <img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
                    </button>
                    <button class="btn btn-reset">
                        <img src="../../../img/star.png" alt="" class="img img-auto img-w">
                    </button>
                </div>
                <div class="w-100 mb-2 d-flex align-items-center">
                    <img src="../../../img/icon_hotel.png" alt="" class="img img-contain mr-2">
                    <p class="text text-uppercase mb-0">Hotel Brisas</p>
                </div>
                <div class="w-100 mb-3 d-flex align-items-start">
                    <img src="../../../img/icon_flag.png" alt="" class="img img-contain mr-2">
                    <div class="col-10 p-0">
                        <p class="text text-uppercase mb-1">Varadero</p>
                        <p class="text text-uppercase mb-0">Carr, Las Morlas, Km 12 1/2 Varadero</p>
                        <p class="text text-uppercase mb-0">Matanzas, Cuba</p>
                    </div>
                </div>
                {{> @c-flag }}
            </div>
        </div>
        <div class="col-12 col-lg-6 mb-3">
            <div class="main-carousel main-carousel-full dots dots-bullets dots-arrow dots-no-zoom dots-round border border-none w-100 pb-5">
                <div class="item col-12 px-0">
                    <img src="../../../img/dummy.png" alt="" class="img img-auto img-w img-h-lg-400 img-round">
                </div>
                <div class="item col-12 px-0">
                    <img src="../../../img/dummy.png" alt="" class="img img-auto img-w img-h-lg-400 img-round">
                </div>
                <div class="item col-12 px-0">
                    <img src="../../../img/dummy.png" alt="" class="img img-auto img-w img-h-lg-400 img-round">
                </div>
                <div class="item col-12 px-0">
                    <img src="../../../img/dummy.png" alt="" class="img img-auto img-w img-h-lg-400 img-round">
                </div>
                <div class="item col-12 px-0">
                    <img src="../../../img/dummy.png" alt="" class="img img-auto img-w img-h-lg-400 img-round">
                </div>
                <div class="item col-12 px-0">
                    <img src="../../../img/dummy.png" alt="" class="img img-auto img-w img-h-lg-400 img-round">
                </div>
                <div class="item col-12 px-0">
                    <img src="../../../img/dummy.png" alt="" class="img img-auto img-w img-h-lg-400 img-round">
                </div>
                <div class="item col-12 px-0">
                    <img src="../../../img/dummy.png" alt="" class="img img-auto img-w img-h-lg-400 img-round">
                </div>
                <div class="item col-12 px-0">
                    <img src="../../../img/dummy.png" alt="" class="img img-auto img-w img-h-lg-400 img-round">
                </div>
            </div>
        </div>
        <div class="col-12">
            <div class="w-100 mb-3">
                <p class="text">Pellentesque luctus risus efficitur lacus ultricies vulputate. Aliquam ut libero rhoncus, posuere nisl non, accumsan sem. Quisque sed nisl vel quam scelerisque suscipit nec eget lacus. Proin gravida est at enim facilisis pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam bibendum non augue a ullamcorper.</p>
            </div>
            <div class="mapa">
                <img src="../../../img/dummy_mapa.png" alt="" class="img img-auto img-w">
            </div>
        </div>
    </div>
</section>
/* No context defined. */
  • Content:
    // ficha section
    .s-ficha {
        .c-flag {
            top: -8rem;
            right: 0;
            @include breakpoint(desktop) {
                bottom: 100%;
                top: initial;
            }
        }
    }
  • URL: /components/raw/s-ficha/s-ficha.scss
  • Filesystem Path: src/components/sections/s-ficha/s-ficha.scss
  • Size: 188 Bytes

No notes defined.