-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathslide.html
71 lines (71 loc) · 2.69 KB
/
slide.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gender Inequality Visualization</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #f4f4f4;
color: #333;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 20px;
}
.visualization {
text-align: center;
}
.instructions, .insights, .contact {
margin: 20px 0;
}
.highlight {
background: #e0f7fa;
padding: 10px;
border-radius: 5px;
}
footer {
text-align: center;
margin-top: 20px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Exploring Gender Inequality: A Decade of Change in Human Development</h1>
<h2>An Interactive Visualization of Gender Development and Human Development Indices (2012-2022)</h2>
</header>
<div class="visualization">
<h3>Gender Development Index vs Human Development Index (2012-2022)</h3>
<p>This interactive bubble chart visualizes countries' positions based on Gender Development Index (GDI) and Human Development Index (HDI). The size of each bubble represents the population of the country, and colors denote continents. You can explore annual changes from 2012 to 2022.</p>
<!-- Include your bubble chart here -->
</div>
<div class="instructions">
<h3>How to Use</h3>
<p>Use the timeline to navigate through the years. Click on the 'Play' button to see how countries' positions evolve over time. The chart updates to show shifts in gender and human development, reflecting progress or setbacks.</p>
</div>
<div class="insights">
<h3>Key Insights</h3>
<p class="highlight">Over the past decade, we can observe significant improvements in some regions, while others lag behind.</p>
<p class="highlight">Certain countries have made remarkable strides in gender equality, closing gaps in human development indices.</p>
<p class="highlight">Persistent gaps and disparities in GDI and HDI reveal areas where targeted interventions are needed.</p>
</div>
<div class="contact">
<h3>Call to Action</h3>
<p>Understanding these trends is crucial for policymakers and advocates working to close gender gaps. This visualization serves as a tool to drive discussions, inform strategies, and monitor progress towards gender equality.</p>
</div>
<footer>
<p>For more information, insights, or to collaborate on gender equality initiatives, contact [Your Name] at [Your Email] or visit [Your Website].</p>
</footer>
</div>
</body>
</html>