Skip to content

Commit e7416d1

Browse files
committed
new update
1 parent 4294114 commit e7416d1

4 files changed

Lines changed: 252 additions & 126 deletions

File tree

.vscode/settings.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5502
3+
}
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5503
3+
}

zoo-css-challenge/index.html

Lines changed: 197 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,136 +1,215 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<link rel="stylesheet" href="style.css">
5-
</head>
6-
<body>
7-
<header>
8-
<img src='https://sharp-villani-e65ba8.netlify.app/zoo.svg'
9-
alt="zoo logo"
10-
id="logo"
11-
>
12-
<nav>
13-
<ul>
14-
<li>Directions</li>
15-
<li>Food & Drink</li>
16-
<li>Education</li>
17-
<li>Your Visit</li>
18-
</ul>
19-
</nav>
20-
</header>
21-
<main>
22-
<section class="introduction">
23-
<h1>Birmingham Zoo</h1>
24-
</section>
3+
<head>
4+
<link rel="stylesheet" href="style.css" />
5+
</head>
6+
<body>
7+
<header>
8+
<img
9+
src="https://sharp-villani-e65ba8.netlify.app/zoo.svg"
10+
alt="zoo logo"
11+
id="logo"
12+
/>
13+
<nav>
14+
<ul>
15+
<li>Directions</li>
16+
<li>Food & Drink</li>
17+
<li>Education</li>
18+
<li>Your Visit</li>
19+
</ul>
20+
</nav>
21+
</header>
22+
<main>
23+
<section class="introduction">
24+
<h1>Birmingham Zoo</h1>
25+
<p>
26+
The zoo is open every day of the year and features three major biomes:
27+
the Tropic Zone, Temperate Territory, and the Polar Circle. From
28+
tropical birds, to snow leopards, grizzly bears, and one of the
29+
nation’s largest colonies of Antarctic penguins, there are animals to
30+
enjoy in every season.
31+
</p>
32+
</section>
2533

26-
<div id="badge">
27-
<p>Opening 2021!</p>
28-
</div>
34+
<div id="badge">
35+
<p>Opening 2021!</p>
36+
</div>
2937

30-
<section class="bears">
31-
<h2>Bears</h2>
32-
<p>Did you know that a bear's closest relative is the seal? Or that bears can smell over 2,000 times better than humans?</p>
33-
<div class="image-container">
34-
<img
35-
src="https://placebear.com/200/300"
36-
alt="Grizzly Bear"
37-
width="200"
38-
height="300"
39-
>
40-
<img src="https://placebear.com/400/300"
41-
alt="Grizzly Bear"
42-
width="400"
43-
height="300"
44-
>
45-
<img src="https://placebear.com/200/400"
46-
alt="Grizzly Bear"
47-
width="200"
48-
height="400"
49-
>
50-
</div>
51-
</section>
38+
<section class="bears">
39+
<h2>Bears</h2>
40+
<p>
41+
Did you know that a bear's closest relative is the seal? Or that bears
42+
can smell over 2,000 times better than humans?
43+
</p>
44+
<div class="image-container">
45+
<img
46+
src="https://placebear.com/200/300"
47+
alt="Grizzly Bear"
48+
width="200"
49+
height="300"
50+
style="border-color: blueviolet"
51+
/>
52+
<img
53+
src="https://placebear.com/400/300"
54+
alt="Grizzly Bear"
55+
width="400"
56+
height="300"
57+
style="border-color: salmon"
58+
/>
59+
<img
60+
src="https://placebear.com/200/400"
61+
alt="Grizzly Bear"
62+
width="200"
63+
height="400"
64+
style="border-color: wheat"
65+
/>
66+
</div>
67+
</section>
5268

