SONEX Documentation

Eye-catching portfolio focused on showcase your talents and skills.

Get Started

Blog Single Page

Body of this page must have id #blog-single. This page has next layout: post, comments and leave comment section.

Post

Post has next layout: title image, title, author, time, post categories and text.

post layout
<article>
	<div class="title-image">
		<img src="img/blog/blog-image-4.png" alt="">
	</div>
	<div class="article-top">
		<h2>Design Better Forms</h2>
		<ul>
			<li class="author">Ted Ross</li>
			<li class="time">15 July 2016</li>
			<li class="categories">
				<ul>
					<li><a href="#">Branding</a>
					</li>
					<li><a href="#">Podcast</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
	<div class="article-text">
		<p class="lead">Donec fringilla pharetra enim, eu vestibulum ligula. Nulla nibh dolor, eleifend vitae dolor vitae, fringilla tincidunt arcu. Sed sagittis magna id tortor interdum scelerisque. Curabitur quis neque sit amet magna vehicula interdum. Vivamus non
			commodo nunc.</p>
		<p>Donec interdum, nisi at euismod rhoncus, ligula sem ornare nisi, sed scelerisque mauris turpis in lorem. Suspendisse porttitor ultrices viverra. Aenean et viverra justo. Aliquam erat volutpat. Nullam rhoncus sed sem eget tempor. Aliquam lacus
			diam, condimentum id sem nec, faucibus molestie diam. Maecenas mattis lectus id metus iaculis tempor. Donec in ex nisi. Curabitur dictum, lectus sed dignissim rhoncus, <a href="#">enim</a> nisl commodo ex, porttitor mollis augue dui ac urna.
			Praesent facilisis ante mauris, ac luctus velit imperdiet vel. Nam ultricies ipsum id ornare consequat. Donec id tristique mauris. Fusce lectus tellus, pretium sit amet ante vel, faucibus pharetra sem. Aliquam placerat felis sem, ut varius
			tellus viverra ac.</p>
		<blockquote>Integer id imperdiet nulla, et molestie nunc. Mauris vitae vulputate magna. Donec augue dolor, mollis convallis nisi sed, suscipit rhoncus velit. Donec eget congue justo.</blockquote>
		<p>Vestibulum augue arcu, tincidunt nec ante at, feugiat vehicula turpis. Aliquam eu leo ipsum. Aenean tincidunt pharetra est porta gravida. Aenean a turpis tristique, facilisis nisl quis, ornare massa. Donec commodo mattis facilisis. Morbi sit
			amet nisi quis sapien sagittis viverra vitae vitae dui. Nullam tempor sagittis facilisis.</p>
		<p>Quisque ornare risus vitae velit aliquam dapibus. Etiam ipsum lorem, feugiat a ipsum nec, eleifend gravida libero. Cras pharetra lectus eget dolor molestie volutpat. Etiam viverra hendrerit metus non consequat.</p>
	</div>
</article>

Comments

This section show user's comments and must be wrapped to .comments.

Each comment has next layout: photo, name, time and message.

comment layout
<div class="comment">
	<div class="row">
		<div class="col-md-8">
			<div class="user-photo">
				<img src="img/blog/comment-1.png" alt="">
			</div>
			<div class="content">
				<h4>Eric</h4><small class="time">15 July 2016</small>
				<p>Fusce at justo magna. Pellentesque ut libero blandit, pretium urna vitae, dictum tortor.</p><a class="reply" href="#">Reply</a>
			</div>
		</div>
	</div>
</div>

If you want to make comment as reply just add class .reply to comment.

Leave Comment

This section contains form to leave comment. It must be wrapped to .leave-comment.

leave comment layout
<div class="leave-comment">
	<h3>Leave Comment</h3>
	<div class="row">
		<div class="col-md-12">
			<form>
				<div class="row">
					<div class="col-sm-6">
						<input type="text" placeholder="Name" name="comments-name">
					</div>
					<div class="col-sm-6">
						<input type="text" placeholder="Email" name="comments-email">
					</div>
				</div>
				<textarea placeholder="Comment" name="comments-comment"></textarea><a class="btn" href="#">Leave Comment</a>
			</form>
		</div>
	</div>
</div>

If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!