universal-web-template
Version:
An universal web proejct template - let you quickly set up a project using Handlebars, sass and ReactJS for front-end templating. It can be adopted with most modern CMS.
995 lines (646 loc) • 35 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>app name - Leadership team</title>
<!-- Site Meta -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="description" content="app description">
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="app name">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="app name">
<meta name="msapplication-config" content="browserconfig.xml">
<meta property="twitter:image" content="twitter.png">
<meta property="og:image" content="open-graph.png">
<meta name="description" content="about page description">
<link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
<link rel="manifest" href="manifest.json">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
<link rel="icon" type="image/png" sizes="230x230" href="favicon-230x230.png">
<link rel="shortcut icon" href="favicon.ico">
<!-- Site Styles -->
<link rel="stylesheet" href="css/vendors.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="">
<div class="alert alert-high">
<div class="container">
<p>
<i class="fa fa-exclamation-triangle"></i>
<span>Lorem ipsum dolor sit amet, sed consecttuer adipicing, eisumod tempotLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
<a href="#" title="Find out more">Find out more</a>
</span>
</p>
<a href="javascript:void(0)" class="close ion-close" aria-label="close" title="Alert - Close">
<span class="sr-only">Close</span>
</a>
</div>
</div>
<header>
<!-- Site Header -->
<!-- Top Header -->
<div id="top-header">
<div class="container row">
<ul class="pull-left">
<li>
<a href="#" title="Lorem ipsum dolor site" target="_blank">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Lorem ipsum dolor site" target="_blank">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Lorem ipsum dolor site" target="_blank">Lorem ipsum dolor site</a>
</li>
</ul>
<ul class="pull-right">
<li class="font-controls">
<a id="enlarge" href="javascript:void(0)" title="Enlarge text">A+<span class="sr-only">Enlarge text</span></a>
<a id="shrink" href="javascript:void(0)" title="Shrink text">A-<span class="sr-only">Shrink text</span></a>
</li>
<li>
<a class="print ion-ios-printer-outline" href="javascript:window.print()" title="Print"><span class="sr-only">Print</span></a>
</li>
<li>
<a href="#content" title="Skip to content">Skip to content</a>
</li>
</ul>
</div>
</div>
<div id="header">
<div class="container row">
<div>
<!-- Site Logo -->
<a href="/" class="logo"><img src="images/logo.png" alt="Project Name - Logo" title="Project Name - Logo"></a>
<h1 class="hide">
<a class="name" href="/" title="Project Name" rel="home"><span>Project Name</span></a>
</h1>
<div class="header-aside pull-right">
<form class="search-form" action="search.html">
<input name="q" type="text" placeholder="" title="search">
<button type="submit" class="ion-ios-search-strong"></button>
</form>
<div class="social">
<a href="#" target="_blank">
<span class="ion-android-share-alt"></span><span class="sr-only">Share</span>
</a>
<a href="#" target="_blank">
<span class="ion-social-rss"></span><span class="sr-only">Subscribe</span>
</a>
<a href="#" target="_blank">
<span class="ion-social-facebook"></span><span class="sr-only">Facebook</span>
</a>
<a href="#" target="_blank">
<span class="ion-social-twitter"></span><span class="sr-only">Twitter</span>
</a>
<a href="#" target="_blank">
<span class="ion-social-linkedin"></span><span class="sr-only">Linkedin</span>
</a>
<a href="#" target="_blank">
<span class="ion-social-instagram-outline"></span><span class="sr-only">Instagram</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="mobilemenu-header">
<div class="container">
<a href="javascript:void(0)" class="menu" title="mobile menu">
<span class="sr-only">mobile menu</span>
<i class="ion-android-menu"></i>
</a>
<a href="/" class="logo">
<img src="../images/transport_logo.png" alt="Transport - Logo" title="Transport - Logo">
</a>
</div>
<form class="search-form" action="search.html">
<input name="q" type="text" placeholder="Search" title="search">
<button type="submit" class="ion-ios-search-strong"></button>
</form>
</div>
</header>
<nav>
<div class="container">
<!-- Site Navigation -->
<ul class="nav">
<li>
<a href="#" title="Freight - Lorem ipsum" class="has-submenu">Lorem ipsum
<i class="ion-chevron-right"></i>
</a>
<div class="submenu">
<div class="container">
<div class="row">
<div class="col col-sm-6 col-md-3">
<div class="group">
<a href="#" title="Freight group - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</div>
<div class="group">
<a href="#" title="Freight group - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</div>
</div>
<div class="col col-sm-6 col-md-3">
<div class="group">
<a href="#" title="Freight group - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</div>
<div class="group">
<a href="#" title="Freight group - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</div>
</div>
<div class="col col-sm-6 col-md-3">
<div class="group">
<a href="#" title="Freight group - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</div>
<div class="group">
<a href="#" title="Freight group - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
<nav id="mobilemenu" class="hide">
<ul>
<li>
<a href="#" title="Freight - Lorem ipsum" class="has-submenu">Lorem ipsum
<i class="ion-chevron-right"></i>
</a>
<ul>
<li class="group">
<a href="#" title="Freight group - Lorem ipsum dolor site">Lorem ipsum dolor site
<i class="ion-chevron-right"></i>
</a>
</li>
<li class="group">
<a href="#" title="Freight group - Lorem ipsum dolor site">Lorem ipsum dolor site
<i class="ion-chevron-right"></i>
</a>
</li>
<li class="group">
<a href="#" title="Freight group - Lorem ipsum dolor site">Lorem ipsum dolor site
<i class="ion-chevron-right"></i>
</a>
</li>
<li class="group">
<a href="#" title="Freight group - Lorem ipsum dolor site">Lorem ipsum dolor site
<i class="ion-chevron-right"></i>
</a>
</li>
<li class="group">
<a href="#" title="Freight group - Lorem ipsum dolor site">Lorem ipsum dolor site
<i class="ion-chevron-right"></i>
</a>
</li>
<li class="group">
<a href="#" title="Freight group - Lorem ipsum dolor site">Lorem ipsum dolor site
<i class="ion-chevron-right"></i>
</a>
</li>
</ul>
</li>
</ul>
</nav>
<div class="mobile-menu-overlay hide"></div>
<div id="content">
<main>
<div class="container">
<div class="breadcrumbs">
<ul>
<li>
<a href="/" title="Home">Home</a>
</li>
<li>
<a href="/" title="About">About</a>
</li>
<li>
<span>Leadership team</span>
</li>
</ul>
</div>
<div class="heading">
<h1>Leadership team</h1>
</div>
<div class="anchors">
<span>On this page</span>
<ul>
<li>
<a href="#">Lorem ipsum dolor</a>
</li>
<li>
<a href="#">Lorem ipsum dolor</a>
</li>
</ul>
</div>
<section id="overview" class="overview">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</section>
</div>
<div class="teams">
<div class="gray-bg">
<div class="container">
<section id="henry" class="team">
<h2>Henry</h2>
<ul>
<li>
<div class="row">
<div class="image col-xs-12 col-sm-3 col-md-3">
<img src="images/teams/profile1.png" alt="Henry">
</div>
<div class="content col-xs-12 col-sm-9 col-md-9">
<h3 class="name">Henry</h3>
<h4 class="position">position</h4>
<div class="desc mobile-collapser">
</div>
</div>
</div>
</li>
<li>
<div class="row">
<div class="image col-xs-12 col-sm-3 col-md-3">
<img src="images/teams/profile1.png" alt="Henry">
</div>
<div class="content col-xs-12 col-sm-9 col-md-9">
<h3 class="name">Henry</h3>
<h4 class="position">position</h4>
<div class="desc mobile-collapser">
</div>
</div>
</div>
</li>
<li>
<div class="row">
<div class="image col-xs-12 col-sm-3 col-md-3">
<img src="images/teams/profile1.png" alt="Henry">
</div>
<div class="content col-xs-12 col-sm-9 col-md-9">
<h3 class="name">Henry</h3>
<h4 class="position">position</h4>
<div class="desc mobile-collapser">
</div>
</div>
</div>
</li>
<li>
<div class="row">
<div class="image col-xs-12 col-sm-3 col-md-3">
<img src="images/teams/profile1.png" alt="Henry">
</div>
<div class="content col-xs-12 col-sm-9 col-md-9">
<h3 class="name">Henry</h3>
<h4 class="position">position</h4>
<div class="desc mobile-collapser">
</div>
</div>
</div>
</li>
</ul>
</section>
<section id="henry" class="team">
<h2>Henry</h2>
<ul>
<li>
<div class="row">
<div class="image col-xs-12 col-sm-3 col-md-3">
<img src="images/teams/profile1.png" alt="Henry">
</div>
<div class="content col-xs-12 col-sm-9 col-md-9">
<h3 class="name">Henry</h3>
<h4 class="position">position</h4>
<div class="desc mobile-collapser">
</div>
</div>
</div>
</li>
<li>
<div class="row">
<div class="image col-xs-12 col-sm-3 col-md-3">
<img src="images/teams/profile1.png" alt="Henry">
</div>
<div class="content col-xs-12 col-sm-9 col-md-9">
<h3 class="name">Henry</h3>
<h4 class="position">position</h4>
<div class="desc mobile-collapser">
</div>
</div>
</div>
</li>
<li>
<div class="row">
<div class="image col-xs-12 col-sm-3 col-md-3">
<img src="images/teams/profile1.png" alt="Henry">
</div>
<div class="content col-xs-12 col-sm-9 col-md-9">
<h3 class="name">Henry</h3>
<h4 class="position">position</h4>
<div class="desc mobile-collapser">
</div>
</div>
</div>
</li>
<li>
<div class="row">
<div class="image col-xs-12 col-sm-3 col-md-3">
<img src="images/teams/profile1.png" alt="Henry">
</div>
<div class="content col-xs-12 col-sm-9 col-md-9">
<h3 class="name">Henry</h3>
<h4 class="position">position</h4>
<div class="desc mobile-collapser">
</div>
</div>
</div>
</li>
</ul>
</section>
</div>
</div>
</div>
</main>
</div>
<div id="back-to-top">
<a href="javascript:void(0)" title="Back to Top" class="back-top">
<i class="up-icon ion-android-arrow-dropup"></i>
<span>Back to Top</span>
<i class="circle-icon ion-android-arrow-dropup-circle"></i>
</a>
</div>
<div class="overlay hide"></div>
<footer>
<!-- Site Footer -->
<div class="container row">
<div class="footer-menu">
<ul class="menu">
<li class="expanded col-xs-6 col-md-3">
<div>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site" class="title">Lorem ipsum dolor site</a>
<ul class="menu">
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
</ul>
</div>
<div>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site" class="title">Lorem ipsum dolor site</a>
<ul class="menu">
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
</ul>
</div>
</li>
<li class="expanded col-xs-6 col-md-3">
<div>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site" class="title">Lorem ipsum dolor site</a>
<ul class="menu">
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
</ul>
</div>
<div>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site" class="title">Lorem ipsum dolor site</a>
<ul class="menu">
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
</ul>
</div>
</li>
<li class="expanded col-xs-6 col-md-3">
<div>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site" class="title">Lorem ipsum dolor site</a>
<ul class="menu">
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
</ul>
</div>
<div>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site" class="title">Lorem ipsum dolor site</a>
<ul class="menu">
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
</ul>
</div>
</li>
<li class="expanded col-xs-6 col-md-3">
<div>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site" class="title">Lorem ipsum dolor site</a>
<ul class="menu">
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
<li>
<a href="#" title="Footer Menu Link - Lorem ipsum dolor site">Lorem ipsum dolor site</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="bottom-footer">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-8">
<div class="links">
<ul>
<li>
<a href="#" target="_blank">Lorem ipsum dolor site
<span class="ion-android-open"></span>
</a>
</li>
<li>
<a href="#" target="_blank">Lorem ipsum dolor site
</a>
</li>
<li>
<a href="#" target="_blank">Lorem ipsum dolor site
</a>
</li>
<li>
<a href="#" target="_blank">Lorem ipsum dolor site
</a>
</li>
<li>
<a href="#" target="_blank">Lorem ipsum dolor site
</a>
</li>
<li>
<a href="#" target="_blank">Lorem ipsum dolor site
</a>
</li>
<li>
<a href="#" target="_blank">Lorem ipsum dolor site
</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-4">
<div class="social">
<a href="#" target="_blank">
<span class="ion-android-share-alt"></span><span class="sr-only">Share</span>
</a>
<a href="#" target="_blank">
<span class="ion-social-rss"></span><span class="sr-only">Lorem ipsum dolor site</span>
</a>
<a href="#" target="_blank">
<span class="ion-social-facebook"></span><span class="sr-only">Lorem ipsum dolor site</span>
</a>
<a href="#" target="_blank">
<span class="ion-social-twitter"></span><span class="sr-only">Lorem ipsum dolor site</span>
</a>
<a href="#" target="_blank">
<span class="ion-social-linkedin"></span><span class="sr-only">Lorem ipsum dolor site</span>
</a>
<a href="#" target="_blank">
<span class="ion-social-instagram-outline"></span><span class="sr-only">Lorem ipsum dolor site</span>
</a>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- Google Analytics-->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','http://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-1', 'auto');
ga('send', 'pageview');
</script>
<!-- Site Scripts -->
<script type="text/javascript" src="js/core.js"></script>
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>