mustard-ui
Version:
A starter CSS framework that actually looks good.
91 lines (78 loc) • 6.11 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mustard UI Examples</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
<!-- Normalize -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<!-- Mustard UI -->
<link rel="stylesheet" href="/dist/css/mustard-ui.min.css">
</head>
<body>
<!-- Navigation -->
<nav>
<div class="nav-container">
<div class="nav-logo">
<a href="/">Examples</a>
</div>
<ul class="nav-links">
<li><a href="/index.html">Home</a></li>
</ul>
</div>
</nav>
<!-- Main Content -->
<main>
<div class="container">
<div class="row">
<div class="col col-sm-12 col-xlg-8">
<section>
<h1 class="h3">How to build a successful CSS framework</h1>
<p><em>March 31, 2018</em></p>
<p class="magnify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda esse voluptates rerum eveniet rem consequuntur, nam laborum repellendus natus ad officia, est culpa, atque similique, nobis officiis eos tempore perferendis? Vero numquam velit ipsa quam explicabo iusto voluptatum ab sint odit aliquam eos fugit libero, repellendus, possimus perspiciatis dolor magni, nihil soluta eius praesentium quasi recusandae iste ut autem. Ad nihil adipisci, suscipit, corrupti nemo est temporibus dignissimos in ab, possimus sit totam sed, explicabo deserunt iusto reiciendis architecto mollitia accusantium earum. Et provident cumque natus nostrum explicabo quidem ipsum ab, numquam ipsam praesentium quod consequuntur possimus repudiandae culpa impedit accusantium excepturi voluptate laborum porro incidunt! Distinctio in ea facilis fugit dolorem omnis aperiam perspiciatis aliquid, eaque libero accusamus! Quisquam sequi suscipit quo dignissimos officiis dolorum odit ex! Veniam labore provident porro saepe sed neque, dolorem pariatur, temporibus quas nesciunt repellat ex ullam quis sunt animi debitis cum vitae obcaecati dolore unde quisquam illum minus.</p>
<blockquote>
<p><em>This is a sample Block quote to give you context</em></p>
</blockquote>
<p class="magnify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda esse voluptates rerum eveniet rem consequuntur, nam laborum repellendus natus ad officia, est culpa, atque similique, nobis officiis eos tempore perferendis? Vero numquam velit ipsa quam explicabo iusto voluptatum ab sint odit aliquam eos fugit libero, repellendus, possimus perspiciatis dolor magni, nihil soluta eius praesentium quasi recusandae iste ut autem. Ad nihil adipisci, suscipit, corrupti nemo est temporibus dignissimos in ab, possimus sit totam sed, explicabo deserunt iusto reiciendis architecto mollitia accusantium earum. Et provident cumque natus nostrum explicabo quidem ipsum ab, numquam ipsam praesentium quod consequuntur possimus repudiandae culpa impedit accusantium excepturi voluptate laborum porro incidunt! Distinctio in ea facilis fugit dolorem omnis aperiam perspiciatis aliquid, eaque libero accusamus! Quisquam sequi suscipit quo dignissimos officiis dolorum odit ex! Veniam labore provident porro saepe sed neque, dolorem pariatur, temporibus quas nesciunt repellat ex ullam quis sunt animi debitis cum vitae obcaecati dolore unde quisquam illum minus.</p>
</section>
<section class="section-secondary">
<div class="row">
<div class="col col-sm-3">
<img src="//placehold.it/140x140">
</div>
<div class="col-sm-9">
<p class="h5">Written by <strong>Kyle Logue</strong>.</p>
<p>Kyle is the founder of Mustard UI and currently works as a Senior Web Developer in Raleigh, North Carolina. He writes on topics about frontend web development, new technologies, and marketing topics.</p>
</div>
</div>
</section>
</div>
<div class="col col-sm-12 col-xlg-4">
<section class="section-secondary">
<p class="h3">Stay in the Loop</p>
<p>We deliver some of the best development related findings on the web. Provide your email and we'll make sure you don't miss out!</p>
<div class="form-control">
<label for="email">Email Address</label>
<input type="text" name="email" placeholder="Enter your email...">
</div>
<button class="button-primary button-large">Subscribe</button>
</section>
<section class="display-lg-up">
<div class="sidebar sidebar-right">
<h2 class="sidebar-category">Recent Articles</h2>
<ul class="sidebar-links">
<li><a href="#">An Awesome Article Title</a></li>
<li><a href="#">Don't forget to read about this article</a></li>
<li><a class="active" href="#">How to build a successful CSS framework</a></li>
<li><a href="#">Short Title</a></li>
<li><a href="#">A really long title that doesn't seem to have any reason for being this long.</a></li>
</ul>
</div>
</section>
</div>
</div>
</div>
</main>
</body>
</html>