-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathIndex.html
216 lines (197 loc) · 10.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
<title>BioGass</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha384-k6RqeWeci5ZR/Lv4MR0sA0FfDOMy2ff/p5S/0Ff4LM5Y2mG5z1g+z4Q1Zd5v+dT" crossorigin="anonymous">
<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=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">BioGas Limited</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#Home"><i class="fas fa-home"></i>Home</a>
<a class="nav-link" href="#About"><i class="fas fa-info-circle"></i>About</a>
<a class="nav-link" href="#HowItWorks"><i class="fas fa-cogs"></i>How it works</a>
<a class="nav-link" href="#ContactUs"><i class="fas fa-envelope"></i>Contact Us</a>
</div>
</div>
</div>
<div class="button">
<a href="./loginpage/Login.html" class="btn">Login</a>
</div>
</nav>
<!-- <section id="Home">
<div class="home-conatc">
<h1>Welcome to Biogas Energy Solutions</h1>
<p>Transforming Waste into Renewable Energy</p>
<button type="submit"></button>
</div>
</section> -->
<section id="Home">
<div class="home-contact">
<h1 >Welcome to Biogas Energy Solutions</h1>
<p>Transforming Waste into Renewable Energy</p>
<button type="submit">Get Started</button> <!-- Add button text for clarity -->
</div>
</section>
<section id="About">
<h1>About Us</h1>
<div class="about-content">
<div class="about-text">
<p>At Biogas Energy Solutions, we are dedicated to providing sustainable and eco-friendly energy solutions by harnessing the power of biogas. Our team of experts specializes in designing and implementing waste-to-energy systems that convert organic waste into renewable energy for homes, businesses, and communities.</p>
<p>Our mission is to lead the way in renewable energy innovation, offering high-quality, cost-effective, and environmentally responsible energy solutions. We believe that through biogas technology, we can help reduce the global reliance on fossil fuels while turning waste into valuable resources.</p>
</div>
</div>
</section>
<section id="HowItWorks">
<h1>How It Works</h1>
<div class="how-it-works-content">
<div class="how-text">
<p>Biogas is produced through the process of anaerobic digestion. Organic waste such as food scraps, animal manure, and agricultural residue are broken down by bacteria in an oxygen-free environment. This process generates biogas, primarily composed of methane and carbon dioxide, which can be used as a renewable source of energy for cooking, heating, and electricity generation.</p>
<p>The biogas production process consists of the following key steps:</p>
<ul>
<li><strong>1. Collection:</strong> Organic waste is gathered from homes, farms, or businesses.</li>
<li><strong>2. Anaerobic Digestion:</strong> The collected waste is placed in an airtight digester where bacteria break it down in the absence of oxygen, producing biogas.</li>
<li><strong>3. Biogas Capture:</strong> The produced gas is captured and stored in tanks.</li>
<li><strong>4. Utilization:</strong> The biogas can be burned for cooking, heating, or converted to electricity.</li>
</ul>
</div>
<div class="spinner-container">
<img src="./Images/klipartz.com.png" alt="Spinning Image" class="spinner left">
<img src="./Images/klipartz.com.png" alt="Spinning Image" class="spinner right">
</div>
<div class="how-image">
<img src="./Images/industry-flat-biogas-infographic_23-2149403735.jpg" alt="Biogas production process">
</div>
</div>
</section>
<!-- <section id="ContactUs">
<h1>Contact Us</h1>
<div class="contact-container">
<div class="contact-form">
<form action="#" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="message" rows="6" required></textarea>
</div>
<button type="submit">Send Message</button>
</form>
</div>
</div>
</section> -->
<section id="Partners" class="partners-section">
<h1 class="cen">Our Partners</h1>
<div class="container">
<div class="row">
<!-- Card 1 -->
<div class="col-md-4 fade-in-card">
<div class="card">
<img src="./Images/pexels-lukas-rodriguez-1845331-3573351.jpg" class="card-img-top partner-img" alt="Partner 1">
<div class="card-body text-center">
<h5 class="card-title">Partner 1</h5>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="col-md-4 fade-in-card">
<div class="card">
<img src="./Images/pexels-lukas-rodriguez-1845331-3573351.jpg" class="card-img-top partner-img" alt="Partner 2">
<div class="card-body text-center">
<h5 class="card-title">Partner 2</h5>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="col-md-4 fade-in-card">
<div class="card">
<img src="./Images/pexels-lukas-rodriguez-1845331-3573351.jpg" class="card-img-top partner-img" alt="Partner 3">
<div class="card-body text-center">
<h5 class="card-title">Partner 3</h5>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="ContactUs">
<h1>Contact Us</h1>
<div class="contact-container">
<!-- <div class="contact-info">
<h2>Get in Touch</h2>
<p>If you have any questions, feel free to reach out!</p>
</div> -->
<form class="contact-form">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" required>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" rows="4" required></textarea>
</div>
<button type="submit">Send Message</button>
</form>
</div>
</section>
<footer id="footer">
<div class="footer-container">
<!-- Footer logo and company info -->
<div class="footer-logo">
<h2>BioGas Energy</h2>
<p>Transforming waste into energy for a cleaner tomorrow. Let's build a sustainable future together.</p>
</div>
<!-- Quick Links -->
<div class="footer-links">
<h3>Quick Links</h3>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#services">Our Services</a></li>
<li><a href="#how-it-works">How It Works</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</div>
<!-- Social Media Links -->
<div class="footer-social">
<h3>Follow Us</h3>
<ul>
<li><a href="#"><i class="fab fa-facebook-f"></i> Facebook</a></li>
<li><a href="#"><i class="fab fa-facebook-f"></i> 0712345678</a></li>
<li><a href="#"><i class="fab fa-twitter"></i> Twitter</a></li>
<li><a href="#"><i class="fab fa-instagram"></i> Instagram</a></li>
<li><a href="#"><i class="fab fa-linkedin-in"></i> LinkedIn</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 BioGas Energy. All rights reserved. | Designed with ❤️ by BioGas Team</p>
</div>
</footer>
<script src="script.js"></script>
</body>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
</html>