53-
<section class="tigers">
54-
<h2>Tiger</h2>
55-
<h3>Top 5 Tiger Facts</h3>
56-
<ol>
57-
<li>Tigers are the largest cat species in the world reaching up to 3.3 meters in length and weighing up to 670 pounds!
58-
<li>Tigers are easily recognizable with their dark vertical stripes and reddish/orange fur.
59-
<li>The Bengal tiger is the most common tiger.
60-
<li>Tigers live between 20-26 years in the wild.
61-
<li>Unlike most other cats, tigers are great swimmers and actually like the water.
62-
</ol>
63-
</section>
69+
<section class="tigers">
70+
<h2 id="ptiger">Tiger Facts</h2>
71+
<ul>
72+
<li>
73+
Tigers are the largest cat species in the world reaching up to 3.3
74+
meters in length and weighing up to 670 pounds!
75+
</li>
76+
<li>
77+
Tigers are easily recognizable with their dark vertical stripes and
78+
reddish/orange fur.
79+
</li>
80+
<li>The Bengal tiger is the most common tiger.</li>
81+
<li>Tigers live between 20-26 years in the wild.</li>
82+
<li>
83+
Unlike most other cats, tigers are great swimmers and actually like
84+
the water.
85+
</li>
86+
</ul>
87+
</section>
6488

65-
<section class="giraffe">
66-
<h2>Giraffe</h2>
89+
<section class="giraffe">
90+
<h2>Giraffe</h2>
6791

68-
<p>Giraffes are the world's tallest mammals, thanks to their towering legs and long necks. A giraffe's legs alone are taller than many humans—about 6 feet . These long legs allow giraffes to run as fast as 35 miles an hour over short distances and cruise comfortably at 10 miles an hour over longer distances.</p>
92+
<p id="giraffep">
93+
Giraffes are the world's tallest mammals, thanks to their towering
94+
legs and long necks. A giraffe's legs alone are taller than many
95+
humans—about 6 feet . These long legs allow giraffes to run as fast as
96+
35 miles an hour over short distances and cruise comfortably at 10
97+
miles an hour over longer distances.
98+
</p>
6999

70-
<h3>Behavior</h3>
100+
<h3>Behavior</h3>
71101

72-
<p>Typically, these fascinating animals roam the open grasslands in small groups of about half a dozen.</p>
102+
<p>
103+
Typically, these fascinating animals roam the open grasslands in small
104+
groups of about half a dozen.
105+
</p>
73106

74-
<p>Bulls sometimes battle one another by butting their long necks and heads. Such contests aren't usually dangerous and end when one animal submits and walks away.</p>
107+
<p>
108+
Bulls sometimes battle one another by butting their long necks and
109+
heads. Such contests aren't usually dangerous and end when one animal
110+
submits and walks away.
111+
</p>
75112

76-
<h3>Height and Size</h3>
113+
<h3>Height and Size</h3>
77114

78-
<p>Giraffes use their height to good advantage and browse on leaves and buds in treetops that few other animals can reach (acacias are a favorite). Even the giraffe's tongue is long! The 21-inch tongue helps them pluck tasty morsels from branches. Giraffes eat most of the time and, like cows, regurgitate food and chew it as cud. A giraffe eats hundreds of pounds of leaves each week and must travel miles to find enough food.</p>
79-
</section>
115+
<p>
116+
Giraffes use their height to good advantage and browse on leaves and
117+
buds in treetops that few other animals can reach (acacias are a
118+
favorite). Even the giraffe's tongue is long! The 21-inch tongue helps
119+
them pluck tasty morsels from branches. Giraffes eat most of the time
120+
and, like cows, regurgitate food and chew it as cud. A giraffe eats
121+
hundreds of pounds of leaves each week and must travel miles to find
122+
enough food.
123+
</p>
124+
</section>
80125

81-
<section class="news">
82-
<h2>News</h2>
83-
<div class="card">
84-
<time>2010-04-16</time>
85-
<h4>Helping wild turtles in Seychelles</h4>
86-
<a>Find out More</a>
87-
</div>
88-
<div class="card">
89-
<time>2010-04-12</time>
90-
<h4>Learning about the rainforest</h4>
91-
<a>Find out More</a>
92-
</div>
93-
</section>
126+
<section class="lion">
127+
<h2 id="lionp">lion</h2>
128+
<ul>
129+
<li>
130+
Lifespan: 10–14 years in the wild, up to 20 years in captivity
131+
</li>
132+
<li>
133+
Length: Males: 1.8–2.1 m (body) + 0.9–1.0 m (tail); Females: 1.6–1.8
134+
m (body) + 0.6–0.9 m (tail)
135+
</li>
136+
<li>
137+
Geographic Range: Sub-Saharan Africa; small populations in India
138+
(Asiatic lion).
139+
</li>
140+
<li>
141+
Hunting: Primarily by females; cooperative hunting increases success
142+
rate.
143+
</li>
144+
</ul>
145+
</section>
94146

