-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
310 lines (302 loc) · 15.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
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
<html>
<head>
<title>ReadOutLoud</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
</head>
<body id="top">
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- Top Background Image Wrapper -->
<div class="bgded" style="background-image:url('images/demo/backgrounds/1.jpg');">
<!-- ################################################################################################ -->
<div class="wrapper overlay">
<header id="header" class="hoc clear">
<nav id="mainav" class="clear">
<!-- ################################################################################################ -->
<ul class="clear">
<li class="active"><a href="index.html">Home</a></li>
<li><a class="drop" href="#">Poems</a>
<ul>
<li><a href="#">Gallery</a></li>
<li><a href="pages/full-width.html">A Dream within a Dream</a></li>
<li><a href="pages/ablankletter.html">A Blank letter</a></li>
<li><a href="pages/iamnotyours.html">I am not Yours</a></li>
<li><a href="pages/songoflife.html">Song of life</a></li>
</ul>
</li>
<li><a class="drop" href="#">Mood</a>
<ul>
<li><a href="#">Loving</a></li>
<li><a class="drop" href="#">Confused</a>
<ul>
<li><a href="#">Angry</a></li>
<li><a href="#">Sad</a></li>
<li><a href="#">Happy</a></li>
</ul>
</li>
<li><a href="#">Funny</a></li>
</ul>
</li>
<li><a href="#">Novels</a></li>
<li><a href="#">Stories</a></li>
<li><a href="#">Quotes</a></li>
<li><a href="pages/contact.html">Contact</a></li>
</ul>
<!-- ################################################################################################ -->
</nav>
<div id="logo">
<!-- ################################################################################################ -->
<h1><a href="index.html">Read Out Loud</a></h1>
<p>When Actions are not enough</p>
<!-- ################################################################################################ -->
</div>
</header>
</div>
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<div id="pageintro" class="hoc clear">
<!-- ################################################################################################ -->
<article>
<div class="introtxt">
<p class="font-xs nospace">Welcome to WOW</p>
<h2 class="heading">World of Words</h2>
<p>Words are the strongest weapons. When you loose with knife, use words as Sword. Words unites to make a Sentence and works as an Army</p>
</div>
<footer>
<h2 class="heading">Feeling?</h2>
<ul class="nospace inline pushright">
<li><a class="btn inverse" href="#">STRONG?</a></li>
<li><a class="btn inverse" href="#">WEAK?</a></li>
</ul>
</footer>
</article>
<!-- ################################################################################################ -->
</div>
<!-- ################################################################################################ -->
</div>
<!-- End Top Background Image Wrapper -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<div class="wrapper row3">
<main class="hoc container clear">
<!-- main body -->
<!-- ################################################################################################ -->
<div class="center btmspace-50">
<font size="30" face="Courier" color="black">Conquer everyone with Words</font>
<p>Poetry is just like a song, in which words are dancers and writer is a DJ</p>
</div>
<ul class="nospace group blocks">
<li class="one_quarter first bgded overlay" style="background-image:url('images/demo/download.jpg');"><a class="btn medium" href="#">Man i love</a><br>
Love</li>
<li class="one_quarter bgded overlay" style="background-image:url('images/demo/12.jpg');"><a class="btn medium" href="#">I wanna Cry</a><br>
Emotional</li>
<li class="one_quarter bgded overlay" style="background-image:url('images/demo/123.jpg');"><a class="btn medium" href="#">Forgot to smile</a><br>
Happiness</li>
<li class="one_quarter bgded overlay" style="background-image:url('images/demo/1234.jpg');"><a class="btn medium" href="#">Ever-Lasting bond</a><br>
Friendship</li>
</ul>
<!-- ################################################################################################ -->
<!-- / main body -->
<div class="clear"></div>
</main>
</div>
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<div class="bgded overlay" style="background-image:url('images/demo/backgrounds/background.jpg');">
<section id="testimonials" class="hoc container clear">
<!-- ################################################################################################ -->
<div class="center btmspace-50">
<h2 class="heading">Writer is always Good, it's the reader who makes him Bad! </h2>
<p>A word is dead
When it is said,
Some say.
I say it just begins
to live that day.</p>
</div>
<ul class="nospace group">
<li class="one_half first">
<div class="clear"><img src="images/demo/tagore.jpg" alt=""> <span class="block"><strong>Rabindranath Tagore</strong> / <em>Indian legendary writer!</em></span>
<blockquote>I slept and dreamt that life was joy. I awoke and saw that life was service. I acted and behold, service was joy.</blockquote>
</div>
</li>
<li class="one_half">
<div class="clear"><img src="images/demo/shakespeare.jpg" alt=""> <span class="block"><strong>William Shakespeare</strong> / <em>English Writer</em></span>
<blockquote>Love looks not with the eyes, but with the mind, And therefore is winged Cupid painted blind.</blockquote>
</div>
</li>
</ul>
<!-- ################################################################################################ -->
</section>
</div>
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<div class="wrapper row3">
<section class="hoc container clear">
<!-- ################################################################################################ -->
<div class="center btmspace-50">
<h2 class="heading">BEST WORK BY LEGENDS</h2>
<p>Legends are not best, they are great. If you can't dream to be great ,you can never be one. That's why Workers with Dreams are Legends.</p>
</div>
<ul class="nospace elements">
<li class="one_third first">
<article><a href="#"><img src="images/demo/12345.jpg." alt=""></a>
<div class="txtwrap">
<h6 class="heading">A Dream within a Dream</h6>
<p><i>by Edgar Allan Poe</i> </p>
<time datetime="2012-02-06">6<sup>th</sup> February 2012</time>
<p><i>Take this kiss upon the brow!
And, in parting from you now,
Thus much let me avow--</i></p>
<footer><a href="#">Read More »</a></footer>
</div>
</article>
</li>
<li class="one_third">
<article><a href="#"><img src="images/demo/123456.jpg" alt=""></a>
<div class="txtwrap">
<h6 class="heading">I am not yours</h6>
<p><i>by Sara Teasdale</i> </p>
<time datetime="2014-04-05">5<sup>th</sup> April 2014</time>
<p>I am not yours, not lost in you,
Not lost, although I long to be.......
</p>
<footer><a href="#">Read More »</a></footer>
</div>
</article>
</li>
<li class="one_third">
<article><a href="#"><img src="images/demo/1234567.jpg" alt=""></a>
<div class="txtwrap">
<h6 class="heading">I am shut out of mine own heart</h6>
<p><i>by Christopher Brennan
</i> </p>
<time datetime="2009-07-015">7<sup>th</sup> July 2009</time>
<p>I am shut out of mine own heart
because my love is far from me,
nor in the wonders have I part...
</p>
<footer><a href="#">Read More »</a></footer>
</div>
</article>
</li>
</ul>
<!-- ################################################################################################ -->
</section>
</div>
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<div class="wrapper coloured">
<div class="hoc clear">
<!-- ################################################################################################ -->
<figure id="logos">
<ul class="nospace group">
<li><a href="#"><img src="images/demo/a.jpg" alt=""></a></li>
<li><a href="#"><img src="images/demo/aa.jpg" alt=""></a></li>
<li><a href="#"><img src="images/demo/aaa.jpg" alt=""></a></li>
<li><a href="#"><img src="images/demo/aaaa.jpg" alt=""></a></li>
<li><a href="#"><img src="images/demo/aaaaa.jpg" alt=""></a></li>
</ul>
<figcaption class="hidden"><a class="btn small" href="#">More »</a></figcaption>
</figure>
<!-- ################################################################################################ -->
</div>
</div>
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<div class="wrapper row4">
<footer id="footer" class="hoc clear">
<!-- ################################################################################################ -->
<div class="one_quarter first">
<h6 class="title">Contact Info of Site owner</h6>
<ul class="nospace linklist contact">
<h2><i> Shubham Goswami </h2></i>
<li><i class="fa fa-map-marker"></i>
<address>
Noida, INDIA.
</address>
</li>
<li><i class="fa fa-phone"></i> +91 8800458xxx<br>
+91 8588017xxx</li>
<li><i class="fa fa-fax"></i> .</li>
<li><i class="fa fa-envelope-o"></i> shubhgo93@gmail.com</li>
</ul>
</div>
<div class="one_quarter">
<h6 class="title">Works</h6>
<ul class="nospace linklist">
<li><a href="pages/adreamwithinadream.html">A Dream within a Dream</a></li>
<li><a href="pages/iamnotyours.html">I am not yours</a></li>
<li><a href="pages/ablankletter.html">A Blank letter</a></li>
<li><a href="pages/songoflife.html">Song of life</a></li>
</ul>
</div>
<div class="one_quarter">
<h6 class="title">Subscription</h6>
<p class="btmspace-30">Please Subscribe for regular updates.</p>
<form method="post" action="#">
<fieldset>
<legend>Newsletter:</legend>
<input class="btmspace-15" type="text" value="" placeholder="Name">
<input class="btmspace-15" type="text" value="" placeholder="Email">
<button type="submit" value="submit">Submit</button>
</fieldset>
</form>
</div>
<div class="one_quarter">
<h6 class="title">Latest</h6>
<ul class="nospace linklist">
<li>
<article>
<h2 class="nospace font-x1"><a href="#">A Song of life </a></h2>
<time class="font-xs block btmspace-10" datetime="2016-04-06">Friday, 6<sup>th</sup> April 2016</time>
<p class="nospace">In the rapture of life and of living,
I lift up my head and rejoice,
And I thank the great Giver for giving
The soul of my gladness a voice........</p>
</article>
</li>
<li>
<article>
<h2 class="nospace font-x1"><a href="#">A blank letter</a></h2>
<time class="font-xs block btmspace-10" datetime="2045-04-05">Thirsday, 5<sup>th</sup> May 2016</time>
<p class="nospace">An envelope arrives unannounced from overseas
containing stark white sheets,...</p>
</article>
</li>
</ul>
</div>
<!-- ################################################################################################ -->
</footer>
</div>
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<div class="wrapper row5">
<div id="copyright" class="hoc clear">
<!-- ################################################################################################ -->
<p class="fl_left">Copyright © 2017 - All Rights Reserved - <a href="#">Terms and conditions</a></p>
<!-- ################################################################################################ -->
</div>
</div>
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a>
<!-- JAVASCRIPTS -->
<script src="layout/scripts/jquery.min.js"></script>
<script src="layout/scripts/jquery.backtotop.js"></script>
<script src="layout/scripts/jquery.mobilemenu.js"></script>
<!-- IE9 Placeholder Support -->
<script src="layout/scripts/jquery.placeholder.min.js"></script>
<!-- / IE9 Placeholder Support -->
</body>
</html>