HydroScope/index.html at main · bdsimry/HydroScope · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Water Usage & Resources in Europe</title>
    <link rel="stylesheet" href="style.css">
    <script src="homepage.js" defer></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container">
    <!-- Navigation Bar -->
    <nav class="navbar">
        <ul class="nav-list">
            <!-- Logo linked to the homepage -->
            <li class="nav-item logo">
                <a href="index.html"><img src="logo.png" alt="Logo" class="navbar-logo"></a>
            </li>
            <li class="nav-item dropdown">
                <a href="javascript:void(0)">Explore</a>
                <ul class="dropdown-list">
                    <li><a href="EuropeOverview.html">Europe-Wide Water Overview</a></li>
                    <li><a href="choropleth.html">Water Stress Map</a></li>
                    <li><a href="combined_barcharts.html">Country-Level Water Overview</a></li>
                </ul>
            </li>
            <li class="nav-item"><a href="aboutus.html">About Us</a></li>
        </ul>
    </nav>

    <!-- Title Section -->
    <section class="title-section">
        <div class="title-content">
            <h1>In 2019, <span class="count count-small" data-target="38">0</span>% of the EU's population faced water scarcity. By 2050, WWF estimates <span class="count" data-target="17">0</span>% will be at high risk, emphasizing the need for better water management and awareness.</h1>
            <p class="subtitle">HydroScope: A Deep Dive into Europe's Water Usage, Abstraction & Resource Dynamic</p>
        </div>
    </section>

    <!-- Intro Section -->
    <section id="intro-section" class="intro-section animate-on-scroll">
        <div class="content">
            <!-- Left aligned heading -->
            <div class="intro-title">
                <h2>Introduction & Background</h2>
            </div>
            <!-- Right aligned text content -->
            <div class="intro-text">
                <p>Water usage, abstraction, and resource management are critical factors affecting Europe's environmental sustainability and economic stability. As populations grow and climate change continues to affect water availability, understanding how water is consumed, abstracted, and managed across different sectors is vital for ensuring future water security.</p>
                <p>This project delves into the current state of water usage and abstraction patterns across Europe, identifying regions and sectors most affected by water scarcity. We aim to highlight the challenges faced in managing water resources effectively, offering insights into potential solutions for better water management practices and the sustainable use of freshwater resources.</p>
            </div>
        </div>
    </section>

    <!-- Objectives Section -->
    <section id="objectives-section" class="objectives-section animate-on-scroll">
        <div class="content">
            <!-- Left aligned list content -->
            <div class="objectives-text">
                <ul>
                    <li>Analyze the current state of water usage, abstraction, and resource availability across Europe.</li>
                    <li>Track changes in water resource availability and abstraction rates from 1990 to 2022.</li>
                    <li>Examine sector-specific water consumption patterns, including agriculture, industry, and households.</li>
                    <li>Highlight regions and countries facing the most severe water scarcity and resource management challenges.</li>
                    <li>Identify opportunities to improve the efficiency of water usage, abstraction, and resource allocation across Europe.</li>
                </ul>
            </div>

            <!-- Right aligned heading -->
            <div class="objectives-title">
                <h2>Aim & Objectives</h2>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <p>&copy; COS30045 Data Visualisation Lab 1 Group 37</p>
        <ul class="footer-nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="aboutus.html">About Us</a></li>
        </ul>
    </footer>
</div>
</body>
</html>