Footer
HTML
<!-- Begin Footer -->
<footer class="footer" role="contentinfo">
<div class="lc lc--pad">
<div class="footer__contact">
<p><b>Can we help your business?</b></p>
<a href="../../patterns/04-pages-contact/04-pages-contact.html" class="button button--action">Get in touch</a>
</div>
<div class="footer__social">
<ul class="nav--footer">
<li><a class="icon icon--facebook" href="#">
<span class="icon__text">Facebook</span>
</a></li>
<li><a class="icon icon--twitter" href="#">
<span class="icon__text">Twitter</span>
</a></li>
<li><a class="icon icon--linkedin" href="#">
<span class="icon__text">LinkeIn</span>
</a></li>
<li><a class="icon icon--google-plus" href="#">
<span class="icon__text">Google+</span>
</a></li>
<li><a class="icon icon--pinterest" href="#">
<span class="icon__text">Pinterest</span>
</a></li>
<li><a class="icon icon--instagram" href="#">
<span class="icon__text">Instagram</span>
</a></li>
</ul> <p class="copyright">© 2015 Base Creative. All rights reserved.</p>
</div>
</div>
</footer>
<!-- End Footer -->
Header Home
This pattern contains:
organisms-off-canvas
atoms-logo-alt
HTML
<!-- Begin .header -->
<header class="header header--alt cf" role="banner">
<div class="off-canvas">
<nav id="nav" class="nav nav--main">
<ul class="nav-list">
<li class="active"><a href="../../patterns/04-pages-homepage/04-pages-homepage.html">Home</a></li>
<li><a href="../../patterns/04-pages-work/04-pages-work.html">Work</a></li>
<li><a href="../../patterns/04-pages-services/04-pages-services.html">Services</a></li>
<li><a href="../../patterns/04-pages-team/04-pages-team.html">Team</a></li>
<li><a href="../../patterns/04-pages-clients/04-pages-clients.html">Clients</a></li>
<li><a href="../../patterns/04-pages-contact/04-pages-contact.html">Contact</a></li>
</ul>
</nav><!--end .nav-->
</div> <div class="logo logo--alt logo--header">
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="../../images/logo_alt.svg" type="image/svg+xml" />
<!--[if IE 9]></video><![endif]-->
<img sizes="(min-width: 40em) 30vw, 50vw" src="../../images/logo_alt.png" srcset="../../images/logo_alt.png 490w, ../../images/logo_alt--big.png 760w" alt="Base Creative" />
</picture>
</div> <a href="#nav" class="nav-toggle nav-toggle-menu icon icon--hamburger"><span class="is-vishidden">Menu</span></a>
</header>
<!-- End .header -->
Header
HTML
<!-- Begin .header -->
<header class="header cf" role="banner">
<div class="off-canvas">
<nav id="nav" class="nav nav--main">
<ul class="nav-list">
<li class="active"><a href="../../patterns/04-pages-homepage/04-pages-homepage.html">Home</a></li>
<li><a href="../../patterns/04-pages-work/04-pages-work.html">Work</a></li>
<li><a href="../../patterns/04-pages-services/04-pages-services.html">Services</a></li>
<li><a href="../../patterns/04-pages-team/04-pages-team.html">Team</a></li>
<li><a href="../../patterns/04-pages-clients/04-pages-clients.html">Clients</a></li>
<li><a href="../../patterns/04-pages-contact/04-pages-contact.html">Contact</a></li>
</ul>
</nav><!--end .nav-->
</div> <div class="logo logo--header">
<a href="../../patterns/04-pages-homepage/04-pages-homepage.html">
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="../../images/logo.svg" type="image/svg+xml" />
<!--[if IE 9]></video><![endif]-->
<img sizes="(min-width: 40em) 30vw, 50vw" src="../../images/logo.png" srcset="../../images/logo.png 490w, ../../images/logo--big.png 760w" alt="Base Creative" />
</picture>
</a>
</div> <a href="#nav" class="nav-toggle nav-toggle-menu icon icon--hamburger"><span class="is-vishidden">Menu</span></a>
</header>
<!-- End .header -->
Off Canvas
This pattern contains:
molecules-primary-nav
HTML
<div class="off-canvas">
<nav id="nav" class="nav nav--main">
<ul class="nav-list">
<li class="active"><a href="../../patterns/04-pages-homepage/04-pages-homepage.html">Home</a></li>
<li><a href="../../patterns/04-pages-work/04-pages-work.html">Work</a></li>
<li><a href="../../patterns/04-pages-services/04-pages-services.html">Services</a></li>
<li><a href="../../patterns/04-pages-team/04-pages-team.html">Team</a></li>
<li><a href="../../patterns/04-pages-clients/04-pages-clients.html">Clients</a></li>
<li><a href="../../patterns/04-pages-contact/04-pages-contact.html">Contact</a></li>
</ul>
</nav><!--end .nav-->
</div>