Roots/info.html at main · Arcullius/Roots · 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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
<!DOCTYPE html>
<html lang="en" id="top">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hiking Safety Guide</title>
    <link rel="stylesheet" href="info.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <header class="header">
        <div class="header-content">
            <div class="logo-container">
                <a href="index.html">
                    <img class="logo" src="images/logo.png" alt="Logo">
                </a>
                <span class="logo-text">"Stay Grounded"</span>
            </div>
            <button class="nav-toggle" aria-label="Toggle navigation">
                <i class="fas fa-bars"></i>
            </button>
            <nav class="nav">
                <a href="#intro" class="nav-link">Introduction</a>
                <a href="#weather" class="nav-link">Weather</a>
                <a href="#terrain" class="nav-link">Terrain</a>
                <a href="#wildlife" class="nav-link">Wildlife</a>
                <a href="#water" class="nav-link">Water</a>
                <a href="index.html" class="nav-link">Main Page</a>
            </nav>
        </div>
    </header>

    <main class="main-content">
        <section id="intro" class="section">
            <div class="section-header">
                <i class="fas fa-info-circle section-icon"></i>
                <h1 class="section-title">Introduction to Hiking Safety</h1>
            </div>
            <div class="section-content">
                <div class="section-text">
                    <p>Hiking, like any sport, can be dangerous. As you prepare for your next hiking excursion, remember these two fundamental rules:</p>

                    <div class="highlight-box">
                        <h3 class="highlight-title">Core Safety Rules</h3>
                        <ol class="list">
                            <li>Be Prepared</li>
                            <li>Don't Panic</li>
                        </ol>
                    </div>

                    <p>Being prepared has two essential components:</p>
                    <ul class="list">
                        <li>Avoid potential dangers</li>
                        <li>Be ready for emergencies</li>
                    </ul>

                    <div class="highlight-box">
                        <h3 class="highlight-title">The Four W's of Hiking Safety</h3>
                        <p>Learn about these four potential dangers when hiking:</p>
                        <ul class="list">
                            <li>Weather</li>
                            <li>Watch your step (Terrain)</li>
                            <li>Wildlife</li>
                            <li>Water</li>
                        </ul>
                    </div>
                </div>
                <img src="images/intropic.jpg" alt="Hiking Safety" class="section-image">
            </div>
        </section>

        <section id="weather" class="section">
            <div class="section-header">
                <i class="fas fa-cloud-sun section-icon"></i>
                <h2 class="section-title">Weather Safety</h2>
            </div>
            <div class="section-content">
                <div class="section-text">
                    <p>Weather conditions can change rapidly and bring unique challenges when hiking, whether hot or cold, wet or dry.</p>

                    <div class="highlight-box">
                        <h3 class="highlight-title">Weather Preparation</h3>
                        <ul class="list">
                            <li>Check current and forecasted conditions</li>
                            <li>Pack appropriate gear for expected weather</li>
                            <li>Know emergency procedures for sudden weather changes</li>
                        </ul>
                    </div>

                    <div class="highlight-box">
                        <h3 class="highlight-title">Essential Weather Gear</h3>
                        <ul class="list">
                            <li>Rain: Waterproof clothing, poncho with hood</li>
                            <li>Snow: Extra warm clothing, ice axe, crampons</li>
                            <li>Sun: Sunblock, hat, plenty of water</li>
                        </ul>
                    </div>
                </div>
                <div class="section-text">
                    <div class="highlight-box">
                        <h3 class="highlight-title">Emergency Weather Response</h3>
                        <ul class="list">
                            <li>Rain: Seek high ground, avoid stream beds</li>
                            <li>Thunder: Find low areas with dense small trees</li>
                            <li>Snow: Move to lower elevation if safe</li>
                            <li>Heat: Stay hydrated, recognize dehydration signs</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <section id="terrain" class="section">
            <div class="section-header">
                <i class="fas fa-mountain section-icon"></i>
                <h2 class="section-title">Watch Your Step</h2>
            </div>
            <div class="section-content">
                <div class="section-text">
                    <p>Unstable terrain has claimed the lives of even experienced hikers. Exercise extreme caution, especially near cliff edges and in icy conditions.</p>

                    <div class="highlight-box">
                        <h3 class="highlight-title">Terrain Safety Tips</h3>
                        <ul class="list">
                            <li>Research trail conditions beforehand</li>
                            <li>Wear appropriate hiking boots with good tread</li>
                            <li>Use trekking poles for balance</li>
                            <li>Stay on marked trails</li>
                            <li>Carry emergency lighting</li>
                        </ul>
                    </div>
                </div>
                <img src="images/w2.jpg" alt="Terrain Safety" class="section-image">
            </div>
        </section>

        <section id="wildlife" class="section">
            <div class="section-header">
                <i class="fas fa-paw section-icon"></i>
                <h2 class="section-title">Wildlife Safety</h2>
            </div>
            <div class="section-content">
                <div class="section-text">
                    <p>When we step into the wild, we enter a world of fascinating plants and animals. Observe with caution and respect, as some can pose risks to human safety.</p>

                    <div class="highlight-box">
                        <h3 class="highlight-title">Wildlife Encounters</h3>
                        <ul class="list">
                            <li>Never approach wildlife, especially cubs</li>
                            <li>Make noise while hiking to avoid surprises</li>
                            <li>Carry bear spray in bear country</li>
                            <li>Store food properly</li>
                        </ul>
                    </div>

                    <div class="highlight-box">
                        <h3 class="highlight-title">Plant Safety</h3>
                        <ul class="list">
                            <li>Learn to identify poisonous plants</li>
                            <li>Wear appropriate clothing</li>
                            <li>Stay on marked trails</li>
                            <li>Never eat unknown plants or berries</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <section id="water" class="section">
            <div class="section-header">
                <i class="fas fa-water section-icon"></i>
                <h2 class="section-title">Water Safety</h2>
            </div>
            <div class="section-content">
                <div class="section-text">
                    <p>Proper hydration is crucial for a safe and enjoyable hiking experience.</p>

                    <div class="highlight-box">
                        <h3 class="highlight-title">Hydration Guidelines</h3>
                        <ul class="list">
                            <li>Pre-hydrate before your hike</li>
                            <li>Carry adequate water for conditions</li>
                            <li>Drink before you feel thirsty</li>
                            <li>Know water sources on your route</li>
                            <li>Carry water filtration/treatment</li>
                        </ul>
                    </div>

                    <div class="highlight-box">
                        <h3 class="highlight-title">Water Safety Tips</h3>
                        <ul class="list">
                            <li>Never drink untreated water</li>
                            <li>Cross streams at safe points</li>
                            <li>Be aware of flash flood risks</li>
                            <li>Know signs of dehydration</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <a href="#" class="back-to-top" aria-label="Back to top">
        <i class="fas fa-arrow-up"></i>
    </a>

    <script>
        // Toggle mobile navigation
        const navToggle = document.querySelector('.nav-toggle');
        const nav = document.querySelector('.nav');
        navToggle.addEventListener('click', () => {
            nav.classList.toggle('active');
        });

        // Back to top button visibility and functionality
        const backToTop = document.querySelector('.back-to-top');

        // Show/hide back to top button
        window.addEventListener('scroll', () => {
            if (window.scrollY > 300) {
                backToTop.classList.add('visible');
            } else {
                backToTop.classList.remove('visible');
            }
        });

        // Handle back to top click
        backToTop.addEventListener('click', (e) => {
            e.preventDefault();
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // Smooth scroll for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth'
                    });
                    // Close mobile nav if open
                    nav.classList.remove('active');
                }
            });
        });
    </script>
</body>
</html>