Web-Page/about.html at main · AvaneeshKesavan/Web-Page · 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
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">
    <title>Life Below Water - About Us</title>
    <link rel="icon" type="image/x-icon" href="images/global/favicon.ico">
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/about.css">

</head>

<body>
    <!-- Main Navigation Bar -->
    <header class="main-nav">
        <div class="nav-top">
            <div class="logo">
                <a href="home.html">
                    <img src="images/global/logo.png" alt="TECHASTRIS">
                </a>
            </div>
            <div class="hamburger-menu" id="hamburger-menu">☰</div>
            <nav id="nav-links">
                <ul>
                    <li><a href="home.html">Home</a></li>
                    <li><a href="about.html" class="active">About Us</a></li>
                    <li><a href="home.html#gallery">Overview</a></li>
                    <li><a href="volunteer.html">Volunteer</a></li>
                    <li><a href="teampage.html">Team</a></li>
                    <li><button id="search-expand">🔍</button></li>
                </ul>
            </nav>
        </div>
        <a href="profile.html"><img src="images/global/profile_icon.ico" alt="profile" class="profile-icon"></a>
        <button id="themeToggle" class="theme-button"></button>
        <!-- Search Bar (Hidden Initially) -->
        <div class="search-container" id="search-bar">
            <input type="text" placeholder="Search">
            <button id="search-btn">Search</button>
            <button id="close-search">✖</button>
        </div>
    </header>

    <div id="content">
        <div id="about">
            <h1>About Us</h1>
            <div class="image-container">
                <img src="images/global/logo.png" alt="TECHASTRIS">
                <a href="https://sdgs.un.org/" target="_blank"><img src="images/global/logo2.png" alt="SDG"></a>
            </div>
            <p>
                Techastris is a devoted band of innovators, researchers, and environmental enthusiasts working to
                further marine conservation with techno-based solutions. Under the bigger umbrella of the United Nations
                Sustainable Development Goal 14 (Life Below Water), we protect and restore aquatic ecosystems using
                innovative means.

                Tools are developed through cooperative efforts to research sustainable practices and create awareness
                about ocean conservation. Our goal is to directly impact marine biodiversity through pollution
                reduction, responsible resource management, and a better future for life under water.
            </p>
        </div>
    </div>

    <!-- Footer Section -->
    <footer class="footer">
        <a href="https://sdgs.un.org/" target="_blank">
            <div class="image-container">
                <img src="images/global/image.png" alt="Image 1">
                <img src="images/global/logo2.png" alt="Image 2">
            </div>
        </a>
        <!-- Accessibility Links in the center -->
        <div class="links">
            <a href="home.html">HOME</a>
            <a href="about.html">ABOUT US</a>
            <a href="home.html#gallery">OVERVIEW</a>
            <a href="volunteer.html">VOLUNTEER</a>
            <a href="teampage.html">TEAM</a>
            <a href="sitemap.html">SITEMAP</a>
            <a href="feedback.html">FEEDBACK</a>
            <a href="https://sdgs.un.org/goals/goal14" target="_blank">SDG</a>
        </div>

        <!-- Line below the links -->
        <hr>

        <!-- Bottom sections -->
        <div class="bottom-text">
            <div class="membership">
                <a href="table.html">Membership</a>
            </div>
            <div class="extra-links">
                <a href="#" onclick="redirect('Kevin')" class="btn">Kevin</a>
                <a href="#" onclick="redirect('Avaneesh')" class="btn">Avaneesh</a>
                <a href="#" onclick="redirect('Pangajan')" class="btn">Pangajan</a>
                <a href="#" onclick="redirect('Imayuru')" class="btn">Imayuru</a>
            </div>
            <div class="copyright">
                <p>&copy; 2025 TECHASTRIS.</p>
            </div>
        </div>
    </footer>

    <!-- JavaScript Files -->
    <script src="js/nav-search.js"></script>
    <script src="js/redirect.js" defer></script>

</body>

</html>