post1.html

<!DOCTYPE html>
<html>
	<head>
		<title>Den of Horror</title>
		<meta charset="utf-8">
		<link type="text/css" rel="stylesheet" href="styles/main.css">
	</head>
	<body class="body">
		<header class="header">
			<img src="imgs/logo.png" alt="logo" class="logo" />
			<h1 class="blog-title">
				Welcome to the Den of horror
			</h1>
			<p class="tagline">
				Your essential stop for daily dose of horror.
			</p>
		</header>
		<nav class="navbar">
			<ul class="nav-list">
				<li class="nav-button">
					<a href="index.html" class="nav-link">Home</a>
				</li>
				<li class="nav-button">
					<a href="blog.html" class="nav-link">Blog</a>
				</li>
				<li class="nav-button">
					<a href="about.html" class="nav-link">About Us</a>
				</li>
				<li class="nav-button">
					<a href="contact.html" class="nav-link">Contact Us</a>
				</li>
			</ul>
		</nav>
		<main class="main">
			<article class="blog-post">
				<h2 class="blog-post-title">
					Horror Story 1 Place-holder
				</h2>
				<img src="imgs/post1.jpg" alt="Horror Story Pic" class="blog-image"/>
				<p class="blog-post-text">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed. Diam maecenas ultricies mi eget mauris pharetra et. Lobortis feugiat vivamus at augue eget arcu dictum varius. Enim ut sem viverra aliquet. Risus pretium quam vulputate dignissim suspendisse in. Sed tempus urna et pharetra pharetra massa massa ultricies. Sem nulla pharetra diam sit amet. Habitant morbi tristique senectus et netus et malesuada. At erat pellentesque adipiscing commodo elit at imperdiet. At varius vel pharetra vel.
				</p>
				<p class="blog-post-text">
					In eu mi bibendum neque egestas congue quisque egestas. Nisl tincidunt eget nullam non. Eget sit amet tellus cras adipiscing enim eu turpis egestas. Sit amet nisl purus in mollis nunc sed. Luctus accumsan tortor posuere ac ut consequat semper viverra nam. Maecenas ultricies mi eget mauris pharetra et. In vitae turpis massa sed elementum. Eget felis eget nunc lobortis mattis. Amet facilisis magna etiam tempor orci eu lobortis elementum. Pretium lectus quam id leo in. Est placerat in egestas erat imperdiet sed. Sagittis eu volutpat odio facilisis. Amet consectetur adipiscing elit ut aliquam. Id ornare arcu odio ut sem nulla. Scelerisque in dictum non consectetur a erat nam at. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque. Purus faucibus ornare suspendisse sed. Aliquam malesuada bibendum arcu vitae elementum curabitur. Eget egestas purus viverra accumsan in nisl nisi.
				</p>
				<p class="blog-post-text">
					Mattis rhoncus urna neque viverra justo nec ultrices. Non nisi est sit amet. Vestibulum morbi blandit cursus risus at ultrices mi tempus. Mauris pharetra et ultrices neque ornare aenean euismod elementum. Ornare arcu odio ut sem nulla pharetra diam sit amet. Neque convallis a cras semper. Morbi tincidunt ornare massa eget egestas purus viverra. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Amet justo donec enim diam vulputate ut pharetra sit. Ipsum dolor sit amet consectetur adipiscing elit. At consectetur lorem donec massa. Dolor morbi non arcu risus quis. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique. Orci phasellus egestas tellus rutrum tellus pellentesque. Egestas integer eget aliquet nibh praesent tristique. Est ante in nibh mauris cursus. Nisi vitae suscipit tellus mauris a diam maecenas sed enim.
				</p>
				<p class="blog-post-text">
					Aliquam etiam erat velit scelerisque. Et tortor at risus viverra adipiscing at in. Et leo duis ut diam quam nulla. Etiam tempor orci eu lobortis elementum nibh tellus molestie. Ac odio tempor orci dapibus. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc. Orci eu lobortis elementum nibh. Gravida in fermentum et sollicitudin ac. Scelerisque mauris pellentesque pulvinar pellentesque habitant. Sed sed risus pretium quam vulputate dignissim. Sit amet aliquam id diam. Tempor orci eu lobortis elementum nibh tellus molestie nunc non.
				</p>
				<p class="blog-post-text">
					Tellus mauris a diam maecenas sed enim. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Sed egestas egestas fringilla phasellus. Tristique senectus et netus et malesuada fames. Nibh sed pulvinar proin gravida. Dictumst quisque sagittis purus sit amet volutpat consequat mauris. Vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Quam elementum pulvinar etiam non quam. Scelerisque felis imperdiet proin fermentum leo vel orci porta non. Sodales ut etiam sit amet. Nec feugiat nisl pretium fusce id velit ut. Ut ornare lectus sit amet est placerat in egestas. Amet consectetur adipiscing elit ut aliquam purus sit. Volutpat odio facilisis mauris sit. Ut morbi tincidunt augue interdum velit euismod in pellentesque. Tortor dignissim convallis aenean et tortor at risus viverra adipiscing. Nunc aliquet bibendum enim facilisis.
				</p>
			</article>
			<section class="social-buttons">
				<h3 class="share-title">
					Share on social networks:
				</h3>
				<ul class="social-list">
					<li class="social-icon">
						<a href="#"><img alt="facebook" src="imgs/fb.png" class="social-img" /></a>
					</li>
					<li class="social-icon">
						<a href="#"><img class="social-img" alt="instagram" src="imgs/instagram.png"></a>
					</li>
					<li class="social-icon">
						<a href="#"><img class="social-img" alt="twitter" src="imgs/twitter.png"></a>
					</li>
					<li class="social-icon">
						<a href="#"><img class="social-img" alt="google plus" src="imgs/google-plus.png"></a>
					</li>
					<li class="social-icon">
						<a href="#"><img class="social-img" alt="linkedin" src="imgs/linkedin.png"></a>
					</li>
				</ul>
			</section>
			<article class="info">
				<h3 class="author-title">
					Information about the author
				</h3>
				<img src="imgs/dev.jpg" alt="author image" class="author-img">
				<p class="author-text">
					Mr. Farhan Kiyani is a young and passionate enthusiast of horror, supernatural, myths, legends and web development. He currently studies at the Virtual University of Pakistan and is also works in his freelance web development bussiness called k-labs web development which is responsible for the development of this blog.
				</p>
			</article>
		</main>
		<section class="sidebar">
			<h2 class="sidebar-title">
				Blog posts
			</h2>
			<ul class="blog-list">
				<li class="blog-item">
					<a href="post1.html">Horror Story 1</a>
				</li>
				<li class="blog-item">
					<a href="post2.html">Horror Story 2</a>
				</li>
				<li class="blog-item">
					<a href="post3.html">Horror Story 3</a>
				</li>
				<li class="blog-item">
					<a href="post4.html">Horror Story 4</a>
				</li>
				<li class="blog-item">
					<a href="post5.html">Horror Story 5</a>
				</li>
			</ul>
			<section class="side-social-buttons">
				<h3 class="side-share-title">
					Share our blog:
				</h3>
				<ul class="side-social-list">
					<li class="side-social-icon">
						<a href="#"><img alt="facebook" src="imgs/fb.png" class="side-social-img" /></a>
					</li>
					<li class="side-social-icon">
						<a href="#"><img class="side-social-img" alt="instagram" src="imgs/instagram.png"></a>
					</li>
					<li class="side-social-icon">
						<a href="#"><img class="side-social-img" alt="twitter" src="imgs/twitter.png"></a>
					</li>
					<li class="side-social-icon">
						<a href="#"><img class="side-social-img" alt="google plus" src="imgs/google-plus.png"></a>
					</li>
					<li class="side-social-icon">
						<a href="#"><img class="side-social-img" alt="linkedin" src="imgs/linkedin.png"></a>
					</li>
				</ul>
			</section>
		</section>
		<footer class="footer">
			<img src="imgs/logo.png" class="footer-logo" alt="logo">
			<p class="footer-text">
				<em>Developed</em> by <strong>Farhan Kiyani</strong>
			</p>
		</footer>
	</body>
</html>