-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (125 loc) · 4.17 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cape Rain Frogs</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<div class="logo">Cape Rain Frog</div>
<nav>
<a href="#unique-features">Unique Features</a
><a href="#habitat-and-adaptation">Habitat & Adaptation</a
><a href="#love-and-family">Love & Family</a
><a href="#conservation">Conservation</a
><a href="#why-they-matter">Why They Matter</a>
<a
class="cta-link"
target="_blank"
href="https://en.wikipedia.org/wiki/Cape_rain_frog"
>Learn More</a
>
</nav>
</header>
<main>
<section role="banner" id="hero">
<img id="beans" src="./beans.webp" alt="beans image" />
<div>
<h1>Meet the Adorable Cape Rain Frog!</h1>
<p class="hero_first-paragraph">
Ever heard of a frog that can't jump or swim?
</p>
<p>
Meet the Cape rain frog (Breviceps gibbosus), an adorable little
creature native to South Africa's southwestern Cape. This pudgy
amphibian was first described by Carl Linnaeus in 1758 and is also
known as the giant rain frog.
</p>
</div>
<img src="./hero-image.jpg" alt="Photograph of Cape Rain Frog" />
</section>
<section id="unique-features" class="section">
<h2>Unique Features</h2>
<ul>
<li><span>Size: </span>Up to 45 mm (1.8 inches)</li>
<li>
<span>Appearance: </span>Round body, short limbs, brown skin with
white-dotted belly
</li>
<li>
<span>Fun Fact: </span>Can inflate its body to look bigger when
threatened!
</li>
</ul>
</section>
<section id="habitat-and-adaptation" class="section">
<h2>Habitat and Adaptation</h2>
<ul>
<li><span>Location: </span>From Cape Town to Citrusdal</li>
<li>
<span>Habitats: </span>Fynbos, gardens, renosterveld, urban areas
</li>
<li>
<span>Adaptability: </span>Thrives in gardens but vulnerable to
herbicides and pets
</li>
</ul>
</section>
<section id="love-and-family" class="section">
<h2>Love and Family</h2>
<ul>
<li>
<span>Mating Call: </span>Males call from burrows to attract
females.
</li>
<li>
<span>Sticky Love: </span>Females secrete a glue-like substance to
keep males attached during mating.
</li>
<li>
<span>Eggs: </span>Laid in burrows, hatching directly into froglets.
</li>
</ul>
</section>
<section id="conservation" class="section">
<h2>Conservation</h2>
<ul>
<li><span>Status: </span>Near threatened</li>
<li>
<span>Threats: </span>Habitat loss from urbanization and agriculture
</li>
<li>
<span>Help: </span>Protect natural habitats and create frog-friendly
gardens
</li>
</ul>
</section>
<section id="why-they-matter" class="section">
<h2>Why They Matter</h2>
<ul>
<li><span>Ecosystem Role: </span>Aerate soil and control pets</li>
<li>
<span>Charm: </span>Their unique features and behaviors make them a
joy to observe
</li>
</ul>
</section>
</main>
<footer>
<h2>
<a href="https://en.wikipedia.org/wiki/Cape_rain_frog">Discover more</a>
</h2>
<em
>Explore the captivating world of the Cape rain frog and learn about
their essential role in nature. Happy exploring!</em
>
<div class="quick-fact">
<span>Quick Fact: </span>Despite their name, Cape rain frogs can't swim
and will drown if placed in water!
</div>
<div class="copyright">Copyright (c) Cape Rain Frog, 2024</div>
</footer>
</body>
</html>