Skip to content

Instantly share code, notes, and snippets.

@FalkoJoseph

FalkoJoseph/HTML Structure

Last active August 29, 2015 14:04
Show Gist options
  • Save FalkoJoseph/a3b34a99d55642c641dc to your computer and use it in GitHub Desktop.
Save FalkoJoseph/a3b34a99d55642c641dc to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Falko Joseph revised this gist Jul 24, 2014. No changes.
  2. Falko Joseph created this gist Jul 24, 2014.
    189 changes: 189 additions & 0 deletions HTML Structure
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,189 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>{{ page.title }}</title>

    <meta name="author" content="http://nielsenramon.be/">
    <meta name="description" content="{{ page.description }}">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta property="og:image" content="">
    <meta property="og:title" content="{{ page.title }}">
    <meta property="og:url" content="">
    <meta property="og:site_name" content="">
    <meta property="og:description" content="{{ page.description }}">
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,700,900' rel='stylesheet' type='text/css'>
    <!--[if (gt IE 8) | (IEMobile)]><!-->
    <link rel="stylesheet" href="/assets/css/application.css">
    <!--<![endif]-->
    <!--[if (lt IE 9) & (!IEMobile)]>
    <link rel="stylesheet" href="/assets/css/application-ie.css">
    <![endif]-->
    </head>

    <body>
    <!--[if lt IE 8]>
    <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <nav class="navigation navigation-left nav-mobile">
    <ul>
    <li><a href="#">{item}</a></li>
    <li><a href="#">{item}</a></li>
    <li><a href="#">{item}</a></li>
    </ul>
    </nav>

    <div class="site-overlay">
    </div>


    <div id="container">

    <header class="main">

    <nav class="top">
    <div class="grid grid-centered">
    <div class="grid-cell">
    <ul>
    <li><a href="#">{item}</a></li>
    <li><a href="#">{item}</a></li>
    </ul>
    </div>
    </div>
    </nav>

    <nav class="main">
    <div class="grid grid-centered">

    <div class="grid-cell">
    <figure class="logo">
    <a href="#">greenpan</a>
    </figure>
    <ul>
    <li><a href="#" class="is-active">{item}</a></li>
    <li><a href="#">{item}</a></li>
    <li><a href="#">{item}</a></li>
    </ul>
    <div class="cart">
    <div class="icon">icon</div>
    <div class="total">
    <p>3 items</p>
    <h6>£ 6.00</h6>
    </div>
    </div>
    </div>
    </div>
    </nav>

    </header>

    <main role="main">

    <div class="grid grid-centered">

    <div class="grid-cell">
    <div class="pagetop">
    <div class="breadcrumb">
    <p><a href="#">Home</a> <span class="icon">&raquo;</span> Cookware</p>
    </div>
    <div class="sort">
    <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
    </select>
    </div>
    </div>
    </div>

    <div class="grid-cell">
    <div class="filter">
    <div class="filter-heading">
    <h3>Filter</h3>
    <img class="reset" src="#" alt="Reset">
    </div>

    <div class="filter-group">
    <h5>Different Cookware</h5>
    <ul>
    <li>
    <input type="checkbox" name="" value="" id="">
    <label title="" for="">Frypan</label>
    </li>
    </ul>
    </div>

    </div>
    </div>

    <div class="grid-cell">
    <div class="product-list">

    <div class="product-item">
    <img src="#" alt="Product">
    <h4>Lima 3D | I Love Eggs &amp; Pancakes 8" Open Frypan</h4>
    <p>£ 5.30</p>
    </div>

    </div>
    </div>

    </div>
    </main>

    <footer class="footer">
    <div class="grid grid-centered">

    <div class="grid-cell">
    <div class="links">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Cookware</a></li>
    <li><a href="#">Bakeware</a></li>
    <li><a href="#">Sets</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">GreenPan Support</a></li>
    </ul>
    <p>
    &copy; Copyright 2014 GreenPan
    </p>

    </div>
    </div>

    <div class="grid-cell">
    <div class="subscribe">
    <form>
    <input type="text" class="input-dark is-cutoff">
    <input type="submit" class="button button-dark is-cutoff">
    </form>
    <h6>
    Sign up with your email address to receive news and updates.
    </h6>
    </div>
    </div>

    </div>
    </footer>

    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="/assets/js/application.js"></script>

    <script>
    (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
    function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
    e=o.createElement(i);r=o.getElementsByTagName(i)[0];
    e.src='//www.google-analytics.com/analytics.js';
    r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
    ga('create','UA-XXXXX-X');ga('send','pageview');
    </script>
    </body>
    </html>