Karma CSS Sample Blog
by Karma CSS
HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/karma-css@latest/dist/karma.min.css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap" rel="stylesheet">
<header>
<div class="container">
<h1>Blog</h1>
<p class="muted">An example blog template built with Karma CSS.</p>
<hr>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-9">
<section>
<h2>Sample blog post</h2>
<p class="small"><span class="muted">July 1, 2017 by</span> <a>Penelope</a></p>
<p>This blog post shows a few different types of content that's supported and styled with Karma CSS.</p>
</section>
<p><img class="img-fluid" src="http://via.placeholder.com/1100x618"></p>
<div class="row">
<div class="col-md-4">
<p><img class="img-fluid" src="http://via.placeholder.com/300x168"></p>
</div>
<div class="col-md-4">
<p><img class="img-fluid" src="http://via.placeholder.com/300x168"></p>
</div>
<div class="col-md-4">
<p><img class="img-fluid" src="http://via.placeholder.com/300x168"></p>
</div>
</div>
<section>
<p>Lorem ipsum dolor sit amet, laudem ocurreret eos at, sea velit sadipscing eu, amet similique eu sit. <strong>Ne vix phaedrum posidonium appellantur</strong>, labore labores cum ei, duis phaedrum deseruisse et eam. Nam ex eros invenire, illud ludus accommodare an eos, id nonumes percipitur scriptorem est. Duo soluta iuvaret at. No duo quaeque debitis, tota exerci ne nam, at cum paulo audiam urbanitas.</p>
<p>Omnes legere principes usu an, quo novum oportere ex. Elit veri harum in quo. Idque philosophia vim et, no eos iuvaret accusata pertinax, has ne vitae persius adipiscing. Pro te iudico admodum dolores, pro ei zril dissentias. Mel errem putent appellantur cu. Docendi noluisse ea his, mandamus accusamus reprehendunt cum ea.</p>
<p>Nec alii ullum...
CSS
body {
padding: 3rem 0;
}