From e7416d116e2863a78832633da67d2c8e3ea4367e Mon Sep 17 00:00:00 2001 From: Anas Fady Date: Sun, 14 Dec 2025 20:23:47 +0100 Subject: [PATCH] new update --- .vscode/settings.json | 3 + zoo-css-challenge/.vscode/settings.json | 3 + zoo-css-challenge/index.html | 315 +++++++++++++++--------- zoo-css-challenge/style.css | 57 ++++- 4 files changed, 252 insertions(+), 126 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 zoo-css-challenge/.vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..4c7ff40f --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} diff --git a/zoo-css-challenge/.vscode/settings.json b/zoo-css-challenge/.vscode/settings.json new file mode 100644 index 00000000..2f836120 --- /dev/null +++ b/zoo-css-challenge/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5503 +} diff --git a/zoo-css-challenge/index.html b/zoo-css-challenge/index.html index 0892fd58..f402d6af 100644 --- a/zoo-css-challenge/index.html +++ b/zoo-css-challenge/index.html @@ -1,136 +1,215 @@ - - - - -
- - -
-
-
-

Birmingham Zoo

-
+ + + + +
+ + +
+
+
+

Birmingham Zoo

+

+ The zoo is open every day of the year and features three major biomes: + the Tropic Zone, Temperate Territory, and the Polar Circle. From + tropical birds, to snow leopards, grizzly bears, and one of the + nation’s largest colonies of Antarctic penguins, there are animals to + enjoy in every season. +

+
-
-

Opening 2021!

-
+
+

Opening 2021!

+
-
-

Bears

-

Did you know that a bear's closest relative is the seal? Or that bears can smell over 2,000 times better than humans?

-
- Grizzly Bear - Grizzly Bear - Grizzly Bear -
-
+
+

Bears

+

+ Did you know that a bear's closest relative is the seal? Or that bears + can smell over 2,000 times better than humans? +

+
+ Grizzly Bear + Grizzly Bear + Grizzly Bear +
+
-
-

Tiger

-

Top 5 Tiger Facts

-
    -
  1. Tigers are the largest cat species in the world reaching up to 3.3 meters in length and weighing up to 670 pounds! -
  2. Tigers are easily recognizable with their dark vertical stripes and reddish/orange fur. -
  3. The Bengal tiger is the most common tiger. -
  4. Tigers live between 20-26 years in the wild. -
  5. Unlike most other cats, tigers are great swimmers and actually like the water. -
-
+
+

Tiger Facts

+
    +
  • + Tigers are the largest cat species in the world reaching up to 3.3 + meters in length and weighing up to 670 pounds! +
    • +
  • + Tigers are easily recognizable with their dark vertical stripes and + reddish/orange fur. +
    • +
  • The Bengal tiger is the most common tiger.
    • +
  • Tigers live between 20-26 years in the wild.
    • +
  • + Unlike most other cats, tigers are great swimmers and actually like + the water. +
    • +
+
-
-

Giraffe

+
+

Giraffe

-

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.

+

+ 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. +

-

Behavior

+

Behavior

-

Typically, these fascinating animals roam the open grasslands in small groups of about half a dozen.

+

+ Typically, these fascinating animals roam the open grasslands in small + groups of about half a dozen. +

-

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.

+

+ 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. +

-

Height and Size

+

Height and Size

-

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.

-
+

+ 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. +

+
-
-

News

-
- -

Helping wild turtles in Seychelles

- Find out More -
-
- -

Learning about the rainforest

- Find out More -
-
+
+

lion

+
    +
  • + Lifespan: 10–14 years in the wild, up to 20 years in captivity +
    • +
  • + Length: Males: 1.8–2.1 m (body) + 0.9–1.0 m (tail); Females: 1.6–1.8 + m (body) + 0.6–0.9 m (tail) +
    • +
  • + Geographic Range: Sub-Saharan Africa; small populations in India + (Asiatic lion). +
    • +
  • + Hunting: Primarily by females; cooperative hunting increases success + rate. +
    • +
+
-
-
-

Learning resources for schools

-

Explore our activities, videos, and lesson plans to support a wide range of curriculum topics

- -
-
+
+

News

+
+ +

Helping wild turtles in Seychelles

+ Find out More +
+
+ +

Learning about the rainforest

+ Find out More +
+
+ +

Which big cat are you?

+ Find out More +
+
-
-

Are there any benefits or discounts for members?

-

There are AMAZING benefits of becoming a member with Birmingham Zoo! Our members get special discounts in our shops, cafes, and unlimited entry

- -
+
+
+

Learning resources for schools

+

+ Explore our activities, videos, and lesson plans to support a wide + range of curriculum topics +

+ +
+
-
-

Programs

-
-

Children and Family Programs

- Find out More -
-
-

Adult Programs

- Find out More -
-
-

Youth and young adults

- Find out More -
-

Useful Links

-

-

- w3schools.com - National Geographic - Wikipedia -
+
+

Are there any benefits or discounts for members?

+

+ There are AMAZING benefits of becoming a member with + Birmingham Zoo! Our members get special discounts in our shops, cafes, + and unlimited entry +

+ +
-
-
-

Open Monday-Friday 7am-4pm

1 Birmingham Road
-
+
+

Programs

+
+

Children and Family Programs

+ Find out More +
+
+

Adult Programs

+ Find out More +
+
+

Youth and young adults

+ Find out More +
+

Useful Links

+

+ w3schools.com + National Geographic + Wikipedia +
+
+ - \ No newline at end of file + diff --git a/zoo-css-challenge/style.css b/zoo-css-challenge/style.css index b9007645..dc6cc6d8 100644 --- a/zoo-css-challenge/style.css +++ b/zoo-css-challenge/style.css @@ -7,6 +7,11 @@ header { color: #ffffff; width: 100%; padding: 20px; + +} + +p { + line-height: 20px; } nav { @@ -30,7 +35,7 @@ section { } img { - border: 5px solid #8075ff; + border: 5px solid } h1, @@ -76,6 +81,7 @@ footer { } .introduction { + background-color: white; } #badge { @@ -92,10 +98,14 @@ footer { justify-content: center; align-content: center; flex-direction: column; + position: fixed; + top: 20px; + right: 20px; } #badge:hover { - background-color: yellow; + background-color: green; + transition: 0.3s ease; } #badge p { @@ -104,8 +114,9 @@ footer { } .image-container img { - vertical-align: top; - border: 5px solid #747c92; + vertical-align: flex-start; + border: 5px solid ; + /* gap: 60px; */ } .image-container img:first-of-type { @@ -114,16 +125,27 @@ footer { .tigers { background-color: #0b3c49; - color: #f0e100; + color: black; } .giraffe { - background-color: #465775; + background-color: #483C46; color: #56e39f; + +} + +.lion { + background-color: #0b3c49; + color: white; } .giraffe h2 { - color: #ef6f6c; + color: #F4743B; +} + +#giraffep { + color: #BEEE62; + font-size: larger; } .card { @@ -139,7 +161,9 @@ footer { .card h4 { margin-bottom: 1em; } - +#ptiger { + color: white; +} .card a { text-decoration: underline; font-weight: bold; @@ -178,8 +202,11 @@ footer { .membership { text-align: center; background-color: #fffffc; + max-width: 700px; + margin: 0 auto; } + .membership h2 { color: #ff3f00; } @@ -193,3 +220,17 @@ footer { .programs .card { display: block; } + +.news { + text-align: center; +} + +.card2 { + display: inline-flex; + background-color: white; + padding: 10px; + margin: 5px; + width: 30%; + border: 1px solid black; + border-radius: 10px; +} \ No newline at end of file