forked from richardshepherd/Parallax-Scrolling
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
125 lines (101 loc) · 6.01 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
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta http-equiv="content-language" content="en" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Stories from Syria: Discover the human faces of a tragedy</title>
<meta name="description" content="Stories from Syria: Discover the human faces of a tragedy">
<meta name="author" content="UNHCR">
<!-- Google Web Fonts -->
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'>
<link href="http://www.unhcr.org/favicon.ico" rel="icon" type="image/x-icon">
<!-- Jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<!-- mediaelement -->
<script src="js/mediaelement/mediaelement-and-player.min.js"></script>
<link href="js/mediaelement/mediaelementplayer.css" rel="Stylesheet" />
<!--<link href="js/mediaelement/mejs-skins.css" rel="Stylesheet" />-->
<!-- styling -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="main" role="main">
<!-- Section #1 / Intro -->
<section id="first" class="story" data-speed="8" data-type="background">
<div class="smashinglogo" data-type="sprite" data-offsetY="100" data-Xposition="50%" data-speed="-2"></div>
<article>
<!-- <img src="images/tutorial-title.png" alt="tutorial-title" width="711" height="242" /> -->
<h2><p>Stories from Syria</p></h2>
<h2><p>Discover the human faces of a tragedy</p></h2>
</article>
</section>
<!-- Section #2 / Background Only -->
<section id="second" class="story" data-speed="4" data-type="background">
<article>
<h2>The biggest refugee crisis of the past ten years</h2>
<p>UNHCR is currently addressing the concerns of who are directly afected by the violence within Syria.</p>
<p>Unfortunately the projections in 2013 indicate a continued outpouring of refugees from Syria to neighboring countries.</p>
<p>With an uncertain time table for return</p>
</article>
</section>
<!-- Section #3 / Photos -->
<section id="third" class="story" data-speed="6" data-type="background" data-offsetY="250">
<div class="photograph" data-type="sprite" data-offsetY="1250" data-Xposition="25%" data-speed="2"></div>
<article>
<h2>Responders and partners</h2>
<div class="textbox">
<p>The ability of humanitarian agencies to respond effectively depend on their close coordination.</p>
<p>the current Plan brings together the coordinated efforts of over 60 international and national agencies with UNHCR continuing to lead the overall response.</p>
<p>While the Governments of Jordan, Lebanon, Iraq, Turkey and Egypt have continued to demonstrate their commitment to giving Syrian refugees access to their territory to assure their safety and provide assistance, this generosity has undeniably come at a heavy price for the many communities welcoming the refugees, as well as for the infrastructure and resources of the countries concerned.</p>
</div>
</article>
</section>
<!-- Section #4 / HTML5 Video -->
<section id="fourth" class="story" data-speed="8" data-type="background" data-offsetY="250">
<article>
<h2>Appeal from the field</h2>
<div class="textbox">
<p>Unrest in the Syrian Arab Republic has been mounting since March 2011, leading to the displacement of tens of thousands of civilians.</p>
<p>Now more than ONE million people have fled the terrible conflict in Syria.</p>
<p>That's more than the population of Otawa, the capital of Canada or then New Orleans in the US.</p>
</div>
</article>
<video id="player1" width="640" height="480" controls="control" preload="none" data-type="video" data-offsetY="2400">
<source src="http://www.youtube.com/watch?v=oBCcJBLv0bA" type="video/youtube" />
</video>
<script>
jQuery(document).ready(function($) {
// declare object for video
var player = new MediaElementPlayer('#player1');
});
</script>
</section>
<!-- Section #5 / The End-->
<section id="theend" class="story" data-speed="8" data-type="background" data-offsetY="250">
<div class="byebye" data-type="sprite" data-offsetY="-1600" data-Xposition="50%" data-speed="-2">
<article>
<h2>Survival, Restoring hope, Finding home!</h2>
<div class="textbox">
<p><a href='http://data.unhcr.org/syrianrefugees' target="_blank">Access the Information Sharing portal for the Interagency Response </a></p>
<p><a href='http://donate.unhcr.org/syria' target="_blank">Donate Now for the Syria Crisis</a></p>
</div>
</article>
</div>
<!--
<a href='http://www.aljazeera.com/indepth/inpictures/2013/03/201336144254405970.html' target="_blank">
<img src="http://www.aljazeera.com/mritems/images/2013/3/6/201336144451234712_8.jpg" alt="Abdul and his family fled from their apartment in Syria after his wife was shot in the street during cross-fire between armed groups. The most important thing he was able to bring from Syria are the keys to his home that he holds in this photograph. Though he doesn't know whether the family's apartment is still standing, he dreams every day of returning home." width="711" height="242" /></a>
-->
</section>
</div> <!-- // End of #main
<!-- Our Javascript, starting with jQuery
<script src='js/libs/jquery-1.6.1.min.js'></script>-->
<script src="js/script.js"></script>
<!--[if lt IE 7 ]>
<script src="js/libs/dd_belatedpng.js"></script>
<script>DD_belatedPNG.fix("img, .png_bg");
<![endif]-->
</body>
</html>