runningman145.github.io/index.html at main · runningman145/runningman145.github.io · 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
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
        <link rel="stylesheet" href="styles/nav_styles.css">
        <link rel="stylesheet" href="styles/footer_styles.css">
        <link rel="stylesheet" href="styles/hero_styles.css">
        <link rel="stylesheet" href="styles/combo.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=volunteer_activism" />
        <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
        <title>Think Global Act Local</title>
    </head>
    <body>
        <header class="navbar">
            <div class="logo"><img src="images/environmental-protection.png" alt="Environmental"></div>
            <nav>
                <a href="https://www.un.org/sustainabledevelopment/climate-action/#:~:text=Goal%2013%20calls%20for%20urgent,well%20below%202%20degrees%20Celsius.">Climate Action</a>
                <a href="#">Get Involved</a>
                <a href="#">Join Us</a>
                <a href="more_info.html">More Info</a>
            </nav>
            <div class="btn-container">
                <button class="btn-learn" id="btn-learn">Learn</button>
                <button class="btn-donate" id="btn-donate">Donate</button>
            </div>
        </header>
        <section class="hero-section">
            <!--Add background to the hero section-->
            <h1>Join Us in the Fight for Our Planet</h1>
            <p>Climate injustices affect us all, and together we can make a difference. Take action today by learning how to adopt sustainable practices in your daily life.</p>
            <button id="btn-get-involved" class="btn-hero">Get Involved</button>
            <button id="btn-learn-more" class="btn-hero">Learn More</button>
        </section>
        <section class="content-section">
            <div class="text-content">
                <h2>Embrace Sustainable Energy Solutions for a Greener Tomorrow</h2>
                <p>Transitioning to sustainable energy alternatives is crucial for our environment. By adopting cleaner practices in our daily lives, we can significantly reduce our carbon footprint.</p>
                <ul>
                    <li>Choose electricity over charcoal for cooking.</li>
                    <li>Carry reusable bags to minimize plastic waste.</li>
                    <li>Support local recycling initiatives for a cleaner community.</li>
                </ul>
            </div>
            <div class="image-placeholder">
                <span><img class="img2" src="images/electricity.jpg"></span>
            </div>
        </section>
        <section class="section">
            <h3>Act</h3>
            <h2>Empower Yourself to Combat Climate Change</h2>
            <p>Every small action counts in the fight against climate change. By making conscious choices, you can contribute to a healthier planet.</p>

            <div class="features">
                <div class="feature">
                    <div class="feature-icon"><img src="images/volunteer_activism_24dp.svg"></div>
                    <h4>Simple Actions for a Greener Future</h4>
                    <p>Using reusable shopping bags reduces plastic waste.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon"><img src="images/volunteer_activism_24dp.svg"></div>
                    <h4>Support Local Recycling Initiatives</h4>
                    <p>Engaging in recycling helps conserve resources and energy.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon"><img src="images/volunteer_activism_24dp.svg"></div>
                    <h4>Choose Sustainable Energy Alternatives</h4>
                    <p>Opt for electricity over charcoal for cooking.</p>
                </div>
            </div>

            <div class="btn-container">
                <button id="btn-learn" class="btn btn-learn">Learn</button>
                <button id="btn-join" class="btn btn-join">Join</button>
            </div>
        </section>
        <section>
            <div class="cards">
                <div class="cards-container">
                    <div class="card">
                        <div class="card-image">
                            <img src="images/env.jpg" alt="Environmental Awareness">
                        </div>
                        <div class="card-content">
                            <h2>Simple Steps to Foster Environmental Awareness and Action</h2>
                            <p>Together, we can make a difference by adopting eco-friendly habits.</p>
                            <a href="#" class="card-link">Learn More →</a>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-image">
                            <img src="images/solar.jpg" alt="Sustainable Energy">
                        </div>
                        <div class="card-content">
                            <h2>Join Us in Promoting Sustainable Energy Alternatives in Daily Life</h2>
                            <p>Switching to renewable energy sources is a crucial step towards sustainability.</p>
                            <a href="#" class="card-link">Sign Up →</a>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-image">
                            <img class="#" src="images/waste.jpg" alt="Waste Reduction">
                        </div>
                        <div class="card-content">
                            <h2>Engage with Your Community to Reduce Waste and Promote Recycling</h2>
                            <p>Every small action counts: let's work together to reduce our footprint.</p>
                            <a href="#" class="card-link">Get Involved →</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <footer class="site-footer" role="contentinfo">
            <div class="footer-inner">
                <!-- Social Links -->
                <div class="social-links">
                    <a href="https://twitter.com/" class="social-link" aria-label="Follow us on Twitter">
                        <svg viewBox="0 0 24 24"><path d="M22.23,5.924c-0.736,0.326-1.527,0.547-2.357,0.646c0.847-0.508,1.498-1.312,1.804-2.27 c-0.793,0.47-1.671,0.812-2.606,0.996C18.324,4.498,17.257,4,16.077,4c-2.266,0-4.103,1.837-4.103,4.103 c0,0.322,0.036,0.635,0.106,0.935C8.67,8.867,5.647,7.234,3.623,4.751C3.27,5.357,3.067,6.062,3.067,6.814 c0,1.424,0.724,2.679,1.825,3.415c-0.673-0.021-1.305-0.206-1.859-0.513c0,0.017,0,0.034,0,0.052c0,1.988,1.414,3.647,3.292,4.023 c-0.344,0.094-0.707,0.144-1.081,0.144c-0.264,0-0.521-0.026-0.772-0.074c0.522,1.63,2.038,2.816,3.833,2.85 c-1.404,1.1-3.174,1.756-5.096,1.756c-0.331,0-0.658-0.019-0.979-0.057c1.816,1.164,3.973,1.843,6.29,1.843 c7.547,0,11.675-6.252,11.675-11.675c0-0.178-0.004-0.355-0.012-0.531C20.985,7.47,21.68,6.747,22.23,5.924z"/></svg>
                    </a>
                    <a href="https://instagram.com/" class="social-link" aria-label="Follow us on Instagram">
                        <svg viewBox="0 0 24 24"><path d="M12,4.622c2.403,0,2.688,0.009,3.637,0.052c0.877,0.04,1.354,0.187,1.671,0.31c0.42,0.163,0.72,0.358,1.035,0.673 c0.315,0.315,0.51,0.615,0.673,1.035c0.123,0.317,0.27,0.794,0.31,1.671c0.043,0.949,0.052,1.234,0.052,3.637 s-0.009,2.688-0.052,3.637c-0.04,0.877-0.187,1.354-0.31,1.671c-0.163,0.42-0.358,0.72-0.673,1.035 c-0.315,0.315-0.615,0.51-1.035,0.673c-0.317,0.123-0.794,0.27-1.671,0.31c-0.949,0.043-1.233,0.052-3.637,0.052 s-2.688-0.009-3.637-0.052c-0.877-0.04-1.354-0.187-1.671-0.31c-0.42-0.163-0.72-0.358-1.035-0.673 c-0.315-0.315-0.51-0.615-0.673-1.035c-0.123-0.317-0.27-0.794-0.31-1.671C4.631,14.688,4.622,14.403,4.622,12 s0.009-2.688,0.052-3.637c0.04-0.877,0.187-1.354,0.31-1.671c0.163-0.42,0.358-0.72,0.673-1.035 c0.315-0.315,0.615-0.51,1.035-0.673c0.317-0.123,0.794-0.27,1.671-0.31C9.312,4.631,9.597,4.622,12,4.622 M12,3 C9.556,3,9.249,3.01,8.289,3.054C7.331,3.098,6.677,3.25,6.105,3.472C5.513,3.702,5.011,4.01,4.511,4.511 c-0.5,0.5-0.808,1.002-1.038,1.594C3.25,6.677,3.098,7.331,3.054,8.289C3.01,9.249,3,9.556,3,12c0,2.444,0.01,2.751,0.054,3.711 c0.044,0.958,0.196,1.612,0.418,2.185c0.23,0.592,0.538,1.094,1.038,1.594c0.5,0.5,1.002,0.808,1.594,1.038 c0.572,0.222,1.227,0.375,2.185,0.418C9.249,20.99,9.556,21,12,21s2.751-0.01,3.711-0.054c0.958-0.044,1.612-0.196,2.185-0.418 c0.592-0.23,1.094-0.538,1.594-1.038c0.5-0.5,0.808-1.002,1.038-1.594c0.222-0.572,0.375-1.227,0.418-2.185 C20.99,14.751,21,14.444,21,12s-0.01-2.751-0.054-3.711c-0.044-0.958-0.196-1.612-0.418-2.185c-0.23-0.592-0.538-1.094-1.038-1.594 c-0.5-0.5-1.002-0.808-1.594-1.038c-0.572-0.222-1.227-0.375-2.185-0.418C14.751,3.01,14.444,3,12,3L12,3z"/></svg>
                    </a>
                    <a href="https://www.facebook.com/" class="social-link" aria-label="Visit us on Facebook">
                        <svg viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z"/></svg>
                    </a>
                </div>

                <div class="footer-main">
                    <!-- Navigation Links -->
                    <nav class="footer-nav" aria-label="Footer Navigation">
                        <a href="index.html" class="footer-button">Home</a>
                        <a href="#" class="footer-button">FFFAQ</a>
                        <a href="contacts.html" id="btn-contact" class="footer-button">Contact</a>
                        <a href="donate.html" id="btn-donate" class="footer-button">Donations</a>
                    </nav>

                    <!-- Comment Form -->
                    <form role="comment" class="comment" action="#" method="get">
                        <label for="bio">Leave a comment:
                            <textarea id="comment" name="comment" rows="10" cols="30" placeholder="Comment..."></textarea>
                          </label>
                    </form>
                </div>

                <!-- Copyright and Legal -->
                <div class="site-info">
                    <span>Think Global Act Local</span>
                    <span class="sep"> | </span>
                    <a href="/terms-and-privacy/">Legal Information & Privacy Policy</a>
                    <span class="sep"> | </span>
                    <a href="more_info.html">About the Website</a>
                </div>
            </div>
        </footer>
    </body>
</html>