-
Notifications
You must be signed in to change notification settings - Fork 0
/
features.html
212 lines (200 loc) · 6.57 KB
/
features.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Features of HELP</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: rgb(245, 241, 222);
font-family: 'Poppins', sans-serif;
color: #333;
}
/* Navbar styles */
.Nav {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
background: linear-gradient(90deg, #ff8a00, #e52e71);
}
ul {
list-style-type: none;
display: flex;
gap: 20px;
padding: 0;
}
ul li a {
color: #fff;
padding: 10px 20px;
font-size: 18px;
text-decoration: none;
font-weight: 600;
border-radius: 6px;
transition: background-color 0.3s;
}
ul li a:hover {
background-color: rgba(255, 255, 255, 0.15);
}
/* Header styles */
.fstpanel {
background-image: url(map-bg.png);
padding: 60px;
position: relative;
text-align: center;
color: #e0e0e0;
}
.fstpanel h1 {
color: #ffa726;
font-size: 2em;
margin-bottom: 10px;
}
/* Feature card styles */
.feature {
background-color: #37474f;
color: #fff;
padding: 30px;
border-radius: 15px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
margin: 20px;
transition: transform 0.3s, background-color 0.3s;
}
.feature:hover {
transform: translateY(-10px);
background-color: #455a64;
}
h2 {
color: #ffcc80;
margin-bottom: 10px;
}
p {
line-height: 1.6;
}
/* Footer styles */
footer {
background: linear-gradient(90deg, #e52e71, #ff8a00);
padding: 20px;
display: flex;
justify-content: center;
gap: 20px;
}
.foot {
color: #fff;
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: color 0.3s;
}
.foot:hover {
color: #ffcc80;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="Nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contactmain.html">Contact</a></li>
<li><a href="work.html">Works</a></li>
<li><a href="features.html">Features</a></li>
</ul>
</nav>
<!-- Background Image and Main Heading -->
<div class="fstpanel">
<h1>Inform Decision & Empower Communities</h1>
</div>
<!-- Features Section -->
<div class="features-container" style="display: flex; flex-wrap: wrap; justify-content: center; padding: 30px;">
<div class="feature">
<h2>Report Issues Effortlessly:</h2>
<p>
- Report issues instantly with our intuitive reporting system.<br>
- Add photos, videos, and descriptions to provide context.<br>
- Track the status of your report in real-time.
</p>
</div>
<div class="feature">
<h2>Explore Your Community:</h2>
<p>
- View issues reported by others in your area.<br>
- Filter by category, status, and location.<br>
- Join the conversation and comment on reports.
</p>
</div>
<div class="feature">
<h2>Collaborate with Your Community:</h2>
<p>
- Share reports on social media to raise awareness.<br>
- Participate in discussions to find solutions.<br>
- Vote on reports to prioritize community needs.
</p>
</div>
<div class="feature">
<h2>Stay Informed:</h2>
<p>
- Receive real-time updates on report status.<br>
- Get notifications when new issues are reported nearby.<br>
- View statistics on community engagement and progress.
</p>
</div>
<div class="feature">
<h2>Enhanced Transparency:</h2>
<p>
- View issue resolution timelines.<br>
- Track community performance metrics.<br>
- Access historical report data for insights.
</p>
</div>
<div class="feature">
<h2>Seamless Integration:</h2>
<p>
- Integrates with existing municipal systems.<br>
- Supports multiple reporting channels (web, mobile, phone).<br>
- Compatible with various devices and browsers.
</p>
</div>
<div class="feature">
<h2>Security and Reliability:</h2>
<p>
- Robust data encryption and secure storage.<br>
- Scalable infrastructure for high traffic.<br>
- Regular backups and disaster recovery.
</p>
</div>
<div class="feature">
<h2>Customizable:</h2>
<p>
- Tailored to meet specific municipal needs.<br>
- Flexible reporting categories and workflows.<br>
- Personalized branding and design.
</p>
</div>
<div class="feature">
<h2>Support From Us:</h2>
<p>
- Dedicated customer support team.<br>
- Comprehensive knowledge base and FAQs.<br>
- Regular software updates and enhancements.
</p>
</div>
</div>
<!-- Footer -->
<footer>
<a href="faq.html" class="foot">FAQ</a>
<a href="about.html" class="foot">Our Story</a>
<a href="contactmain.html" class="foot">Contact Us</a>
<a href="features.html" class="foot">Our Works</a>
<a href="Credits.html" class="foot">Credits</a>
</footer>
</body>
</html>