-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
111 lines (105 loc) · 5.14 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<title>Energy and Trade</title>
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar">
<div class="logo">
<a href="https://www.hks.harvard.edu/courses/programming-and-data-policymakers" target="_blank">
<img src="image/hkslogo.svg" alt="HKS Logo" class="logo-image">
</a>
</div>
<ul class="nav-menu">
<li class="nav-item"><a href="index.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="historicaltrend/historicaltrend.html" class="nav-link">Historical Trend</a></li>
<li class="nav-item"><a href="energy_composition/index.html" class="nav-link">Energy Source Composition</a></li>
<li class="nav-item"><a href="us-trade/us-trade.html" class="nav-link">Trading Partner</a></li>
<li class="nav-item"><a href="energy-policy/energy-policy-intro.html" class="nav-link">Energy Policy</a></li>
<li class="nav-item"><a href="our-team/index.html" class="nav-link">About Us</a></li>
<li class="nav-item"><a href="references/references.html" class="nav-link">References</a></li>
<li class="nav-item"><a href="AI-declaration/AI.html" class="nav-link">AI Declaration</a></li>
</ul>
</nav>
<!-- Banner Section -->
<section class="banner">
<div class="banner-content">
<h1>Energy and Trade: Shaping the Future</h1>
<p>
Explore the interplay between energy, trade, and policy with interactive insights and data-driven analysis.
Navigate the complexities of a changing energy landscape with ease.
</p>
<a href="historicaltrend/historicaltrend.html" class="cta-button">Explore Historical Trends</a>
</div>
</section>
<!-- Content Section -->
<div class="content-container">
<!-- Text Column -->
<div class="text-column">
<h2>About This Website</h2>
<p>
This platform explores the intricate connections between energy production, consumption, trade, and policy.
Through interactive visualizations and comprehensive analysis, we shed light on critical energy trends that
shape the global economy and influence decision-making.
</p>
<p>
From renewable energy adoption to trade partnerships, this site is your gateway to understanding the evolving
energy landscape. With a data-driven approach, we aim to uncover insights that help stakeholders navigate the
complexities of energy systems and policies.
</p>
<h2>Key Features</h2>
<ul>
<li>Interactive graphs and maps to visualize energy trends and trade data.</li>
<li>Comprehensive overviews of energy sources, from coal and oil to wind and solar.</li>
<li>Insights into international trade and policy impacts on energy systems.</li>
</ul>
</div>
<!-- Image Grid -->
<div class="image-grid">
<a href="historicaltrend/1coal.html">
<img src="image/coalicon.webp" alt="Coal Energy Icon">
</a>
<a href="historicaltrend/2oil.html">
<img src="image/oilicon.webp" alt="Oil Energy Icon">
</a>
<a href="historicaltrend/3gas.html">
<img src="image/gasicon.webp" alt="Gas Energy Icon">
</a>
<a href="historicaltrend/4nuc.html">
<img src="image/nucicon.webp" alt="Nuclear Energy Icon">
</a>
<a href="historicaltrend/5hydro.html">
<img src="image/hydroicon.webp" alt="Hydro Energy Icon">
</a>
<a href="historicaltrend/6wind.html">
<img src="image/windicon.webp" alt="Wind Energy Icon">
</a>
<a href="historicaltrend/7solar.html">
<img src="image/solaricon.webp" alt="Solar Energy Icon">
</a>
<a href="historicaltrend/8other.html">
<img src="image/othersicon.webp" alt="Other Energy Sources Icon">
</a>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="footer-container">
<p>© 2025 Energy and Trade. All rights reserved.</p>
<ul class="footer-links">
<li><a href="our-team/index.html">About Us</a></li>
</ul>
<div class="social-media">
<a href="agile/agile.html" aria-label="Agile Team Photo">
<img src="image/agileteam.webp" alt="Agile Team Photo" style="border-radius: 8px; text-decoration: none;">
<span class="nav-link">Agile Team Photo</span>
</a>
</div>
</div>
</footer>
</body>
</html>