579 lines
37 KiB
HTML
579 lines
37 KiB
HTML
{% 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="#">©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 %}
|