-
Notifications
You must be signed in to change notification settings - Fork 1
/
Index.html
139 lines (133 loc) · 5.96 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Environmental Matrices</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<header>
<div class="logo">SustainHub</div>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#types">Types</a></li>
<li><a href="#how-to">How-To</a></li>
<li><a href="#case-studies">Case Studies</a></li>
<li><a href="#resources">Resources</a></li>
<li><a href="#community">Community</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div class="search-bar">
<input type="text" placeholder="Search...">
</div>
</header>
<main>
<section id="home" class="banner">
<h1>Understanding Environmental Matrices</h1>
<p>Your comprehensive guide to environmental impact assessments</p>
<a href="#about" class="btn">Learn More</a>
</section>
<section class="timeline clearfix">
<div class="container left">
<section id="about" class="section">
<h2>About Environmental Matrices</h2>
<p> <ul>
<li>
An environmental matrix serves as a comprehensive framework for systematically assessing and managing the intricate interplay of environmental factors.
</li> <li>
This structured approach fosters a proactive and holistic perspective on environmental stewardship.
</li>
</ul> </p>
<img src="about-image.jpg" alt="Environmental Matrix">
</section>
</div>
<div class="container right">
<section id="types" class="section">
<h2>Types of Environmental Matrices</h2>
<p>Learn about different types and their applications.</p>
<ul>
<li>Leopold Matrix</li>
<li>Battelle Environmental Evaluation System</li>
<li>Environmental Impact Assessment Matrix</li>
<!-- Add more types as needed -->
</ul>
</section>
</div>
<div class="container left">
<section id="how-to" class="section">
<h2>How to Create an Environmental Matrix</h2>
<p>Step-by-step guide to creating your own matrix.</p>
<ol>
<li>Define the scope and objectives.</li>
<li>Identify environmental factors.</li>
<li>Assess the impact.</li>
<li>Evaluate and mitigate risks.</li>
<li>Document and review.</li>
<!-- Add more steps as needed -->
</ol>
</section>
</div>
<div class="container right">
<section id="case-studies" class="section">
<h2>Case Studies</h2>
<p>Real-world examples and analysis.</p>
<!-- Add case study examples here -->
</section>
</div>
<div class="container left">
<section id="resources" class="section">
<h2>Resources and Tools</h2>
<p>Find the best resources and tools available.</p>
<ul>
<li>Academic papers</li>
<li>Books and articles</li>
<li>Regulatory information</li>
<li>Standards and guidelines</li>
<!-- Add more resources as needed -->
</ul>
</section>
</div>
<div class="container right">
<section id="community" class="section">
<h2>Community</h2>
<p>Join our community for discussions, networking, and more.</p>
<!-- Add community features here -->
</section>
</div>
<div class="container left">
<section id="contact" class="section">
<h2>Contact Us</h2>
<p>Contact form, email, phone, and social media links.</p>
<form action="#" method="post">
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<textarea name="message" placeholder="Your Message" required></textarea>
<button type="submit">Send Message</button>
</form>
</section>
</div>
</section>
</main>
<footer>
<div class="footer-content">
<p>Follow us on:</p>
<ul class="socials">
<li><a href="#" class="fa-brands fa-instagram"></a></li>
<li><a href="https://x.com/akshat_srii" class="fa-brands fa-twitter"></a></li>
<li><a href="https://www.linkedin.com/in/pranav-chaturvedi-a961a12ba/" class="fa-brands fa-linkedin"></a></li>
</ul>
<p>© 2024 Pranav. All rights reserved.</p>
<form action="#" method="post" class="newsletter">
<input type="email" placeholder="Subscribe to our newsletter">
<button type="submit">Subscribe</button>
</form>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>