-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
99 lines (99 loc) · 11.1 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>teaser-row</title>
<link rel="stylesheet" type="text/css" href="./main.css"/>
</head>
<body>
<h1>Teaser Row - proof of concept</h1>
<section class="pusher"></section>
<section class="teaser-row">
<div id="teaser1" class="teaser">
<div class="background"></div>
<div class="teaser__content">
<span class="teaser__title">Teaser 1</span>
<span class="teaser__keywords">Teaser 1 Keywords - Fancybox like opening animation!</span>
<section class="teaser__description">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</section>
</div>
</div>
<div id="teaser2" class="teaser">
<div class="background"></div>
<div class="teaser__content">
<span class="teaser__title">Teaser 2</span>
<span class="teaser__keywords">Teaser 2 Keywords - With image content!</span>
<section class="teaser__description">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<figure>
<img src="http://lorempixel.com/1000/200/" width="100%"/>
<figcaption>Lorempixel Image</figcaption>
</figure>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</section>
</div>
</div>
<div id="teaser3" class="teaser">
<div class="background"></div>
<div class="teaser__content">
<span class="teaser__title">Teaser 3</span>
<span class="teaser__keywords">Teaser 3 Keywords - You can test scrolling here!</span>
<section class="teaser__description">
<h2>With enough content to scroll!</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<figure>
<img src="http://lorempixel.com/1000/200/" width="100%"/>
<figcaption>Lorempixel Image</figcaption>
</figure>
<p>
To make up the difference in supply, the government began to significantly increase its procurement of off-world water resources. However, as the private sector began to compete for those same shipments in the water markets, prices soon skyrocketed. With its budget already stretched, the government could not compete and soon the majority of the water making its way to the world was sold directly to wealthier individuals or corporations. A majority of the inhabitants found themselves unable to afford the high market prices and unable to depend on the government to provide for them. Though there were rules which limited how much water people could consume, the booming private market made exact usage statistics extremely difficult to track. As the drought continued and conditions worsened, prices and demand only increased. Even though the number of water haulers making deliveries to the planet quadrupled by 2944, it was not enough to tame the runaway market.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
To make up the difference in supply, the government began to significantly increase its procurement of off-world water resources. However, as the private sector began to compete for those same shipments in the water markets, prices soon skyrocketed. With its budget already stretched, the government could not compete and soon the majority of the water making its way to the world was sold directly to wealthier individuals or corporations. A majority of the inhabitants found themselves unable to afford the high market prices and unable to depend on the government to provide for them. Though there were rules which limited how much water people could consume, the booming private market made exact usage statistics extremely difficult to track. As the drought continued and conditions worsened, prices and demand only increased. Even though the number of water haulers making deliveries to the planet quadrupled by 2944, it was not enough to tame the runaway market.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
To make up the difference in supply, the government began to significantly increase its procurement of off-world water resources. However, as the private sector began to compete for those same shipments in the water markets, prices soon skyrocketed. With its budget already stretched, the government could not compete and soon the majority of the water making its way to the world was sold directly to wealthier individuals or corporations. A majority of the inhabitants found themselves unable to afford the high market prices and unable to depend on the government to provide for them. Though there were rules which limited how much water people could consume, the booming private market made exact usage statistics extremely difficult to track. As the drought continued and conditions worsened, prices and demand only increased. Even though the number of water haulers making deliveries to the planet quadrupled by 2944, it was not enough to tame the runaway market.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</section>
</div>
</div>
</section>
<section class="page-section">
<section class="box">
<h3>Here are some Features:</h3>
<ul>
<li>Blocks scrolling of page while you are inside an opened teaser</li>
<li>Close opened teaser via Esc key or close button</li>
</ul>
</section>
</section>
<section class="pusher"></section>
<script src="teaser.js" type="text/javascript" rel="script"></script>
</body>
</html>