-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (116 loc) · 6.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!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">
<h2 class="page-title">
Featured Posts
</h2>
<article class="blog-post">
<h3 class="blog-post-title">
<a href="post1.html">Horror Story 1 Place-holder</a>
</h3>
<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.
<a href="post1.html">Read more....</a>
</p>
</article>
<article class="blog-pos">
<h3 class="blog-post-title">
<a href="post2.html">Horror Story 2 Place-holder</a>
</h3>
<img src="imgs/post2.png" 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.
<a href="post2.html">Read more....</a>
</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>