898 lines
30 KiB
HTML
898 lines
30 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">
|
|
|
|
<!-- Page Title Here -->
|
|
<title>Meteor - A beautiful business page / portfolio page</title>
|
|
|
|
<!-- Page Description Here -->
|
|
<meta name="description" content="A beautiful and creative portfolio template. It is mobile friend (responsive) and comes with smooth animations">
|
|
|
|
<!-- 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 -->
|
|
<!-- Web fonts and Web Icons -->
|
|
<link rel="stylesheet" href="./fonts/opensans/stylesheet.css">
|
|
<link rel="stylesheet" href="./fonts/montserrat/stylesheet.css">
|
|
<link rel="stylesheet" href="./fonts/roboto/stylesheet.css">
|
|
<link rel="stylesheet" href="./fonts/bebas/stylesheet.css">
|
|
<link rel="stylesheet" href="./fonts/ionicons.min.css">
|
|
|
|
<!-- Vendor CSS style -->
|
|
<link rel="stylesheet" href="./css/pageloader.css">
|
|
|
|
<!-- Uncomment below to load individualy vendor CSS -->
|
|
<link rel="stylesheet" href="./css/foundation.min.css">
|
|
<link rel="stylesheet" href="./js/vendor/swiper.min.css">
|
|
<link rel="stylesheet" href="./js/vendor/jquery.fullpage.min.css">
|
|
<link rel="stylesheet" href="./js/vegas/vegas.min.css">
|
|
|
|
<!-- Main CSS files -->
|
|
<link rel="stylesheet" href="./css/main.css">
|
|
<!-- alt layout -->
|
|
<link rel="stylesheet" href="./css/style-color1.css">
|
|
|
|
<script src="./js/vendor/modernizr-2.7.1.min.js"></script>
|
|
</head>
|
|
|
|
<body id="menu" class="hh-body alt-bg left-light">
|
|
<!--[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>
|
|
<div class="icon ion-spin"></div>
|
|
<p>loading</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BEGIN OF site header Menu -->
|
|
<header class="hh-header header-top">
|
|
<!-- Begin of logo -->
|
|
<div class="logo-wrapper">
|
|
<a href="./">
|
|
<h2 class="logo">
|
|
<span class="logo-img">
|
|
<img class="light-logo" src="img/logo.png" alt="Logo">
|
|
</span>
|
|
<span class="logo-text show-for-medium-up">
|
|
<span class="title">Meteor</span>
|
|
<span class="desc">Agency</span>
|
|
</span>
|
|
</h2>
|
|
</a>
|
|
</div>
|
|
<!-- End of logo -->
|
|
|
|
|
|
<!-- Begin of top menu -->
|
|
<nav class="top-menu-links">
|
|
<ul class="links">
|
|
<li><a href="./index.html#home">Home</a></li>
|
|
<li><a href="./index.html#about-us">About</a></li>
|
|
<li><a href="./article.html">Blog</a></li>
|
|
<li><a href="./index.html#projects">Projects</a></li>
|
|
<li class="show-for-small-only"><a href="./index.html#contact">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
<!-- End of top menu -->
|
|
|
|
|
|
<!-- Begin of menu icon -->
|
|
<a class="menu-icon">
|
|
<div class="bars">
|
|
<div class="bar1"></div>
|
|
<div class="bar2"></div>
|
|
<div class="bar3"></div>
|
|
</div>
|
|
</a>
|
|
<!-- End of menu icon -->
|
|
|
|
<nav class="main-menu">
|
|
<ul class="links" id="qmenu">
|
|
<li data-menuanchor="home">
|
|
<a href="#home">
|
|
<span class="txt">Home</span>
|
|
<i class="icon ion-ios-home-outline"></i>
|
|
</a>
|
|
</li>
|
|
<li data-menuanchor="about-us">
|
|
<a href="#about-us">
|
|
<span class="txt">About</span>
|
|
<i class="icon ion-ios-information-outline"></i>
|
|
</a>
|
|
</li>
|
|
<li data-menuanchor="services">
|
|
<a href="#services">
|
|
<span class="txt">Services</span>
|
|
<i class="icon ion-ios-list-outline"></i>
|
|
</a>
|
|
</li>
|
|
<li data-menuanchor="projects">
|
|
<a href="#projects">
|
|
<span class="txt">Projects</span>
|
|
<i class="icon ion-ios-albums-outline"></i>
|
|
</a>
|
|
</li>
|
|
<li data-menuanchor="register">
|
|
<a href="#register">
|
|
<span class="txt">Register</span>
|
|
<i class="icon ion-ios-compose-outline"></i>
|
|
</a>
|
|
</li>
|
|
<li data-menuanchor="contact">
|
|
<a href="#contact">
|
|
<span class="txt">Contact</span>
|
|
<i class="icon ion-ios-telephone-outline"></i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
<!-- END OF site header Menu-->
|
|
|
|
<!-- BEGIN OF page cover -->
|
|
<div class="hh-cover page-cover">
|
|
<!-- Cover Background -->
|
|
<div class="cover-bg pos-abs full-size bg-img bg-blur-0" data-image-src="img/bg-default.jpg"></div>
|
|
|
|
<!-- BEGIN OF Slideshow Background - uncomment below to use background slideshow-->
|
|
<div class="cover-bg pos-abs full-size slide-show">
|
|
<i class='img' data-src='./img/bg-default1.jpg'></i>
|
|
<i class='img' data-src='./img/bg-default2.jpg'></i>
|
|
<i class='img' data-src='./img/bg-default3.jpg'></i>
|
|
<i class='img' data-src='./img/bg-default4.jpg'></i>
|
|
</div>
|
|
<!-- END OF Slideshow Background -->
|
|
|
|
<!-- Particles as background - uncomment below to use particles/snow -->
|
|
<!--<div id="particles-js" class="cover-bg pos-abs full-size bg-color" data-bgcolor="rgba(37, 38, 42, 0.81)"></div>-->
|
|
|
|
<!-- Transluscent mask as filter -->
|
|
<div class="cover-bg-mask pos-abs full-size bg-color" data-bgcolor="rgba(29, 29, 29, 0.2)"></div>
|
|
|
|
</div>
|
|
<!--END OF page cover -->
|
|
<!-- BEGIN OF page main content -->
|
|
<main class="page-main main-anim fullpg" id="mainpage">
|
|
|
|
<!-- Begin of home section -->
|
|
<div class="section section-home fp-auto-height-responsive" data-section="home">
|
|
<div class="content">
|
|
<!-- Begin of Content -->
|
|
<div class="content-left c-columns anim">
|
|
|
|
<div class="wrapper">
|
|
<!-- Title and description -->
|
|
<div class="title-desc">
|
|
<div class="t-wrapper">
|
|
<!-- Logo -->
|
|
<!--<div class="logo home-logo ">
|
|
<img class="" src="img/logo.png" alt="Logo">
|
|
</div>-->
|
|
|
|
<!-- Title -->
|
|
<header class="title">
|
|
<h2><strong>The perfect
|
|
<br>business page</strong>
|
|
</h2>
|
|
<h3>Enhance your brand</h3>
|
|
</header>
|
|
<!-- desc -->
|
|
<div class="desc border">
|
|
<p>Ever wanted to impress your audience at first view? Use this unique and beautiful website template.</p>
|
|
|
|
<!-- Action button -->
|
|
<div class="cta-btns">
|
|
<a class="btn btn-normal" href="https://themeforest.net/item/meteor-creative-website-template-for-agency-business-and-portfolio/20341459" target="_blank">
|
|
<span class="txt">Buy now</span>
|
|
<span class="arrow-icon"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="c-aside">
|
|
<div class="centered">
|
|
<!-- BEGIN OF clock container -->
|
|
<div class="clock-container">
|
|
<!-- Coutdown Clock -->
|
|
<div class="clock clock-countdown">
|
|
<div class="site-config" data-date="01/01/2020 00:00:00" data-date-timezone="+0"></div>
|
|
<div class="clock-wrapper">
|
|
<div class="clock-hms clearfix">
|
|
<div class="tile tile-days">
|
|
<span class="days digit">00</span>
|
|
<span class="txt">days</span>
|
|
</div>
|
|
|
|
<div class="secondary">
|
|
<div class="tile tile-hours">
|
|
<span class="hours digit">00</span>
|
|
<span class="txt">hrs</span>
|
|
</div>
|
|
<div class="tile tile-minutes">
|
|
<span class="minutes digit">00</span>
|
|
<span class="txt">mins</span>
|
|
</div>
|
|
<div class="tile tile-seconds">
|
|
<span class="seconds digit">00</span>
|
|
<span class="txt">secs</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="clock-title">
|
|
<h5>Our new website will be available soon in<br>
|
|
<strong>January 2019</strong>
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END OF clock container --> </div>
|
|
<div class="bottom">
|
|
<!-- Action button -->
|
|
<div class="cta-btns">
|
|
<a class="btn btn-normal" href="#about-us">
|
|
<span class="txt">About Us</span>
|
|
<span class="arrow-icon"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Arrows scroll down/up -->
|
|
<footer class="s-footer scrolldown">
|
|
<a class="down btn">
|
|
<span class="icon"></span>
|
|
<span class="txt">Scroll Down</span>
|
|
</a>
|
|
</footer>
|
|
</div>
|
|
<!-- End of Content -->
|
|
</div>
|
|
</div>
|
|
<!-- End of home section -->
|
|
|
|
<!-- Begin of about us section -->
|
|
<div class="section small-bg-color fp-auto-height-responsive" data-section="about-us">
|
|
|
|
<section class="content clearfix">
|
|
<!-- Begin of Content -->
|
|
<div class="content-centered c-columns">
|
|
<div class="c-title">
|
|
<h2>About us</h2>
|
|
</div>
|
|
|
|
<div class="wrapper anim">
|
|
<!-- title and description -->
|
|
<div class="title-desc">
|
|
<h2 class="border">We are efficient</h2>
|
|
<p>Do not spend your valuable time building website from scratch. Instead, use this template as the framework of your next beautiful website.</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet malesuada feugiat. Curabitur fermentum bibendum nulla, non dictum ipsum tincidunt non. Quisque convallis pharetra tempor. Donec id pretium leo. Pellentesque luctus massa non elit viverra pellentesque. Cras vitae neque molestie, rhoncus ipsum sit amet, lobortis dui. Fusce in urna sem.</p>
|
|
</div>
|
|
|
|
<!-- Action button -->
|
|
<div class="cta-btns">
|
|
<a class="btn btn-normal" href="#services">
|
|
<span class="txt">Services</span>
|
|
<span class="arrow-icon"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Arrows scroll down/up -->
|
|
<footer class="s-footer scrolldown">
|
|
<a class="down btn">
|
|
<span class="icon"></span>
|
|
<span class="txt">Scroll Down</span>
|
|
</a>
|
|
</footer>
|
|
</div>
|
|
<!-- End of Content -->
|
|
</section>
|
|
</div>
|
|
<!-- End of about us section -->
|
|
|
|
<!-- Begin of about us/feature with image section -->
|
|
<div class="section section-about section-cent fp-auto-height-responsive" data-section="about-desc">
|
|
|
|
<section class="content clearfix">
|
|
<!-- Begin of Content -->
|
|
<div class="content-centered c-columns">
|
|
|
|
<div class="wrapper anim">
|
|
<div class="desc-img desc-left white-bg">
|
|
<div class="w-text">
|
|
<!-- title and description -->
|
|
<div class="title-desc">
|
|
<h2 class="border">Business</h2>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet malesuada feugiat. Curabitur fermentum bibendum nulla, non dictum ipsum tincidunt non. Quisque convallis pharetra tempor. Donec id pretium leo. Pellentesque luctus massa non elit viverra pellentesque. Cras vitae neque molestie, rhoncus ipsum sit amet, lobortis dui. Fusce in urna sem.</p>
|
|
</div>
|
|
|
|
<!-- Action button -->
|
|
<div class="cta-btns">
|
|
<a class="btn btn-normal" href="#services">
|
|
<span class="txt">Services</span>
|
|
<span class="arrow-icon"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="w-img">
|
|
<div class="img bg-img" data-image-src="img/items/img-sample5.jpg"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Arrows scroll down/up -->
|
|
<footer class="s-footer scrolldown">
|
|
<a class="down btn">
|
|
<span class="icon"></span>
|
|
<span class="txt">Scroll Down</span>
|
|
</a>
|
|
</footer>
|
|
</div>
|
|
<!-- End of Content -->
|
|
</section>
|
|
</div>
|
|
<!-- End of about us/feature with image section -->
|
|
|
|
<!-- Begin of services section -->
|
|
<div class="section small-bg-black fp-auto-height-responsive" data-section="services">
|
|
|
|
<section class="content clearfix">
|
|
<!-- Begin of Content -->
|
|
<div class="content-centered c-columns">
|
|
|
|
<div class="wrapper anim">
|
|
<!-- title -->
|
|
<header class="title-desc">
|
|
<h2 class="border">We do</h2>
|
|
<p>Do not spend your valuable time building website from scratch. Instead, use this template as the framework of your next beautiful website.</p>
|
|
</header>
|
|
|
|
|
|
<!-- Begin of features/services/offers -->
|
|
<ul class="item-list row small-up-1 medium-up-2 large-up-4">
|
|
<!-- item -->
|
|
<li class="column anim">
|
|
<div class="item-desc">
|
|
<div class="illustr">
|
|
<img alt="a feature" src="img/items/icon1.png">
|
|
</div>
|
|
<h3>Video</h3>
|
|
<div class="desc">
|
|
<p>Lorem ipsum magicum dolor sit amet, consectetur adipiscing elit. Maecenas a sem ultrices neque vehicula fermentum a sit amet nulla.</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<!-- item -->
|
|
<li class="column anim">
|
|
<div class="item-desc">
|
|
<div class="illustr">
|
|
<img alt="a feature" src="img/items/icon2.png">
|
|
</div>
|
|
<h3>Photography</h3>
|
|
<div class="desc">
|
|
<p>Lorem ipsum magicum dolor sit amet, consectetur adipiscing elit. Maecenas a sem ultrices neque vehicula fermentum a sit amet nulla.</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<!-- item -->
|
|
<li class="column anim">
|
|
<div class="item-desc">
|
|
<div class="illustr">
|
|
<img alt="a feature" src="img/items/icon3.png">
|
|
</div>
|
|
<h3>Music</h3>
|
|
<div class="desc">
|
|
<p>Lorem ipsum magicum dolor sit amet, consectetur adipiscing elit. Maecenas a sem ultrices neque vehicula fermentum a sit amet nulla.</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<!-- item -->
|
|
<li class="column anim">
|
|
<div class="illustr">
|
|
<img alt="a feature" src="img/items/icon4.png">
|
|
</div>
|
|
<div class="item-desc">
|
|
<h3>Web & App</h3>
|
|
<div class="desc">
|
|
<p>Lorem ipsum magicum dolor sit amet, consectetur adipiscing elit. Maecenas a sem ultrices neque vehicula fermentum a sit amet nulla.</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<!-- End of features/services/offers -->
|
|
</div>
|
|
|
|
<!-- Arrows scroll down/up -->
|
|
<footer class="s-footer scrolldown">
|
|
<a class="down btn">
|
|
<span class="icon"></span>
|
|
<span class="txt">Scroll Down</span>
|
|
</a>
|
|
</footer>
|
|
</div>
|
|
<!-- End of Content -->
|
|
|
|
</section>
|
|
|
|
</div>
|
|
<!-- End of services section -->
|
|
|
|
<!-- Begin of Works/projects section -->
|
|
<div class="section section-projects fp-auto-height-responsive" data-section="projects">
|
|
|
|
<section class="content clearfix">
|
|
|
|
<div class="content-centered c-columns">
|
|
<div class="c-title">
|
|
<h2>projects</h2>
|
|
</div>
|
|
|
|
<div class="wrapper clip-overflow anim">
|
|
<!-- Begin of works/services/products -->
|
|
<div class="gallery-wrapper">
|
|
<div class="items-tile">
|
|
<ul class="c-item-list row small-up-1 medium-up-2 large-up-3">
|
|
<!-- item -->
|
|
<li class="column">
|
|
<a class="tile-wrapper" href="item.html">
|
|
<div class="item-img">
|
|
<div class="img bg-img" data-image-src="img/items/img-sample1-small.jpg"></div>
|
|
</div>
|
|
<div class="item-desc">
|
|
<h3 class="title">Califo</h3>
|
|
<h4>Category / Website</h4>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<!-- item -->
|
|
<li class="column">
|
|
<a class="tile-wrapper" href="item.html">
|
|
<div class="item-img">
|
|
<div class="img bg-img" data-image-src="img/items/img-sample2-small.jpg"></div>
|
|
</div>
|
|
<div class="item-desc">
|
|
<h3 class="title">Exploria</h3>
|
|
<h4>Photo / Instagram</h4>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<!-- item -->
|
|
<li class="column">
|
|
<a class="tile-wrapper" href="item.html">
|
|
<div class="item-img">
|
|
<div class="img bg-img" data-image-src="img/items/img-sample3-small.jpg"></div>
|
|
</div>
|
|
<div class="item-desc">
|
|
<h3 class="title">Paintoon</h3>
|
|
<h4>Arts / Painting</h4>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<!-- item -->
|
|
<li class="column">
|
|
<a class="tile-wrapper" href="item.html">
|
|
<div class="item-img">
|
|
<div class="img bg-img" data-image-src="img/items/img-sample4-small.jpg"></div>
|
|
</div>
|
|
<div class="item-desc">
|
|
<h3 class="title">Flower</h3>
|
|
<h4>Photo / Instagram</h4>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<!-- item -->
|
|
<li class="column">
|
|
<a class="tile-wrapper" href="item.html">
|
|
<div class="item-img">
|
|
<div class="img bg-img" data-image-src="img/items/img-sample5-small.jpg"></div>
|
|
</div>
|
|
<div class="item-desc">
|
|
<h3 class="title">Sunset</h3>
|
|
<h4>Photo / Instagram</h4>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<!-- item -->
|
|
<li class="column">
|
|
<a class="tile-wrapper" href="item.html">
|
|
<div class="item-img">
|
|
<div class="img bg-img" data-image-src="img/items/img-sample6-small.jpg"></div>
|
|
</div>
|
|
<div class="item-desc">
|
|
<h3 class="title">Ocean</h3>
|
|
<h4>Music / Beats</h4>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- End of works/services/products -->
|
|
</div>
|
|
</div>
|
|
<!-- end of left elements -->
|
|
</section>
|
|
</div>
|
|
<!-- End of Works/projects section -->
|
|
|
|
<!-- Begin of Slider list section -->
|
|
<div class="section section-slider fp-auto-height-responsive" data-section="featured">
|
|
|
|
<section class="content clearfix">
|
|
|
|
<div class="c-columns">
|
|
<div class="c-title">
|
|
<h2>Featured Projects</h2>
|
|
</div>
|
|
|
|
<div class="wrapper with-slider clip-overflow">
|
|
<!-- Begin of works/services/products -->
|
|
<div class="slider-wrapper anim">
|
|
|
|
<!-- slider -->
|
|
<div class="items-slides swiper-container">
|
|
<ul class="slide-item-list swiper-wrapper">
|
|
<!-- item -->
|
|
<li class="item swiper-slide">
|
|
<a class="slideitem-wrapper" href="item.html#project_url_1">
|
|
<div class="item-img">
|
|
<div class="img bg-img" data-image-src="img/items/img-sample1-small.jpg"></div>
|
|
</div>
|
|
<div class="item-desc">
|
|
<h3 class="title">Califo</h3>
|
|
<h4>Onepage / Webapp</h4>
|
|
<p>This is an awesome product. trust me</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<!-- item -->
|
|
<li class="item swiper-slide">
|
|
<a class="slideitem-wrapper" href="item.html#project_url_2">
|
|
<div class="item-img">
|
|
<div class="img bg-img" data-image-src="img/items/img-sample2-small.jpg"></div>
|
|
</div>
|
|
<div class="item-desc">
|
|
<h3 class="title">Exploria</h3>
|
|
<h4>Photo / Instagram</h4>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<!-- item -->
|
|
<li class="item swiper-slide">
|
|
<a class="slideitem-wrapper" href="item.html#project_url_3">
|
|
<div class="item-img">
|
|
<div class="img bg-img" data-image-src="img/items/img-sample3-small.jpg"></div>
|
|
</div>
|
|
<div class="item-desc">
|
|
<h3 class="title">Paintoon</h3>
|
|
<h4>Arts / Painting</h4>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<!-- item -->
|
|
<li class="item swiper-slide">
|
|
<a class="slideitem-wrapper" href="item.html#project_url_2">
|
|
<div class="item-img">
|
|
<div class="img bg-img" data-image-src="img/items/img-sample4-small.jpg"></div>
|
|
</div>
|
|
<div class="item-desc">
|
|
<h3 class="title">Flower</h3>
|
|
<h4>Photo / Instagram</h4>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<!-- item -->
|
|
<li class="item swiper-slide">
|
|
<a class="slideitem-wrapper" href="item.html#project_url_2">
|
|
<div class="item-img">
|
|
<div class="img bg-img" data-image-src="img/items/img-sample5-small.jpg"></div>
|
|
</div>
|
|
<div class="item-desc">
|
|
<h3 class="title">Sunset</h3>
|
|
<h4>Photo / Instagram</h4>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<!-- item -->
|
|
<li class="item swiper-slide">
|
|
<a class="slideitem-wrapper" href="item.html#project_url_2">
|
|
<div class="item-img">
|
|
<div class="img bg-img" data-image-src="img/items/img-sample6-small.jpg"></div>
|
|
</div>
|
|
<div class="item-desc">
|
|
<h3 class="title">Ocean</h3>
|
|
<h4>Music / Beats</h4>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- pagination -->
|
|
<div class="items-pagination"></div>
|
|
|
|
<!-- navigation -->
|
|
<div class="items-button items-button-prev">
|
|
<a class="normal-btn inv-btn">
|
|
<span class="icon ion-chevron-left"></span>
|
|
</a>
|
|
</div>
|
|
<div class="items-button items-button-next">
|
|
<a class="normal-btn">
|
|
<span class="icon ion-chevron-right"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End of works/services/products -->
|
|
</div>
|
|
|
|
|
|
<!-- Arrows scroll down/up -->
|
|
<footer class="s-footer scrolldown">
|
|
<a class="down btn">
|
|
<span class="icon"></span>
|
|
<span class="txt">Scroll Down</span>
|
|
</a>
|
|
</footer>
|
|
</div>
|
|
<!-- end of left elements -->
|
|
</section>
|
|
</div>
|
|
<!-- End of Slider list section -->
|
|
|
|
<!-- Begin of register / socials section -->
|
|
<div class="section section-register section-cent fp-auto-height-responsive" data-section="register">
|
|
|
|
<section class="content clearfix">
|
|
<div class="content-centered c-columns">
|
|
|
|
<div class="wrapper anim">
|
|
<!-- title and description -->
|
|
<div class="title-desc">
|
|
<h2>Register</h2>
|
|
<p>Subscribe to Newsletter : input your email address below and do not miss our latest news, our freshly new products and many surprising goodies. </p>
|
|
</div>
|
|
<!-- subscription form -->
|
|
<div class="subscription">
|
|
<!-- Begin Ajax subscription form subscription-form -->
|
|
<form id="subscription-form" class="form send_email_form zoom-out" method="post" action="ajaxserver/serverfile.php">
|
|
<p class="feedback gone form-success-visible">Thank you for your subscription. We will inform you.</p>
|
|
<input id="reg-email" class="input form-success-invisible" name="email" type="email" required placeholder="your@email.address" data-validation-type="email">
|
|
<button id="submit-email" class="btn circ-btn form-success-invisible" name="submit_email">
|
|
<span class="ion-checkmark"></span>
|
|
</button>
|
|
</form>
|
|
<!-- End of Ajax subscription form subscription-form -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="c-aside">
|
|
<div class="centered social-wrap">
|
|
<div class="c-wrapper">
|
|
<!-- social networks -->
|
|
<h3>Follow us on</h3>
|
|
<ul class="social-grid">
|
|
<li>
|
|
<a class="s-icon ion-social-facebook" href="#"></a>
|
|
</li>
|
|
<li>
|
|
<a class="s-icon ion-social-twitter" href="#"></a>
|
|
</li>
|
|
<li>
|
|
<a class="s-icon ion-social-youtube" href="#"></a>
|
|
</li>
|
|
<li>
|
|
<a class="s-icon ion-social-instagram" href="#"></a>
|
|
</li>
|
|
<li>
|
|
<a class="s-icon ion-social-reddit" href="#"></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
</div>
|
|
<!-- End of register / socials section -->
|
|
|
|
<!-- Begin of contact section -->
|
|
<div class="section section-contact fp-auto-height-responsive hide-clock" data-section="contact">
|
|
|
|
<!-- begin of information slide -->
|
|
<div class="slide" id="information" data-anchor="information">
|
|
<section class="content clearfix">
|
|
<!-- Begin of Content -->
|
|
<div class="content-contact c-columns">
|
|
<div class="row wrapper">
|
|
<div class="columns small-12 medium-12 large-12">
|
|
<div class="col-wrapper anim">
|
|
<!-- title -->
|
|
<header class="title-desc">
|
|
<h2 class="page-title">Contact Us</h2>
|
|
<p>Need help or just want to say hello?</p>
|
|
</header>
|
|
|
|
<!-- Begin of contact list -->
|
|
<ul class="contact-list c-features row small-up-1 medium-up-2 large-up-2">
|
|
<!-- item -->
|
|
<li class="column anim">
|
|
<div class="item-desc">
|
|
<h3 class="title">Address</h3>
|
|
<div class="desc">
|
|
<p>
|
|
Kompany address
|
|
<br>12 Street Turning Place
|
|
<br>South Est, Antartica
|
|
</p>
|
|
</div>
|
|
|
|
<div class="desc row">
|
|
<p>© Copyright Meteor - 2017</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<!-- item -->
|
|
<li class="column anim">
|
|
<div class="item-desc">
|
|
<h3 class="title">Contact</h3>
|
|
<div class="desc">
|
|
<p>
|
|
Call : +0 12 345 6789
|
|
<br> Email : <a href="">ouremail@domain.com</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<!-- End of contact list -->
|
|
|
|
<!-- Action button -->
|
|
<div class="cta-btns">
|
|
<a class="btn btn-normal" href="#contact/message">
|
|
<span class="txt">Send a message</span>
|
|
<span class="arrow-icon"></span>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End of Content -->
|
|
</section>
|
|
</div>
|
|
<!-- end of information slide -->
|
|
|
|
|
|
<!-- begin of message slide -->
|
|
<div class="slide" id="message" data-anchor="message">
|
|
<section class="content clearfix">
|
|
<!-- Begin of Content -->
|
|
<div class="content-contact c-columns">
|
|
<div class="row wrapper">
|
|
<div class="columns small-12 medium-12 large-12">
|
|
<div class="centered">
|
|
<div class="title-desc">
|
|
<h2 class="page-title">Write to Us</h2>
|
|
<p>Need help or just want to say hello?</p>
|
|
</div>
|
|
|
|
<div class="c-form">
|
|
<!-- begin of contact form content -->
|
|
<div class="c-content card-wrapper">
|
|
<form class="message form send_message_form" method="post" action="ajaxserver/serverfile.php" id="message_form">
|
|
<div class="fields clearfix">
|
|
<div class="input name">
|
|
<label for="mes-name">Name :</label>
|
|
<input id="mes-name" name="name" type="text" placeholder="" class="form-success-clean" required>
|
|
</div>
|
|
</div>
|
|
<div class="fields clearfix">
|
|
<div class="input last">
|
|
<label for="mes-email">Email :</label>
|
|
<input id="mes-email" type="email" placeholder="" name="email" class="form-success-clean" required>
|
|
</div>
|
|
</div>
|
|
<div class="fields clearfix no-border">
|
|
<label for="mes-text">Message</label>
|
|
<textarea id="mes-text" placeholder="..." name="message" class="form-success-clean" required></textarea>
|
|
|
|
<div>
|
|
<p class="message-ok invisible form-text-feedback form-success-visible">Your message has been sent, thank you.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="btns">
|
|
<button id="submit-message" class="btn btn-normal email_b" name="submit_message">
|
|
<span class="txt">Send</span>
|
|
<span class="arrow-icon"></span>
|
|
</button>
|
|
|
|
<a class="btn btn-normal" href="#contact/information">
|
|
<span class="txt">information</span>
|
|
<span class="arrow-icon"></span>
|
|
</a>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Action button -->
|
|
<div class="cta-btns">
|
|
</div>
|
|
|
|
</div>
|
|
<!-- end of contact form content -->
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End of content -->
|
|
</section>
|
|
</div>
|
|
<!-- end of message slide -->
|
|
</div>
|
|
<!-- End of contact section -->
|
|
|
|
</main>
|
|
<!-- END OF page main content -->
|
|
|
|
<!-- scripts -->
|
|
<!-- All Javascript plugins goes here -->
|
|
<!-- <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>-->
|
|
<script src="./js/vendor/jquery-1.12.4.min.js"></script>
|
|
<!-- All vendor scripts -->
|
|
<script src="./js/vendor/scrolloverflow.min.js"></script>
|
|
<script src="./js/vendor/all.js"></script>
|
|
<script src="./js/particlejs/particles.min.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>-->
|
|
|
|
<!-- Uncomment below to enable particles scripts -->
|
|
<!--<script src="./js/particlejs/particles-init.js"></script>-->
|
|
<!--<script src="./js/particlejs/particles-init-snow.js"></script>-->
|
|
</body>
|
|
|
|
</html> |