<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layouts/layout}">

<div layout:fragment="content" id="page">


    <div class="page-content header-clear-medium" >

        <div class="splide single-slider slider-no-dots slider-no-arrows mb-4" id="single-slider-1">
            <div class="splide__track">
                <div class="splide__list">
                    <div class="splide__slide">
                        <div class="mx-3">
                            <div class="card mb-0 rounded-m shadow-l" style="background-image:url(/images/food/full/1w.jpg);" data-card-height="250">
                                <div class="card-overlay bg-gradient"></div>
                            </div>
                        </div>
                    </div>
                    <div class="splide__slide">
                        <div class="mx-3">
                            <div class="card mb-0 rounded-m shadow-l" style="background-image:url(/images/food/full/2w.jpg);" data-card-height="250">
                                <div class="card-overlay bg-gradient"></div>
                            </div>
                        </div>
                    </div>
                    <div class="splide__slide">
                        <div class="mx-3">
                            <div class="card mb-0 rounded-m shadow-l" style="background-image:url(/images/food/full/5w.jpg);" data-card-height="250">
                                <div class="card-overlay bg-gradient"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="card card-style mb-0">
            <div class="content" >
                <h1 class="text-center">Just Coffee</h1>
                <p class="boxed-text-xl pb-4">
                    최상급 원두를 사용한 커피를 판매합니다.
                </p>
            </div>
        </div>
        <a href="#" data-menu="menu-reservation" class="btn btn-m btn-center-l rounded-m text-uppercase font-700 bg-highlight under-btn mb-4">Make a Reservation</a>

        <a href="#" class="card card-style" style="background-image:url(/images/food/full/2w.jpg);" data-card-height="125">
            <div class="card-center px-3">
                <h1 class="color-white line-height-m font-30">
                    Coffee
                </h1>
            </div>
            <div class="card-center">
                <i class="fa fa-arrow-right text-end color-white d-block font-24 opacity-50 pe-3 pb-1"></i>
            </div>
            <div class="card-overlay bg-black opacity-70"></div>
        </a>
        <a href="#" class="card card-style" style="background-image:url(/images/food/full/4w.jpg);" data-card-height="125">
            <div class="card-center px-3">
                <h1 class="color-white line-height-m font-30">
                    Non-coffee
                </h1>
            </div>
            <div class="card-center">
                <i class="fa fa-arrow-right text-end color-white d-block font-24 opacity-50 pe-3 pb-1"></i>
            </div>
            <div class="card-overlay bg-black opacity-70"></div>
        </a>


        <div class="card card-style">
            <div class="content">
                <h1>Find us Here:</h1>
            </div>
            <div class="responsive-iframe">
                <iframe src='https://www.google.com/maps/embed/v1/view?key=AIzaSyAM3nxDVrkjyKwdIZp8QOplmBKLRVI5S_Y&center=-33.8569,151.2152&zoom=16&maptype=satellite' frameborder='0' allowfullscreen></iframe>
            </div>
            <div class="content mb-0">
                <h3 class="font-700">Postal Information</h3>
                <p class="pb-0 mb-0">PO Box 22161 Street Collins East</p>
                <p class="pb-0 mb-0">PO Box 16122 Collins Street West</p>
                <p class="pb-0">Victoria 8007 Australia</p>

                <div class="divider"></div>

                <div class="list-group list-custom-small">
                    <a class="default-link" href="tel:+1 234 567 890">
                        <i class="fa font-14 fa-phone color-phone"></i>
                        <span>+1 234 567 8900</span>
                        <span class="badge bg-red-dark">TAO TO CALL</span>
                        <i class="fa fa-angle-right"></i>
                    </a>
                    <a class="default-link" href="mailto:mail@domain.com">
                        <i class="fa font-14 fa-envelope color-mail"></i>
                        <span>mail@domain.com</span>
                        <span class="badge bg-red-dark">TAO TO MAIL</span>
                        <i class="fa fa-angle-right"></i>
                    </a>
                    <a class="default-link" href="https://www.facebook.com/enabled.labs/">
                        <i class="fab font-14 fa-facebook color-facebook"></i>
                        <span>enabled.labs</span>
                        <i class="fa fa-link"></i>
                    </a>
                    <a class="default-link" href="https://twitter.com/iEnabled">
                        <i class="fab font-14 fa-twitter-square color-twitter"></i>
                        <span>@iEnabled</span>
                        <i class="fa fa-link"></i>
                    </a>
                    <a href="#" class="border-0">
                        <i class="fab font-14 fa-linkedin color-linkedin"></i>
                        <span>@Enabled</span>
                        <i class="fa fa-link"></i>
                    </a>

                </div>
            </div>
        </div>

        <div class="card card-style">
            <div class="card mx-0" data-card-height="120">
                <div class="card-center">
                    <a href="tel:+1 234 567 890" class="show-business-opened float-end btn btn-xs rounded-xl text-uppercase font-900 me-3 bg-white color-black">Call Now</a>
                    <a href="/page-contact.html" class="show-business-closed float-end btn btn-xs rounded-xl text-uppercase font-900 me-3 bg-white color-black">Email Us</a>
                </div>
                <div class="card-center ms-3 ps-1">
                    <h1 class="font-20 show-business-opened working-message-above color-white mb-n1">Welcome! We're open!</h1>
                    <p class="show-business-opened working-message-under color-white opacity-90 mb-0">Call us Now! Let's have a chat!</p>
                    <h1 class="font-20 show-business-closed working-message-above color-white mb-n1">Sorry! We're closed!</h1>
                    <p class="show-business-closed working-message-under color-white opacity-90 mb-0">We'll be back very soon!</p>
                </div>
                <div class="card-overlay show-business-opened bg-green-dark"></div>
                <div class="card-overlay show-business-closed bg-red-dark"></div>
            </div>
            <div class="content mt-n4 mb-0">
                <!-- To set open and Close Hours Open custom.js and search for "SET OPENING HOURS BELOW" -->
                <!-- Only setting the code below will not make the system work automatically-->
                <div data-day="Monday" class="working-hours"><p>Monday</p>    <p>09:00 AM</p> <p>05:00 PM</p></div>
                <div data-day="Tuesday" class="working-hours"><p>Tuesday</p>   <p>09:00 AM</p> <p>05:00 PM</p></div>
                <div data-day="Wednesday" class="working-hours"><p>Wednesday</p> <p>09:00 AM</p> <p>05:00 PM</p></div>
                <div data-day="Thursday" class="working-hours"><p>Thursday</p>  <p>09:00 AM</p> <p>05:00 PM</p></div>
                <div data-day="Friday" class="working-hours"><p>Friday</p>    <p>09:00 AM</p> <p>05:00 PM</p></div>
                <div data-day="Saturday" class="working-hours"><p>Saturday</p>  <p>09:00 AM</p> <p>01:00 PM</p></div>
                <div data-day="Sunday" class="working-hours"><p>Sunday</p>    <p class="opacity-00">-</p> <p>We're Closed</p></div>
            </div>
        </div>


        <div class="footer card card-style">
            <a href="#" class="footer-title"><span class="color-highlight">StickyMobile</span></a>
            <p class="footer-text"><span>Made with <i class="fa fa-heart color-highlight font-16 ps-2 pe-2"></i> by Enabled</span><br><br>Powered by the best Mobile Website Developer on Envato Market. Elite Quality. Elite Products.</p>
            <div class="text-center mb-3">
                <a href="#" class="icon icon-xs rounded-sm shadow-l me-1 bg-facebook"><i class="fab fa-facebook-f"></i></a>
                <a href="#" class="icon icon-xs rounded-sm shadow-l me-1 bg-twitter"><i class="fab fa-twitter"></i></a>
                <a href="#" class="icon icon-xs rounded-sm shadow-l me-1 bg-phone"><i class="fa fa-phone"></i></a>
                <a href="#" data-menu="menu-share" class="icon icon-xs rounded-sm me-1 shadow-l bg-red-dark"><i class="fa fa-share-alt"></i></a>
                <a href="#" class="back-to-top icon icon-xs rounded-sm shadow-l bg-dark-light"><i class="fa fa-angle-up"></i></a>
            </div>
            <p class="footer-copyright">Copyright &copy; Enabled <span id="copyright-year">2017</span>. All Rights Reserved.</p>
            <p class="footer-links"><a href="#" class="color-highlight">Privacy Policy</a> | <a href="#" class="color-highlight">Terms and Conditions</a> | <a href="#" class="back-to-top color-highlight"> Back to Top</a></p>
            <div class="clear"></div>
        </div>

    </div>
    <!-- End of Page Content-->

    <div id="menu-reservation" class="menu menu-box-bottom menu-box-detached">
        <div class="menu-title"><h1>Make a Reservation</h1><p class="color-highlight">We'll make the preparations.</p><a href="#" class="close-menu"><i class="fa fa-times"></i></a></div>
        <div class="divider divider-margins mb-1"></div>
        <div class="content">
            <div class="input-style has-borders no-icon validate-field">
                <input type="name" class="form-control focus-blue validate-name" id="f1" placeholder="Name">
                <label for="f1" class="color-blue-dark">Name</label>
                <i class="fa fa-times disabled invalid color-red-dark"></i>
                <i class="fa fa-check disabled valid color-green-dark"></i>
                <em>(required)</em>
            </div>
            <div class="input-style has-borders no-icon validate-field">
                <input type="tel" class="form-control focus-blue validate-phone" id="f5" placeholder="Phone">
                <label for="f5" class="color-blue-dark">Phone</label>
                <i class="fa fa-times disabled invalid color-red-dark"></i>
                <i class="fa fa-check disabled valid color-green-dark"></i>
                <em>(required)</em>
            </div>
            <div class="input-style has-borders no-icon validate-field">
                <input type="date" value="2030-12-31" class="form-control focus-blue validate-text" id="f7" placeholder="Phone">
                <label for="f7" class="color-blue-dark">Select Date</label>
                <i class="fa fa-check disabled valid color-green-dark me-4 pe-3 mt-n2"></i>
                <i class="fa fa-times disabled invalid color-red-dark me-4 pe-3 mt-n2"></i>
                <em></em>
            </div>
            <div class="input-style has-borders no-icon validate-field">
                <label for="f6" class="color-blue-dark">Select A Value</label>
                <select id="f6">
                    <option value="default" selected disabled>Party Size</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select>
                <span><i class="fa fa-chevron-down"></i></span>
                <i class="fa fa-check disabled valid color-green-dark"></i>
                <i class="fa fa-times disabled invalid color-red-dark"></i>
                <em></em>
            </div>
            <a href="#" class="btn btn-m btn-full rounded-sm shadow-xl text-uppercase font-700 bg-red-dark mt-4 mb-3">Submit Reservation</a>
        </div>
    </div>
</div>


