{% extends 'layouts/app.html' %}
{% load static %}
{% block content %}
    <!-- film grain start -->
    <div id="film-grain"></div><!-- film grain end -->
    <!-- rain start -->
    <div class="weather rain"></div><!-- rain end -->
    <!-- preload start -->
    <div id="preload">
        <!-- preload status start -->
        <div id="preload-status"></div><!-- preload status end -->
    </div><!-- preload end -->
    <!-- site opening start -->
    <div class="site-opening" id="site-wrapper">
        <!-- ui layer start -->
        <div id="ui-layer">
            <!-- main image start -->
            <div class="main-image">
                <!-- menu start -->
                {% comment %}<div id="menu-wrapper">
                    <!-- menu button start -->
                    <button class="lines-button minus menu-toggle" id="main-menu-caller" type="button"><span
                            class="lines"></span></button><!-- menu button end -->
                    <!-- navigation start -->
                    <div id="main-menu">
                        <div class="menu-nav-wrapper">
                            <nav class="menu-nav">
                                <ul>
                                    <li class="menu">
                                        <a class="menu-state active link link--kukuri" data-letters="Home" href="#"
                                           id="fire-home">Home</a>
                                    </li>
                                    <li class="menu">
                                        <a class="menu-state link link--kukuri" data-letters="About" href="#"
                                           id="fire-about">About</a>
                                    </li>
                                    <li class="menu">
                                        <a class="menu-state link link--kukuri" data-letters="Services" href="#"
                                           id="fire-services">Services</a>
                                    </li>
                                    <li class="menu">
                                        <a class="menu-state link link--kukuri" data-letters="Photos" href="#"
                                           id="fire-photos">Photos</a>
                                    </li>
                                    <li class="menu">
                                        <a class="menu-state link link--kukuri" data-letters="Contact" href="#"
                                           id="fire-contact">Contact</a>
                                    </li>
                                    <li class="menu credits brackets">
                                        <a href="#">&copy;2015 All Rights Reserved.</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div><!-- navigation end -->
                </div>{% endcomment %}<!-- menu end -->
                <!-- newsletter dialog start -->
                <div class="dialog" id="somedialog">
                    <div class="dialog__overlay"></div>
                    <div class="dialog__content">
                        <div class="morph-shape">
                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 560 280"
                                 preserveAspectRatio="none">
                                <rect x="3" y="3" fill="none" width="556" height="276"/>
                            </svg>
                        </div>
                        <div class="dialog-inner">
                            <h5>
                                Newsletter sign up
                            </h5>
                            <p>
                                Subscribe today to receive the latest news
                            </p>
                            <!-- newsletter form start -->
                            <div id="subscribe-wrapper">
                                <div id="newsletter">
                                    <div class="newsletter">
                                        <form action="subscribe.php" id="subscribe" method="post" name="subscribe">
                                            <label class="mail"> Email</label> <input
                                                class="subscriberequiredField subscribeemail" id="subscribeemail"
                                                name="subscribeemail" type="text">
                                            <button class="submit-button-2" id="submit-2" type="submit">Subscribe
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div><!-- newsletter form end -->
                            <div>
                                <button class="action" data-dialog-close><i class="fa fa-times"></i></button>
                            </div>
                        </div>
                    </div>
                </div><!-- newsletter dialog end -->
                <!-- upper page start -->
                <div class="upper-page current" id="home">
                    <!-- frame start -->
                    <div class="line line-top"></div>
                    <div class="line line-right"></div>
                    <div class="line line-bottom"></div>
                    <div class="line line-left"></div><!-- frame end -->
                    <!-- center container start -->
                    <div class="center-container-home">
                        <!-- center block start -->
                        <div class="center-block-home">
                            <!-- upper content start -->
                            <div class="upper-content">
                                <!-- container start -->
                                <div class="container sections">
                                    <!-- row start -->
                                    <div class="row">
                                        <!-- intro start -->
                                        <div id="intro-wrapper">
                                            <!-- intro spacer start -->
                                            <div class="intro-spacer"></div><!-- intro spacer end -->
                                           {% comment %} <ul>
                                                <li class="brackets">
                                                    <h6>
                                                        <a href="#">an ex nihilo template</a>
                                                    </h6>
                                                </li>
                                            </ul>{% endcomment %}
                                            <div class="word-slide">
                                                <!-- wordRotator start -->
                                                <h1 id="wordrotator"></h1><!-- wordRotator end -->
                                            </div>
                                            <!-- decoration start -->
                                            <div class="decoration">
                                                <div class="decoration-left"></div>
                                                <div class="decoration-effect">
                                                    <a class="effect-bubba trigger" data-dialog="somedialog" href="{{ settings.url }}">Site</a>
                                                </div>
                                                <div class="decoration-right"></div>
                                            </div><!-- decoration end -->
                                            <!-- intro spacer start -->
                                            <div class="intro-spacer-2"></div><!-- intro spacer end -->
                                            <!-- countdown start -->
                                            <div id="countdown-wrapper">
                                                <ul id="countdown">
                                                    <!-- seconds start -->
                                                    <li>
                                                        <span class="seconds">00</span>
                                                        <p class="timeRefSeconds">
                                                            Seconds
                                                        </p>
                                                    </li><!-- seconds end -->
                                                    <!-- days start -->
                                                    <li>
                                                        <span class="days">00</span>
                                                        <p class="timeRefDays">
                                                            Days
                                                        </p>
                                                    </li><!-- days end -->
                                                </ul>
                                            </div><!-- countdown end -->
                                            <!-- intro spacer start -->
                                            <div class="intro-spacer-2"></div><!-- intro spacer end -->
                                        </div><!-- intro end -->
                                    </div><!-- row end -->
                                </div><!-- container end -->
                            </div><!-- upper content end -->
                        </div><!-- center block end -->
                    </div><!-- center container end -->
                </div><!-- upper page end -->
                <!-- about start -->
                <div class="lower-page" id="about">
                    <!-- center container start -->
                    <div class="center-container">
                        <!-- center block start -->
                        <div class="center-block">
                            <!-- lower content start -->
                            <div class="lower-content">
                                <!-- container start -->
                                <div class="container sections">
                                    <!-- row start -->
                                    <div class="row">
                                        <h2>
                                            About
                                        </h2>
                                    </div><!-- row end -->
                                    <!-- row start -->
                                    <div class="row">
                                        <!-- decoration 2 start -->
                                        <div class="decoration-2">
                                            <div class="decoration-left-2"></div>
                                            <div class="decoration-effect-2">
                                                <a class="effect-bubba-2" href="#">Who we are</a>
                                            </div>
                                            <div class="decoration-right-2"></div>
                                        </div><!-- decoration 2 end -->
                                    </div><!-- row end -->
                                    <!-- row start -->
                                    <div class="row">
                                        <div class="col-md-8">
                                            <div class="quote">
                                                <p>
                                                    <span class="quote-mark-l fa fa-quote-left"></span>Lorem ipsum dolor
                                                    sit
                                                    amet, consectetur adipiscing elit. Fusce dictum pharetra
                                                    congue.<span class="quote-mark-r fa fa-quote-right"></span>
                                                </p>
                                            </div>
                                            <div class="divider"></div>
                                            <!-- skills start -->
                                            <div class="contentOT">
                                                <div class="colOT">
                                                    <ul id="skills">
                                                        <li>
                                                            <span class="expand html5"></span><span
                                                                class="skills-description">HTML5</span>
                                                        </li>
                                                        <li>
                                                            <span class="expand css3"></span><span
                                                                class="skills-description">CSS3</span>
                                                        </li>
                                                        <li>
                                                            <span class="expand jquery"></span><span
                                                                class="skills-description">jQuery</span>
                                                        </li>
                                                        <li>
                                                            <span class="expand photoshop"></span><span
                                                                class="skills-description">Photoshop</span>
                                                        </li>
                                                        <li class="last">
                                                            <span class="expand dreamweaver"></span><span
                                                                class="skills-description">Dreamweaver</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div><!-- skills end -->
                                        </div>
                                        <div class="col-md-4">
                                            <h3>
                                                <span class="awesome"><span class="fa fa-user-secret"></span></span>
                                                Customer First
                                            </h3>
                                            <p>
                                                Suspendisse ut feugiat orci, in laoreet augue. Aliquam ultricies, ligula
                                                non
                                                dignissim suscipit, neque nunc <a href="#">efficitur felis</a>.
                                            </p>
                                            <div class="divider"></div>
                                            <h3>
                                                <span class="awesome"><span class="fa fa-star"></span></span> Quality
                                                First
                                            </h3>
                                            <p>
                                                Suspendisse ut feugiat orci, in laoreet augue. Aliquam ultricies, ligula
                                                non
                                                dignissim suscipit, neque nunc efficitur felis.
                                            </p>
                                        </div>
                                    </div><!-- row end -->
                                </div><!-- container end -->
                            </div><!-- lower content end -->
                        </div><!-- center block end -->
                    </div><!-- center container end -->
                </div><!-- about end -->
                <!-- services start -->
                <div class="lower-page" id="services">
                    <!-- center container start -->
                    <div class="center-container">
                        <!-- center block start -->
                        <div class="center-block">
                            <!-- lower content start -->
                            <div class="lower-content">
                                <!-- container start -->
                                <div class="container sections">
                                    <!-- row start -->
                                    <div class="row">
                                        <h2>
                                            Services
                                        </h2>
                                    </div><!-- row end -->
                                    <!-- row start -->
                                    <div class="row">
                                        <!-- decoration 2 start -->
                                        <div class="decoration-2">
                                            <div class="decoration-left-2"></div>
                                            <div class="decoration-effect-2">
                                                <a class="effect-bubba-2" href="#">What we do</a>
                                            </div>
                                            <div class="decoration-right-2"></div>
                                        </div><!-- decoration 2 end -->
                                    </div><!-- row end -->
                                    <!-- row start -->
                                    <div class="row">
                                        <div class="col-md-4">
                                            <h3>
                                                <span class="awesome"><span class="fa fa-diamond"></span></span> Core
                                                Values
                                            </h3>
                                            <p>
                                                Suspendisse ut feugiat orci, in laoreet augue. Aliquam ultricies, ligula
                                                non
                                                dignissim suscipit, neque nunc <a href="#">efficitur felis</a>.
                                            </p>
                                            <div class="divider"></div>
                                            <h3>
                                                <span class="awesome"><span class="fa fa-bank"></span></span> Core
                                                Principles
                                            </h3>
                                            <p>
                                                Suspendisse ut feugiat orci, in laoreet augue. Aliquam ultricies, ligula
                                                non
                                                dignissim suscipit, neque nunc efficitur felis.
                                            </p>
                                        </div>
                                        <div class="col-md-8">
                                            <!-- owl carousel start -->
                                            <div class="services-gallery">
                                                <ul class="services-gallery-slider owl-carousel">
                                                    <li>
                                                        <img alt="Services" src="{% static '' %}img/sky-image-dark.png">
                                                    </li>
                                                    <li>
                                                        <img alt="Services" src="{% static '' %}img/sky-image-light.png">
                                                    </li>
                                                    <li>
                                                        <img alt="Services" src="{% static '' %}img/the-sea-image-dark.png">
                                                    </li>
                                                    <li>
                                                        <img alt="Services" src="{% static '' %}img/the-sea-image-light.png">
                                                    </li>
                                                </ul>
                                            </div><!-- owl carousel end -->
                                        </div>
                                    </div><!-- row end -->
                                </div><!-- container end -->
                            </div><!-- lower content end -->
                        </div><!-- center block end -->
                    </div><!-- center container end -->
                </div><!-- services end -->
                <!-- photos start -->
                <div class="lower-page" id="photos">
                    <!-- center container start -->
                    <div class="center-container">
                        <!-- center block start -->
                        <div class="center-block">
                            <!-- lower content start -->
                            <div class="lower-content">
                                <!-- container start -->
                                <div class="container sections">
                                    <!-- row start -->
                                    <div class="row">
                                        <h2>
                                            Photos
                                        </h2>
                                    </div><!-- row end -->
                                    <!-- row start -->
                                    <div class="row">
                                        <!-- decoration 2 start -->
                                        <div class="decoration-2">
                                            <div class="decoration-left-2"></div>
                                            <div class="decoration-effect-2">
                                                <a class="effect-bubba-2" href="#">What it looks like</a>
                                            </div>
                                            <div class="decoration-right-2"></div>
                                        </div><!-- decoration 2 end -->
                                    </div><!-- row end -->
                                    <!-- row start -->
                                    <div class="row">
                                        <!-- photo gallery start -->
                                        <section class="photos-section">
                                            <div class="photos-container">
                                                <!-- photo 2 start -->
                                                <a class="photo-gallery landscape popup-photo"
                                                   href="https://flare.beyhano.com.tr/_7WkSuJanvCgn8CkyCL9X.avif">
                                                    <div class="photo-container">
                                                        <img alt="Photos" src="https://flare.beyhano.com.tr/_7WkSuJanvCgn8CkyCL9X.avif">
                                                    </div>
                                                    <div class="button-container centering-y">
                                                        <div class="button-zoom button-square">
                                                            +
                                                        </div>
                                                    </div>
                                                </a><!-- photo 2 end -->
                                                <!-- photo 3 start -->
                                                <a class="photo-gallery landscape popup-photo"
                                                   href="https://flare.beyhano.com.tr/_7WkSuJanvCgn8CkyCL9X.avif">
                                                    <div class="photo-container">
                                                        <img alt="Photos" src="https://flare.beyhano.com.tr/_7WkSuJanvCgn8CkyCL9X.avif">
                                                    </div>
                                                    <div class="button-container centering-y">
                                                        <div class="button-zoom button-square">
                                                            +
                                                        </div>
                                                    </div>
                                                </a><!-- photo 3 end -->
                                                <!-- photo 1 start -->
                                                <a class="photo-gallery portrait popup-photo"
                                                   href="https://flare.beyhano.com.tr/_7WkSuJanvCgn8CkyCL9X.avif">
                                                    <div class="photo-container">
                                                        <img alt="Photos" src="https://flare.beyhano.com.tr/_7WkSuJanvCgn8CkyCL9X.avif">
                                                    </div>
                                                    <div class="button-container centering-y">
                                                        <div class="button-zoom button-square">
                                                            +
                                                        </div>
                                                    </div>
                                                </a><!-- photo 1 end -->
                                                <!-- photo 4 start -->
                                                <a class="photo-gallery landscape popup-photo"
                                                   href="https://flare.beyhano.com.tr/_7WkSuJanvCgn8CkyCL9X.avif">
                                                    <div class="photo-container">
                                                        <img alt="Photos" src="https://flare.beyhano.com.tr/_7WkSuJanvCgn8CkyCL9X.avif">
                                                    </div>
                                                    <div class="button-container centering-y">
                                                        <div class="button-zoom button-square">
                                                            +
                                                        </div>
                                                    </div>
                                                </a><!-- photo 4 end -->
                                                <!-- photo 5 start -->
                                                <a class="photo-gallery landscape popup-photo"
                                                   href="https://flare.beyhano.com.tr/_7WkSuJanvCgn8CkyCL9X.avif">
                                                    <div class="photo-container">
                                                        <img alt="Photos" src="https://flare.beyhano.com.tr/_7WkSuJanvCgn8CkyCL9X.avif">
                                                    </div>
                                                    <div class="button-container centering-y">
                                                        <div class="button-zoom button-square">
                                                            +
                                                        </div>
                                                    </div>
                                                </a><!-- photo 5 end -->
                                            </div>
                                        </section><!-- photo gallery end -->
                                    </div><!-- row end -->
                                </div><!-- container end -->
                            </div><!-- lower content end -->
                        </div><!-- center block end -->
                    </div><!-- center container end -->
                </div><!-- photos end -->
                <!-- contact start -->
                <div class="lower-page" id="contact">
                    <!-- center container start -->
                    <div class="center-container">
                        <!-- center block start -->
                        <div class="center-block">
                            <!-- lower content start -->
                            <div class="lower-content">
                                <!-- container start -->
                                <div class="container sections">
                                    <!-- row start -->
                                    <div class="row">
                                        <h2>
                                            Contact
                                        </h2>
                                    </div><!-- row end -->
                                    <!-- row start -->
                                    <div class="row">
                                        <!-- decoration 2 start -->
                                        <div class="decoration-2">
                                            <div class="decoration-left-2"></div>
                                            <div class="decoration-effect-2">
                                                <a class="effect-bubba-2" href="#">Where to find us</a>
                                            </div>
                                            <div class="decoration-right-2"></div>
                                        </div><!-- decoration 2 end -->
                                    </div><!-- row end -->
                                    <!-- row start -->
                                    <div class="row">
                                        <div class="col-md-4">
                                            <h3>
                                                <span class="awesome"><span class="fa fa-map-marker"></span></span>
                                                Address
                                            </h3>
                                            <p>
                                                ex nihilo, Inc.<br>
                                                Touchdown Dr 1176
                                            </p>
                                            <div class="divider"></div>
                                            <h3>
                                                <span class="awesome"><span class="fa fa-mobile"></span></span>
                                                Telephone
                                            </h3>
                                            <p>
                                                [00] 11 - 76<br>
                                                [01] 11 - 76
                                            </p>
                                            <div class="divider"></div>
                                            <h3>
                                                <span class="awesome"><span class="fa fa-paper-plane"></span></span>
                                                Email
                                            </h3>
                                            <p>
                                                <a href="mailto:you@yoursite.com">you@yoursite.com</a>
                                            </p>
                                            <div class="divider"></div>
                                        </div>
                                        <div class="col-md-8">
                                            <!-- contact form start -->
                                            <div id="contact-form">
                                                <form action="contact.php" id="form" method="post" name="send">
                                                    <div>
                                                        <input class="requiredField name" id="name" name="name"
                                                               placeholder="Name" type="text">
                                                    </div>
                                                    <div>
                                                        <input class="requiredField email" id="email" name="email"
                                                               placeholder="Email" type="text">
                                                    </div>
                                                    <div>
                                                        <input class="requiredField subject" id="subject" name="subject"
                                                               placeholder="Subject" type="text">
                                                    </div>
                                                    <div>
                                                            <textarea class="requiredField message" id="message"
                                                                      name="message" placeholder="Message">
