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.
827 lines (524 loc) • 29.1 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>app name - Page not found</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="Page not found 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">
<div id="banner" style="background-image:url('images/notfound/banner.jpg')">
<div class="container row">
<div class="banner-wrapper">
<div class="banner-inner">
<h2>Oops! It seems like you've taken a wrong turn.</h2>
</div>
</div>
</div>
</div>
<main class="container">
<div class="breadcrumbs">
<ul>
<li>
<a href="/" title="Home">Home</a>
</li>
<li>
<span>Page not found</span>
</li>
</ul>
</div>
<div class="heading">
<h1>Page not found</h1>
</div>
<article>
<p>
The page you were looking for can't be found, it may have moved to a new location.<br>
To get back on track check the URL for errors, or alternatively try using the navigation or search at the top of the page.
</p>
<p>
To go to the home page of this site, click the link below:<br>
<a href="#">Lorem ipsum dolor site</a>
</p>
</article>
</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>