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.
554 lines
33 KiB
554 lines
33 KiB
5 years ago
|
<!doctype html>
|
||
|
|
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
|
||
|
|
<title>Reflex grid - 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 and no polyfills">
|
||
|
|
<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" />
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="css/docs.css">
|
||
|
|
|
||
|
|
<script src="js/respond.min.js"></script>
|
||
|
|
<script src="js/html5shiv.js"></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<header role="banner" class="container">
|
||
|
|
<h1><img class="logo" width="50" height="50" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAADbElEQVRoQ+2ZjZENQRDH/5cBGRCBywARIAIuAkSACBABIuAiQAZEgAyIgPpVbTP6zex0z+5tbb16U3X1vman+zf9NdN3piMZZ0fCoRPI3ix5ssgGFrkm6bGkFxFZe7UIEB8lnUt6K+miB7NHEIO4KemVpGcRmL2BlBB3JitglTc9mKUgNyQhEPNHxn1JnyT9rEyuQXyQhIxHPZitQZ5LuifproPxELclvXawPIubEfy8/28sBbHF2Glc4EBAQ5kvBYyH4DcsgRXMcqxN8P+YPODAomuBIAgXQIG5ASjQjN+SHkh6L4nAxkX5jTWAsdGFYOJaICaUXWS0YgYQU5hYuSXp1/QdygPC6/ci0GctYYLXBsEqDFPEW8dAgMGl2P0nEwifS9cMWSIL0lPQK4yC7Dh1oBwlSPm9Xz8FkXGtnst4EBQjIH1QtkDK59MQGRAThA/jNmUweojyM1ZBeV4ZPZAhiBEQFLH0OAfgf0NBnuuBAEwNIYu14qwqdzTYcTWERoXhYpateLXjh1eKgGddUrMvmrMbtxWIKdGzCPOGYEZBTDGK2dOEZQDhjtGLMWDMHUOWWQpCDaD41Q6BNVeYc6uW64RicimICaf6snOZYTueeaY5dy0QdtpSbFQxSwA9NwuttxYIwqwGXA9J/jeJdPs5+czB9DVBDCa7w1iylY7DfFEQKjon1cxgl6PuRpZ6WLlMheVFQSy3A/M1kKVwMw6MvYuWKcrZjPl2VwkD2MQoSLZQYQk7Z2WUyvYA/q6dAcnAGAjHeVJzNAFsBgIMwr5NmaYVpKVFRupFtAewyCLssN2xWxnKuxbAds6KuFq0BzAE4rsdKId1OKb40YoR1uAvemoOX+iiMeIh7PbXUqoFYvfzaHYKX7EjILUOIAdFzG+D9y+n9g6QvawVVjDih8zpgXgI6sg7t7gdTZhrjTdrPrTqSNhl1gCpdQDZadyi1gG05hq3O8ZloCBmewBNrpZFPAQCcacySGuNgvIEUO3ROk1GewAHQC0Q3zD2d/S5bofB4F7RI0q2BxAGYSIW4CDHf4vKFmikZQMM6bnXCzaFrhSkBhOBiMbnqvN6WauEwU2oA83W/qqaJReLgJQwHOFxmWizIanO+PQoCBKwCHeG3UFECuL4Fm38ZMYiG6uWE3cCye3X1c8+Gov8AbBZ7DOEwsJrAAAAAElFTkSuQmCC"> Reflex grid</h1>
|
||
|
|
<p>Some examples of layout built with Reflex grid, a lightweight responsive flexbox grid with cross browser support, an inline-block fallback and no polyfills.</p>
|
||
|
|
|
||
|
|
<nav>
|
||
|
|
<p>
|
||
|
|
Interested? Check out the code on <a href="https://github.com/leejordan/reflex" target="_blank">github</a>, grab the <a href="https://raw.githubusercontent.com/leejordan/reflex/master/css/reflex.css">css</a> directly, or look at the <a href="index.html">documentation</a> to learn more.
|
||
|
|
</p>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<p>These examples use some extra css that is not included in the Reflex grid core CSS. If you want to use these examples as a starting point for your own implementation you can incorporate the SCSS I wrote for <a href="https://github.com/leejordan/reflex/blob/master/docs/scss/includes/_cards.scss">the cards</a> and the <a href="https://github.com/leejordan/reflex/blob/master/docs/scss/includes/_examples.scss">example layouts</a> into your CSS build.</p>
|
||
|
|
<p class="alert">This is version 2 of Reflex grid which is not compatible with version 1. The last release under version 1 was <a href="https://github.com/leejordan/reflex/tree/1.5.0">1.5.0</a> and I have maintained the <a href="v1">docs for version 1</a> in case you still need them.</p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main role="main" class="examples">
|
||
|
|
<section id="toc" class="container" role="contents"></section>
|
||
|
|
|
||
|
|
<section class="container example-shop">
|
||
|
|
<h2 id="product-grid-shop">Product grid <a href="#product-grid-shop">#</a></h2>
|
||
|
|
<div class="grid">
|
||
|
|
<div class="col-xs-6 col-md-3 col-grid">
|
||
|
|
<img class="flex-img" src="images/1.jpg">
|
||
|
|
<h3>Amazing</h3>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et sagittis dui. Maecenas rhoncus justo aliquam urna finibus tincidunt et ut mauris.</p>
|
||
|
|
<div class="flex-footer">
|
||
|
|
<span>$12.99</span>
|
||
|
|
<a href="#0">add to basket</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-6 col-md-3 col-grid">
|
||
|
|
<img class="flex-img" src="images/2.jpg">
|
||
|
|
<h3>Crazy good</h3>
|
||
|
|
<p>Nunc dignissim in ante sed dapibus. Aenean sit amet aliquet dolor, at auctor erat. 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="flex-footer">
|
||
|
|
<span>$4.99</span>
|
||
|
|
<a href="#0">add to basket</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-6 col-md-3 col-grid">
|
||
|
|
<img class="flex-img" src="images/3.jpg">
|
||
|
|
<h3>Lovely stuff</h3>
|
||
|
|
<p>Aenean sit amet aliquet dolor, at auctor erat. Aliquam ornare faucibus leo, vel euismod nisi porta non. Donec at arcu eget enim bibendum facilisis.</p>
|
||
|
|
<div class="flex-footer">
|
||
|
|
<span>$15.99</span>
|
||
|
|
<a href="#0">add to basket</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-6 col-md-3 col-grid">
|
||
|
|
<img class="flex-img" src="images/4.jpg">
|
||
|
|
<h3>Tremendous</h3>
|
||
|
|
<p>Aliquam ornare faucibus leo, vel euismod nisi porta non. Donec at arcu eget enim bibendum facilisis.</p>
|
||
|
|
<div class="flex-footer">
|
||
|
|
<span>$1.99</span>
|
||
|
|
<a href="#0">add to basket</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
<section class="container example-shop-cards">
|
||
|
|
<h2 id="product-grid-shop-cards">Product grid with cards <a href="#product-grid-shop-cards">#</a></h2>
|
||
|
|
<div class="grid">
|
||
|
|
<div class="col-sm-12 col-md-6 col-grid">
|
||
|
|
<img class="card-header-img flex-img" src="images/1.jpg">
|
||
|
|
<div class="card-body">
|
||
|
|
<h3>Amazing</h3>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et sagittis dui. Maecenas rhoncus justo aliquam urna finibus tincidunt et ut mauris.</p>
|
||
|
|
</div>
|
||
|
|
<div class="card-footer">
|
||
|
|
<span>$12.99</span>
|
||
|
|
<a href="#0">add to basket</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-6 col-md-3 col-grid">
|
||
|
|
<img class="card-header-img flex-img" src="images/2.jpg">
|
||
|
|
<div class="card-body">
|
||
|
|
<h3>Crazy good</h3>
|
||
|
|
<p>Nunc dignissim in ante sed dapibus. Aenean sit amet aliquet dolor, at auctor erat. 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>
|
||
|
|
<div class="card-footer">
|
||
|
|
<span>$4.99</span>
|
||
|
|
<a href="#0">add to basket</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-6 col-md-3 col-grid">
|
||
|
|
<img class="card-header-img flex-img" src="images/3.jpg">
|
||
|
|
<div class="card-body">
|
||
|
|
<h3>Lovely stuff</h3>
|
||
|
|
<p>Aenean sit amet aliquet dolor, at auctor erat. Aliquam ornare faucibus leo, vel euismod nisi porta non. Donec at arcu eget enim bibendum facilisis.</p>
|
||
|
|
</div>
|
||
|
|
<div class="card-footer">
|
||
|
|
<span>$16.99</span>
|
||
|
|
<a href="#0">add to basket</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="container example-horizontal-cards">
|
||
|
|
<h2 id="horizontal-cards">Horizontal cards <a href="#horizontal-cards">#</a></h2>
|
||
|
|
<div class="grid">
|
||
|
|
<div class="col-md-6 col-grid direction-row">
|
||
|
|
<div class="card-bg-img" style="background-image: url(images/square-1.jpg);"></div>
|
||
|
|
<div class="card-body">
|
||
|
|
<h3>Amazing</a></h3>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||
|
|
<a href="#0">read more</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6 col-grid direction-row">
|
||
|
|
<a href="#0" class="card-bg-img" style="background-image: url(images/square-2.jpg);"></a>
|
||
|
|
<div class="card-body">
|
||
|
|
<h3>Crazy good</h3>
|
||
|
|
<p>Nunc dignissim in ante sed dapibus. Aenean sit amet aliquet dolor.</p>
|
||
|
|
<a href="#0">read more</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6 col-grid direction-row">
|
||
|
|
<div class="card-bg-img" style="background-image: url(images/square-3.jpg);"></div>
|
||
|
|
<div class="card-body">
|
||
|
|
<h3>Lovely stuff</h3>
|
||
|
|
<p>Aenean sit amet aliquet dolor, at auctor erat. Aliquam ornare faucibus leos.</p>
|
||
|
|
<a href="#0">read more</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6 col-grid direction-row">
|
||
|
|
<div class="card-bg-img" style="background-image: url(images/square-4.jpg);"></div>
|
||
|
|
<div class="card-body">
|
||
|
|
<h3>Special offer</h3>
|
||
|
|
<p>Nunc dignissim in ante sed dapibus. Aenean sit amet aliquet dolor, at auctor erat. Aliquam ornare faucibus leo, vel euismod nisi porta non.</p>
|
||
|
|
<a href="#0">read more</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="container example-blog">
|
||
|
|
<h2 id="grid-blog">Article grid with cards <a href="#grid-blog">#</a></h2>
|
||
|
|
<ol class="grid">
|
||
|
|
<li class="col-md-8 col-grid">
|
||
|
|
<div class="card-body">
|
||
|
|
<img class="img-shape" src="images/square-1.jpg">
|
||
|
|
<h3>Amazing</h3>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et sagittis dui. Maecenas rhoncus justo aliquam urna finibus tincidunt et ut mauris. Aenean sit amet aliquet dolor, at auctor erat. Aliquam ornare faucibus leo, vel euismod nisi porta non. Donec at arcu eget enim bibendum facilisis.</p>
|
||
|
|
<p>Nunc dignissim in ante sed dapibus. Aenean sit amet aliquet dolor, at auctor erat. 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>
|
||
|
|
<a href="#0" class="card-footer-link">read more</a>
|
||
|
|
</li>
|
||
|
|
<li class="col-xs-6 col-md-4 col-grid">
|
||
|
|
<div class="card-body">
|
||
|
|
<img class="img-shape img-shape-sm" src="images/square-2.jpg">
|
||
|
|
<h3>Crazy good</h3>
|
||
|
|
<p>Nunc dignissim in ante sed dapibus. Aenean sit amet aliquet dolor, at auctor erat. 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>
|
||
|
|
<a href="#0" class="card-footer-link">read more</a>
|
||
|
|
</li>
|
||
|
|
<li class="col-xs-6 col-md-4 col-grid">
|
||
|
|
<div class="card-body">
|
||
|
|
<img class="img-shape img-shape-sm" src="images/square-3.jpg">
|
||
|
|
<h3>Festivals</h3>
|
||
|
|
<p>Aenean sit amet aliquet dolor, at auctor erat. Aliquam ornare faucibus leo, vel euismod nisi porta non. Donec at arcu eget enim bibendum facilisis.</p>
|
||
|
|
</div>
|
||
|
|
<a href="#0" class="card-footer-link">read more</a>
|
||
|
|
</li>
|
||
|
|
<li class="col-xs-6 col-md-4 col-grid">
|
||
|
|
<div class="card-body">
|
||
|
|
<img class="img-shape img-shape-sm" src="images/square-4.jpg">
|
||
|
|
<h3>Special offer</h3>
|
||
|
|
<p>Aenean sit amet aliquet dolor, at auctor erat. Aliquam ornare faucibus leo, vel euismod nisi porta non. Donec at arcu eget enim bibendum facilisis.</p>
|
||
|
|
</div>
|
||
|
|
<a href="#0" class="card-footer-link">read more</a>
|
||
|
|
</li>
|
||
|
|
<li class="col-xs-6 col-md-4 col-grid">
|
||
|
|
<div class="card-body">
|
||
|
|
<img class="img-shape img-shape-sm" src="images/square-5.jpg">
|
||
|
|
<h3>Lovely stuff</h3>
|
||
|
|
<p>Nunc dignissim in ante sed dapibus. Aenean sit amet aliquet dolor, at auctor erat. Aliquam ornare faucibus leo, vel euismod nisi porta non. Donec at arcu eget enim bibendum facilisis. Etiam urna elit, blandit ut libero placerat, iaculis aliqu</p>
|
||
|
|
</div>
|
||
|
|
<a href="#0" class="card-footer-link">read more</a>
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="container example-clickable">
|
||
|
|
<h2 id="click-cards">Clickable cards <a href="#click-cards">#</a></h2>
|
||
|
|
<ol class="grid">
|
||
|
|
<li class="col-xs-6 col-md-3 col-grid">
|
||
|
|
<a href="#0" class="card-center card-link">
|
||
|
|
<img class="card-img-circle" src="images/square-1.jpg">
|
||
|
|
<h3>Top destination</h3>
|
||
|
|
<p>Aenean sit amet aliquet dolor, at auctor erat. Aliquam ornare faucibus leo, vel euismod nisi porta non. Donec at arcu eget enim bibendum facilisis.</p>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="col-xs-6 col-md-3 col-grid">
|
||
|
|
<a href="#0" class="card-center card-link">
|
||
|
|
<img class="card-img-circle" src="images/square-2.jpg">
|
||
|
|
<h3>Summer getaway</h3>
|
||
|
|
<p>Nunc dignissim in ante sed dapibus. Aenean sit amet aliquet dolor, at auctor erat. Aliquam ornare faucibus leo, vel euismod nisi porta non. Donec at arcu eget enim bibendum facilisis. Etiam urna elit, blandit ut libero placerat, iaculis aliqu</p>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="col-xs-6 col-md-3 col-grid">
|
||
|
|
<a href="#0" class="card-center card-link">
|
||
|
|
<img class="card-img-circle" src="images/square-3.jpg">
|
||
|
|
<h3>Festivals</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 aliqu.</p>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="col-xs-6 col-md-3 col-grid">
|
||
|
|
<a href="#0" class="card-center card-link">
|
||
|
|
<img class="card-img-circle" src="images/square-5.jpg">
|
||
|
|
<h3>Special offer</h3>
|
||
|
|
<p>Aliquam ornare faucibus leo, vel euismod nisi porta non. Donec at arcu eget enim bibendum facilisis.</p>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="container example-nested">
|
||
|
|
<h2 id="grid-nested">Nested grid <a href="#grid-nested">#</a></h2>
|
||
|
|
<div class="grid">
|
||
|
|
<div class="col-sm-6 col-grid">
|
||
|
|
<img class="flex-img" src="images/1.jpg">
|
||
|
|
<h3>Amazing</h3>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et sagittis dui. Maecenas rhoncus justo aliquam urna finibus tincidunt et ut mauris.</p>
|
||
|
|
<p>Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.</p>
|
||
|
|
<p>Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit.</p>
|
||
|
|
<div class="flex-footer">
|
||
|
|
<a href="#0">read more</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-6 col-grid">
|
||
|
|
<div class="grid">
|
||
|
|
<div class="col-6 col-grid">
|
||
|
|
<img class="flex-img" src="images/2.jpg">
|
||
|
|
<h3>Festivals</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 aliqu.</p>
|
||
|
|
<div class="flex-footer">
|
||
|
|
<a href="#0">read more</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-6 col-grid">
|
||
|
|
<img class="flex-img" src="images/3.jpg">
|
||
|
|
<h3>Special offer</h3>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et sagittis dui. Maecenas rhoncus justo aliquam urna finibus tincidunt et ut mauris.</p>
|
||
|
|
<div class="flex-footer">
|
||
|
|
<a href="#0">read more</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-6 col-grid">
|
||
|
|
<img class="flex-img" src="images/4.jpg">
|
||
|
|
<h3>Lovely stuff</h3>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et sagittis dui. Maecenas rhoncus justo aliquam urna finibus tincidunt et ut mauris.</p>
|
||
|
|
<div class="flex-footer">
|
||
|
|
<a href="#0">read more</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-6 col-grid">
|
||
|
|
<img class="flex-img" src="images/5.jpg">
|
||
|
|
<h3>Amazing</h3>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et sagittis dui. Maecenas rhoncus justo aliquam urna finibus tincidunt et ut mauris.</p>
|
||
|
|
<div class="flex-footer">
|
||
|
|
<a href="#0">read more</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="container example-nested-cards">
|
||
|
|
<h2 id="grid-nested-cards">Nested grid with cards <a href="#grid-nested-cards">#</a></h2>
|
||
|
|
<div class="grid">
|
||
|
|
<div class="col-md-6 col-grid">
|
||
|
|
<div class="card-body">
|
||
|
|
<img class="flex-img" src="images/5.jpg">
|
||
|
|
<h3>Amazing</h3>
|
||
|
|
<p>Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. </p>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et sagittis dui. Maecenas rhoncus justo aliquam urna finibus tincidunt et ut mauris.</p>
|
||
|
|
</div>
|
||
|
|
<a href="#0" class="card-footer-link">read more</a>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6 col-grid">
|
||
|
|
<div class="grid">
|
||
|
|
<div class="col-xs-6 col-xlg-12 col-grid">
|
||
|
|
<div class="card-body">
|
||
|
|
<img class="flex-img" src="images/1.jpg">
|
||
|
|
<h3>Amazing</h3>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et sagittis dui. Maecenas rhoncus justo aliquam urna finibus tincidunt et ut mauris.</p>
|
||
|
|
</div>
|
||
|
|
<a href="#0" class="card-footer-link">read more</a>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-6 col-xlg-4 col-grid">
|
||
|
|
<div class="card-body">
|
||
|
|
<img class="flex-img" src="images/2.jpg">
|
||
|
|
<h3>Amazing</h3>
|
||
|
|
<p>Donec at arcu eget enim bibendum facilisis. Etiam urna elit, blandit ut libero placerat, iaculis aliquam erat.</p>
|
||
|
|
</div>
|
||
|
|
<a href="#0" class="card-footer-link">read more</a>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-6 col-xlg-4 col-grid">
|
||
|
|
<div class="card-body">
|
||
|
|
<img class="flex-img" src="images/3.jpg">
|
||
|
|
<h3>Amazing</h3>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et sagittis dui. Maecenas rhoncus justo aliquam urna finibus tincidunt et ut mauris.</p>
|
||
|
|
</div>
|
||
|
|
<a href="#0" class="card-footer-link">read more</a>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-6 col-xlg-4 col-grid">
|
||
|
|
<div class="card-body">
|
||
|
|
<img class="flex-img" src="images/4.jpg">
|
||
|
|
<h3>Amazing</h3>
|
||
|
|
<p>Nunc dignissim in ante sed dapibus. Aenean sit amet aliquet dolor, at auctor erat. Aliquam ornare faucibus leo, vel euismod nisi porta non.</p>
|
||
|
|
</div>
|
||
|
|
<a href="#0" class="card-footer-link">read more</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="example-tiles">
|
||
|
|
<div class="container">
|
||
|
|
<h2 id="grid-tiles">Tiled grid <a href="#grid-tiles">#</a></h2>
|
||
|
|
</div>
|
||
|
|
<div class="grid">
|
||
|
|
<a href="#0" class="col-xs-12 col-sm-6 col-center">
|
||
|
|
<h3>Lesson 1</h3>
|
||
|
|
<p>Introducing HTML</p>
|
||
|
|
<span class="button">Start lesson</span>
|
||
|
|
</a>
|
||
|
|
<a href="#0" class="col-6 col-center">
|
||
|
|
<h3>Lesson 2</h3>
|
||
|
|
<p>Introducing CSS</p>
|
||
|
|
<span class="button">Start lesson</span>
|
||
|
|
</a>
|
||
|
|
<a href="#0" class="col-6 col-sm-4 col-center">
|
||
|
|
<h3>Lesson 3</h3>
|
||
|
|
<p>Advanced CSS</p>
|
||
|
|
<span class="button">Start lesson</span>
|
||
|
|
</a>
|
||
|
|
<a href="#0" class="col-6 col-sm-4 col-center">
|
||
|
|
<h3>Lesson 4</h3>
|
||
|
|
<p>Advanced HTML</p>
|
||
|
|
<span class="button">Start lesson</span>
|
||
|
|
</a>
|
||
|
|
<a href="#0" class="col-6 col-sm-4 col-center">
|
||
|
|
<h3>Lesson 5</h3>
|
||
|
|
<p>Introducing JavaScript</p>
|
||
|
|
<span class="button">Start lesson</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="container example-form">
|
||
|
|
<h2 id="grid-form">Responsive form <a href="#grid-form">#</a></h2>
|
||
|
|
<form class="grid" action="javascript:void(0);">
|
||
|
|
<div class="col-sm-6 col-md-4 col-grid">
|
||
|
|
<div class="card-body">
|
||
|
|
<h3>Choose your package</h3>
|
||
|
|
<input type="radio" name="package" id="free" value="free" checked>
|
||
|
|
<label for="free">
|
||
|
|
Free tier
|
||
|
|
<p>Basic API access and 2 concurrent users</p>
|
||
|
|
</label>
|
||
|
|
<input type="radio" name="package" id="pro" value="pro">
|
||
|
|
<label for="pro">
|
||
|
|
Pro tier
|
||
|
|
<p>Full API access and 10 concurrent users</p>
|
||
|
|
</label>
|
||
|
|
<input type="radio" name="package" id="premium" value="premium">
|
||
|
|
<label for="premium">
|
||
|
|
Premium tier
|
||
|
|
<p>Automated backups, Full API access and 100 concurrent users</p>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-6 col-md-4 col-grid justify-space-between">
|
||
|
|
<label for="firstname">First name</label>
|
||
|
|
<input id="firstname" type="text" name="firstname">
|
||
|
|
<label for="secondname">Second name</label>
|
||
|
|
<input id="secondname" type="text" name="secondname">
|
||
|
|
<label for="email">Email</label>
|
||
|
|
<input id="email" type="email" name="email">
|
||
|
|
<label for="company">Company name</label>
|
||
|
|
<input id="company" type="text" name="company">
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-12 col-md-4 col-grid">
|
||
|
|
<label for="use">How did you hear about us?</label>
|
||
|
|
<select id="use" name="use">
|
||
|
|
<option value="user-testing">User testing</option>
|
||
|
|
<option value="analytics">Analytics</option>
|
||
|
|
<option value="other">Other</option>
|
||
|
|
</select>
|
||
|
|
<div class="flex-footer">
|
||
|
|
<label for="firstname">
|
||
|
|
Special requests
|
||
|
|
<p>If you have any special requests please let us know here.</p>
|
||
|
|
</label>
|
||
|
|
<textarea id="comment" name="comment"></textarea>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-12">
|
||
|
|
<input type="submit" value="Sign up" class="button">
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="example-image-display">
|
||
|
|
<div class="container">
|
||
|
|
<h2 id="image-display">Full screen image display <a href="#image-display">#</a></h2>
|
||
|
|
</div>
|
||
|
|
<div class="grid align-content-space-between">
|
||
|
|
<div class="col-12 tools">
|
||
|
|
<a href="#0" class="button control"><</a>
|
||
|
|
<div class="aside">
|
||
|
|
<a href="#0" class="button">Share</a>
|
||
|
|
<a href="#0" class="button">Download</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-12 info">
|
||
|
|
<span>By Stacey Jordan</span>
|
||
|
|
<span class="aside">© 2017</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="example-3-column">
|
||
|
|
<div class="container">
|
||
|
|
<h2 id="classic-3">Classic 3 column layout with nested grids <a href="#classic-3">#</a></h2>
|
||
|
|
</div>
|
||
|
|
<div class="grid">
|
||
|
|
<nav class="col-xs-2 col-bleed col-feature">
|
||
|
|
<img class="flex-img logo" src="images/placeholder.png">
|
||
|
|
<ul class="nav">
|
||
|
|
<li>
|
||
|
|
<a href="#0" class="active">home</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#0">account</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#0">about</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#0">faq</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#0">search</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
<div class="col-xs-10 col-md-7 col-body">
|
||
|
|
<ul class="grid">
|
||
|
|
<li class="col-12 col-grid">
|
||
|
|
<h1>Amazing destination</h1>
|
||
|
|
<img src="images/4.jpg" class="flex-img">
|
||
|
|
<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>
|
||
|
|
<div class="flex-footer">
|
||
|
|
<a href="#0">read more</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="col-12 col-sm-6 col-grid">
|
||
|
|
<h3>Brilliant views</h3>
|
||
|
|
<img src="images/1.jpg" class="flex-img">
|
||
|
|
<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="flex-footer">
|
||
|
|
<a href="#0">read more</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="col-12 col-sm-6 col-grid">
|
||
|
|
<h3>Stellar beaches</h3>
|
||
|
|
<img src="images/2.jpg" class="flex-img">
|
||
|
|
<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="flex-footer">
|
||
|
|
<a href="#0">read more</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="col-12 col-sm-6 col-grid">
|
||
|
|
<h3>Special offer</h3>
|
||
|
|
<img src="images/3.jpg" class="flex-img">
|
||
|
|
<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="flex-footer">
|
||
|
|
<a href="#0">read more</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="col-12 col-sm-6 col-grid">
|
||
|
|
<h3>Romantic getaway</h3>
|
||
|
|
<img src="images/5.jpg" class="flex-img">
|
||
|
|
<p>Cras nec dui in erat auctor molestie nec non odio. Nam rhoncus ipsum tincidunt.</p>
|
||
|
|
<div class="flex-footer">
|
||
|
|
<a href="#0">read more</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<footer class="col-12">
|
||
|
|
<p>copyright 2017</p>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3 col-feature">
|
||
|
|
<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>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<a href="#0">venenatis</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#0">pulvinar tempor</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#0">ligula tortor</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#0">consectetur</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#0">augue</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<script src="js/contents.js"></script>
|
||
|
|
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
|
||
|
|
<script>
|
||
|
|
WebFont.load({
|
||
|
|
google: {
|
||
|
|
families: ['Lora', 'Josefin Sans']
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|