-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
243 lines (225 loc) · 8.95 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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<!DOCTYPE HTML>
<!--
Striped by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Striped by HTML5 UP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
</head>
<body>
<!-- Content -->
<div id="content">
<div class="inner">
<!-- Post -->
<article class="box post post-excerpt">
<header>
<!--
Note: Titles and subtitles will wrap automatically when necessary, so don't worry
if they get too long. You can also remove the <p> entirely if you don't
need a subtitle.
-->
<h2><a href="#">Welcome to Striped</a></h2>
<p>A free, fully responsive HTML5 site template by HTML5 UP</p>
</header>
<div class="info">
<!--
Note: The date should be formatted exactly as it's shown below. In particular, the
"least significant" characters of the month should be encapsulated in a <span>
element to denote what gets dropped in 1200px mode (eg. the "uary" in "January").
Oh, and if you don't need a date for a particular page or post you can simply delete
the entire "date" element.
-->
<span class="date"><span class="month">Jul<span>y</span></span> <span class="day">14</span><span class="year">, 2014</span></span>
<!--
Note: You can change the number of list items in "stats" to whatever you want.
-->
<ul class="stats">
<li><a href="#" class="icon fa-comment">16</a></li>
<li><a href="#" class="icon fa-heart">32</a></li>
<li><a href="#" class="icon fa-twitter">64</a></li>
<li><a href="#" class="icon fa-facebook">128</a></li>
</ul>
</div>
<a href="#" class="image featured"><img src="images/pic01.jpg" alt="" /></a>
<p>
<strong>Hello!</strong> You're looking at <strong>Striped</strong>, a fully responsive HTML5 site template designed by <a href="http://twitter.com/ajlkn">AJ</a>
for <a href="http://html5up.net">HTML5 UP</a> It features a clean, minimalistic design, styling for all basic page elements (including blockquotes, tables and lists), a
repositionable sidebar (left or right), and HTML5/CSS3 code designed for quick and easy customization (see code comments for details).
</p>
<p>
Striped is released for free under the <a href="http://html5up.net/license">Creative Commons Attribution license</a> so feel free to use it for personal projects
or even commercial ones – just be sure to credit <a href="http://html5up.net">HTML5 UP</a> for the design. If you like what you see here, be sure to check out
<a href="http://html5up.net">HTML5 UP</a> for more cool designs or follow me on <a href="http://twitter.com/ajlkn">Twitter</a> for new releases and updates.
</p>
</article>
<!-- Post -->
<article class="box post post-excerpt">
<header>
<h2><a href="#">Lorem ipsum dolor sit amet</a></h2>
<p>Feugiat interdum sed commodo ipsum consequat dolor nullam metus</p>
</header>
<div class="info">
<span class="date"><span class="month">Jul<span>y</span></span> <span class="day">8</span><span class="year">, 2014</span></span>
<ul class="stats">
<li><a href="#" class="icon fa-comment">16</a></li>
<li><a href="#" class="icon fa-heart">32</a></li>
<li><a href="#" class="icon fa-twitter">64</a></li>
<li><a href="#" class="icon fa-facebook">128</a></li>
</ul>
</div>
<a href="#" class="image featured"><img src="images/pic02.jpg" alt="" /></a>
<p>
Quisque vel sapien sit amet tellus elementum ultricies. Nunc vel orci turpis. Donec id malesuada metus.
Nunc nulla velit, fermentum quis interdum quis, tate etiam commodo lorem ipsum dolor sit amet dolore.
Quisque vel sapien sit amet tellus elementum ultricies. Nunc vel orci turpis. Donec id malesuada metus.
Nunc nulla velit, fermentum quis interdum quis, convallis eu sapien. Integer sed ipsum ante.
</p>
</article>
<!-- Pagination -->
<div class="pagination">
<!--<a href="#" class="button previous">Previous Page</a>-->
<div class="pages">
<a href="#" class="active">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<span>…</span>
<a href="#">20</a>
</div>
<a href="#" class="button next">Next Page</a>
</div>
</div>
</div>
<!-- Sidebar -->
<div id="sidebar">
<!-- Logo -->
<h1 id="logo"><a href="#">STRIPED</a></h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li class="current"><a href="#">Latest Post</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
<!-- Search -->
<section class="box search">
<form method="post" action="#">
<input type="text" class="text" name="search" placeholder="Search" />
</form>
</section>
<!-- Text -->
<section class="box text-style1">
<div class="inner">
<p>
<strong>Striped:</strong> A free and fully responsive HTML5 site
template designed by <a href="http://twitter.com/ajlkn">AJ</a> for <a href="http://html5up.net/">HTML5 UP</a>
</p>
</div>
</section>
<!-- Recent Posts -->
<section class="box recent-posts">
<header>
<h2>Recent Posts</h2>
</header>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Feugiat nisl aliquam</a></li>
<li><a href="#">Sed dolore magna</a></li>
<li><a href="#">Malesuada commodo</a></li>
<li><a href="#">Ipsum metus nullam</a></li>
</ul>
</section>
<!-- Recent Comments -->
<section class="box recent-comments">
<header>
<h2>Recent Comments</h2>
</header>
<ul>
<li>case on <a href="#">Lorem ipsum dolor</a></li>
<li>molly on <a href="#">Sed dolore magna</a></li>
<li>case on <a href="#">Sed dolore magna</a></li>
</ul>
</section>
<!-- Calendar -->
<section class="box calendar">
<div class="inner">
<table>
<caption>July 2014</caption>
<thead>
<tr>
<th scope="col" title="Monday">M</th>
<th scope="col" title="Tuesday">T</th>
<th scope="col" title="Wednesday">W</th>
<th scope="col" title="Thursday">T</th>
<th scope="col" title="Friday">F</th>
<th scope="col" title="Saturday">S</th>
<th scope="col" title="Sunday">S</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4" class="pad"><span> </span></td>
<td><span>1</span></td>
<td><span>2</span></td>
<td><span>3</span></td>
</tr>
<tr>
<td><span>4</span></td>
<td><span>5</span></td>
<td><a href="#">6</a></td>
<td><span>7</span></td>
<td><span>8</span></td>
<td><span>9</span></td>
<td><a href="#">10</a></td>
</tr>
<tr>
<td><span>11</span></td>
<td><span>12</span></td>
<td><span>13</span></td>
<td class="today"><a href="#">14</a></td>
<td><span>15</span></td>
<td><span>16</span></td>
<td><span>17</span></td>
</tr>
<tr>
<td><span>18</span></td>
<td><span>19</span></td>
<td><span>20</span></td>
<td><span>21</span></td>
<td><span>22</span></td>
<td><a href="#">23</a></td>
<td><span>24</span></td>
</tr>
<tr>
<td><a href="#">25</a></td>
<td><span>26</span></td>
<td><span>27</span></td>
<td><span>28</span></td>
<td class="pad" colspan="3"><span> </span></td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- Copyright -->
<ul id="copyright">
<li>© Untitled.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
</body>
</html>