543 lines
No EOL
26 KiB
HTML
543 lines
No EOL
26 KiB
HTML
<!DOCTYPE html>
|
|
<html class="no-js" lang="en">
|
|
<head>
|
|
|
|
<!--- basic page needs
|
|
================================================== -->
|
|
<meta charset="utf-8">
|
|
<title>Blog Single - Keep It Simple</title>
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
|
|
<!-- mobile specific metas
|
|
================================================== -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<!-- CSS
|
|
================================================== -->
|
|
<link rel="stylesheet" href="css/base.css">
|
|
<link rel="stylesheet" href="css/main.css">
|
|
|
|
<!-- script
|
|
================================================== -->
|
|
<script src="js/modernizr.js"></script>
|
|
<script defer src="js/fontawesome/all.min.js"></script>
|
|
|
|
<!-- favicons
|
|
================================================== -->
|
|
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
|
<link rel="manifest" href="site.webmanifest">
|
|
|
|
</head>
|
|
|
|
<body id="top" class="ss-single">
|
|
|
|
<!-- preloader
|
|
================================================== -->
|
|
<div id="preloader">
|
|
<div id="loader" class="dots-fade">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Header
|
|
================================================== -->
|
|
<header class="s-header">
|
|
|
|
<div class="row">
|
|
|
|
<div class="s-header__content column">
|
|
<h1 class="s-header__logotext">
|
|
<a href="index.html" title="">Keep It Simple.</a>
|
|
</h1>
|
|
<p class="s-header__tagline">Put your awesome tagline here.</p>
|
|
</div>
|
|
|
|
</div> <!-- end row -->
|
|
|
|
<nav class="s-header__nav-wrap">
|
|
|
|
<div class="row">
|
|
|
|
<ul class="s-header__nav">
|
|
<li><a href="index.html">Home</a></li>
|
|
<li class="has-children"><a href="#0">Dropdown</a>
|
|
<ul>
|
|
<li><a href="#0">Submenu 01</a></li>
|
|
<li><a href="#0">Submenu 02</a></li>
|
|
<li><a href="#0">Submenu 03</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="demo.html">Demo</a></li>
|
|
<li><a href="archives.html">Archives</a></li>
|
|
<li class="has-children current"><a href="#0">Blog</a>
|
|
<ul>
|
|
<li><a href="blog.html">Blog Entries</a></li>
|
|
<li><a href="single.html">Single Blog</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="page.html">Page</a></li>
|
|
</ul> <!-- end #nav -->
|
|
|
|
</div>
|
|
|
|
</nav> <!-- end #nav-wrap -->
|
|
|
|
<a class="header-menu-toggle" href="#0" title="Menu"><span>Menu</span></a>
|
|
|
|
</header> <!-- Header End -->
|
|
|
|
|
|
|
|
<!-- Content
|
|
================================================== -->
|
|
<div class="s-content">
|
|
|
|
<div class="row">
|
|
|
|
<div id="main" class="s-content__main large-8 column">
|
|
|
|
<article class="entry">
|
|
|
|
<header class="entry__header">
|
|
|
|
<h2 class="entry__title h1">
|
|
<a href="single.html" title="">Hey, We Love Open Sans!</a>
|
|
</h2>
|
|
|
|
<div class="entry__meta">
|
|
<ul>
|
|
<li>July 12, 2019</li>
|
|
<li><a href="#" title="" rel="category tag">Ghost</a></li>
|
|
<li>John Doe</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</header> <!-- entry__header -->
|
|
|
|
<div class="entry__content-media">
|
|
<img src="images/wheel-500.jpg"
|
|
srcset="images/wheel-1000.jpg 1000w,
|
|
images/wheel-500.jpg 500w"
|
|
sizes="(max-width: 1000px) 100vw, 1000px" alt="">
|
|
</div>
|
|
|
|
<div class="entry__content">
|
|
<p class="lead">
|
|
Lorem ipsum Nisi enim est proident est magna occaecat dolore
|
|
proident eu ex sunt consectetur consectetur dolore enim nisi
|
|
exercitation adipisicing magna culpa commodo deserunt ut do Ut
|
|
occaecat. Lorem ipsum Veniam consequat quis aliquip dolore
|
|
minim ex labore dolor Excepteur Duis velit in officia Excepteur
|
|
officia officia officia adipisicing magna eu ex sunt.
|
|
</p>
|
|
|
|
<p>
|
|
Duis ex ad cupidatat tempor Excepteur cillum cupidatat fugiat
|
|
nostrud cupidatat dolor sunt sint sit nisi est eu exercitation
|
|
incididunt adipisicing veniam velit id fugiat enim mollit amet
|
|
anim veniam dolor dolor irure velit commodo cillum sit nulla
|
|
ullamco magna amet magna cupidatat qui labore cillum sit in tempor
|
|
veniam consequat non laborum adipisicing aliqua ea nisi sint ut
|
|
quis proident ullamco ut dolore culpa occaecat ut laboris in sit
|
|
minim cupidatat ut dolor voluptate enim veniam consequat occaecat
|
|
fugiat in adipisicing in amet Ut nulla nisi non ut enim aliqua
|
|
laborum mollit quis nostrud sed sed.
|
|
</p>
|
|
|
|
<p>
|
|
Lorem ipsum Nisi enim est proident est magna occaecat dolore
|
|
proident eu ex sunt consectetur consectetur dolore enim nisi
|
|
exercitation adipisicing magna culpa commodo deserunt ut do Ut
|
|
occaecat. Lorem ipsum Veniam consequat quis aliquip dolore minim
|
|
ex labore dolor Excepteur Duis velit in officia Excepteur officia
|
|
officia officia cillum ut elit in fugiat incididunt ea ad Ut ut
|
|
ea ea dolor ex dolor eu magna voluptate irure consectetur.
|
|
</p>
|
|
|
|
<p>
|
|
Placeat quam fugit qui quia. Non quasi tempore qui illo. Dolor magni
|
|
ducimus doloribus rerum dolorem. Cum iste et commodi doloremque.
|
|
At veniam aperiam eum voluptates maiores iure facere. Cupiditate vero
|
|
similique ut sed aut. Est sint laboriosam quia totam fugit. Necessitatibus
|
|
sed ut autem eveniet mollitia. Temporibus ducimus officiis aut est quaerat
|
|
fuga est ut aut.
|
|
</p>
|
|
</div> <!-- entry__content -->
|
|
|
|
<p class="entry__tags">
|
|
<span>Tagged in </span>:
|
|
<a href="#0">orci</a>, <a href="#0">lectus</a>, <a href="#0">varius</a>, <a href="#0">turpis</a>
|
|
</p>
|
|
|
|
<ul class="entry__post-nav h-group">
|
|
<li class="prev"><a rel="prev" href="#0"><strong class="h6">Previous Article</strong> Duis Sed Odio Sit Amet Nibh Vulputate</a></li>
|
|
<li class="next"><a rel="next" href="#0"><strong class="h6">Next Article</strong> Morbi Elit Consequat Ipsum</a></li>
|
|
</ul>
|
|
|
|
</article> <!-- end entry -->
|
|
|
|
<div class="comments-wrap">
|
|
|
|
<div id="comments">
|
|
|
|
<h3>5 Comments</h3>
|
|
|
|
<!-- START commentlist -->
|
|
<ol class="commentlist">
|
|
|
|
<li class="depth-1 comment">
|
|
|
|
<div class="comment__avatar">
|
|
<img class="avatar" src="images/avatars/user-01.jpg" alt="" width="50" height="50">
|
|
</div>
|
|
|
|
<div class="comment__content">
|
|
|
|
<div class="comment__info">
|
|
<div class="comment__author">Itachi Uchiha</div>
|
|
|
|
<div class="comment__meta">
|
|
<div class="comment__time">July 12, 2019</div>
|
|
<div class="comment__reply">
|
|
<a class="comment-reply-link" href="#0">Reply</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comment__text">
|
|
<p>Adhuc quaerendum est ne, vis ut harum tantas noluisse, id suas iisque mei. Nec te inani ponderum vulputate,
|
|
facilisi expetenda has et. Iudico dictas scriptorem an vim, ei alia mentitum est, ne has voluptua praesent.</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</li> <!-- end comment level 1 -->
|
|
|
|
<li class="thread-alt depth-1 comment">
|
|
|
|
<div class="comment__avatar">
|
|
<img class="avatar" src="images/avatars/user-04.jpg" alt="" width="50" height="50">
|
|
</div>
|
|
|
|
<div class="comment__content">
|
|
|
|
<div class="comment__info">
|
|
<div class="comment__author">John Doe</div>
|
|
|
|
<div class="comment__meta">
|
|
<div class="comment__time">July 12, 2019</div>
|
|
<div class="comment__reply">
|
|
<a class="comment-reply-link" href="#0">Reply</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comment__text">
|
|
<p>Sumo euismod dissentiunt ne sit, ad eos iudico qualisque adversarium, tota falli et mei. Esse euismod
|
|
urbanitas ut sed, et duo scaevola pericula splendide. Primis veritus contentiones nec ad, nec et
|
|
tantas semper delicatissimi.</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<ul class="children">
|
|
|
|
<li class="depth-2 comment">
|
|
|
|
<div class="comment__avatar">
|
|
<img class="avatar" src="images/avatars/user-03.jpg" alt="" width="50" height="50">
|
|
</div>
|
|
|
|
<div class="comment__content">
|
|
|
|
<div class="comment__info">
|
|
<div class="comment__author">Kakashi Hatake</div>
|
|
|
|
<div class="comment__meta">
|
|
<div class="comment__time">July 12, 2019</div>
|
|
<div class="comment__reply">
|
|
<a class="comment-reply-link" href="#0">Reply</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comment__text">
|
|
<p>Duis sed odio sit amet nibh vulputate
|
|
cursus a sit amet mauris. Morbi accumsan ipsum velit. Duis sed odio sit amet nibh vulputate
|
|
cursus a sit amet mauris</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<ul class="children">
|
|
|
|
<li class="depth-3 comment">
|
|
|
|
<div class="comment__avatar">
|
|
<img class="avatar" src="images/avatars/user-04.jpg" alt="" width="50" height="50">
|
|
</div>
|
|
|
|
<div class="comment__content">
|
|
|
|
<div class="comment__info">
|
|
<div class="comment__author">John Doe</div>
|
|
|
|
<div class="comment__meta">
|
|
<div class="comment__time">july 11, 2019</div>
|
|
<div class="comment__reply">
|
|
<a class="comment-reply-link" href="#0">Reply</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comment__text">
|
|
<p>Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est
|
|
etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li> <!-- end comment level 1 -->
|
|
|
|
<li class="depth-1 comment">
|
|
|
|
<div class="comment__avatar">
|
|
<img class="avatar" src="images/avatars/user-02.jpg" alt="" width="50" height="50">
|
|
</div>
|
|
|
|
<div class="comment__content">
|
|
|
|
<div class="comment__info">
|
|
<div class="comment__author">Shikamaru Nara</div>
|
|
|
|
<div class="comment__meta">
|
|
<div class="comment__time">July 11, 2019</div>
|
|
<div class="comment__reply">
|
|
<a class="comment-reply-link" href="#0">Reply</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comment__text">
|
|
<p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</li> <!-- end comment level 1 -->
|
|
|
|
</ol>
|
|
<!-- END commentlist -->
|
|
|
|
</div> <!-- end comments -->
|
|
|
|
<div class="comment-respond">
|
|
|
|
<!-- START respond -->
|
|
<div id="respond">
|
|
|
|
<h3>Add Comment <span>Your email address will not be published</span></h3>
|
|
|
|
<form name="contactForm" id="contactForm" method="post" action="" autocomplete="off">
|
|
<fieldset>
|
|
|
|
<div class="form-field">
|
|
<input name="cName" id="cName" class="h-full-width" placeholder="Your Name" value="" type="text">
|
|
</div>
|
|
|
|
<div class="form-field">
|
|
<input name="cEmail" id="cEmail" class="h-full-width" placeholder="Your Email" value="" type="text">
|
|
</div>
|
|
|
|
<div class="form-field">
|
|
<input name="cWebsite" id="cWebsite" class="h-full-width" placeholder="Website" value="" type="text">
|
|
</div>
|
|
|
|
<div class="message form-field">
|
|
<textarea name="cMessage" id="cMessage" class="h-full-width" placeholder="Your Message"></textarea>
|
|
</div>
|
|
|
|
<input name="submit" id="submit" class="btn btn--primary btn-wide btn--large h-full-width" value="Add Comment" type="submit">
|
|
|
|
</fieldset>
|
|
</form> <!-- end form -->
|
|
|
|
</div>
|
|
<!-- END respond-->
|
|
|
|
</div> <!-- end comment-respond -->
|
|
|
|
</div> <!-- end comments-wrap -->
|
|
|
|
</div> <!-- end main -->
|
|
|
|
|
|
<div id="sidebar" class="s-content__sidebar large-4 column">
|
|
|
|
<div class="widget widget--search">
|
|
<h3 class="h6">Search</h3>
|
|
<form action="#0">
|
|
<input type="text" value="Search here..." onblur="if(this.value == '') { this.value = 'Search here...'; }" onfocus="if (this.value == 'Search here...') { this.value = ''; }" class="text-search">
|
|
<input type="submit" value="" class="submit-search">
|
|
</form>
|
|
</div>
|
|
|
|
<div class="widget widget--categories">
|
|
<h3 class="h6">Categories.</h3>
|
|
<ul>
|
|
<li><a href="#0" title="">Wordpress</a> (2)</li>
|
|
<li><a href="#0" title="">Ghost</a> (14)</li>
|
|
<li><a href="#0" title="">Joomla</a> (5)</li>
|
|
<li><a href="#0" title="">Drupal</a> (3)</li>
|
|
<li><a href="#0" title="">Magento</a> (2)</li>
|
|
<li><a href="#0" title="">Uncategorized</a> (9)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="widget widget_text group">
|
|
<h3 class="h6">Widget Text.</h3>
|
|
|
|
<p>
|
|
Lorem ipsum Ullamco commodo laboris sit dolore commodo aliquip incididunt fugiat esse dolor
|
|
aute fugiat minim eiusmod do velit labore fugiat officia ad sit culpa labore in consectetur
|
|
sint cillum sint consectetur voluptate adipisicing Duis irure magna ut sit amet reprehenderit.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="widget widget_tags">
|
|
<h3 class="h6">Post Tags.</h3>
|
|
|
|
<div class="tagcloud group">
|
|
<a href="#0">Corporate</a>
|
|
<a href="#0">Onepage</a>
|
|
<a href="#0">Agency</a>
|
|
<a href="#0">Multipurpose</a>
|
|
<a href="#0">Blog</a>
|
|
<a href="#0">Landing Page</a>
|
|
<a href="#0">Resume</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="widget widget_popular">
|
|
<h3 class="h6">Popular Post.</h3>
|
|
|
|
<ul class="link-list">
|
|
<li><a href="#0">Sint cillum consectetur voluptate.</a></li>
|
|
<li><a href="#0">Lorem ipsum Ullamco commodo.</a></li>
|
|
<li><a href="#0">Fugiat minim eiusmod do.</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div> <!-- end sidebar -->
|
|
|
|
</div> <!-- end row -->
|
|
|
|
</div> <!-- end content-wrap -->
|
|
|
|
|
|
<!-- Footer
|
|
================================================== -->
|
|
<footer class="s-footer">
|
|
|
|
<div class="row s-footer__top">
|
|
<div class="column">
|
|
<ul class="s-footer__social">
|
|
<li><a href="#0"><i class="fab fa-facebook-f" aria-hidden="true"></i></a></li>
|
|
<li><a href="#0"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>
|
|
<li><a href="#0"><i class="fab fa-youtube" aria-hidden="true"></i></a></li>
|
|
<li><a href="#0"><i class="fab fa-vimeo-v" aria-hidden="true"></i></a></li>
|
|
<li><a href="#0"><i class="fab fa-instagram" aria-hidden="true"></i></a></li>
|
|
<li><a href="#0"><i class="fab fa-linkedin" aria-hidden="true"></i></a></li>
|
|
<li><a href="#0"><i class="fab fa-skype" aria-hidden="true"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
</div> <!-- end footer__top -->
|
|
|
|
<div class="row s-footer__bottom">
|
|
|
|
<div class="large-6 tab-full column s-footer__info">
|
|
<h3 class="h6">About Keep It Simple</h3>
|
|
|
|
<p>
|
|
Lorem ipsum Ullamco commodo laboris sit dolore commodo aliquip incididunt fugiat esse dolor
|
|
aute fugiat minim eiusmod do velit labore fugiat officia ad sit culpa labore in consectetur
|
|
sint cillum sint consectetur voluptate adipisicing Duis
|
|
</p>
|
|
|
|
<p>
|
|
Lorem ipsum Sed nulla deserunt voluptate elit occaecat culpa cupidatat sit irure sint
|
|
sint incididunt cupidatat esse in Ut sed commodo tempor consequat culpa fugiat incididunt.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="large-6 tab-full column">
|
|
<div class="row">
|
|
<div class="large-8 tab-full column">
|
|
|
|
<h3 class="h6">Photostream</h3>
|
|
|
|
<ul class="photostream group">
|
|
<li><a href="#0"><img alt="thumbnail" src="images/thumb.jpg"></a></li>
|
|
<li><a href="#0"><img alt="thumbnail" src="images/thumb.jpg"></a></li>
|
|
<li><a href="#0"><img alt="thumbnail" src="images/thumb.jpg"></a></li>
|
|
<li><a href="#0"><img alt="thumbnail" src="images/thumb.jpg"></a></li>
|
|
<li><a href="#0"><img alt="thumbnail" src="images/thumb.jpg"></a></li>
|
|
<li><a href="#0"><img alt="thumbnail" src="images/thumb.jpg"></a></li>
|
|
<li><a href="#0"><img alt="thumbnail" src="images/thumb.jpg"></a></li>
|
|
<li><a href="#0"><img alt="thumbnail" src="images/thumb.jpg"></a></li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div class="large-4 tab-full column">
|
|
<h3 class="h6">Navigate</h3>
|
|
|
|
<ul class="s-footer__list s-footer-list--nav group">
|
|
<li><a href="#0">Home</a></li>
|
|
<li><a href="#0">Blog</a></li>
|
|
<li><a href="#0">Demo</a></li>
|
|
<li><a href="#0">Archives</a></li>
|
|
<li><a href="#0">About</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ss-copyright">
|
|
<span>© Copyright Keep It Simple 2019</span>
|
|
<span>Design by <a href="https://www.styleshout.com/">StyleShout</a></span>
|
|
</div>
|
|
|
|
</div> <!-- end footer__bottom -->
|
|
|
|
|
|
<div class="ss-go-top">
|
|
<a class="smoothscroll" title="Back to Top" href="#top">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0l8 9h-6v15h-4v-15h-6z"/></svg>
|
|
</a>
|
|
</div> <!-- end ss-go-top -->
|
|
|
|
</footer> <!-- end Footer-->
|
|
|
|
|
|
<!-- Java Script
|
|
================================================== -->
|
|
<script src="js/jquery-3.2.1.min.js"></script>
|
|
<script src="js/main.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |