575 lines
18 KiB
HTML
575 lines
18 KiB
HTML
<!doctype html>
|
|
<!--
|
|
COPYRIGHT by HighHay/Mivfx
|
|
Before using this theme, you should accept themeforest licenses terms.
|
|
http://themeforest.net/licenses
|
|
-->
|
|
|
|
<html class="no-js" lang="en">
|
|
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
<meta charset="utf-8">
|
|
|
|
<!-- Page Title Here -->
|
|
<title>Creation - Creative Coming Soon responsive template</title>
|
|
|
|
<!-- Page Description Here -->
|
|
<meta name="description" content="A responsive coming soon template, un template HTML pour une page en cours de construction">
|
|
|
|
<!-- Disable screen scaling-->
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, user-scalable=0">
|
|
|
|
<!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
|
|
|
|
<!-- Initializer -->
|
|
<link rel="stylesheet" href="./css/normalize.css">
|
|
|
|
<!-- Web fonts and Web Icons -->
|
|
<link rel="stylesheet" href="./fonts/opensans/stylesheet.css">
|
|
<link rel="stylesheet" href="./fonts/glacial/stylesheet.css">
|
|
<link rel="stylesheet" href="./fonts/linearicons/stylesheet.css">
|
|
<link rel="stylesheet" href="./fonts/ionicons.min.css">
|
|
|
|
<!-- Vendor CSS style -->
|
|
<link rel="stylesheet" href="./css/pageloader.css">
|
|
<link rel="stylesheet" href="./css/foundation.min.css">
|
|
<link rel="stylesheet" href="./js/vendor/jquery.fullPage.css">
|
|
<link rel="stylesheet" href="./js/vegas/vegas.min.css">
|
|
<link rel="stylesheet" href="./js/owl-carousel/owl.carousel.css">
|
|
|
|
<!-- Main CSS files -->
|
|
<link rel="stylesheet" href="./css/main.css">
|
|
<!-- alt layout -->
|
|
<link rel="stylesheet" href="./css/style-color5.css">
|
|
<!-- responsiveness -->
|
|
<link rel="stylesheet" href="./css/main_responsive.css">
|
|
|
|
<script src="./js/vendor/modernizr-2.7.1.min.js"></script>
|
|
</head>
|
|
|
|
<body id="menu" class="alt-bg">
|
|
<!--[if lt IE 8]>
|
|
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
|
|
<![endif]-->
|
|
|
|
<!-- Page Loader -->
|
|
<div class="page-loader" id="page-loader">
|
|
<div><i class="ion ion-load-c ion-spin"></i>
|
|
<p>loading</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BEGIN OF site header Menu -->
|
|
<header class="header-top">
|
|
<div class="logo-wrapper">
|
|
<h2 class="logo">
|
|
<img src="img/logodark.png" alt="Logo">
|
|
<span class="title">Creation</span>
|
|
</h2>
|
|
</div>
|
|
<a class="menu-icon clearfix">
|
|
<div class="bars">
|
|
<div class="bar1"></div>
|
|
<div class="bar2"></div>
|
|
<div class="bar3"></div>
|
|
</div>
|
|
<!-- <div class="txt">Menu</div>-->
|
|
</a>
|
|
<!-- Begin of Site primary navigation -->
|
|
<nav class="site-nav" id="site-nav">
|
|
<ul class="menu clearfix qmenu">
|
|
<!--<li class="active" data-menuanchor="home">
|
|
<a href="#home">Home</a>
|
|
</li>
|
|
<li data-menuanchor="about-us">
|
|
<a href="#about-us">About</a>
|
|
</li>-->
|
|
<li>
|
|
<a href="http://highhay.com">Links</a>
|
|
</li>
|
|
<li data-menuanchor="register">
|
|
<a href="#register">Register</a>
|
|
</li>
|
|
<li class="separator">
|
|
<i class="icon lnr lnr-envelope"></i>
|
|
</li>
|
|
<li data-menuanchor="write-message">
|
|
<a href="#write-message">Write to us</a>
|
|
</li>
|
|
<!-- Add other similar menu here : -->
|
|
<!--<li>
|
|
<a href="#write-message">Write to us</a>
|
|
</li>-->
|
|
|
|
</ul>
|
|
</nav>
|
|
<!-- End of Site primary navigation -->
|
|
</header>
|
|
<!-- END OF site header Menu-->
|
|
|
|
|
|
<!-- BEGIN OF sidebar page navigation -->
|
|
<nav class="page-nav">
|
|
<ul id="qmenu" class="qmenu">
|
|
<li data-menuanchor="home">
|
|
<a href="#home">
|
|
<i class="icon lnr lnr-home"></i>
|
|
<span class="title">Home</span>
|
|
</a>
|
|
</li>
|
|
<li data-menuanchor="about-us">
|
|
<a href="#about-us">
|
|
<i class="icon lnr lnr-flag"></i>
|
|
<span class="title">About Us</span>
|
|
</a>
|
|
</li>
|
|
<li data-menuanchor="contact">
|
|
<a href="#contact">
|
|
<i class="icon lnr lnr-phone"></i>
|
|
<span class="title">Contact</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<!-- END OF sidebar page navigation -->
|
|
|
|
<!-- BEGIN OF site cover -->
|
|
<div class="page-cover">
|
|
<!-- Cover Background -->
|
|
<div class="cover-bg pos-abs full-size bg-img" data-image-src="img/bg-default2.jpg"></div>
|
|
|
|
<!-- BEGIN OF Slideshow Background -->
|
|
<!--<div class="cover-bg pos-abs full-size slide-show">
|
|
<i class='img' data-src='./img/bg-slide1.jpg'></i>
|
|
<i class='img' data-src='./img/bg-slide2.jpg'></i>
|
|
<i class='img' data-src='./img/bg-slide3.jpg'></i>
|
|
<i class='img' data-src='./img/bg-slide4.jpg'></i>
|
|
</div>-->
|
|
<!-- END OF Slideshow Background -->
|
|
|
|
<!--BEGIN OF Static video bg - uncomment below to use Video as Background-->
|
|
<!--<div id="container" class="video-container show-for-medium-up">
|
|
<video autoplay="autoplay" loop="loop" autobuffer="autobuffer" muted="muted"
|
|
width="640" height="360">
|
|
<source src="vid/flower_loop.mp4" type="video/mp4">
|
|
</video>
|
|
</div>-->
|
|
<!--END OF Static video bg-->
|
|
|
|
<!--BEGIN OF Youtube video bg - uncomment/comment below to use/or not Youtube Video as Background-->
|
|
<!--<div class='youtube-container video-container show-for-medium-up'>
|
|
<iframe frameborder="0"
|
|
src="https://youtube.com/embed/wqeuYB7KMhY?autoplay=1&controls=0&showinfo=0&autohide=1">
|
|
</iframe>
|
|
</div>-->
|
|
<!--END OF Youtube video bg-->
|
|
|
|
<!-- Solid color as background -->
|
|
<!-- <div class="cover-bg pos-abs full-size bg-color" data-bgcolor="#00B4C2"></div>-->
|
|
|
|
<!-- Particles as background -->
|
|
<!--<div id="particles-js" class="cover-bg pos-abs full-size bg-color" data-bgcolor="rgba(37, 38, 42, 0.81)"></div>-->
|
|
|
|
<!-- Solid color as filter -->
|
|
<!-- <div class="cover-bg-mask pos-abs full-size bg-color" data-bgcolor="rgba(0, 0, 0, 0.27)"></div>-->
|
|
<!-- <div class="cover-bg-mask pos-abs full-size bg-color" data-bgcolor="rgba(45, 46, 51, 0.8)"></div> -->
|
|
|
|
</div>
|
|
<!--END OF site Cover -->
|
|
|
|
|
|
|
|
<!-- BEGIN OF site main content content here -->
|
|
<main class="page-main page-home fullpg" id="mainpage">
|
|
|
|
|
|
<!-- Begin of home section -->
|
|
<div class="section section-home" data-section="home">
|
|
|
|
<!-- Content -->
|
|
<section class="content with-clock">
|
|
<!-- left elements -->
|
|
<div class="c-left">
|
|
<div class="">
|
|
<div class="c-logo home-logo ">
|
|
<!-- <img class="" src="img/logo.png" alt="Logo">-->
|
|
<!-- <i class="icon lnr lnr-clock anim-zoomin"></i>-->
|
|
</div>
|
|
</div>
|
|
<div class="c-clock clock clock-countdown">
|
|
<div class="site-config"
|
|
data-date="01/01/2020 02:00:00"
|
|
data-date-timezone="+0"
|
|
></div>
|
|
<div class="img-top">
|
|
<div class="tile-hours anim-zoomin anim-1">
|
|
<span class="hours">00</span>
|
|
<span class="txt">hours</span>
|
|
</div>
|
|
</div>
|
|
<div class="img-middle bg-img" data-image-src="img/bg-default.jpg">
|
|
<div class="tile-days">
|
|
<span class="days">00</span>
|
|
<span class="txt">days</span>
|
|
</div>
|
|
<div class="tile-minutes anim-zoomin anim-2">
|
|
<span class="minutes">00</span>
|
|
<span class="txt">minutes</span>
|
|
</div>
|
|
<div class="tile-seconds anim-zoomin anim-3">
|
|
<span class="seconds">00</span>
|
|
<span class="txt">seconds</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- right elements -->
|
|
<div class="c-right">
|
|
<div class="anim-slideright">
|
|
<header class="header">
|
|
<h2>New <strong>Creation</strong></h2>
|
|
<h3>An awesome new company.</h3>
|
|
</header>
|
|
<div class="desc">
|
|
<p>Our website will be available here soon.</p>
|
|
</div>
|
|
<div class="btns">
|
|
<a class="btn" href="#about-us">Discover</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Arrows scroll down/up -->
|
|
<footer class="s-footer p-scrolldown">
|
|
<a class="down btn" href="#about-us">
|
|
<span>About Us</span>
|
|
</a>
|
|
</footer>
|
|
</div>
|
|
<!-- End of home section -->
|
|
|
|
<!-- Begin of about us section -->
|
|
<div class="section section-about section-cent" data-section="about-us">
|
|
|
|
<section class="content">
|
|
<!-- left elements -->
|
|
<div class="c-left">
|
|
<div class="">
|
|
<div class="c-logo home-logo ">
|
|
<i class="icon lnr lnr-sun anim-rotate"></i>
|
|
</div>
|
|
<div class="c-illustr">
|
|
<div class="img-top"></div>
|
|
<div class="img-middle bg-img" data-image-src="img/bg-default.jpg">
|
|
<div class="swipe-nav">
|
|
<a class="icon-left prev" ><i class="icon lnr lnr-chevron-left"></i></a>
|
|
<a class="icon-right next" ><i class="icon lnr lnr-chevron-right"></i></a>
|
|
</div>
|
|
<div class="slides owl-carousel">
|
|
<!-- <div class="slide-item bg-img" data-image-src="img/bg-foods.jpg"></div>-->
|
|
<div class="slide-item">
|
|
<img src="img/bg-sample3.jpg" alt="slide pict">
|
|
</div>
|
|
<div class="slide-item">
|
|
<img src="img/bg-sample4.jpg" alt="slide pict">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="img-bottom"></div>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- right elements -->
|
|
<div class="c-right">
|
|
<div class="anim-slideright">
|
|
<header class="header">
|
|
<h2>About <strong>Us</strong></h2>
|
|
<h3>We make great things. How is that possible ?</h3>
|
|
</header>
|
|
<article class="desc">
|
|
<p>Lorem ipsum <strong>magicum </strong>dolor sit amet, consectetur adipiscing elit. Maecenas a sem ultrices neque vehicula fermentum a sit amet nulla.</p>
|
|
<p>Aenean ultricies odio at erat facilisis tincidunt. Fusce tempor auctor justo, nec facilisis quam vehicula vel. Aenean non mattis purus, eget lobortis odio. </p>
|
|
</article>
|
|
<!--<div class="btns">
|
|
<a class="btn" href="#register">Regiter</a>
|
|
</div>-->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Arrows scroll down/up -->
|
|
<footer class="s-footer p-scrolldown">
|
|
<a class="down btn" href="#register">
|
|
<span>Get notified</span>
|
|
</a>
|
|
</footer>
|
|
</div>
|
|
<!-- End of about us section -->
|
|
|
|
<!-- Begin of register section -->
|
|
<div class="section section-register section-cent" data-section="register">
|
|
<!-- Content -->
|
|
<section class="content">
|
|
<!-- left elements -->
|
|
<div class="c-left">
|
|
<div class="anim-slideleft">
|
|
<div class="c-logo home-logo ">
|
|
<i class="icon lnr lnr-pushpin"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- right elements -->
|
|
<div class="c-right">
|
|
<div class="anim-slideright">
|
|
<header class="header">
|
|
<h2>Subscribe <strong>Now</strong></h2>
|
|
<h3>
|
|
<span>Register to follow us.</span>
|
|
</h3>
|
|
</header>
|
|
<!-- begin of forms -->
|
|
<div class="form-wrapper desc">
|
|
<form id="mail-subscription" class="form magic send_email_form" method="get" action="ajaxserver/serverfile.php">
|
|
<p class="invite">Please, write your email below to stay in touch with us :</p>
|
|
<div class="fields clearfix">
|
|
<div class="input">
|
|
<label for="reg-email">Email </label>
|
|
<input id="reg-email" class="email_f" name="email" type="email" required placeholder="your@email.address" data-validation-type="email">
|
|
</div>
|
|
<div class="btns">
|
|
<button id="submit-email" class="btn email_b" name="submit_email">Subscribe</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p class="email-ok invisible"><strong>Thank you</strong> for your subscription. We will inform you.</p>
|
|
</form>
|
|
|
|
</div>
|
|
<!-- end of forms -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Arrows scroll down/up -->
|
|
<footer class="s-footer p-scrolldown">
|
|
<a class="down btn" href="#contact">
|
|
<span>Contact</span>
|
|
</a>
|
|
</footer>
|
|
</div>
|
|
<!-- End of register section -->
|
|
|
|
<!-- Begin of Contact section -->
|
|
<div class="section section-contact section-cent" data-section="contact">
|
|
<section class="content">
|
|
<!-- left elements -->
|
|
<div class="c-left">
|
|
<div class="">
|
|
<div class="c-logo home-logo ">
|
|
<i class="icon lnr lnr-phone anim-zoomin"></i>
|
|
</div>
|
|
<div class="c-illustr">
|
|
<div class="img-middle bg-img" data-image-src="img/img-contact.jpg">
|
|
<div class="tiles-left">
|
|
<h4>Find us on</h4>
|
|
<!-- Begin of Social links -->
|
|
<ul class="socialnet">
|
|
<li>
|
|
<a href="#"><i class="ion ion-social-facebook"></i>
|
|
<span class="title">Facebook</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#"><i class="ion ion-social-instagram"></i>
|
|
<span class="title">Instagram</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#"><i class="ion ion-social-twitter"></i>
|
|
<span class="title">Twitter</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#"><i class="ion ion-social-pinterest"></i>
|
|
<span class="title">Pinterest</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#"><i class="ion ion-social-tumblr"></i>
|
|
<span class="title">Tumblr</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End of Social links -->
|
|
</div>
|
|
</div>
|
|
<!--<div class="img-bottom"></div>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- right elements -->
|
|
<div class="c-right c-contact">
|
|
<div class="anim-slideright">
|
|
<header class="header">
|
|
<h2><strong>Contact</strong> us</h2>
|
|
<h3><span>Want to say hello?</span></h3>
|
|
</header>
|
|
<article class="desc">
|
|
<ul>
|
|
<li>
|
|
<div class="title">
|
|
<i class="icon lnr lnr-map"></i>
|
|
<span class="readable">Address</span>
|
|
</div>
|
|
<div class="data">99 Street at our address City<br>This Continent Island - Earth</div>
|
|
</li>
|
|
<li>
|
|
<div class="title">
|
|
<i class="icon lnr lnr-envelope"></i>
|
|
<span class="readable">Email</span>
|
|
</div>
|
|
<div><a href="mailto://contact@mail.com" title="mail">contactemail@mail.com</a></div>
|
|
</li>
|
|
<li>
|
|
<div class="title">
|
|
<i class="icon lnr lnr-phone-handset"></i>
|
|
<span class="readable">Email</span>
|
|
</div>
|
|
<div class="data">+0 1 23 4567 89</div>
|
|
</li>
|
|
</ul>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Arrows scroll down/up -->
|
|
<footer class="s-footer p-scrolldown">
|
|
<a class="down btn" href="#write-message">
|
|
<span>Write to us</span>
|
|
</a>
|
|
</footer>
|
|
|
|
</div>
|
|
<!-- End of Contact section -->
|
|
|
|
<!-- Begin of Message section -->
|
|
<div class="section section-message section-cent" data-section="write-message">
|
|
<!-- Content -->
|
|
<section class="content">
|
|
<!-- left elements -->
|
|
<div class="c-left">
|
|
<div class="anim-slideleft">
|
|
<div class="c-logo home-logo ">
|
|
<i class="icon lnr lnr-pencil"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- right elements -->
|
|
<div class="c-right">
|
|
<div class="anim-slideright">
|
|
<header class="header">
|
|
<h2><strong>Write</strong> to us</h2>
|
|
<h3>
|
|
<span>Need help? Send us a message?</span>
|
|
</h3>
|
|
</header>
|
|
<!-- begin of forms -->
|
|
<div class="form-wrapper desc">
|
|
<form class="message form send_message_form" method="get" action="ajaxserver/serverfile.php">
|
|
<div class="fields clearfix">
|
|
<div class="input">
|
|
<label for="mes-name">Name </label>
|
|
<input id="mes-name" name="name" type="text" placeholder="Your Name" required>
|
|
</div>
|
|
</div>
|
|
<div class="fields clearfix">
|
|
<div class="input">
|
|
<label for="mes-email">Email </label>
|
|
<input id="mes-email" type="email" placeholder="Email Address" name="email" required>
|
|
</div>
|
|
</div>
|
|
<div class="fields clearfix no-border">
|
|
<label for="mes-text">Message </label>
|
|
<textarea id="mes-text" placeholder="Message ..." name="message" required></textarea>
|
|
|
|
<div>
|
|
<p class="message-ok invisible">Your message has been sent, thank you.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="btns">
|
|
<button id="submit-message" class="btn email_b" name="submit_message">Submit</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- end of forms -->
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Arrows scroll down/up -->
|
|
</div>
|
|
<!-- End of Message section -->
|
|
|
|
</main>
|
|
|
|
<!-- END OF site main content content here -->
|
|
|
|
|
|
<!-- BEGIN OF site footer -->
|
|
<footer class="site-footer">
|
|
<div class="note">
|
|
<p>© Copyright <a href="http://highhay.com"><span class="marked">MiVFX</span></a> 2016</p>
|
|
</div>
|
|
</footer>
|
|
<!-- END OF site footer -->
|
|
|
|
|
|
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>-->
|
|
|
|
<!-- All Javascript plugins goes here -->
|
|
<!-- <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>-->
|
|
<script src="./js/vendor/jquery-1.11.2.min.js"></script>
|
|
<!-- All vendor scripts -->
|
|
<script src="./js/vendor/all.js"></script>
|
|
<script src="./js/particlejs/particles.min.js"></script>
|
|
<!-- Uncomment below to enable particles scripts -->
|
|
<!--<script src="./js/particlejs/particles-init.js"></script>-->
|
|
|
|
<!-- Detailed vendor scripts -->
|
|
<!--<script src="./js/vendor/jquery.fullPage.min.js"></script>
|
|
<script src="./js/vendor/jquery.slimscroll.min.js"></script>
|
|
<script src="./js/vendor/jquery.knob.min.js"></script>
|
|
<script src="./js/vegas/vegas.min.js"></script>
|
|
<script src="./js/vendor/jquery.maximage.js"></script>
|
|
<script src="./js/vendor/okvideo.min.js"></script>
|
|
<script src="./js/owl-carousel/owl.carousel.js"></script>-->
|
|
|
|
<!-- Countdown script -->
|
|
<script src="./js/jquery.downCount.js"></script>
|
|
|
|
<!-- Form script -->
|
|
<script src="./js/form_script.js"></script>
|
|
|
|
<!-- Javascript main files -->
|
|
<script src="./js/main.js"></script>
|
|
|
|
|
|
<!-- Google Analytics: Uncomment and change UA-XXXXX-X to be your site"s ID. -->
|
|
<!--<script>
|
|
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
|
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
|
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
|
e.src="//www.google-analytics.com/analytics.js";
|
|
r.parentNode.insertBefore(e,r)}(window,document,"script","ga"));
|
|
ga("create","UA-XXXXX-X");ga("send","pageview");
|
|
</script>-->
|
|
</body>
|
|
|
|
</html> |