CC1dot2-group-3/fish.html at main · PremiumSpider/CC1dot2-group-3 · 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
<!-- Written by Blake Randall blob@ -->
<!--
  jkblair@: modified the paths to use consistent relative starts.
  Paths starting with "/" worked in Replit, but do not work in VS Live Preview
  or from local file. Pushed a second change because I was not happy with my own
  inconsistent fixes.
-->
<!DOCTYPE html>

<head>
  <title>Marine Life Educational Page</title>
  <link rel="stylesheet" href="Styles/fish.css">
  <link rel="stylesheet" href="Styles/font.css">
</head>

<body>
  <h1 class="headline">Fish!</h1>
  <h3 class="headline">Click each fish to learn more</h3>

  <div id="grid-container">

    <div class="creature" id="clownfish">
      <img src="Images/fish/clownfish.png" />
      <span class="info-bubble">"Hi there! I'm a clownfish, famously known for my bright orange color and white stripes. I have a special relationship with sea anemones - they protect me from predators, and in return, I help keep them clean!"</span>
    </div>

    <div class="creature" id="great-white">
      <img src="Images/fish/great-white.png" />
      <span class="info-bubble">Greetings! I'm the great white shark, often misunderstood. I'm an important part of the ocean's ecosystem, helping to keep fish populations healthy. Remember, I'm more interested in seals than humans!</span>
    </div>

    <div class="creature" id="octopus">
      <img src="Images/fish/octopus.png" />
      <span class="info-bubble">"Hello! With eight arms and lots of smarts, I'm an octopus. I can change color and texture to blend into my surroundings and I'm known to be quite the escape artist!"</span>
    </div>

    <div class="creature" id="manta">
      <img src="Images/fish/manta.png" />
      <span class="info-bubble">"Good day! I'm a manta ray, easily recognized by my large size and graceful movements. I filter plankton out of the water to eat as I glide through the sea."</span>
    </div>

    <div class="creature" id="eel">
      <img src="Images/fish/eel.png" />
      <span class="info-bubble">"Hi! I'm the Electric Eel, the spark of the Amazon. I generate electricity to find my way and catch my prey in murky waters. Charged up and ready to explore, I play a shocking role in my riverine ecosystem!"</span>
    </div>

    <div class="creature" id="coelacanth">
      <img src="Images/fish/coelacanth.png" />
      <span class="info-bubble">"Hey there! I'm the Coelacanth, the 'old soul' of the sea. You can call me a swimming time capsule from dinosaur times. I've got funky fins and a tough hide, and I've been around since way before the T-Rex!"</span>
    </div>
  </div>

  <div class="homepage">
    <a href="index.html"><img src="./Images/Franz-t-xtra-sm.png" alt="index.html" onmouseover="makeBirdNoise('Franz')"></a>
    <p>Click Franz to go back to the homepage</p>
  </div>


  </br>
    Mookie, Rudy, and Franz characters are Copyright Don E. Caplon 2023


  <script src="JavaScript/fish.js"></script>
  <script src="JavaScript/index.js"></script>
</body>

</html>