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

<!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 &copy;<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>