350 lines
18 KiB
HTML
350 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<!-- ==============================
|
|
Project: Metronic "Acidus" Frontend Freebie - Responsive HTML Template Based On Twitter Bootstrap 3.3.4
|
|
Version: 1.0
|
|
Author: KeenThemes
|
|
Primary use: Corporate, Business Themes.
|
|
Email: support@keenthemes.com
|
|
Follow: http://www.twitter.com/keenthemes
|
|
Like: http://www.facebook.com/keenthemes
|
|
Website: http://www.keenthemes.com
|
|
Premium: Premium Metronic Admin Theme: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
|
|
================================== -->
|
|
<html lang="en" class="no-js">
|
|
<!-- BEGIN HEAD -->
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<title>Metronic "Acidus" Frontend Freebie</title>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta content="width=device-width, initial-scale=1" name="viewport"/>
|
|
<meta content="" name="description"/>
|
|
<meta content="" name="author"/>
|
|
|
|
<!-- GLOBAL MANDATORY STYLES -->
|
|
<link href="http://fonts.googleapis.com/css?family=Hind:300,400,500,600,700" rel="stylesheet" type="text/css">
|
|
<link href="vendor/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
|
|
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
|
|
|
|
<!-- PAGE LEVEL PLUGIN STYLES -->
|
|
<link href="vendor/swiper/css/swiper.min.css" rel="stylesheet" type="text/css"/>
|
|
|
|
<!-- THEME STYLES -->
|
|
<link href="css/layout.min.css" rel="stylesheet" type="text/css"/>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="shortcut icon" href="favicon.ico"/>
|
|
</head>
|
|
<!-- END HEAD -->
|
|
|
|
<!-- BODY -->
|
|
<body>
|
|
|
|
<!--========== HEADER ==========-->
|
|
<header class="header">
|
|
<!-- Navbar -->
|
|
<nav class="navbar" role="navigation">
|
|
<div class="container">
|
|
<!-- Brand and toggle get grouped for better mobile display -->
|
|
<div class="menu-container">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="toggle-icon"></span>
|
|
</button>
|
|
|
|
<!-- Logo -->
|
|
<div class="navbar-logo">
|
|
<a class="navbar-logo-wrap" href="index.html">
|
|
<img class="navbar-logo-img" src="img/logo.png" alt="Acidus Logo">
|
|
</a>
|
|
</div>
|
|
<!-- End Logo -->
|
|
</div>
|
|
|
|
<!-- Collect the nav links, forms, and other content for toggling -->
|
|
<div class="collapse navbar-collapse nav-collapse">
|
|
<div class="menu-container">
|
|
<ul class="navbar-nav navbar-nav-right">
|
|
<!-- Home -->
|
|
<li class="nav-item">
|
|
<a class="nav-item-child" href="index.html">
|
|
Home
|
|
</a>
|
|
</li>
|
|
<!-- End Home -->
|
|
|
|
<!-- About -->
|
|
<li class="nav-item">
|
|
<a class="nav-item-child" href="about.html">
|
|
About
|
|
</a>
|
|
</li>
|
|
<!-- End About -->
|
|
|
|
<!-- Work -->
|
|
<li class="nav-item">
|
|
<a class="nav-item-child active" href="work.html">
|
|
Work
|
|
</a>
|
|
</li>
|
|
<!-- End Work -->
|
|
|
|
<!-- Contact -->
|
|
<li class="nav-item">
|
|
<a class="nav-item-child" href="contact.html">
|
|
Contact
|
|
</a>
|
|
</li>
|
|
<!-- End Contact -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- End Navbar Collapse -->
|
|
</div>
|
|
</nav>
|
|
<!-- Navbar -->
|
|
</header>
|
|
<!--========== END HEADER ==========-->
|
|
|
|
<!--========== PAGE LAYOUT ==========-->
|
|
<!-- Work -->
|
|
<div class="bg-color-sky-light">
|
|
<div class="content-md container">
|
|
<div class="row margin-b-40">
|
|
<div class="col-sm-6">
|
|
<h1>Work</h1>
|
|
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed tempor incididunt ut laboret dolore magna aliqua enim minim veniam exercitation</p>
|
|
</div>
|
|
</div>
|
|
<!--// end row -->
|
|
|
|
<!-- Masonry Grid -->
|
|
<div class="masonry-grid">
|
|
<div class="masonry-grid-sizer col-xs-6 col-sm-6 col-md-1"></div>
|
|
<div class="masonry-grid-item col-xs-12 col-sm-6 col-md-8">
|
|
<!-- Work -->
|
|
<div class="work">
|
|
<div class="work-overlay">
|
|
<img class="full-width img-responsive" src="img/800x400/01.jpg" alt="Portfolio Image">
|
|
</div>
|
|
<div class="work-content">
|
|
<h2 class="color-white margin-b-5">Art Of Coding</h2>
|
|
<p class="color-white margin-b-0">Lorem ipsum dolor sit amet consectetur adipiscing</p>
|
|
</div>
|
|
<a class="content-wrapper-link" href="#"></a>
|
|
</div>
|
|
<!-- End Work -->
|
|
</div>
|
|
<div class="masonry-grid-item col-xs-6 col-sm-6 col-md-4">
|
|
<!-- Work -->
|
|
<div class="work">
|
|
<div class="work-overlay">
|
|
<img class="full-width img-responsive" src="img/397x400/01.jpg" alt="Portfolio Image">
|
|
</div>
|
|
<div class="work-content">
|
|
<h3 class="color-white margin-b-5">Clean Design</h3>
|
|
<p class="color-white margin-b-0">Lorem ipsum dolor sit amet consectetur adipiscing</p>
|
|
</div>
|
|
<a class="content-wrapper-link" href="#"></a>
|
|
</div>
|
|
<!-- End Work -->
|
|
</div>
|
|
<div class="masonry-grid-item col-xs-6 col-sm-6 col-md-4">
|
|
<!-- Work -->
|
|
<div class="work">
|
|
<div class="work-overlay">
|
|
<img class="full-width img-responsive" src="img/397x300/01.jpg" alt="Portfolio Image">
|
|
</div>
|
|
<div class="work-content">
|
|
<h3 class="color-white margin-b-5">Clean Design</h3>
|
|
<p class="color-white margin-b-0">Lorem ipsum dolor sit amet consectetur adipiscing</p>
|
|
</div>
|
|
<a class="content-wrapper-link" href="#"></a>
|
|
</div>
|
|
<!-- End Work -->
|
|
</div>
|
|
<div class="masonry-grid-item col-xs-6 col-sm-6 col-md-4">
|
|
<!-- Work -->
|
|
<div class="work">
|
|
<div class="work-overlay">
|
|
<img class="full-width img-responsive" src="img/397x300/02.jpg" alt="Portfolio Image">
|
|
</div>
|
|
<div class="work-content">
|
|
<h3 class="color-white margin-b-5">Clean Design</h3>
|
|
<p class="color-white margin-b-0">Lorem ipsum dolor sit amet consectetur adipiscing</p>
|
|
</div>
|
|
<a class="content-wrapper-link" href="#"></a>
|
|
</div>
|
|
<!-- End Work -->
|
|
</div>
|
|
<div class="masonry-grid-item col-xs-6 col-sm-6 col-md-4">
|
|
<!-- Work -->
|
|
<div class="work">
|
|
<div class="work-overlay">
|
|
<img class="full-width img-responsive" src="img/397x300/03.jpg" alt="Portfolio Image">
|
|
</div>
|
|
<div class="work-content">
|
|
<h3 class="color-white margin-b-5">Clean Design</h3>
|
|
<p class="color-white margin-b-0">Lorem ipsum dolor sit amet consectetur adipiscing</p>
|
|
</div>
|
|
<a class="content-wrapper-link" href="#"></a>
|
|
</div>
|
|
<!-- End Work -->
|
|
</div>
|
|
<div class="masonry-grid-item col-xs-6 col-sm-6 col-md-4">
|
|
<!-- Work -->
|
|
<div class="work">
|
|
<div class="work-overlay">
|
|
<img class="full-width img-responsive" src="img/397x400/02.jpg" alt="Portfolio Image">
|
|
</div>
|
|
<div class="work-content">
|
|
<h3 class="color-white margin-b-5">Clean Design</h3>
|
|
<p class="color-white margin-b-0">Lorem ipsum dolor sit amet consectetur adipiscing</p>
|
|
</div>
|
|
<a class="content-wrapper-link" href="#"></a>
|
|
</div>
|
|
<!-- End Work -->
|
|
</div>
|
|
<div class="masonry-grid-item col-xs-12 col-sm-6 col-md-8">
|
|
<!-- Work -->
|
|
<div class="work">
|
|
<div class="work-overlay">
|
|
<img class="full-width img-responsive" src="img/800x400/02.jpg" alt="Portfolio Image">
|
|
</div>
|
|
<div class="work-content">
|
|
<h3 class="color-white margin-b-5">Art Of Coding</h3>
|
|
<p class="color-white margin-b-0">Lorem ipsum dolor sit amet consectetur adipiscing</p>
|
|
</div>
|
|
<a class="content-wrapper-link" href="#"></a>
|
|
</div>
|
|
<!-- End Work -->
|
|
</div>
|
|
</div>
|
|
<!-- End Masonry Grid -->
|
|
</div>
|
|
</div>
|
|
<!-- End Work -->
|
|
|
|
<!-- Clients -->
|
|
<div class="section-seperator">
|
|
<div class="content-md container">
|
|
<div class="row margin-b-40">
|
|
<div class="col-sm-6">
|
|
<h2>Our Clients</h2>
|
|
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed tempor incididunt ut laboret dolore magna aliqua enim minim veniam exercitation</p>
|
|
</div>
|
|
</div>
|
|
<!--// end row -->
|
|
|
|
<!-- Swiper Clients -->
|
|
<div class="swiper-slider swiper-clients">
|
|
<!-- Swiper Wrapper -->
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<img class="swiper-clients-img" src="img/clients/01.png" alt="Clients Logo">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img class="swiper-clients-img" src="img/clients/02.png" alt="Clients Logo">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img class="swiper-clients-img" src="img/clients/03.png" alt="Clients Logo">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img class="swiper-clients-img" src="img/clients/04.png" alt="Clients Logo">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img class="swiper-clients-img" src="img/clients/05.png" alt="Clients Logo">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img class="swiper-clients-img" src="img/clients/06.png" alt="Clients Logo">
|
|
</div>
|
|
</div>
|
|
<!-- End Swiper Wrapper -->
|
|
</div>
|
|
<!-- End Swiper Clients -->
|
|
</div>
|
|
</div>
|
|
<!-- End Clients -->
|
|
<!--========== END PAGE LAYOUT ==========-->
|
|
|
|
<!--========== FOOTER ==========-->
|
|
<footer class="footer">
|
|
<!-- Links -->
|
|
<div class="section-seperator">
|
|
<div class="content-md container">
|
|
<div class="row">
|
|
<div class="col-sm-2 sm-margin-b-50">
|
|
<!-- List -->
|
|
<ul class="list-unstyled footer-list">
|
|
<li class="footer-list-item"><a href="#">Home</a></li>
|
|
<li class="footer-list-item"><a href="#">About</a></li>
|
|
<li class="footer-list-item"><a href="#">Work</a></li>
|
|
<li class="footer-list-item"><a href="#">Contact</a></li>
|
|
</ul>
|
|
<!-- End List -->
|
|
</div>
|
|
<div class="col-sm-2 sm-margin-b-30">
|
|
<!-- List -->
|
|
<ul class="list-unstyled footer-list">
|
|
<li class="footer-list-item"><a href="#">Twitter</a></li>
|
|
<li class="footer-list-item"><a href="#">Facebook</a></li>
|
|
<li class="footer-list-item"><a href="#">Instagram</a></li>
|
|
<li class="footer-list-item"><a href="#">YouTube</a></li>
|
|
</ul>
|
|
<!-- End List -->
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<!-- List -->
|
|
<ul class="list-unstyled footer-list">
|
|
<li class="footer-list-item"><a href="#">Subscribe to Our Newsletter</a></li>
|
|
<li class="footer-list-item"><a href="#">Privacy Policy</a></li>
|
|
<li class="footer-list-item"><a href="#">Terms & Conditions</a></li>
|
|
</ul>
|
|
<!-- End List -->
|
|
</div>
|
|
</div>
|
|
<!--// end row -->
|
|
</div>
|
|
</div>
|
|
<!-- End Links -->
|
|
|
|
<!-- Copyright -->
|
|
<div class="content container">
|
|
<div class="row">
|
|
<div class="col-xs-6">
|
|
<img class="footer-logo" src="img/logo.png" alt="Acidus Logo">
|
|
</div>
|
|
<div class="col-xs-6 text-right">
|
|
<p class="margin-b-0"><a class="fweight-700" href="http://keenthemes.com/preview/acidus/">Acidus</a> Theme Powered by: <a class="fweight-700" href="http://www.keenthemes.com/">KeenThemes.com</a></p>
|
|
</div>
|
|
</div>
|
|
<!--// end row -->
|
|
</div>
|
|
<!-- End Copyright -->
|
|
</footer>
|
|
<!--========== END FOOTER ==========-->
|
|
|
|
<!-- Back To Top -->
|
|
<a href="javascript:void(0);" class="js-back-to-top back-to-top">Top</a>
|
|
|
|
<!-- JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
|
|
<!-- CORE PLUGINS -->
|
|
<script src="vendor/jquery.min.js" type="text/javascript"></script>
|
|
<script src="vendor/jquery-migrate.min.js" type="text/javascript"></script>
|
|
<script src="vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
|
|
|
|
<!-- PAGE LEVEL PLUGINS -->
|
|
<script src="vendor/jquery.easing.js" type="text/javascript"></script>
|
|
<script src="vendor/jquery.back-to-top.js" type="text/javascript"></script>
|
|
<script src="vendor/jquery.smooth-scroll.js" type="text/javascript"></script>
|
|
<script src="vendor/swiper/js/swiper.jquery.min.js" type="text/javascript"></script>
|
|
<script src="vendor/masonry/jquery.masonry.pkgd.min.js" type="text/javascript"></script>
|
|
<script src="vendor/masonry/imagesloaded.pkgd.min.js" type="text/javascript"></script>
|
|
|
|
<!-- PAGE LEVEL SCRIPTS -->
|
|
<script src="js/layout.min.js" type="text/javascript"></script>
|
|
<script src="js/components/swiper.min.js" type="text/javascript"></script>
|
|
<script src="js/components/masonry.min.js" type="text/javascript"></script>
|
|
|
|
</body>
|
|
<!-- END BODY -->
|
|
</html> |