You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
379 regels
14 KiB
379 regels
14 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Zeta - Elements</title>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="description" content="Zeta Template Project - Elements">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" type="text/css" href="styles/bootstrap4/bootstrap.min.css">
|
|
<link href="plugins/fontawesome-free-5.0.1/css/fontawesome-all.css" rel="stylesheet" type="text/css">
|
|
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/owl.carousel.css">
|
|
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/owl.theme.default.css">
|
|
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/animate.css">
|
|
<link rel="stylesheet" type="text/css" href="plugins/js-flickr-gallery-1.24/js-flickr-gallery.css">
|
|
<link href="plugins/colorbox/colorbox.css" rel="stylesheet" type="text/css">
|
|
<link rel="stylesheet" type="text/css" href="styles/elements_styles.css">
|
|
<link rel="stylesheet" type="text/css" href="styles/elements_responsive.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="super_container">
|
|
|
|
<!-- Header -->
|
|
|
|
<header class="header d-flex flex-row justify-content-end align-items-center">
|
|
|
|
<!-- Logo -->
|
|
<div class="logo_container mr-auto">
|
|
<div class="logo">
|
|
<a href="#"><span>z</span>zeta<span>.</span></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Navigation -->
|
|
<nav class="main_nav justify-self-end">
|
|
<ul class="nav_items">
|
|
<li><a href="index.html"><span>home</span></a></li>
|
|
<li><a href="services.html"><span>services</span></a></li>
|
|
<li class="active"><a href="elements.html"><span>elements</span></a></li>
|
|
<li><a href="blog.html"><span>blog</span></a></li>
|
|
<li><a href="contact.html"><span>contact</span></a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- Hamburger -->
|
|
<div class="hamburger_container">
|
|
<span class="hamburger_text">Menu</span>
|
|
<span class="hamburger_icon"></span>
|
|
</div>
|
|
|
|
</header>
|
|
|
|
<!-- Menu -->
|
|
|
|
<div class="fs_menu_overlay"></div>
|
|
<div class="fs_menu_container">
|
|
<div class="fs_menu_shapes"><img src="images/menu_shapes.png" alt=""></div>
|
|
<nav class="fs_menu_nav">
|
|
<ul class="fs_menu_list">
|
|
<li><a href="#"><span><span>H</span>Home</span></a></li>
|
|
<li><a href="#"><span><span>S</span>Services</span></a></li>
|
|
<li><a href="#"><span><span>E</span>Elements</span></a></li>
|
|
<li><a href="#"><span><span>B</span>Blog</span></a></li>
|
|
<li><a href="#"><span><span>C</span>Contact</span></a></li>
|
|
</ul>
|
|
</nav>
|
|
<div class="fs_social_container d-flex flex-row justify-content-end align-items-center">
|
|
<ul class="fs_social">
|
|
<li><a href="#"><i class="fab fa-pinterest trans_300"></i></a></li>
|
|
<li><a href="#"><i class="fab fa-facebook-f trans_300"></i></a></li>
|
|
<li><a href="#"><i class="fab fa-twitter trans_300"></i></a></li>
|
|
<li><a href="#"><i class="fab fa-dribbble trans_300"></i></a></li>
|
|
<li><a href="#"><i class="fab fa-behance trans_300"></i></a></li>
|
|
<li><a href="#"><i class="fab fa-linkedin-in trans_300"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Home -->
|
|
|
|
<div class="home prlx_parent">
|
|
|
|
<!-- Parallax Background -->
|
|
<div class="home_background prlx" style="background-image:url(images/blog_background.jpg)"></div>
|
|
<div class="services_page_shapes" style="background-image:url(images/services_page_shapes.png)"></div>
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="home_content">
|
|
<h1>Contact</h1>
|
|
<span>get in touch</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="home_social_container d-flex flex-row justify-content-end align-items-center">
|
|
<ul class="home_social">
|
|
<li><a href="#"><i class="fab fa-pinterest trans_300"></i></a></li>
|
|
<li><a href="#"><i class="fab fa-facebook-f trans_300"></i></a></li>
|
|
<li><a href="#"><i class="fab fa-twitter trans_300"></i></a></li>
|
|
<li><a href="#"><i class="fab fa-dribbble trans_300"></i></a></li>
|
|
<li><a href="#"><i class="fab fa-behance trans_300"></i></a></li>
|
|
<li><a href="#"><i class="fab fa-linkedin-in trans_300"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Elements Content -->
|
|
|
|
<div class="elements_content">
|
|
|
|
<div class="container">
|
|
|
|
<!-- Buttons -->
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="elements_section">
|
|
<div class="elements_title">
|
|
<h3>buttons</h3>
|
|
</div>
|
|
<div class="elements_buttons_container d-flex flex-sm-row flex-column">
|
|
|
|
<!-- Button -->
|
|
<div class="button element_button">
|
|
<a href="#" class="d-flex flex-row align-items-center justify-content-center">
|
|
discover
|
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
width="13px" height="7px" viewBox="0 0 13 7" enable-background="new 0 0 13 7" xml:space="preserve">
|
|
<polygon id="arrow_poly_1" class="arrow_poly" points="13,3.5 9,0 9,3 0,3 0,4 9,4 9,7 "></polygon>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Button -->
|
|
<div class="button border_button element_button">
|
|
<a href="#" class="d-flex flex-row align-items-center justify-content-center">
|
|
discover
|
|
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
width="13px" height="7px" viewBox="0 0 13 7" enable-background="new 0 0 13 7" xml:space="preserve">
|
|
<polygon id="arrow_poly_2" class="arrow_poly" points="13,3.5 9,0 9,3 0,3 0,4 9,4 9,7 "></polygon>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Button -->
|
|
<div class="button element_button button_black">
|
|
<a href="#" class="d-flex flex-row align-items-center justify-content-center">
|
|
discover
|
|
<svg version="1.1" id="Layer_3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
width="13px" height="7px" viewBox="0 0 13 7" enable-background="new 0 0 13 7" xml:space="preserve">
|
|
<polygon id="arrow_poly_3" class="arrow_poly" points="13,3.5 9,0 9,3 0,3 0,4 9,4 9,7 "></polygon>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Progress Bars & Accordions -->
|
|
|
|
<div class="elements_section">
|
|
<div class="elements_title">
|
|
<h3>progress bars & accordions</h3>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="elements_progress_bars">
|
|
|
|
<div class="pbar_container">
|
|
<ul class="progress_bar_container col_12 clearfix">
|
|
<li class="pb_item">
|
|
<div id="skill_1_pbar" class="skill_bars" data-perc="0.85"></div>
|
|
<h5>management</h5>
|
|
</li>
|
|
<li class="pb_item">
|
|
<div id="skill_2_pbar" class="skill_bars" data-perc="1"></div>
|
|
<h5>design</h5>
|
|
</li>
|
|
<li class="pb_item">
|
|
<div id="skill_3_pbar" class="skill_bars" data-perc="0.75"></div>
|
|
<h5>projects</h5>
|
|
</li>
|
|
<li class="pb_item">
|
|
<div id="skill_4_pbar" class="skill_bars" data-perc="0.95"></div>
|
|
<h5>inspiration</h5>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="elements_accordions">
|
|
|
|
<div class="accordion_container">
|
|
|
|
<div class="accordion d-flex flex-row align-items-center"> Phasellus vestibulum, quam tincidunt venen.</div>
|
|
<div class="accordion_panel">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum, quam tincidunt venenatis ultrices, est libero mattis ante, ac consectetur diam neque eget quam.</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="accordion_container">
|
|
|
|
<div class="accordion d-flex flex-row align-items-center"> Phasellus vestibulum, quam tincidunt venen.</div>
|
|
<div class="accordion_panel">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum, quam tincidunt venenatis ultrices, est libero mattis ante, ac consectetur diam neque eget quam.</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="accordion_container">
|
|
|
|
<div class="accordion d-flex flex-row align-items-center"> Phasellus vestibulum, quam tincidunt venen.</div>
|
|
<div class="accordion_panel">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum, quam tincidunt venenatis ultrices, est libero mattis ante, ac consectetur diam neque eget quam.</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loaders -->
|
|
|
|
<div class="elements_section">
|
|
<div class="elements_title">
|
|
<h3>loaders</h3>
|
|
</div>
|
|
<div class="row elements_loaders_container">
|
|
<div class="col-lg-3">
|
|
<!-- Loader -->
|
|
<div class="loader" data-perc="0.75"><span>hard work</span></div>
|
|
</div>
|
|
<div class="col-lg-3">
|
|
<!-- Loader -->
|
|
<div class="loader" data-perc="0.83"><span>creativity</span></div>
|
|
</div>
|
|
<div class="col-lg-3">
|
|
<!-- Loader -->
|
|
<div class="loader" data-perc="0.25"><span>good luck</span></div>
|
|
</div>
|
|
<div class="col-lg-3">
|
|
<!-- Loader -->
|
|
<div class="loader" data-perc="0.95"><span>developement</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Milestones -->
|
|
|
|
<div class="elements_section">
|
|
<div class="elements_title">
|
|
<h3>milestones</h3>
|
|
</div>
|
|
<div class="milestones_container d-flex flex-lg-row flex-column">
|
|
|
|
<!-- Milestone -->
|
|
<div class="milestone">
|
|
<div class="milestone_counter" data-end-value="12">0</div>
|
|
<div class="milestone_text">years of experience</div>
|
|
</div>
|
|
|
|
<!-- Milestone -->
|
|
<div class="milestone">
|
|
<div class="milestone_counter" data-end-value="257">0</div>
|
|
<div class="milestone_text">happy clients</div>
|
|
</div>
|
|
|
|
<!-- Milestone -->
|
|
<div class="milestone">
|
|
<div class="milestone_counter" data-end-value="1142">0</div>
|
|
<div class="milestone_text">projects</div>
|
|
</div>
|
|
|
|
<!-- Milestone -->
|
|
<div class="milestone">
|
|
<div class="milestone_counter" data-end-value="05">0</div>
|
|
<div class="milestone_text">coffees a day</div>
|
|
</div>
|
|
|
|
<!-- Milestone -->
|
|
<div class="milestone">
|
|
<div class="milestone_counter" data-end-value="10">0</div>
|
|
<div class="milestone_text">team members</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Icon Boxes -->
|
|
|
|
<div class="elements_section">
|
|
<div class="elements_title">
|
|
<h3>icon boxes</h3>
|
|
</div>
|
|
<div class="row iconbox_container">
|
|
|
|
<!-- Icon Box -->
|
|
<div class="col-lg-4 icon_box text-left d-flex flex-column align-items-start justify-content-start">
|
|
<div class="icon_container d-flex flex-column justify-content-end">
|
|
<img src="images/icon_1.svg" alt="">
|
|
</div>
|
|
<h3>modern design</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum.</p>
|
|
</div>
|
|
|
|
<!-- Icon Box -->
|
|
<div class="col-lg-4 icon_box text-left d-flex flex-column align-items-start justify-content-start">
|
|
<div class="icon_container d-flex flex-column justify-content-end">
|
|
<img src="images/icon_2.svg" alt="">
|
|
</div>
|
|
<h3>easy to use</h3>
|
|
<p>Dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum, quam tincidunt.</p>
|
|
</div>
|
|
|
|
<!-- Icon Box -->
|
|
<div class="col-lg-4 icon_box text-left d-flex flex-column align-items-start justify-content-start">
|
|
<div class="icon_container d-flex flex-column justify-content-end">
|
|
<img src="images/icon_3.svg" alt="">
|
|
</div>
|
|
<h3>well documented</h3>
|
|
<p>Adipiscing elit. Phasellus vestibulum, quam tincidunt venen atis ultrices.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="row footer_content d-flex flex-sm-row flex-column align-items-center">
|
|
<div class="col-sm-6 cr text-sm-left text-center">
|
|
<p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
|
|
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
|
|
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
|
|
</div>
|
|
<div class="col-sm-6 text-sm-right text-center">
|
|
<div class="footer_social_container">
|
|
<ul class="footer_social">
|
|
<li><a href="#"><i class="fab fa-pinterest trans_300"></i></a></li>
|
|
<li><a href="#"><i class="fab fa-facebook-f trans_300"></i></a></li>
|
|
<li><a href="#"><i class="fab fa-twitter trans_300"></i></a></li>
|
|
<li><a href="#"><i class="fab fa-dribbble trans_300"></i></a></li>
|
|
<li><a href="#"><i class="fab fa-behance trans_300"></i></a></li>
|
|
<li><a href="#"><i class="fab fa-linkedin-in trans_300"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
<script src="js/jquery-3.2.1.min.js"></script>
|
|
<script src="styles/bootstrap4/popper.js"></script>
|
|
<script src="styles/bootstrap4/bootstrap.min.js"></script>
|
|
<script src="plugins/greensock/TweenMax.min.js"></script>
|
|
<script src="plugins/greensock/TimelineMax.min.js"></script>
|
|
<script src="plugins/scrollmagic/ScrollMagic.min.js"></script>
|
|
<script src="plugins/greensock/animation.gsap.min.js"></script>
|
|
<script src="plugins/greensock/ScrollToPlugin.min.js"></script>
|
|
<script src="plugins/progressbar/progressbar.min.js"></script>
|
|
<script src="plugins/OwlCarousel2-2.2.1/owl.carousel.js"></script>
|
|
<script src="plugins/easing/easing.js"></script>
|
|
<script src="js/elements_custom.js"></script>
|
|
</body>
|
|
|
|
</html>
|