-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
225 lines (211 loc) · 10.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
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
<!DOCTYPE html>
<html lang="en">
<!--
EEI3346 - Web Application Development
Mini Project (Apr 30, 2024)
Name : P.U.W.P.L. Bandaranayake
Student No : s23010234
Register No : 223601704
-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SeeO2free - Clear the Air. Drive for a Greener Future</title>
<link rel="stylesheet" type="text/css" href="./style.css">
<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=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- section 1 goes from here | section 1 goes from here -->
<section class="section-1">
<div class="contacts-bar">
<div class="contacts-bar-phoneandemail">
<p>Phone: <a href="tel:+94812333555">0812 333 555</a> Email: <a href="mailto:[email protected]">[email protected]</a></p>
</div>
<div class="contacts-bar-social">
<ul>
<li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
<li><a href="#"><i class="fa-brands fa-pinterest-p"></i></a></li>
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-tumblr"></i></a></li>
<li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
</ul>
</div>
</div>
</section>
<!-- header section goes from here | header section goes from here -->
<header>
<nav class="nav-bar">
<div class="nav-logo">
<a href="./index.html"><img src="./images/seeo2free.png" alt="Logo"></a>
</div>
<div class="nav-menu">
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./problem.html">Problem</a></li>
<li><a href="./solutions.html">Solutions</a></li>
<li><a href="./aboutus.html">About Us</a></li>
<li class="nav-donate"><a href="./donate.html">Donate</a></li>
</ul>
</div>
</nav>
</header>
<!-- section 2 goes from here | section 2 goes from here -->
<section class="section-2">
<div class="section-2-2">
<h3>Clear the Air</h3>
<h1>Drive for a</h1>
<h2>Greener Future</h2>
<p><a href="./problem.html">Learn More</a></p>
</div>
</section>
<!-- section 3 goes from here | section 3 goes from here -->
<section class="section-3">
<div class="section-3-2">
<div class="section-3-2-1">
<img src="./images/section_3.1.png" alt="Save_Our_Air_Logo">
<h3>Save Our Air</h3>
<p>Let's join hands to save our air from harmful carbon emissions. By reducing our carbon footprint through sustainable practices, we can protect our planet for future generations. It's time to prioritize clean air and combat climate change together.</p>
<h6><a href="./solutions.html">LEARN MORE</a></h6>
</div>
<div class="section-3-2-2">
<img src="./images/section_3.2.png" alt="Reduce_Vehicles_Logo">
<h3>Reduce Vehicles</h3>
<p>Encouraging the shift from private vehicles to public transport can significantly mitigate carbon emissions. By reducing individual car usage, we lessen air pollution and traffic congestion while promoting sustainable mobility solutions for a greener future.</p>
<h6><a href="./solutions.html#section-3-2-4-2">LEARN MORE</a></h6>
</div>
<div class="section-3-2-3">
<img src="./images/section_3.3.png" alt="Electric_Vehicles_Logo">
<h3>Electric Vehicles</h3>
<p>Using electric vehicles significantly reduces carbon emissions compared to traditional combustion engine vehicles. EVs produce zero tailpipe emissions. Making the switch to EVs is a crucial step towards achieving sustainable transportation.</p>
<h6><a href="./solutions.html#section-3-2-1-1">LEARN MORE</a></h6>
</div>
</div>
</section>
<!-- section 4 goes from here | section 4 goes from here -->
<section class="section-4">
<div class="section-4-2">
<div class="section-4-2-1">
<h4>Make Donation</h4>
<h5>Your money can cure the air</h5>
<p>Support our mission to save the air from carbon emissions by donating to us. Your contribution helps fund initiatives aimed at reducing pollution and promoting cleaner, greener alternatives for a healthier planet. Every donation counts towards a brighter, cleaner future for all.</p>
<button><a href="./donate.html">DONATE NOW</a></button>
</div>
<div class="section-4-2-2">
<h4>Stop Drilling, Need Action!</h4>
<h5>Your voice does matter</h5>
<p>Join us in our forum dedicated to saving the air from carbon emissions. Together, we can share ideas, strategies, and solutions to mitigate the harmful effects of carbon pollution and work towards a cleaner, greener future for our planet. Let's make a difference, join the conversation today!</p>
<button><a href="./aboutus.html#app">ACT NOW!</a></button>
</div>
</div>
</section>
<!-- section 5 goes from here | section 5 goes from here -->
<section class="section-5">
<div class="section-5-2">
<h2>Subscribe to Newsletter</h2>
<input type="email" placeholder="Please fill your email">
<label for="">SUBSCRIBE!</label>
</div>
</section>
<!-- section 6 goes from here | section 6 goes from here -->
<section class="section-6">
<div class="section-6-2">
<div class="section-6-2-1">
<div class="section-6-2-1-1">
<img src="./images/recentpro.png" alt="Recent_Projects_Logo">
<h2>Our Recent Projects</h2>
</div>
<div class="section-6-2-1-2">
<p>MORE PROJECTS</p>
<a href="#"><i class="fa-solid fa-angles-right"></i></a>
</div>
</div>
<div class="section-6-2-2">
<div class="section-6-2-2-0 section-6-2-2-1">
<img src="./images/blog_1.jpg" alt="Ride_Sharing_Platform">
<h5><a href="#">Ride Sharing Platform</a></h5>
<h6>VEHICLE, PUBLIC</h6>
<p>With our carpooling and ride-sharing platform, we're connecting commuters to share rides and reduce the number of vehicles on the road. By facilitating carpooling arrangements...</p>
</div>
<div class="section-6-2-2-0 section-6-2-2-2">
<img src="./images/blog_2.jpg" alt="Traffic_Management">
<h5><a href="#">Traffic Management</a></h5>
<h6>SMART, PUBLIC</h6>
<p>We're developing a cutting-edge traffic management system that harnesses real-time data to optimize traffic flow. By integrating sensors and AI algorithms, we're able...</p>
</div>
<div class="section-6-2-2-0 section-6-2-2-3">
<img src="./images/blog_3.jpg" alt="Electric_Vehicle">
<h5><a href="#">Electric Vehicle</a></h5>
<h6>VEHICLE, PUBLIC</h6>
<p>Our project focuses on expanding and enhancing electric vehicle charging infrastructure in urban areas. We're working to increase convenient accessibility to charging...</p>
</div>
<div class="section-6-2-2-0 section-6-2-2-4">
<img src="./images/blog_4.jpg" alt="Emission_Monitoring">
<h5><a href="#">Emission Monitoring</a></h5>
<h6>VEHICLE, SMART</h6>
<p>We're developing a system to monitor and report vehicle emissions in real-time. By installing emission sensors in vehicles or leveraging registration data, we're able to track emissions...</p>
</div>
</div>
</div>
</section>
<!-- footer goes from here | footer goes from here -->
<footer>
<div class="footer-2">
<div class="details">
<div class="details-texts">
<img src="./images/seeo2free.png">
<h6>No: 34/A, Main Road,<br>Colombo 03</h6>
<p><a href="tel:+94812333555">0812 333 555</a></p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</div>
<div class="social-media">
<ul>
<li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
<li><a href="#"><i class="fa-brands fa-pinterest-p"></i></a></li>
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-tumblr"></i></a></li>
<li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
</ul>
</div>
</div>
<div class="footer-box">
<h5>SUPPORT</h5>
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Join Team</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
<div class="footer-box">
<h5>SO FAR</h5>
<ul>
<li><a href="#">Our Mission</a></li>
<li><a href="#">Our Vision</a></li>
<li><a href="#">Projects Done</a></li>
<li><a href="#">Donations</a></li>
</ul>
</div>
<div class="footer-box">
<h5>OTHERS</h5>
<ul>
<li><a href="#">Policy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Others</a></li>
</ul>
</div>
</div>
</footer>
<!-- section 7 goes from here | section 7 goes from here -->
<section class="section-7">
<p>www.SeeO2free.com | Copyright © 2018-2024 All Rights Reserved. Designed by Pramod B.</p>
</section>
</div>
<script src="https://kit.fontawesome.com/09a59f5e9c.js" crossorigin="anonymous"></script>
</body>
</html>