UNPKG

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.

983 lines (640 loc) 35.6 kB
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>app name - Search results</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="serach result 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"> <div class="searchbox"> <div class="container"> <form class="search-form" action="search.html"> <input name="q" type="text" placeholder="Search..." title="Search"> <button type="submit" class="button blue">Search</button> </form> </div> </div> <div class="container"> <div class="breadcrumbs"> <ul> <li> <a href="/" title="Home">Home</a> </li> <li> <span>Search results</span> </li> </ul> </div> <div class="heading"> <h1>Search results</h1> </div> <div class="row"> <main class="main col-sm-12 col-md-9"> <div class="filter-wrapper"> <div class="filter-header row"> <div class="filter-summary col-md-4"> <span>Displaying 1 - 20 of 120 results</span> </div> <div class="filter-pagecount col-md-4"> <span>Items per page:</span> <select title="Items per page"> <option value="12">12</option> <option value="24">24</option> <option value="36">36</option> </select> </div> <div class="clearfix"></div> </div> <div class="search-results"> <div class="search-source"> powered by Google Custom Search </div> <ul> <li> <a href="#">Lorem ipsum dolor site Lorem ipsum dolor site</a> <span class="link">#</span> <p>Dec 11, 2013 - Lorem ipsum dolor sit amet, <em>country roads</em> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...</p> </li> <li> <a href="#">Lorem ipsum dolor site Lorem ipsum dolor site</a> <span class="link">#</span> <p>Dec 11, 2013 - Lorem ipsum dolor sit amet, <em>country roads</em> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...</p> </li> <li> <a href="#">Lorem ipsum dolor site Lorem ipsum dolor site</a> <span class="link">#</span> <p>Dec 11, 2013 - Lorem ipsum dolor sit amet, <em>country roads</em> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...</p> </li> <li> <a href="#">Lorem ipsum dolor site Lorem ipsum dolor site</a> <span class="link">#</span> <p>Dec 11, 2013 - Lorem ipsum dolor sit amet, <em>country roads</em> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...</p> </li> <li> <a href="#">Lorem ipsum dolor site Lorem ipsum dolor site</a> <span class="link">#</span> <p>Dec 11, 2013 - Lorem ipsum dolor sit amet, <em>country roads</em> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...</p> </li> <li> <a href="#">Lorem ipsum dolor site Lorem ipsum dolor site</a> <span class="link">#</span> <p>Dec 11, 2013 - Lorem ipsum dolor sit amet, <em>country roads</em> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...</p> </li> <li> <a href="#">Lorem ipsum dolor site Lorem ipsum dolor site</a> <span class="link">#</span> <p>Dec 11, 2013 - Lorem ipsum dolor sit amet, <em>country roads</em> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...</p> </li> <li> <a href="#">Lorem ipsum dolor site Lorem ipsum dolor site</a> <span class="link">#</span> <p>Dec 11, 2013 - Lorem ipsum dolor sit amet, <em>country roads</em> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...</p> </li> <li> <a href="#">Lorem ipsum dolor site Lorem ipsum dolor site</a> <span class="link">#</span> <p>Dec 11, 2013 - Lorem ipsum dolor sit amet, <em>country roads</em> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...</p> </li> <li> <a href="#">Lorem ipsum dolor site Lorem ipsum dolor site</a> <span class="link">#</span> <p>Dec 11, 2013 - Lorem ipsum dolor sit amet, <em>country roads</em> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...</p> </li> </ul> </div> <div class="filter-footer row"> <div class="filter-summary col-md-4"> <span>Displaying 1 - 20 of 120 results</span> </div> <div class="filter-pagecount col-md-4"> <span>Items per page:</span> <select title="Items per page"> <option value="12">12</option> <option value="24">24</option> <option value="36">36</option> </select> </div> <div class="pagination-wrapper col-md-12"> <ul class="pagination"> <li> <a href="#" class="prev"> <i class="ion-chevron-left"></i> <span class="sr-only">Previous</span> </a> </li> <li><span>Page:</span></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li class="ellipse"><span>...</span></li> <li> <a href="#" class="next"> <i class="ion-chevron-right"></i> <span class="sr-only">Next</span> </a> </li> </ul> </div> <div class="clearfix"></div> </div> </div> </main> <aside class="col-sm-12 col-md-3"> <div class="documents"> <h2>Related Documents</h2> <ul> <li> <span class="filetype icon icon-pdf"></span> <div> <a href="#" title="Lorem ipsum dolor site Lorem ipsum dolor site">Lorem ipsum dolor site Lorem ipsum dolor site</a> <span class="info">pdf 356 KB</span> </div> </li> </ul> </div> </aside> </div> </div> </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>