</textarea>
                                                    </div>
                                                    <div>
                                                        <button class="submit-button" id="submit" type="submit">Submit
                                                        </button>
                                                    </div>
                                                </form>
                                            </div><!-- contact form end -->
                                            <div class="divider"></div>
                                            <h4>
                                                Get Social
                                            </h4>
                                            <!-- social icons start -->
                                            <div class="social-icons-wrapper">
                                                <ul class="social-icons">
                                                    <li>
                                                        <a class="fa fa-twitter-square fa-2x" href="#"></a>
                                                    </li>
                                                    <li>
                                                        <a class="fa fa-facebook-square fa-2x" href="#"></a>
                                                    </li>
                                                    <li>
                                                        <a class="fa fa-google-plus-square fa-2x" href="#"></a>
                                                    </li>
                                                    <li>
                                                        <a class="fa fa-youtube-square fa-2x" href="#"></a>
                                                    </li>
                                                    <li>
                                                        <a class="fa fa-linkedin-square fa-2x" href="#"></a>
                                                    </li>
                                                    <li>
                                                        <a class="fa fa-instagram fa-2x" href="#"></a>
                                                    </li>
                                                    <li>
                                                        <a class="fa fa-pinterest-square fa-2x" href="#"></a>
                                                    </li>
                                                    <li>
                                                        <a class="fa fa-share-alt-square fa-2x" href="#"></a>
                                                    </li>
                                                </ul>
                                            </div><!-- social icons end -->
                                        </div>
                                    </div><!-- row end -->
                                </div><!-- container end -->
                            </div><!-- lower content end -->
                        </div><!-- center block end -->
                    </div><!-- center container end -->
                </div><!-- contact end -->
            </div><!-- main image end -->
        </div><!-- ui layer end -->
        <!-- bg layer start -->
        <div id="bg-layer">
            <!-- cover all start -->
            <div class="cover-all"></div><!-- cover all end -->
            <!-- curtains start -->
            <div id="curtains"></div><!-- curtains end -->
            <!-- YTPlayer containment start -->
            <!-- YTPlayer containment end -->
            <!-- YTPlayer start -->
            <!-- YTPlayer end -->
            <!-- kenburnsy start -->
            <!-- kenburnsy end -->
            <!-- supersized start -->
            <div id="supersized"></div><!-- supersized end -->
            <!-- HTML5 start -->
            <!-- HTML5 end -->
        </div><!-- bg layer end -->
    </div><!-- site opening end -->
    <!-- scripts start -->
{% endblock %}
