-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
204 lines (196 loc) · 10.5 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
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Pari</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="./css/main.css" />
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"
integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<link rel="icon" href="./assets/icon.ico" type="image/x-icon"/>
</head>
<body>
<ul class="topnav" id="navbar">
<h5 href="#" style="font-family:samarkhan; font-weight: 400; font-size: 50px;">Pari</h5>
<li style="margin-right: 30px;"><a>Contact Us</a></li>
<li><a href="./checkStatus.html">Check Status</a></li>
<li><a style="float: right;" href="./request.html">Request Relief</a></li>
<li><a href="./donate.html">Donate</a></li>
<li><a href="#about">About Us</a></li>
</ul>
<div>
<button class="button" style="border-radius: 55%; width:70px;height:70px;position:fixed;right:3%;bottom:15%;padding-right: 32px;padding-left: 28px;background-color: tomato; z-index: 1;"><i class="fas fa-phone"></i></button>
</div>
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<img src="./assets/1.jpeg" style="width:100%;filter:brightness(45%);height: 400px;">
<div class="text">Chennai Floods 2015</div>
</div>
<div class="mySlides fade">
<img src="./assets/2.jpeg" style="width:100%;filter:brightness(45%);height: 400px;">
<div class="text">Kerala Floods 2018</div>
</div>
<div class="mySlides fade">
<img src="./assets/3.jpeg" style="width:100%;filter:brightness(45%);height: 400px;">
<div class="text">Uttarkhand Floods 2013</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<div class="container">
<div id="about"></div>
<h1>About Us</h1>
<div class="underline"></div>
</div>
<div style="width: 67%;margin: auto;">
<p style="font-family: 'IBM Plex Sans', sans-serif;font-size: 25px;text-align:center;">
<span style="font-family: samarkhan;font-size: 35px;">Pari</span> is an organisation established to meet the needs of the souls unheard during the hardest of times. <span style="font-family: samarkhan;font-size: 35px;font-weight: 450;">PARI</span> is aimed at
creating an organized distribution of relief materials during the disaster. We try our best to bridge the gap between
the people and the NGOs. <span style="font-family: samarkhan;font-size: 35px;">Pari</span> makes sure that the donations are in safe hands and are reached safely.
</p>
<div style="text-align: center;margin-top: 20px;">
<button class="button">Know More</button>
</div>
</div>
<div style="height:50px"></div>
<div class="grid-container">
<div class="grid-item">
<h1 style="font-family: samarkhan;font-weight: 400;">Trust</h1>
<p>Trust is our core value and we always strive to earn your trust. We can assure that we will stand answerable and
accountable to you.</p>
</div>
<div class="divider"></div>
<div class="grid-item">
<h1 style="font-family: samarkhan;font-weight: 400;">Speed</h1>
<p>We will make sure that the relief materials reach you on time. And your donations reach the souls in need as fast as
possible!</p>
</div>
<div class="divider"></div>
<div class="grid-item">
<h1 style="font-family: samarkhan;font-weight: 400;">Transparent</h1>
<p>All our functions are carried out with utter transparency. Starting from recieving donations from donors to makin them
reach the victims, everything can be monitored.</p>
</div>
</div>
<div id="faq" style="height:80px"></div>
<div style="height: 750px;">
<h1>FAQs</h1>
<div class="faq-container">
<div class="faq-item">
<p>How to Donate?</p>
<div class="underline" style="width:10%;"></div>
<p>We accept donations through cash and relief materials</p>
</div>
<div class="faq-item"></div>
<div class="faq-item">
<p>How secure is the Portal?</p>
<div class="underline" style="width:10%;"></div>
<p>All the donation are safely directed to the corresponding NGOs.We will provide with you with an acknowledgement.</p>
</div>
<div class="faq-item">
<p>How to request Relief Materials?</p>
<div class="underline" style="width:10%;"></div>
<p>You can request relief materials through our online portal or through messages.</p>
</div>
<div class="faq-item"></div>
<div class="faq-item">
<p>How to use the SMS feature?</p>
<div class="underline" style="width:10%;"></div>
<p>You can message us the requirements along with the location to the provided number.</p>
</div>
<div class="faq-item">
<p>What does <span style="font-family: samarkhan;font-size:30px;">Pari</span> do?</p>
<div class="underline" style="width:10%;"></div>
<p>We serve people during disaster. Floods, Cyclone, Earthquake, Femine.</p>
</div>
<div class="faq-item"></div>
<div class="faq-item">
<p>More about us!</p>
<div class="underline" style="width:10%;"></div>
<p>We are an emerging NGO, trying to help people during disasters.</p>
</div>
</div>
</div>
</div>
<footer>
<div class="footer">
<div style="width: 40%;float:left; color: white;height: 100%;margin-left: 10%;position: relative;">
<h2 style="font-family: 'Roboto';font-weight: 400;letter-spacing: 2px;margin-bottom: 25px;margin-top: 25px;">Made with <span class="fas fa-heart" id="love"></span> by Abhinav and Rohith</h2>
</div>
<div style="width: 40%;float: right;color: white;height: 100%;margin-right: 10%;">
<ul style="float: right;align-items: center;">
<li class="socialhover" style="display:inline-block;margin: 0 3px; ">
<a href="#" class="socialhover">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="socialhover" style="display:inline-block;margin: 0 3px; ">
<a href="#" class="socialhover">
<i class="far fa-envelope"></i>
</a>
</li>
<li class="socialhover" style="display:inline-block;margin: 0 3px;">
<a href="#" class="socialhover">
<i class="fas fa-phone"></i>
</a>
</li>
<li class="socialhover" style="display:inline-block;margin: 0 3px;">
<a href="#" class="socialhover">
<i class="fab fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
</footer>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script>
//$(window).on("blur ", function (e) {
// alert("Switched");
// console.log("Switched");
//})
</script>
<script src="./js/main.js"></script>
<script>
//Slideshow
var slideIndex = 0;
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) { slideIndex = 1 }
slides[slideIndex - 1].style.display = "block";
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
dots[slideIndex - 1].className += " active";
setTimeout(showSlides, 5000); // Change image every 2 seconds
}
</script>
</html>