95-
<section class="education">
96-
<div class="education-container">
97-
<h3>Learning resources for schools</h3>
98-
<p>Explore our activities, videos, and lesson plans to support a wide range of curriculum topics</p>
99-
<button>Find them here</button>
100-
</div>
101-
</section>
147+
<section class="news">
148+
<h2>News</h2>
149+
<div class="card">
150+
<time>2010-04-16</time>
151+
<h4>Helping wild turtles in Seychelles</h4>
152+
<a>Find out More</a>
153+
</div>
154+
<div class="card">
155+
<time>2010-04-12</time>
156+
<h4>Learning about the rainforest</h4>
157+
<a>Find out More</a>
158+
</div>
159+
<div class="card">
160+
<time>2025-12-14</time>
161+
<h4>Which big cat are you?</h4>
162+
<a>Find out More</a>
163+
</div>
164+
</section>
102165

103-
<section class="membership">
104-
<h2>Are there any benefits or discounts for members?</h2>
105-
<p>There are <strong>AMAZING</strong> benefits of becoming a member with Birmingham Zoo! Our members get special discounts in our shops, cafes, and unlimited entry</p>
106-
<button>Learn More</button>
107-
</section>
166+
<section class="education">
167+
<div class="education-container">
168+
<h3>Learning resources for schools</h3>
169+
<p>
170+
Explore our activities, videos, and lesson plans to support a wide
171+
range of curriculum topics
172+
</p>
173+
<button>Find them here</button>
174+
</div>
175+
</section>
108176

109-
<section class="programs">
110-
<h2>Programs</h2>
111-
<div class="card">
112-
<h4>Children and Family Programs</h4>
113-
<a>Find out More</a>
114-
</div>
115-
<div class="card">
116-
<h4>Adult Programs</h4>
117-
<a>Find out More</a>
118-
</div>
119-
<div class="card">
120-
<h4>Youth and young adults</h4>
121-
<a>Find out More</a>
122-
</div>
123-
<h3>Useful Links</h3>
124-
<p>
125-
</p>
126-
<a href="https://www.w3schools.com">w3schools.com</a>
127-
<a href="https://www.nationalgeographic.com/" target="_blank">National Geographic</a>
128-
<a href="http://www.wikipedia.org" target="_top">Wikipedia</a>
129-
</section>
177+
<section class="membership">
178+
<h2>Are there any benefits or discounts for members?</h2>
179+
<p>
180+
There are <strong>AMAZING</strong> benefits of becoming a member with
181+
Birmingham Zoo! Our members get special discounts in our shops, cafes,
182+
and unlimited entry
183+
</p>
184+
<button>Learn More</button>
185+
</section>
130186

131-
</main>
132-
<footer>
133-
<p>Open Monday-Friday 7am-4pm</p><address>1 Birmingham Road</address>
134-
</footer>
187+
<section class="programs">
188+
<h2>Programs</h2>
189+
<div class="card2">
190+
<h4>Children and Family Programs</h4>
191+
<a href="#" target="_blank">Find out More</a>
192+
</div>
193+
<div class="card2">
194+
<h4>Adult Programs</h4>
195+
<a href="#" target="_blank">Find out More</a>
196+
</div>
197+
<div class="card2">
198+
<h4>Youth and young adults</h4>
199+
<a href="#" target="_blank">Find out More</a>
200+
</div>
201+
<h3>Useful Links</h3>
202+
<p></p>
203+
<a href="https://www.w3schools.com">w3schools.com</a>
204+
<a href="https://www.nationalgeographic.com/" target="_blank"
205+
>National Geographic</a
206+
>
207+
<a href="http://www.wikipedia.org" target="_top">Wikipedia</a>
208+
</section>
209+
</main>
210+
<footer>
211+
<p>Open Monday-Friday 7am-4pm</p>
212+
<address>1 Birmingham Road</address>
213+
</footer>
135214
</body>
136-
</html>
215+
</html>

0 commit comments

Comments
 (0)