ecosystem-web-page/Fuctions.html at main · prathishdevendran/ecosystem-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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ecosystem Functions</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="base.css">
  <link rel="stylesheet" href="structure.css">
  <style>
    .func-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 14px; margin-top: 20px;
    }
    .func-card {
      background: rgba(74,124,89,0.12); border: 1px solid rgba(122,171,130,0.2);
      border-radius: 10px; padding: 18px 16px; text-align: center;
      transition: background 0.3s, transform 0.3s, border-color 0.3s;
    }
    .func-card:hover { background: rgba(74,124,89,0.28); transform: translateY(-4px); border-color: rgba(200,144,58,0.4); }
    .func-card .fc-icon { font-size: 1.8rem; margin-bottom: 8px; }
    .func-card h4 { color: #c8903a; font-size: 0.9rem; margin-bottom: 6px; }
    .func-card p { font-size: 0.83rem; color: rgba(245,240,232,0.65); line-height: 1.5; margin: 0; }
  </style>
</head>
<body>
  <header><h1>Ecosystem Functions</h1></header>
  <nav class="nav-bar">
    <a class="nav-a" href="index.html">Home</a>
    <a class="nav-a on" href="Eco1.html">Explore</a>
    <a class="nav-a" href="Gallery.html">Gallery</a>
  </nav>

  <div class="article-progress"><div class="article-progress-fill" id="article-fill"></div></div>

  <div class="page-body">
    <div class="page-container">

      <div class="section2 reveal">
        <h2>Functions of Ecosystem</h2>
        <p>The functions of the ecosystem regulate essential ecological processes, support life systems, and render stability. The ecosystem is responsible for nutrient cycling, maintaining a balance among trophic levels, and cycling minerals through the biosphere.</p>

        <div class="func-grid">
          <div class="func-card reveal-scale delay-1">
            <div class="fc-icon">🌱</div>
            <h4>Productivity</h4>
            <p>Rate of biomass production — how efficiently solar energy enters the ecosystem.</p>
          </div>
          <div class="func-card reveal-scale delay-2">
            <div class="fc-icon">⚡</div>
            <h4>Energy Flow</h4>
            <p>Sequential transfer from producers → consumers → decomposers → environment.</p>
          </div>
          <div class="func-card reveal-scale delay-3">
            <div class="fc-icon">🍂</div>
            <h4>Decomposition</h4>
            <p>Breakdown of dead organic material. Top-soil is the major site for decomposition.</p>
          </div>
          <div class="func-card reveal-scale delay-4">
            <div class="fc-icon">🔄</div>
            <h4>Nutrient Cycling</h4>
            <p>Nutrients consumed and recycled back in various forms for reuse by organisms.</p>
          </div>
        </div>
      </div>

      <div class="section2 reveal delay-1">
        <h3>Energy Flow in Detail</h3>
        <p>Energy captured from the sun flows from producers to consumers and then to decomposers, and finally back to the environment. At each trophic level, approximately 90% of energy is lost as heat — only 10% passes to the next level.</p>
        <div class="fact-highlight">
          <span class="fact-icon">🔆</span>
          <p>This 10% rule explains why food chains rarely exceed 4–5 trophic levels — there simply isn't enough energy to sustain a higher-level predator beyond that point.</p>
        </div>
      </div>

      <div class="section2 reveal delay-2">
        <h3>Nutrient Cycling</h3>
        <p>Unlike energy, which flows in one direction, nutrients cycle through the ecosystem continuously. Carbon, nitrogen, phosphorus, and water all follow distinct biogeochemical cycles that link living organisms to the physical environment.</p>
        <p>Decomposers play a critical role here — without them, nutrients would remain locked in dead organic matter and unavailable to producers.</p>
      </div>

      <div class="section2 back-card reveal delay-3">
        <a href="Eco1.html" class="back-link">← Go Back to Explore</a>
      </div>

    </div>
  </div>

  <script src="scroll-animations.js"></script>
  <script>
    const fill = document.getElementById('article-fill');
    window.addEventListener('scroll', () => {
      const body = document.querySelector('.page-body');
      const rect = body.getBoundingClientRect();
      const total = body.offsetHeight - window.innerHeight;
      const scrolled = Math.max(0, -rect.top);
      fill.style.width = Math.min(100, (scrolled / total) * 100) + '%';
    }, { passive: true });
  </script>
</body>
</html>