-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
306 lines (288 loc) · 14.9 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
<!--
This HTML5 website is part of a HTML5 / CSS3 tutorial created by Christoph Anastasiades (http://www.lingulo.com)
Feel free to use it for your personal or commercial projects and/or change it in any way you like.
USE THIS TEMPLATE ON YOUR OWN RISK AND PLEASE BE AWARE THAT I DO NOT GUARANTEE THE CORRECTNESS OF THE FILES
DOWNLOADED ON http://www.lingulo.com AND WILL NOT BE RESPONSIBLE FOR ANY LOSS OR DAMAGE CAUSED THROUGH THE USE OF THESE FILES.
I would be happy if you put a link to http://www.lingulo.com somewhere on your website to support my work. However this is not obligatory.
Please note that you may not distribute the files downloaded from Lingulo.com or offer them for download.
What you need to do to make this page work:
- Find images for the jQuery Slider and for all the icons (the icons used in the tutorial are from http://www.iconarchive.com/show/icons8-metro-style-icons-by-visualpharm.1.html)
To minimize the amount of HTTP requests combine all CSS files into one single file.
!-->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Some Page Title</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link href="lightbox/css/lightbox.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Baumans' rel='stylesheet' type='text/css'>
<script src="js/vendor/modernizr.min.js"></script>
<script src="js/vendor/respond.min.js"></script>
<!-- include extern jQuery file but fall back to local file if extern one fails to load !-->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script type="text/javascript" src="js\/vendor\/1.7.2.jquery.min.js"><\/script>')</script>
<script src="lightbox/js/lightbox.js"></script>
<script src="js/vendor/prefixfree.min.js"></script>
<script src="js/vendor/jquery.slides.min.js"></script>
<script src="js/script.js"></script>
<!--[if lt IE 9]>
<style>
header
{
margin: 0 auto 20px auto;
}
#four_columns .img-item figure span.thumb-screen
{
display:none;
}
</style>
<![endif]-->
<script>
$(function() {
$('#slides').slidesjs({
height: 235,
navigation: false,
pagination: false,
effect: {
fade: {
speed: 400
}
},
callback: {
start: function(number)
{
$("#slider_content1,#slider_content2,#slider_content3").fadeOut(500);
},
complete: function(number)
{
$("#slider_content" + number).delay(500).fadeIn(1000);
}
},
play: {
active: false,
auto: true,
interval: 6000,
pauseOnHover: false,
effect: "fade"
}
});
});
</script>
</head>
<body>
<header>
<div class="toggleMobile">
<span class="menu1"></span>
<span class="menu2"></span>
<span class="menu3"></span>
</div>
<div id="mobileMenu">
<ul>
<li><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">Porfolio</a></li>
<li><a href="javascript:void(0)">About</a></li>
</ul>
</div>
<h1>Lingulo HTML5</h1>
<p>A responsive website tutorial</p>
<nav>
<h2 class="hidden">Our navigation</h2>
<ul>
<li><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">Porfolio</a></li>
<li><a href="javascript:void(0)">About</a></li>
<li><a href="javascript:void(0)">Contact</a></li>
</ul>
</nav>
</header>
<section class="container">
<h2 class="hidden">Lorem Ipsum</h2>
<article id="slider_content1">
<h3>Lorem ipsum dolor?</h3>
<p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik. <a href="javascript:void(0)" class="responsive_button">Mehr lesen...</a></p>
<a class="button" href="javascript:void(0)">Mehr lesen</a>
</article>
<article id="slider_content2">
<h3>Nulla consequat</h3>
<p>Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. <a href="javascript:void(0)" class="responsive_button">Mehr lesen...</a></p>
<a class="button" href="javascript:void(0)">Mehr lesen</a>
</article>
<article id="slider_content3">
<h3>Lorem ipsum</h3>
<p>Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. <a href="javascript:void(0)" class="responsive_button">Mehr lesen...</a></p>
<a class="button" href="javascript:void(0)">Mehr lesen</a>
</article>
<div id="slides">
<img src="img/slide3.jpg" alt="Some alt text">
<img src="img/slide2.jpg" alt="Some alt text">
<img src="img/slide1.jpg" alt="Some alt text">
</div>
</section>
<section id="spacer">
<h2 class="hidden">Dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit?</p>
<div class="search">
<form action="#">
<input type="text" name="sitesearch" value="Enter a word..."/>
<input type="submit" name="start_search" class="button" value="Search"/>
</form>
</div>
</section>
<section id="boxcontent">
<h2 class="hidden">Adipiscing</h2>
<article>
<img src="img/icon1.png" alt="Some alt text"/>
<h3>Lorem ipsum</h3>
<p>
Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen.
</p>
</article>
<article>
<img src="img/icon2.png" alt="Some alt text"/>
<h3>Consectetuer</h3>
<p>
Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen...
</p>
</article>
<article>
<img src="img/icon3.png" alt="Some alt text"/>
<h3>Dolor sit amet</h3>
<p>
Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg.
</p>
</article>
<br class="clear"/>
</section>
<section id="four_columns">
<h2>
Lorem ipsum
</h2>
<article class="img-item">
<h3 class="hidden">Dolor sit amet</h3>
<figure>
<a href="img/example-slide-1.jpg" rel="lightbox" title="Some title">
<span class="thumb-screen"></span>
<img src="img/example-slide-1sml.jpg" alt="Some alt text"/>
</a>
<figcaption>
<strong>
Photo by: Some name
</strong>
Als es die ersten Hügel des Kursivgebirges erklommen hatte
</figcaption>
</figure>
</article>
<article class="img-item">
<h3 class="hidden">Sit Amet</h3>
<figure>
<a href="img/example-slide-2.jpg" rel="lightbox" title="Some title">
<span class="thumb-screen"></span>
<img src="img/example-slide-2sml.jpg" alt="Some alt text"/>
</a>
<figcaption>
<strong>
Photo by: Some name
</strong>
warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen
</figcaption>
</figure>
</article>
<article class="img-item">
<h3 class="hidden">Dolor Sit</h3>
<figure>
<a href="img/example-slide-3.jpg" rel="lightbox" title="Some title">
<span class="thumb-screen"></span>
<img src="img/example-slide-3sml.jpg" alt="Some alt text"/>
</a>
<figcaption>
<strong>
Photo by: Some name
</strong>
die Headline von Alphabetdorf und die Subline seiner eigenen Straße.
</figcaption>
</figure>
</article>
<article class="img-item">
<h3 class="hidden">Lorem Ipsum</h3>
<figure>
<a href="img/example-slide-4.jpg" rel="lightbox" title="Some title">
<span class="thumb-screen"></span>
<img src="img/example-slide-4sml.jpg" alt="Some alt text"/>
</a>
<figcaption>
<strong>
Photo by: Some name
</strong>
Wehmütig lief ihm eine rhetorische Frage über die Wange.
</figcaption>
</figure>
</article>
<br class="clear"/>
</section>
<section id="text_columns">
<h2 class="hidden">Blindtext</h2>
<article class="column1">
<h3>Dolor sit amet</h3>
<p>Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.</p>
<p>Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten.</p>
</article>
<section class="column2">
<h3 class="hidden">Lorem Impsum</h3>
<article class="row">
<h4 class="hidden">Dolor sit</h4>
<img src="img/icon4.png" width="80" class="rocket" alt="Some alt text"/>
<p>Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch.</p>
</article>
<article class="row">
<h4 class="hidden">Ipsum</h4>
<img src="img/icon5.png" width="80" class="clock" alt="Some alt text"/>
<p>Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange.</p>
</article>
</section>
</section>
<footer>
<h2 class="hidden">Our footer</h2>
<section id="copyright">
<h3 class="hidden">Copyright notice</h3>
<div class="wrapper">
<div class="social">
<a href="javascript:void(0)"><img src="img/icon6.png" alt="Some alt text" width="25"/></a>
<a href="javascript:void(0)"><img src="img/icon7.png" alt="Some alt text" width="25"/></a>
<a href="javascript:void(0)"><img src="img/icon8.png" alt="Some alt text" width="25"/></a>
<a href="javascript:void(0)"><img src="img/icon9.png" alt="Some alt text" width="25"/></a>
<a href="javascript:void(0)"><img src="img/icon10.png" alt="Some alt text" width="25"/></a>
</div>
© Copyright 2014 by <a href="http://www.example.com">Example</a>. All Rights Reserved.
</div>
</section>
<section class="wrapper">
<h3 class="hidden">Footer content</h3>
<article class="column">
<h4>Lorem ipsum</h4>
Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein.
</article>
<article class="column midlist">
<h4>Consectetuer</h4>
<ul>
<li><a href="javascript:void(0)">Die Copy warnte das Blindtextchen</a></li>
<li><a href="javascript:void(0)">Unterwegs traf es eine Copy</a></li>
<li><a href="javascript:void(0)">Doch alles Gutzureden konnte</a></li>
<li><a href="javascript:void(0)">Als es die ersten Hügel</a></li>
</ul>
</article>
<article class="column rightlist">
<h4>Dolor sit amet</h4>
<ul>
<li><a href="javascript:void(0)"><img src="img/example-slide-1sml.jpg" width="80" alt="Some alt text"/><span>Unterwegs traf es eine Copy. Die Copy warnte.</span></a></li>
<li><a href="javascript:void(0)"><img src="img/example-slide-2sml.jpg" width="80" alt="Some alt text"/><span>Doch alles Gutzureden konnte es nicht.</span></a></li>
<li><a href="javascript:void(0)"><img src="img/example-slide-3sml.jpg" width="80" alt="Some alt text"/><span>Und es dann in ihre Agentur schleppten.</span></a></li>
</ul>
<br class="clear"/>
</article>
</section>
</footer>
</body>
</html>