-
Notifications
You must be signed in to change notification settings - Fork 0
/
blog.html
138 lines (133 loc) · 6.39 KB
/
blog.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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Artylope</title>
<meta name="description" content="Artylope">
<meta name="author" content="Artylope">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.css"> -->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<section id="nav">
<div id="main-nav">
<div class="wrapper">
<a href="index.html"><img src="img/artylope_logo.svg" alt="Artylope" id="logo"></a>
<nav id="main-menu">
<ul>
<li><a href="index.html">Works</a></li>
<li><a href="play.html">Playground</a></li>
<!-- <li class="active"><a href="blog.html">Blog</a></li> -->
<li><a href="about.html">About</a></li>
</ul>
</nav>
<div id="menu-icon" class="">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</section>
</section>
<section id="blog">
<div id="sidebar">
<div id="search">
<form>
<label>Search</label>
<input type="text" value="" placeholder="Search …">
<input type="submit" class="submit" value="Search">
</form>
</div>
<div id="recent-posts">
<h2>Recent Posts</h2>
<div class="sidebar-links">
<ul>
<li><a href="#">This could be a long blog post title</a></li>
<li><a href="#">How can I make full use of this width and fill it with lorem ipsum</a></li>
<li><a href="#">Recent Post Title</a></li>
<li><a href="#">Recent Post Title</a></li>
<li><a href="#">Recent Post Title</a></li>
</ul>
</div>
</div>
<div id="tags">
<h2>Tags</h2>
<div class="sidebar-links">
<ul>
<li><a href="#">Tag Label</a></li>
<li><a href="#">Tag Label</a></li>
<li><a href="#">Tag Label</a></li>
<li><a href="#">Tag Label</a></li>
<li><a href="#">Tag Label</a></li>
</ul>
</div>
</div>
<div id="archives">
<h2>Archives</h2>
<div class="sidebar-links">
<ul>
<li><a href="#">August 2018</a></li>
<li><a href="#">July 2018</a></li>
<li><a href="#">June 2018</a></li>
<li><a href="#">May 2018</a></li>
<li><a href="#">April 2018</a></li>
</ul>
</div>
</div>
</div>
<div id="main-content">
<div id="search-results">
<div class="keywords">Displaying 2 Posts with the keyword "<strong>search</strong>"</div>
</div>
<div id="all-posts">
<div class="blog-post">
<h1>This is the Blog Title</h1>
<div class="post-date">12 Aug 2018 by Author Name</div>
<div class="blog-post-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fringilla sem enim, nec egestas nisl ultrices quis. Nullam quis egestas lorem, ac blandit ex. Duis varius sed massa at interdum. Donec sed nunc eget nulla euismod aliquam eu vel nibh.
</p>
<img src="http://via.placeholder.com/350x150">
<p>
Donec lobortis lorem ut metus scelerisque facilisis. Aliquam nisl neque, congue quis aliquam ac, facilisis vitae ante. In ut augue sapien. Praesent bibendum lacus non leo convallis, a maximus nibh faucibus. Donec quam sem, tempus non pulvinar nec, fringilla vel tortor. Nulla bibendum eros quis velit consequat, sit amet interdum sapien congue. Cras rhoncus tristique justo, et ultrices metus scelerisque id. Vivamus consectetur et sem id porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce a aliquam erat. Duis elementum leo at elit tempor, vel dignissim risus condimentum. Nulla vel ipsum ligula.
</p>
<div class="tags"> in Uncategorised</div>
</div>
</div>
<div class="blog-post">
<h1>This is the Blog Title</h1>
<div class="post-date">12 Aug 2018 by Author Name</div>
<div class="blog-post-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fringilla sem enim, nec egestas nisl ultrices quis. Nullam quis egestas lorem, ac blandit ex. Duis varius sed massa at interdum. Donec sed nunc eget nulla euismod aliquam eu vel nibh.
</p>
<div class="tags"> in Uncategorised</div>
</div>
</div>
<div class="blog-post">
<h1>This is the Blog Title</h1>
<div class="post-date">12 Aug 2018 by Author Name</div>
<div class="blog-post-content">
<p>
Integer eu dictum nisi. In hac habitasse platea dictumst. Praesent sed nisi sit amet turpis dictum tincidunt. Aliquam ut diam non ligula condimentum fringilla quis vitae erat. Morbi mattis nunc ante, ac rhoncus lacus vulputate at. Nullam pulvinar, turpis id fermentum consequat, augue nunc accumsan diam, vel dapibus massa purus non magna. Duis at risus orci. Aenean molestie sem eget justo maximus, at malesuada metus varius.
</p><p>
Donec lobortis lorem ut metus scelerisque facilisis. Aliquam nisl neque, congue quis aliquam ac, facilisis vitae ante. In ut augue sapien. Praesent bibendum lacus non leo convallis, a maximus nibh faucibus. Donec quam sem, tempus non pulvinar nec, fringilla vel tortor. Nulla bibendum eros quis velit consequat, sit amet interdum sapien congue. Cras rhoncus tristique justo, et ultrices metus scelerisque id. Vivamus consectetur et sem id porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce a aliquam erat. Duis elementum leo at elit tempor, vel dignissim risus condimentum. Nulla vel ipsum ligula.
</p>
<div class="tags"> in Uncategorised</div>
</div>
</div>
</div>
<div class="blog-bottom-nav">
<div class="nav-left"><a href="">← Older Posts</a></div>
<div class="nav-right"><a href="">Newer Posts →</a></div>
</div>
</div>
</section>
<footer>
<div class="container">© 2018 Artylope. Built by Yi Xin. </div>
</footer>
<script src="js/nav.js"></script>
</body>
</html>