-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtypography.html
More file actions
359 lines (236 loc) · 23.5 KB
/
Copy pathtypography.html
File metadata and controls
359 lines (236 loc) · 23.5 KB
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
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
<!DOCTYPE html>
<html lang="en" class="no-js single-page-layout" data-mobile-classic-layout="true" data-classic-layout="false" data-prev-animation="16" data-next-animation="15" data-random-animation="false"><!-- InstanceBegin template="/Templates/layout.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="Empathy - Responsive HTML5 vCard Template">
<meta name="keywords" content="vcard, html5, portfolio">
<meta name="author" content="Pixelwars">
<title>Jhotay</title>
<!-- FAV and TOUCH ICONS -->
<link rel="shortcut icon" href="images\ico\favicon.ico">
<link rel="apple-touch-icon" href="images\ico\apple-touch-icon.png">
<!-- FONTS -->
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<!-- STYLES -->
<link rel="stylesheet" type="text/css" href="css\bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css\fonts\pe-icon-7-stroke\css\pe-icon-7-stroke.css">
<link rel="stylesheet" type="text/css" href="css\fonts\fontello\css\fontello.css">
<link rel="stylesheet" type="text/css" href="js\nprogress\nprogress.css">
<link rel="stylesheet" type="text/css" href="js\jquery.magnific-popup\magnific-popup.css">
<link rel="stylesheet" type="text/css" href="js\jquery.uniform\uniform.default.css">
<link rel="stylesheet" type="text/css" href="css\animations.css">
<link rel="stylesheet" type="text/css" href="css\align.css">
<link rel="stylesheet" type="text/css" href="css\main.css">
<link rel="stylesheet" type="text/css" href="css\768.css">
<!-- INITIAL SCRIPTS -->
<script src="js\jquery-1.12.1.min.js"></script>
<script src="js\jquery-migrate-1.2.1.min.js"></script>
<script src="js\modernizr.min.js"></script>
<!--[if lt IE 9]>
<script src="js/ie.js"></script>
<![endif]-->
<!-- jhotay -->
<!-- jhotay -->
</head>
<body>
<!-- PAGE -->
<div id="page" class="hfeed site">
<!-- HEADER -->
<header id="masthead" class="header" role="banner">
<a class="menu-toggle toggle-link"></a>
<h1 class="site-title mobile-title">NASIRUZZAMAN JHOTAY</h1>
<!-- header-wrap -->
<div class="header-wrap">
<img src="images\site\avatar.jpg" alt="avatar">
<h1 class="site-title">NASIRUZZAMAN JHOTAY</h1>
<!-- NAV MENU -->
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<div class="nav-menu">
<ul>
<!-- InstanceBeginEditable name="Menu-Content" -->
<li><a href="index.html"><i class="pe-7s-home"></i>Home</a></li>
<li><a class="search-toggle"><i class="pe-7s-search"></i>Search</a></li>
<!-- jhotay -->
</ul>
</div>
</nav>
<!-- NAV MENU -->
<!-- SEARCH -->
<div class="header-search">
<form role="search" method="get" id="search-form" action="#">
<input type="text" value="" name="s" id="search" placeholder="enter word">
<input type="submit" id="search-submit" title="Search" value="→">
</form>
</div>
<!-- SEARCH -->
<!-- header-bottom -->
<div class="header-bottom">
<!-- SOCIAL -->
<ul class="social">
<li>
<a class="facebook" href="#"></a>
</li>
<li>
<a class="twitter" href="#"></a>
</li>
<li>
<a class="linkedin" href="#"></a>
</li>
<li>
<a class="instagram" href="#"></a>
</li>
</ul>
<!-- SOCIAL -->
<!-- copy-text -->
<div class="copy-text">
<p>© 2016 Jhotay </p>
</div>
<!-- copy-text -->
</div>
<!-- header-bottom -->
</div>
<!-- header-wrap -->
</header>
<!-- HEADER -->
<!-- .site-main -->
<div id="main" class="site-main">
<!-- InstanceBeginEditable name="Page-Content" -->
<!-- .page-single -->
<div class="page-single page-layout">
<!-- .layout-fixed -->
<div class="layout-fixed">
<!-- .hentry -->
<article class="page hentry">
<!-- .entry-header -->
<header class="entry-header">
<h1 class="entry-title">i love typography</h1>
</header>
<!-- .entry-header -->
<!-- .entry-content -->
<div class="entry-content">
<p>Good news, everyone! There's a report on TV with some very bad news! Then we'll go with that data file! Daylight and everything. If rubbin' frozen dirt in your crotch is wrong, hey I don't wanna be right.</p>
<p>Just once I'd like to eat dinner with a <a href="#" title="test link">celebrity</a> who isn't bound and gagged. I am Singing Wind, Chief of the Martians. No, she'll probably make me do it.</p>
<p>Say what? Who are you, my warranty?! Yes, except the Dave Matthews Band doesn't rock. Or a guy who burns down a bar for the insurance money! Leela's gonna kill me. Son, as your lawyer, I declare y'all are in a 12-piece bucket o' trouble. But I done struck you a deal: Five hours of community service cleanin' up that ol' mess you caused.</p>
<h2>Introduction</h2>
<p class="drop-cap">But, like most politicians, he promised more than he could deliver. Why not indeed! Daylight and everything. And then the battle's not so bad? Hello, little man. I will destroy you! No, I'm Santa Claus! Kif might! Man, I'm sore all over. I feel like I just went ten rounds with mighty Thor. I found what I need. And it's not friends, it's things. Then we'll go with that data file!</p>
<p>Calculon is gonna <em>kill</em> us and it's all everybody else's fault! We'll need to have a look inside you with this camera. I'm just glad my fat, ugly mama isn't alive to see this day. Now, now. Perfectly symmetrical violence never solved anything. Morbo can't understand his teleprompter because he forgot how you say that letter that's shaped like a man wearing a hat. You've killed me! Oh, you've killed me!</p>
<!-- blockquote -->
<blockquote>Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things.”
<cite>Ethan Marcotte</cite>
</blockquote>
<!-- blockquote -->
<h3>Small Stuff</h3>
<p>So I really am important? How I feel when I'm drunk is correct? Then we'll go with that data file! Good news, everyone! There's a report on TV with some very bad news! And yet you haven't said what I told you to say! How can any of us trust you?</p>
<p>I had more, but you go ahead. But I know you in the future. I cleaned your poop. There's one way and only one way to determine if an animal is intelligent. Dissect its brain! Kif might! Hey, whatcha watching? Five hours? Aw, man! Couldn't you just get me the death penalty?</p>
<h4>UI DESIGN</h4>
<p>Lorem ipsum dolor sit amet, <a href="#" title="test link">test link</a> adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>
<p>Lorem ipsum dolor sit amet, <em>emphasis</em> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>
<h6>MUCH SMALLER STUFF</h6>
<p>Lorem ipsum dolor sit amet, <a href="#" title="test link">test link</a> adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>
<p><img src="images\site\icon-02.png" alt="Image" class="alignright">This is some text that will wrap around the image that sits on the right side of the text that you are writing about the leaf that is there. That is, if you are writing about leaves in the first place and you want to write about this specific leaf. Lorem ipsum dolor sit amet, <em>emphasis</em> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>
<!-- image alignleft -->
<div class="wp-caption alignleft">
<img src="images/site/icon-06.png" alt="Image">
<p class="wp-caption-text">Here is the envelope</p>
</div>
<!-- image alignleft -->
<p>This is some text that will wrap around the image that sits on the right side of the text that you are writing about the leaf that is there. That is, if you are writing about leaves in the first place and you want to write about this specific leaf. Lorem ipsum dolor sit amet, <em>emphasis</em> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>
<p><img src="images\site\icon-03.png" alt="Image" class="aligncenter">This is some text that will wrap around the image that sits on the right side of the text that you are writing about the leaf that is there. That is, if you are writing about leaves in the first place and you want to write about this specific leaf. Lorem ipsum dolor sit amet, <em>emphasis</em> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>
<h6>MUCH SMALLER STUFF</h6>
<p>Lorem ipsum dolor sit amet, <a href="#" title="test link">test link</a> adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>
<p>Lorem ipsum dolor sit amet, <em>emphasis</em> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>
<hr>
<h2>Misc Stuff – abbr, pre, code, sub, sup, etc.</h2>
<p>Lorem <sup>superscript</sup> dolor <sub>subscript</sub> amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. <cite>cite</cite>. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. <abbr title="National Basketball Association">NBA</abbr> Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>
<h2>Tables</h2>
<table>
<tbody>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
</tbody>
</table>
<h2>List Types</h2>
<h3>Definition List</h3>
<dl>
<dt>DEFINITON LIST TITLE</dt>
<dd>This is a definition list division.</dd>
<dt>DEFINITON LIST TITLE</dt>
<dd>This is a definition list division.</dd>
<dt>DEFINITON LIST TITLE</dt>
<dd>This is a definition list division.</dd>
</dl>
<h3>Lists</h3>
<!-- .row -->
<div class="row">
<!-- col 4/12 -->
<div class="col-sm-4">
<ol>
<li>Web Design</li>
<li>Javascript</li>
<li>Wordpress</li>
</ol>
</div>
<!-- col 4/12 -->
<!-- col 4/12 -->
<div class="col-sm-4">
<ul>
<li>Web Design</li>
<li>Javascript</li>
<li>Wordpress</li>
</ul>
</div>
<!-- col 4/12 -->
</div>
<!-- .row -->
</div>
<!-- .entry-content -->
</article>
<!-- .hentry -->
</div>
<!-- .layout-fixed -->
</div>
<!-- .page-single -->
<!-- jhotay -->
</div>
<!-- .site-main -->
</div>
<!-- PAGE -->
<!-- InstanceBeginEditable name="Body-End-Content" -->
<!-- jhotay -->
<!-- SCRIPTS -->
<script src="js\jquery.address-1.5.min.js"></script>
<script src="js\smoothscroll.js"></script>
<script src="js\nprogress\nprogress.js"></script>
<script src="js\fastclick.js"></script>
<script src="js\typist.js"></script>
<script src="js\imagesloaded.pkgd.min.js"></script>
<script src="js\jquery.isotope.min.js"></script>
<script src="js\jquery.fitvids.js"></script>
<script src="js\jquery.validate.min.js"></script>
<script src="js\jquery.uniform\jquery.uniform.min.js"></script>
<script src="js\jquery.magnific-popup\jquery.magnific-popup.min.js"></script>
<script src="js\socialstream.jquery.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="js\main.js"></script>
</body>
<!-- InstanceEnd --></html>