You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
664 lines
34 KiB
664 lines
34 KiB
4 years ago
|
<!doctype html>
|
||
|
|
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
|
||
|
|
<title>Reflex - a lightweight responsive flexbox grid with cross browser support, an inline-block fallback and no polyfills</title>
|
||
|
|
<meta name="description" content="reflex is a responsive flexbox grid with inline-block legacy support">
|
||
|
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
|
||
|
|
|
||
|
|
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
|
||
|
|
<link rel="stylesheet" href="css/docs.css">
|
||
|
|
|
||
|
|
<script src="js/respond.min.js"></script>
|
||
|
|
<script src="js/html5shiv.js"></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body class="body-inset">
|
||
|
|
<header class="content-grid" role="banner">
|
||
|
|
<div class="grid">
|
||
|
|
<div class="grid__col-xs-8">
|
||
|
|
<h1>Reflex demos</h1>
|
||
|
|
<p>This is the demo page for Reflex, a lightweight responsive flexbox grid with cross browser support, an inline-block fallback and no polyfills. For more information on usage please visit the <a href="index.html">main documentation page</a>.</p>
|
||
|
|
<p class="alert">These are the docs for version 1 which I have maintained as a reference for people still using it. The last release under version 1 was <a href="https://github.com/leejordan/reflex/tree/1.5.0">1.5.0</a>. However, <a href="https://github.com/leejordan/reflex">version 2</a> is more reliable and robust so I recommend using that instead.</p>
|
||
|
|
</div>
|
||
|
|
<nav role="navigation" class="grid__col-xs-4">
|
||
|
|
<a href="css/reflex.css" target="_blank" class="btn btn-download">css</a>
|
||
|
|
<a href="index.html" class="btn btn-external">docs</a>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<section class="content-grid">
|
||
|
|
<div class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h2 id="three-column">Classic three column layout with nested grids <a href="#three-column">#</a></h2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="content-full">
|
||
|
|
<section class="grid">
|
||
|
|
<nav class="grid__col-sm-2 grid__col-md-1 grid__col--bleed example-col-flat-2">
|
||
|
|
<img class="example-logo example-logo-sm" src="images/placeholder.png"/>
|
||
|
|
<ol class="example-nav">
|
||
|
|
<li><a href="#0">home</a></li>
|
||
|
|
<li><a href="#0">account</a></li>
|
||
|
|
<li><a href="#0">search</a></li>
|
||
|
|
<li><a href="#0">about</a></li>
|
||
|
|
<li><a href="#0">faq</a></li>
|
||
|
|
</ol>
|
||
|
|
</nav>
|
||
|
|
<section class="grid__col-sm-7 grid__col-md-8 grid__col--bleed">
|
||
|
|
<ul class="grid">
|
||
|
|
<li class="grid__col-12">
|
||
|
|
<h3>Amazing destination</h3>
|
||
|
|
<div class="grid__cell">
|
||
|
|
<img src="images/1.jpg" class="example-img-right"/>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec est eget dui volutpat imperdiet. In hac habitasse platea dictumst. Duis eget eros risus. Maecenas vel pretium urna, sit amet efficitur urna.</p>
|
||
|
|
<a class="example-btn" href="#0">read more</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-12 grid__col-md-6">
|
||
|
|
<h3>Brilliant views</h3>
|
||
|
|
<p>Aliquam ornare faucibus leo, vel euismod nisi porta non. Donec at arcu eget enim bibendum facilisis. Etiam urna elit, blandit ut libero placerat, iaculis aliquam erat.</p>
|
||
|
|
<div class="grid__cell-footer">
|
||
|
|
<a class="example-btn" href="#0">read more</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-12 grid__col-md-6">
|
||
|
|
<h3>Stellar beaches</h3>
|
||
|
|
<p>Nunc venenatis pulvinar tempor. In ligula tortor, laoreet non elementum et, consectetur placerat augue. Curabitur lobortis, dui a ullamcorper vulputate, purus est hendrerit leo.</p>
|
||
|
|
<div class="grid__cell-footer">
|
||
|
|
<a class="example-btn" href="#0">read more</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-12 grid__col-md-6">
|
||
|
|
<h3>Special offer</h3>
|
||
|
|
<p>Vestibulum tincidunt et lorem eu congue. Sed molestie finibus nisi non dictum. Aliquam hendrerit dolor id eleifend dignissim. Proin sed magna consectetur, pellentesque mi vel, blandit nisi. Praesent quis efficitur sapien, id tempor mi. Nulla molestie euismod arcu, at ullamcorper mi vehicula id.</p>
|
||
|
|
<div class="grid__cell-footer">
|
||
|
|
<a class="example-btn" href="#0">read more</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-12 grid__col-md-6">
|
||
|
|
<h3>Romantic getaway</h3>
|
||
|
|
<p>Cras nec dui in erat auctor molestie nec non odio. Nam rhoncus ipsum tincidunt.</p>
|
||
|
|
<div class="grid__cell-footer">
|
||
|
|
<a class="example-btn" href="#0">read more</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<div class="grid__cell">
|
||
|
|
<hr>
|
||
|
|
<p>© copyright 2015</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section class="grid__col-sm-3 example-col-flat-2">
|
||
|
|
<div class="grid__cell">
|
||
|
|
<img class="example-logo example-logo-lg" src="images/placeholder.png"/>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae duo sunt, unum facit. Duo Reges: constructio interrete. Id mihi magnum videtur. Quid igitur, inquit, eos responsuros putas? Nos paucis ad haec additis finem faciamus aliquando; Quid adiuvas? Erat enim res aperta.</p>
|
||
|
|
<p>Cras nec dui in erat auctor molestie nec non odio. Nam rhoncus ipsum tincidunt, blandit turpis finibus, gravida purus. Duis sed massa a massa tempus tincidunt.</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</section>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="content-grid">
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h2 id="top-nav">Header navigation <a href="#top-nav">#</a></h2>
|
||
|
|
</div>
|
||
|
|
<nav role="navigation" class="grid grid--bleed example-top-nav">
|
||
|
|
<ul class="grid__col-sm-9 grid--wrap grid--direction-row grid--align-center">
|
||
|
|
<li><a href="#0">home</a></li>
|
||
|
|
<li><a href="#0">orders</a></li>
|
||
|
|
<li><a href="#0">deals</a></li>
|
||
|
|
<li><a href="#0">gifts</a></li>
|
||
|
|
<li><a href="#0">help</a></li>
|
||
|
|
</ul>
|
||
|
|
<form class="grid__col-sm-3 grid--direction-row grid--align-center grid--justify-center">
|
||
|
|
<input type="text" class="example-top-nav-input" placeholder="Search">
|
||
|
|
</form>
|
||
|
|
</nav>
|
||
|
|
</section>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="content-grid">
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h2 id="product-grid-plain">Product grid plain <a href="#product-grid-plain">#</a></h2>
|
||
|
|
</div>
|
||
|
|
<ul class="grid">
|
||
|
|
<li class="grid__col-12 grid__col-xs-6 grid__col-md-3">
|
||
|
|
<h3>Amazing</h3>
|
||
|
|
<img class="grid__cell-img" src="images/2.jpg">
|
||
|
|
<p>Lorem ipsum dolor sit amet, Consectetur adipiscing elit, sed do eiusmod.</p>
|
||
|
|
<div class="grid__cell-footer grid--justify-space-between grid--align-center">
|
||
|
|
<span>$4.99</span>
|
||
|
|
<a class="example-btn" href="#0">buy</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-12 grid__col-xs-6 grid__col-md-3">
|
||
|
|
<h3>Brilliant</h3>
|
||
|
|
<img class="grid__cell-img" src="images/3.jpg">
|
||
|
|
<p>Consectetur adipiscing elit, sed do eiusmod.</p>
|
||
|
|
<div class="grid__cell-footer grid--justify-space-between grid--align-center">
|
||
|
|
<span>$4.99</span>
|
||
|
|
<a class="example-btn" href="#0">buy</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-12 grid__col-xs-6 grid__col-md-3">
|
||
|
|
<h3>Super</h3>
|
||
|
|
<img class="grid__cell-img" src="images/4.jpg">
|
||
|
|
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__cell-footer grid--justify-space-between grid--align-center">
|
||
|
|
<span>$4.99</span>
|
||
|
|
<a class="example-btn" href="#0">buy</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-12 grid__col-xs-6 grid__col-md-3">
|
||
|
|
<h3>Crazy good</h3>
|
||
|
|
<img class="grid__cell-img" src="images/1.jpg">
|
||
|
|
<p>Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||
|
|
<div class="grid__cell-footer grid--justify-space-between grid--align-center">
|
||
|
|
<span>$4.99</span>
|
||
|
|
<a class="example-btn" href="#0">buy</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="content-grid">
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h2 id="product-grid-flat">Product grid with flat panels <a href="#product-grid-flat">#</a></h2>
|
||
|
|
</div>
|
||
|
|
<ul class="grid">
|
||
|
|
<li class="grid__col-12 grid__col-xs-6 grid__col-md-3">
|
||
|
|
<div class="grid__cell grid__cell--padding-md example-col-flat-1">
|
||
|
|
<h3>Amazing</h3>
|
||
|
|
<img class="grid__cell-img" src="images/2.jpg">
|
||
|
|
<p>Lorem ipsum dolor sit amet, Consectetur adipiscing elit, sed do eiusmod.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__cell-footer grid__cell--padding-md grid--justify-space-between grid--align-center example-col-flat-1">
|
||
|
|
<span>$4.99</span>
|
||
|
|
<a class="example-btn" href="#0">buy</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-12 grid__col-xs-6 grid__col-md-3">
|
||
|
|
<div class="grid__cell grid__cell--padding-md example-col-flat-1">
|
||
|
|
<h3>Brilliant</h3>
|
||
|
|
<img class="grid__cell-img" src="images/3.jpg">
|
||
|
|
<p>Consectetur adipiscing elit, sed do eiusmod.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__cell-footer grid__cell--padding-md grid--justify-space-between grid--align-center example-col-flat-1">
|
||
|
|
<span>$4.99</span>
|
||
|
|
<a class="example-btn" href="#0">buy</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-12 grid__col-xs-6 grid__col-md-3">
|
||
|
|
<div class="grid__cell grid__cell--padding-md example-col-flat-1">
|
||
|
|
<h3>Super</h3>
|
||
|
|
<img class="grid__cell-img" src="images/4.jpg">
|
||
|
|
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__cell-footer grid__cell--padding-md grid--justify-space-between grid--align-center example-col-flat-1">
|
||
|
|
<span>$4.99</span>
|
||
|
|
<a class="example-btn" href="#0">buy</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-12 grid__col-xs-6 grid__col-md-3">
|
||
|
|
<div class="grid__cell grid__cell--padding-md example-col-flat-1">
|
||
|
|
<h3>Crazy good</h3>
|
||
|
|
<img class="grid__cell-img" src="images/1.jpg">
|
||
|
|
<p>Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__cell-footer grid__cell--padding-md grid--justify-space-between grid--align-center example-col-flat-1">
|
||
|
|
<span>$4.99</span>
|
||
|
|
<a class="example-btn" href="#0">buy</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="content-grid">
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h2 id="product-grid-images">Product grid with full width images <a href="#product-grid-images">#</a></h2>
|
||
|
|
</div>
|
||
|
|
<ul class="grid">
|
||
|
|
<li class="grid__col-12 grid__col-xs-6 grid__col-md-3">
|
||
|
|
<img class="grid__cell-img" src="images/2.jpg">
|
||
|
|
<div class="grid__cell grid__cell--padding-md example-col-flat-1">
|
||
|
|
<h3>Amazing</h3>
|
||
|
|
<p>Lorem ipsum dolor sit amet, Consectetur adipiscing elit, sed do eiusmod.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__cell-footer grid__cell--padding-md grid--justify-space-between grid--align-center example-col-flat-1">
|
||
|
|
<span>$4.99</span>
|
||
|
|
<a class="example-btn" href="#0">buy</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-12 grid__col-xs-6 grid__col-md-3">
|
||
|
|
<img class="grid__cell-img" src="images/3.jpg">
|
||
|
|
<div class="grid__cell grid__cell--padding-md example-col-flat-1">
|
||
|
|
<h3>Brilliant</h3>
|
||
|
|
<p>Consectetur adipiscing elit, sed do eiusmod.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__cell-footer grid__cell--padding-md grid--justify-space-between grid--align-center example-col-flat-1">
|
||
|
|
<span>$4.99</span>
|
||
|
|
<a class="example-btn" href="#0">buy</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-12 grid__col-xs-6 grid__col-md-3">
|
||
|
|
<img class="grid__cell-img" src="images/4.jpg">
|
||
|
|
<div class="grid__cell grid__cell--padding-md example-col-flat-1">
|
||
|
|
<h3>Super</h3>
|
||
|
|
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__cell-footer grid__cell--padding-md grid--justify-space-between grid--align-center example-col-flat-1">
|
||
|
|
<span>$4.99</span>
|
||
|
|
<a class="example-btn" href="#0">buy</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-12 grid__col-xs-6 grid__col-md-3">
|
||
|
|
<img class="grid__cell-img" src="images/5.jpg">
|
||
|
|
<div class="grid__cell grid__cell--padding-md example-col-flat-1">
|
||
|
|
<h3>Crazy good</h3>
|
||
|
|
<p>Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__cell-footer grid__cell--padding-md grid--justify-space-between grid--align-center example-col-flat-1">
|
||
|
|
<span>$4.99</span>
|
||
|
|
<a class="example-btn" href="#0">buy</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="content-grid">
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h2 id="product-grid-advanced">Advanced product grid <a href="#product-grid-advanced">#</a></h2>
|
||
|
|
</div>
|
||
|
|
<div class="grid">
|
||
|
|
<div class="grid__col-12 grid__col-sm-6">
|
||
|
|
<div class="grid__cell">
|
||
|
|
<a href="#0" class="example-img-grid example-focus" style="background-image:url(images/1.jpg);">
|
||
|
|
<p class="example-img-grid-footer">Professionally cultivate one-to-one customer service with robust ideas. </p>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-12 grid__col-sm-6 grid__col--bleed">
|
||
|
|
<div class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<div class="grid__cell">
|
||
|
|
<a href="#0" class="example-img-grid example-img-grid-half example-focus" style="background-image:url(images/2.jpg);">
|
||
|
|
<p class="example-img-grid-footer">Customer service for state of the art customer service.</p>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-6">
|
||
|
|
<div class="grid__cell">
|
||
|
|
<a href="#0" class="example-img-grid example-focus" style="background-image:url(images/3.jpg);">
|
||
|
|
<p class="example-img-grid-footer">Quickly maximize</p>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-6">
|
||
|
|
<div class="grid__cell">
|
||
|
|
<a href="#0" class="example-img-grid example-focus" style="background-image:url(images/1.jpg);">
|
||
|
|
<p class="example-img-grid-footer">Prepared vegetables</p>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-12 grid__col-sm-6 grid__col--bleed">
|
||
|
|
<div class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<div class="grid__cell">
|
||
|
|
<a href="#0" class="example-img-grid example-img-grid-half example-focus" style="background-image:url(images/4.jpg);">
|
||
|
|
<p class="example-img-grid-footer"> Dramatically visualize customer</p>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-6">
|
||
|
|
<div class="grid__cell">
|
||
|
|
<a href="#0" class="example-img-grid example-focus" style="background-image:url(images/1.jpg);">
|
||
|
|
<p class="example-img-grid-footer">Seamlessly visualize quality</p>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-6">
|
||
|
|
<div class="grid__cell">
|
||
|
|
<a href="#0" class="example-img-grid example-focus" style="background-image:url(images/2.jpg);">
|
||
|
|
<p class="example-img-grid-footer">Prepared vegetables</p>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-12 grid__col-sm-6">
|
||
|
|
<div class="grid__cell">
|
||
|
|
<a href="#0" class="example-img-grid example-focus" style="background-image:url(images/3.jpg);">
|
||
|
|
<p class="example-img-grid-footer">Prepared vegetables</p>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="content-grid">
|
||
|
|
<div class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h2 id="info-grid-example">Info grid <a href="#info-grid-example">#</a></h2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ul class="grid grid--bleed">
|
||
|
|
<li class="grid__col-6 grid__col-xs-4 grid__col-sm-3 grid__col-md-2">
|
||
|
|
<a href="#0" class="example-info" style="background-image: url(http://media.steampowered.com/apps/dota2/images/heroes/ancient_apparition_full.png);">
|
||
|
|
<div class="info">
|
||
|
|
<h3>Ancient Apparition</h3>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-6 grid__col-xs-4 grid__col-sm-3 grid__col-md-2">
|
||
|
|
<a href="#0" class="example-info" style="background-image: url(http://media.steampowered.com/apps/dota2/images/heroes/chaos_knight_full.png);">
|
||
|
|
<div class="info">
|
||
|
|
<h3>Chaos Knight</h3>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-6 grid__col-xs-4 grid__col-sm-3 grid__col-md-2">
|
||
|
|
<a href="#0" class="example-info" style="background-image: url(http://media.steampowered.com/apps/dota2/images/heroes/meepo_full.png);">
|
||
|
|
<div class="info">
|
||
|
|
<h3>Meepo</h3>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-6 grid__col-xs-4 grid__col-sm-3 grid__col-md-2">
|
||
|
|
<a href="#0" class="example-info" style="background-image: url(http://media.steampowered.com/apps/dota2/images/heroes/tusk_full.png);">
|
||
|
|
<div class="info">
|
||
|
|
<h3>Tusk</h3>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-6 grid__col-xs-4 grid__col-sm-3 grid__col-md-2">
|
||
|
|
<a href="#0" class="example-info" style="background-image: url(http://media.steampowered.com/apps/dota2/images/heroes/sven_full.png);">
|
||
|
|
<div class="info">
|
||
|
|
<h3>Sven</h3>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-6 grid__col-xs-4 grid__col-sm-3 grid__col-md-2">
|
||
|
|
<a href="#0" class="example-info" style="background-image: url(http://media.steampowered.com/apps/dota2/images/heroes/techies_full.png);">
|
||
|
|
<div class="info">
|
||
|
|
<h3>Techies</h3>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-6 grid__col-xs-4 grid__col-sm-3 grid__col-md-2">
|
||
|
|
<a href="#0" class="example-info" style="background-image: url(http://media.steampowered.com/apps/dota2/images/heroes/storm_spirit_full.png);">
|
||
|
|
<div class="info">
|
||
|
|
<h3>Storm spirit</h3>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-6 grid__col-xs-4 grid__col-sm-3 grid__col-md-2">
|
||
|
|
<a href="#0" class="example-info" style="background-image: url(http://media.steampowered.com/apps/dota2/images/heroes/spirit_breaker_full.png);">
|
||
|
|
<div class="info">
|
||
|
|
<h3>Spirit breaker</h3>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-6 grid__col-xs-4 grid__col-sm-3 grid__col-md-2">
|
||
|
|
<a href="#0" class="example-info" style="background-image: url(http://media.steampowered.com/apps/dota2/images/heroes/sniper_full.png);">
|
||
|
|
<div class="info">
|
||
|
|
<h3>Sniper</h3>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-6 grid__col-xs-4 grid__col-sm-3 grid__col-md-2">
|
||
|
|
<a href="#0" class="example-info" style="background-image: url(http://media.steampowered.com/apps/dota2/images/heroes/windrunner_full.png);">
|
||
|
|
<div class="info">
|
||
|
|
<h3>Windrunner</h3>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-6 grid__col-xs-4 grid__col-sm-3 grid__col-md-2">
|
||
|
|
<a href="#0" class="example-info" style="background-image: url(http://media.steampowered.com/apps/dota2/images/heroes/zuus_full.png);">
|
||
|
|
<div class="info">
|
||
|
|
<h3>Zeus</h3>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-6 grid__col-xs-4 grid__col-sm-3 grid__col-md-2">
|
||
|
|
<a href="#0" class="example-info" style="background-image: url(http://media.steampowered.com/apps/dota2/images/heroes/wisp_full.png);">
|
||
|
|
<div class="info">
|
||
|
|
<h3>Io</h3>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="content-grid">
|
||
|
|
<div class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h2 id="forum-post-example">Forum posts <a href="#forum-post-example">#</a></h2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ol class="example-forum">
|
||
|
|
<li class="grid">
|
||
|
|
<div class="grid__col-xs-3 example-col-flat-1">
|
||
|
|
<a href="#0">
|
||
|
|
<img src="images/3.jpg" class="grid__cell-img">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-xs-9 example-col-flat-1">
|
||
|
|
<div class="grid__cell">
|
||
|
|
<a href="#0">
|
||
|
|
<h3>Housewife discovers one neat trick that makes web developers crazy</h3>
|
||
|
|
</a>
|
||
|
|
<p>
|
||
|
|
Squatting on old bones and excrement and rusty iron, in a white blaze of heat, a panorama of naked idiots stretches to the horizon. Complete silence - their speech centres are destroyed - except for the crackle of sparks and the popping of singed flesh as they apply electrodes up and down the spine. White smoke of burning flesh hangs in the motionless air.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__cell-footer grid--direction-column example-meta">
|
||
|
|
<p>
|
||
|
|
posted 5 hours ago by <a href="#0">Barry Jones</a>
|
||
|
|
</p>
|
||
|
|
<ul>
|
||
|
|
<li><a href="#0">125 comments</a></li>
|
||
|
|
<li><a href="#0">share</a></li>
|
||
|
|
<li><a href="#0">save</a></li>
|
||
|
|
<li><a href="#0">hide</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="grid">
|
||
|
|
<div class="grid__col-xs-3">
|
||
|
|
<a href="#0">
|
||
|
|
<img src="images/4.jpg" class="grid__cell-img">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-xs-9">
|
||
|
|
<div class="grid__cell">
|
||
|
|
<a href="#0">
|
||
|
|
<h3>Training a Neural Network to generate CSS</h3>
|
||
|
|
</a>
|
||
|
|
<p>
|
||
|
|
You were not there for the beginning. You will not be there for the end. Your knowledge of what is going on can only be superficial and relative
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__cell-footer grid--direction-column example-meta">
|
||
|
|
<p>
|
||
|
|
posted 5 hours ago by <a href="#0">Barry Jones</a>
|
||
|
|
</p>
|
||
|
|
<ul>
|
||
|
|
<li><a href="#0">125 comments</a></li>
|
||
|
|
<li><a href="#0">share</a></li>
|
||
|
|
<li><a href="#0">save</a></li>
|
||
|
|
<li><a href="#0">hide</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="content-grid">
|
||
|
|
<div class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h2 id="bar-chart-example">Bar chart <a href="#bar-chart-example">#</a></h2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid">
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<div class="grid grid--direction-column example-chart">
|
||
|
|
<div class="grid__col-8 grid--direction-row grid--justify-space-between example-bar">
|
||
|
|
<p>Dancing</p>
|
||
|
|
<p>80%</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-6 grid--direction-row grid--justify-space-between example-bar">
|
||
|
|
<p>Fighting</p>
|
||
|
|
<p>60%</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-11 grid--direction-row grid--justify-space-between example-bar">
|
||
|
|
<p>Coding</p>
|
||
|
|
<p>110%</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-5 grid--direction-row grid--justify-space-between example-bar">
|
||
|
|
<p>Sleeping</p>
|
||
|
|
<p>50%</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<div class="grid grid--align-end example-chart">
|
||
|
|
<div class="grid__col-3 grid--align-center grid--justify-space-between example-bar" style="height: 160px">
|
||
|
|
<p>Dancing</p>
|
||
|
|
<p>80%</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-3 grid--align-center grid--justify-space-between example-bar" style="height: 120px">
|
||
|
|
<p>Fighting</p>
|
||
|
|
<p>60%</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-3 grid--align-center grid--justify-space-between example-bar" style="height: 220px">
|
||
|
|
<p>Coding</p>
|
||
|
|
<p>110%</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-3 grid--align-center grid--justify-space-between example-bar" style="height: 100px">
|
||
|
|
<p>Sleeping</p>
|
||
|
|
<p>50%</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="content-grid">
|
||
|
|
<div class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h2 id="two-item-example">Two item comparison <a href="#two-item-example">#</a></h2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid">
|
||
|
|
<div class="grid__col-xs-5 grid--justify-center">
|
||
|
|
<img src="images/4.jpg" class="grid__cell-img">
|
||
|
|
<div class="grid__cell grid__cell--padding-md example-col-flat-1">
|
||
|
|
<h3>Premium package</h3>
|
||
|
|
<p>Our Premier hotels are all about top-to-toe luxury. Get ready for great settings, smart bedrooms and cut-above service.</p>
|
||
|
|
<ul>
|
||
|
|
<li>Luxury hotels</li>
|
||
|
|
<li>Top restaurants</li>
|
||
|
|
<li>Chauffer driven car</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<a class="example-btn" href="#0">choose the premium package</a>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-xs-2 grid--align-center grid--justify-center">
|
||
|
|
<span>Choose your package</span>
|
||
|
|
<br>
|
||
|
|
<span class="example-comparison-symbol">⇆</span>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-xs-5 grid--justify-center">
|
||
|
|
<img src="images/1.jpg" class="grid__cell-img">
|
||
|
|
<div class="grid__cell grid__cell--padding-md example-col-flat-1">
|
||
|
|
<h3>Budget package</h3>
|
||
|
|
<p>We've cut the price of this package but it still provides some amazing quality for the price.</p>
|
||
|
|
<ul>
|
||
|
|
<li>Affordable</li>
|
||
|
|
<li>Family friendly</li>
|
||
|
|
<li>Still better than the competition</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<a class="example-btn" href="#0">choose the budget package</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="content-grid">
|
||
|
|
<div class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h2 id="tiles-example">Tiles <a href="#tiles-example">#</a></h2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid">
|
||
|
|
<a href="#0" class="grid__col-auto grid--justify-center grid--align-center example-tile example-tile-1">
|
||
|
|
<h3>Lesson 1</h3>
|
||
|
|
<p>Introducing HTML</p>
|
||
|
|
<span class="cta">
|
||
|
|
more info
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
<a href="#0" class="grid__col-auto grid--justify-center grid--align-center example-tile example-tile-2">
|
||
|
|
<h3>Lesson 2</h3>
|
||
|
|
<p>Introducing CSS</p>
|
||
|
|
<span class="cta">
|
||
|
|
more info
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid">
|
||
|
|
<a href="#0" class="grid__col-auto grid--justify-center grid--align-center example-tile example-tile-3">
|
||
|
|
<h3>Lesson 3</h3>
|
||
|
|
<p>Advanced CSS</p>
|
||
|
|
<span class="cta">
|
||
|
|
more info
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
<a href="#0" class="grid__col-auto grid--justify-center grid--align-center example-tile example-tile-4">
|
||
|
|
<h3>Lesson 4</h3>
|
||
|
|
<p>Advanced HTML5</p>
|
||
|
|
<span class="cta">
|
||
|
|
more info
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
<a href="#0" class="grid__col-auto grid--justify-center grid--align-center example-tile example-tile-5">
|
||
|
|
<h3>Lesson 5</h3>
|
||
|
|
<p>Introducing JavaScript</p>
|
||
|
|
<span class="cta">
|
||
|
|
more info
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</body>
|
||
|
|
</html>
|