United-Nations-Website/index.html at master · divya-kumari32/United-Nations-Website · GitHub

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


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- <link rel="icon" href="../../../../favicon.ico"> -->
    <title>Humanitarian Access</title>

    <!--Template based on URL below-->
    <link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/starter-template/">

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- Fullpage CSS-->
    <link href="css/fullpage.min.css" rel="stylesheet" type="text/css">
    <!-- Custom CSS-->
    <link href="css/stylesheet.css" rel="stylesheet" type="text/css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@300;400&family=Roboto+Mono&family=Roboto+Slab:wght@900&family=Roboto:wght@400;900&display=swap" rel="stylesheet">
</head>

<body>
    <!--==========slide 0 Home==========-->
    <div class="panel section slide0" data-image="zero">
        <div class="row head1">
            <div class="col-lg-12 offset-lg-2">
                <div class="text-with-bk">
                    <h1 class="text-original"><span>Humanitarian Access</span></h1>
                    <h1 class="text-duplicate"><span>Humanitarian Access</span></h1>
                </div>
            </div>
        </div>
    </div>

    <!--========== slide 0-1 (same bk)==========-->
    <div class="panel section slide0" data-image="zero">
        <div class="row para1">
            <div class="col-lg-6 offset-lg-2 justify-content-lg-center">
                <div class="text-with-bk">
                    <p class="text-original"><span>Reaching vulnerable people who need life-saving assistance following an earthquake, a deadly outbreak, or in the middle of a war zone, is hugely challenging.</span></p>
                    <p class="text-duplicate"><span>Reaching vulnerable people who need life-saving assistance following an earthquake, a deadly outbreak, or in the middle of a war zone, is hugely challenging.</span></p>
                </div>
                <div class="text-with-bk">
                    <p class="text-original"><span>It is also at the heart of the humanitarian endeavour.
                            Humanitarian organizations negotiate and advocate with all parties to conflict for safe, timely and unhindered access across the world.</span></p>
                    <p class="text-duplicate"><span>It is also at the heart of the humanitarian endeavour.
                            Humanitarian organizations negotiate and advocate with all parties to conflict for safe, timely and unhindered access across the world.</span></p>
                </div>
            </div>
        </div>
        <div class="caption">
            <p class="text-white text-right"><span class="font-weight-bold">SOUTH SUDAN, 2014</span><br><br>The rains have already turned large areas of land into wetlands and made it almost impossible for aircraft to land.<br>Credit: OCHA/Jacob Zocherman.</p>
        </div>
    </div>

    <!--==========slide 1 *no bk* ==========-->
    <div class="panel" data-image="one">
        <div class="row head2">
            <div class="col-lg-12 offset-lg-2 justify-content-lg-center">
                <div class="text-with-bk">
                    <p class="text-original"><span>What are access constraints?</span></p>
                    <p class="text-duplicate"><span>What are access constraints?</span></p>
                </div>
            </div>
        </div>
        <div class="row para2">
            <div class="col-lg-6 offset-lg-2 justify-content-lg-center">
                <div class="text-with-bk">
                    <p class="text-original"><span>Constraints span from dangers associated with conflict and insecurity; limitations implemented by parties to conflicts; bureaucratic impediments imposed by national and local authorities; and sanctions and counterterrorism measures that can make it difficult to deliver assistance in areas controlled by certain armed groups.</span></p>
                    <p class="text-duplicate"><span>Constraints span from dangers associated with conflict and insecurity; limitations implemented by parties to conflicts; bureaucratic impediments imposed by national and local authorities; and sanctions and counterterrorism measures that can make it difficult to deliver assistance in areas controlled by certain armed groups.</span></p>
                </div>
            </div>
        </div>
        <div class="caption">
            <p class="text-white text-right"><span class="font-weight-bold">SYRIA, 2015</span><br><br>Vehicles of the United Nations travel a dusty road lined with the rubble remnants of destroyed buildings, in the Old City of Homs, Homs Governorate.<br>Credit: UNICEF.</p>
        </div>
    </div>

    <!--==========slide 2==========-->
    <div class="panel" data-image="two">
        <div class="row para3">
            <div class="col-lg-6 offset-lg-2 justify-content-lg-center">
                <div class="text-with-bk">
                    <p class="text-original"><span>Outright fighting in Nigeria, Syria, Yemen and beyond challenge the ability to scale up. Aid and health workers all over the world endure attacks, including killing and maiming, arbitrary detention, sexual violence and looting of aid supplies. </span></p>
                    <p class="text-duplicate"><span>Outright fighting in Nigeria, Syria, Yemen and beyond challenge the ability to scale up. Aid and health workers all over the world endure attacks, including killing and maiming, arbitrary detention, sexual violence and looting of aid supplies. </span></p>
                </div>

            </div>
        </div>
        <div class="caption">
            <p class="text-white text-right"><span class="font-weight-bold">Somalia, 2017</span><br><br>In the western desert town of Dinsoor, newly arrived drought victims rush toward food supplies delivered by the UN's World Food Program. <br>OCHA/Giles Clarke</p>
        </div>

    </div>

    <!--==========slide 3==========-->
    <div class="panel" data-image="three">
        <div class="row para4">
            <div class="col-lg-7 offset-lg-2 justify-content-lg-center">
                <div class="text-with-bk">
                    <p class="text-original"><span>In 1991, in order to ease the work of the humanitarian system as a whole, the UN General Assembly instituted the role of the UN Emergency Relief Coordinator who is specifically tasked with “facilitating, including through negotiation if needed, the acces by operational organizations to emergency areas for the rapid provision of emergency assistance by obtaining the consent of all parties concerned.”</span></p>
                    <p class="text-duplicate"><span>In 1991, in order to ease the work of the humanitarian system as a whole, the UN General Assembly instituted the role of the UN Emergency Relief Coordinator who is specifically tasked with “facilitating, including through negotiation if needed, the acces by operational organizations to emergency areas for the rapid provision of emergency assistance by obtaining the consent of all parties concerned.”
                        </span></p>
                </div>
            </div>
        </div>
        <div class="caption">
            <p class="text-white text-right"><span class="font-weight-bold">New York, 2017</span><br><br>UN Emergency Relief Lowcock during a briefing to the Security Council on the humanitarian situation in Syria.<br>UN Photo/Manuel Elias</p>
        </div>

    </div>

    <!--==========slide 4==========-->
    <div class="panel" data-image="four">
        <div class="row head3">
            <div class="col-lg-12 offset-lg-2 justify-content-lg-center">
                <div class="text-with-bk">
                    <h2 class="text-original"><span>Humanitarian access<br>in the age of COVID-19</span></h2>
                    <h2 class="text-duplicate"><span>Humanitarian access<br>in the age of COVID-19</span></h2>
                </div>
            </div>
        </div>
        <div class="row para5">
            <div class="col-lg-7 offset-lg-2 justify-content-lg-center">
                <div class="text-with-bk">
                    <p class="text-original"><span>Starting in 2019, the fast-spreading coronavirus has added a new layer of difficulties to humanitarian operations worldwide.
                            How does the humanitarian community continue serving the most vulnerable people when public health measures restrict its movements, disrupt the life of the people it serves and challenges its supply chains?
                        </span></p>
                    <p class="text-duplicate"><span>Starting in 2019, the fast-spreading coronavirus has added a new layer of difficulties to humanitarian operations worldwide.
                            How does the humanitarian community continue serving the most vulnerable people when public health measures restrict its movements, disrupt the life of the people it serves and challenges its supply chains?
                        </span></p>
                </div>
                <div class="text-with-bk">
                    <p class="text-original"><span>By adapting, innovating, adapting some more.</span></p>
                    <p class="text-duplicate"><span>By adapting, innovating, adapting some more.</span></p>
                </div>
            </div>
        </div>
        <div class="caption para">
            <p class="text-white text-right"><span class="font-weight-bold">LEBANON, 2020</span><br><br>A nurse takes a girl’s temperature at a Primary Health Care Centre in Beirut.<br>Credit: UNICEF/Fouad Choufany.</p>
        </div>
    </div>

    <!--==========slide 5 *video bk* ==========-->
    <div class="panel" data-image="five">
        <div class="row para6">
            <div class="col-lg-7 offset-lg-2 justify-content-lg-center">
                <div class="text-with-bk">
                    <p class="text-original"><span>While UN agencies and NGOs are continuing to deliver assistance, their work has been significantly challenged by flight suspensions, border closures, quarantine measures, lockdowns and curfews. This has drastically hampered the ability to move across and within countries, triggering delays, additional costs or partial suspensions of humanitarian activities.
                        </span></p>
                    <p class="text-duplicate"><span>While UN agencies and NGOs are continuing to deliver assistance, their work has been significantly challenged by flight suspensions, border closures, quarantine measures, lockdowns and curfews. This has drastically hampered the ability to move across and within countries, triggering delays, additional costs or partial suspensions of humanitarian activities.
                        </span></p>
                </div>
            </div>
        </div>

        <div class="caption">
            <p class="text-white text-right"><span class="font-weight-bold">XXXXX</span><br><br>XXXXX.<br>XXXXX.</p>
        </div>

    </div>

    <!--==========slide 6==========-->
    <div class="panel" data-image="five">
        <div class="row para7">
            <div class="col-lg-7 offset-lg-2 justify-content-lg-center">
                <div class="text-with-bk">
                    <p class="text-original"><span>In 2020, the humanitarian community has been working closely with governments for operations to continue and for humanitarian workers to be considered as essential staff. Other countries have issued “laissez-passer” rules for humanitarian staff, allowing them to cross borders or including them in the list of essential workers.
                        </span></p>
                    <p class="text-duplicate"><span>In 2020, the humanitarian community has been working closely with governments for operations to continue and for humanitarian workers to be considered as essential staff. Other countries have issued “laissez-passer” rules for humanitarian staff, allowing them to cross borders or including them in the list of essential workers.
                        </span></p>
                </div>
            </div>
        </div>
        <div class="caption">
            <p class="text-white text-right"><span class="font-weight-bold">XXXXX</span><br><br>XXXXX.<br>XXXXX.</p>
        </div>
    </div>

    <!--==========slide 6-0========-->

    <div class="panel" data-image="five">
        <div class="row para7">
            <div class="col-lg-7 offset-lg-2 justify-content-lg-center">
                <div class="text-with-bk">
                    <p class="text-original"><span>In some instances, implementation of these exemptions remains uneven: some humanitarian flights have been grounded for weeks, and not all humanitarian actors have been allowed to resume movements or activities. The dialogue with concerned governments to address these challenges continues.
                        </span></p>
                    <p class="text-duplicate"><span>In some instances, implementation of these exemptions remains uneven: some humanitarian flights have been grounded for weeks, and not all humanitarian actors have been allowed to resume movements or activities. The dialogue with concerned governments to address these challenges continues.
                        </span></p>
                </div>
            </div>
        </div>
        <div class="caption">
            <p class="text-white text-right"><span class="font-weight-bold">XXXXX</span><br><br>XXXXX.<br>XXXXX.</p>
        </div>
    </div>

    <!--==========slide 7==========-->
    <div class="panel" data-image="seven">
        <div class="row para8">
            <div class="col-lg-7 offset-lg-2 justify-content-lg-center">
                <div class="text-with-bk">
                    <p class="text-original"><span> In the field, humanitarian agencies are figuring out innovative ways to minimize the risk of COVID-19 while continuing to access people. The use of personal protective equipment, safe distancing, contactless biometrics, home delivery and other approaches are now the new normal. For instance, humanitarian agencies are increasing the proportion of emergency relief they can provide through digital money transfers on mobile phones over in-kind assistance. </span></p>
                    <p class="text-duplicate"><span> In the field, humanitarian agencies are figuring out innovative ways to minimize the risk of COVID-19 while continuing to access people. The use of personal protective equipment, safe distancing, contactless biometrics, home delivery and other approaches are now the new normal. For instance, humanitarian agencies are increasing the proportion of emergency relief they can provide through digital money transfers on mobile phones over in-kind assistance.</span></p>
                </div>

            </div>
        </div>
        <div class="caption">
            <p class="text-white text-right"><span class="font-weight-bold">SOMALIA, 2020</span><br><br>A WFP staff member tops-up a beneficiary's SCOPE card at a WFP distribution centre.<br>Credit: WFP/Ismail Taxta.</p>
        </div>
    </div>

    <!--==========slide 8==========-->
    <div class="panel" data-image="eight">
        <div class="row para9">
            <div class="col-lg-7 offset-lg-2 justify-content-lg-center">
                <div class="text-with-bk">
                    <p class="text-original"><span> The UN refugee agency, UNHCR, has piloted contactless biometrics through an iris scanner to register refugees in Bangladesh, Ethiopia, Malawi and Zambia, as well as to authenticate recipients for assistance. And where food distributions still need to take place, WFP and other agencies are trying to deliver several months’ worth of food at a time and insist that recipients remain six-feet apart.</span></p>
                    <p class="text-duplicate"><span> The UN refugee agency, UNHCR, has piloted contactless biometrics through an iris scanner to register refugees in Bangladesh, Ethiopia, Malawi and Zambia, as well as to authenticate recipients for assistance. And where food distributions still need to take place, WFP and other agencies are trying to deliver several months’ worth of food at a time and insist that recipients remain six-feet apart.</span></p>
                </div>

            </div>
        </div>
        <div class="caption">
            <p class="text-white text-right"><span class="font-weight-bold">KENYA, 2020</span><br><br>Food and relief items distributed during COVID-19 global pandemic.<br>Credit: UNHCR/Samuel Otieno.</p>
        </div>
    </div>

    <!--==========slide 8 *map*==========-->
    <div class="panel" data-image="eight">
        <div class="row para10 d-flex justify-content-center">
            <div>
                <p style="color: white;">*********MAP********</p>

                <div><a href="yemen.html">YEMEN</a></div>
                <div><a href="#">AFGHANISTAN</a></div>
            </div>

        </div>
    </div>

</body>

    <!--Custom JS-->
    <!--Slides-->
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


    <script>
        $(window).scroll(function() {

            // selectors
            var $window = $(window),
                $body = $('body'),
                $panel = $('.panel');

            // Change 15% earlier than scroll position so colour is there when you arrive.
            var scroll = $window.scrollTop() + ($window.height() / 1.25);

            $panel.each(function () {
                var $this = $(this);

                // if position is within range of this panel.
                // So position of (position of top of div <= scroll position) && (position of bottom of div > scroll position).
                // Remember we set the scroll to 33% earlier in scroll var.
                if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {

                // Remove all classes on body with color-
                $body.removeClass(function (index, css) {
                    return (css.match (/(^|\s)image-\S+/g) || []).join(' ');
                });

                // Add class of currently active div
                $body.addClass('image-' + $(this).data('image'));

                $('.caption').each(function() {
                    $(this).css('display','none');
                    $("div[data-image='" + $this.data('image') + "'] > .caption").css('display','block');
                });

                $(this).find(".row").css("opacity", 1 - ($(window).scrollTop()-$this.position().top) / 100);

                $(this).next().find(".row").css("opacity", ($(window).scrollTop()-$this.position().top) / 300);

                }
            });

        }).scroll();
    </script>

</html>