From 289db33847a0f7a2df4449d72405bf4f878d2973 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benja=20Mu=C3=B1oz?= Date: Sun, 14 Dec 2025 20:22:36 +0100 Subject: [PATCH 1/4] Changes --- zoo-css-challenge/README.md | 4 +- zoo-css-challenge/index.html | 289 ++++++++++++++++++++--------------- zoo-css-challenge/style.css | 41 +++-- 3 files changed, 197 insertions(+), 137 deletions(-) diff --git a/zoo-css-challenge/README.md b/zoo-css-challenge/README.md index ef30e833..2b514a57 100644 --- a/zoo-css-challenge/README.md +++ b/zoo-css-challenge/README.md @@ -2,13 +2,13 @@ You have been hired by a zoo to build a website. -I’ve done the first part but it is full of mistakes. It’s your job to fix them. The client has sent over a list of alterations and recommendations that they want to fix the site with. +I’ve done the first part but it is full of mistakes. It’s your job to fix them. The client has sent over a list of alterations and recommendations that they want to fix the site with. You are encouraged to use Google to help you find the answers to these problems. ## 1) Introduction -First of all, we don’t want the logo to have a purple border. The logo has an ID of logo, make sure this has no border. +First of all, we don’t want the logo to have a purple border. The logo has an ID of logo, make sure this has no border. CHECK The first section has a class name of ‘introduction’. Give this section a white background. Add a paragraph to this section with the following text: diff --git a/zoo-css-challenge/index.html b/zoo-css-challenge/index.html index 0892fd58..ca7ecfdd 100644 --- a/zoo-css-challenge/index.html +++ b/zoo-css-challenge/index.html @@ -1,136 +1,187 @@ - - - - -
- - -
-
-
-

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

+

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. +
  2. + Tigers are easily recognizable with their dark vertical stripes and + reddish/orange fur. +
    3. +
  3. The Bengal tiger is the most common tiger.
    4. +
  4. Tigers live between 20-26 years in the wild.
    5. +
  5. + Unlike most other cats, tigers are great swimmers and actually like + the water. +
    6. +
+
-
-

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

News

+
+ +

Helping wild turtles in Seychelles

+ Find out More +
+
+ +

Learning about the rainforest

+ Find out More +
+
-
-
-

Learning resources for schools

-

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

- -
-
+
+
+

Learning resources for schools

+

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

+ +
+
-
-

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

- -
+
+

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 +

+ +
-
-

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

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..421a15fc 100644 --- a/zoo-css-challenge/style.css +++ b/zoo-css-challenge/style.css @@ -2,6 +2,10 @@ font-family: sans-serif; } +p, li { + line-height: 35px; +} + header { background-color: #211a1d; color: #ffffff; @@ -29,10 +33,6 @@ section { background-color: #f8f0fb; } -img { - border: 5px solid #8075ff; -} - h1, h2, h3, @@ -76,6 +76,7 @@ footer { } .introduction { + background-color: white; } #badge { @@ -87,7 +88,7 @@ footer { position: fixed; bottom: 20px; right: 20px; - + top: 20px; display: flex; justify-content: center; align-content: center; @@ -96,6 +97,7 @@ footer { #badge:hover { background-color: yellow; + transition: ; } #badge p { @@ -104,30 +106,35 @@ footer { } .image-container img { - vertical-align: top; - border: 5px solid #747c92; + vertical-align: flex-start; + border: 5px solid #8a94b1; } -.image-container img:first-of-type { +/*.image-container img:first-of-type { vertical-align: bottom; -} +}*/ .tigers { - background-color: #0b3c49; + background-color: #0a313c; color: #f0e100; + } .giraffe { - background-color: #465775; + background-color:#483C46; color: #56e39f; } -.giraffe h2 { - color: #ef6f6c; +.giraffe h2 h3 { + color:#F4743B; +} + +.pgiraffe { + color: #BEEE62; } .card { - display: inline-block; + display: inline-flexbox; background-color: white; padding: 20px; margin: 10px; @@ -177,7 +184,9 @@ footer { .membership { text-align: center; + max-width: 700px; background-color: #fffffc; + margin: auto; } .membership h2 { @@ -190,6 +199,6 @@ footer { /*Programs*/ -.programs .card { - display: block; +.programs { + display:block; } From 428063c6e781e277b4f6de238cac2355e86df544 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benja=20Mu=C3=B1oz?= Date: Sun, 14 Dec 2025 20:23:31 +0100 Subject: [PATCH 2/4] Second Try --- zoo-css-challenge/index.html | 51 ++++++++++++++++++++++++++++-------- 1 file changed, 40 insertions(+), 11 deletions(-) diff --git a/zoo-css-challenge/index.html b/zoo-css-challenge/index.html index ca7ecfdd..2d428eea 100644 --- a/zoo-css-challenge/index.html +++ b/zoo-css-challenge/index.html @@ -47,25 +47,30 @@

Bears

alt="Grizzly Bear" width="200" height="300" + style="border-color: green" /> + Grizzly Bear + Grizzly Bear
-

Tiger

-

Top 5 Tiger Facts

+

Tiger Facts

+
  1. Tigers are the largest cat species in the world reaching up to 3.3 @@ -87,7 +92,7 @@

    Top 5 Tiger Facts

    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 @@ -97,12 +102,12 @@

    Giraffe

    Behavior

    -

    +

    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. @@ -110,7 +115,7 @@

    Behavior

    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 @@ -121,6 +126,30 @@

    Height and Size

    +
    +

    Lion

    + +

    + Lions are large carnivorous mammals known as the "kings of the + jungle," although they mainly live in grasslands and savannas. They + are social animals that live in groups called prides, which usually + consist of related females, their cubs, and a few adult males. Lions + are powerful hunters and play a crucial role in maintaining the + balance of their ecosystems. +

    + +
      +
    • Lions can weigh up to 250 kilograms (550 pounds).
      • +
    • They are found mainly in sub-Saharan Africa.
      • +
    • Male lions are recognized by their large manes.
      • +
    • Lions can sleep up to 20 hours a day.
      • +
    • + They communicate using roars that can be heard from several + kilometers away. +
      • +
    +
    +

    News

    @@ -160,19 +189,19 @@

    Are there any benefits or discounts for members?

    Programs

    Children and Family Programs

    - Find out More + Find out More

    Adult Programs

    - Find out More + Find out More

    Youth and young adults

    - Find out More + Find out More

    Useful Links

    - w3schools.com + w3schools.com National Geographic From 8b527f7ca4a03d93a7e60ef337462896d1465cef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benja=20Mu=C3=B1oz?= Date: Sun, 14 Dec 2025 22:43:20 +0100 Subject: [PATCH 3/4] Final Try --- zoo-css-challenge/index.html | 25 +++++++++++------- zoo-css-challenge/style.css | 51 ++++++++++++++++++++++++------------ 2 files changed, 49 insertions(+), 27 deletions(-) diff --git a/zoo-css-challenge/index.html b/zoo-css-challenge/index.html index 2d428eea..de3d9f98 100644 --- a/zoo-css-challenge/index.html +++ b/zoo-css-challenge/index.html @@ -47,7 +47,7 @@

    Bears

    alt="Grizzly Bear" width="200" height="300" - style="border-color: green" + style="border-color: #094842" /> Bears alt="Grizzly Bear" width="200" height="300" - style="border-color: rgb(179, 231, 137)" + style="border-color: #03645a" />
    -

    Tiger Facts

    +

    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! @@ -86,11 +86,11 @@

        Tiger Facts

        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 @@ -100,7 +100,7 @@

    Giraffe

    miles an hour over longer distances.

    -

    Behavior

    +

    Behavior

    Typically, these fascinating animals roam the open grasslands in small @@ -113,7 +113,7 @@

    Behavior

    submits and walks away.

    -

    Height and Size

    +

    Height and Size

    Giraffes use their height to good advantage and browse on leaves and @@ -126,8 +126,8 @@

    Height and Size

    -
    -

    Lion

    +
    +

    Lion

    Lions are large carnivorous mammals known as the "kings of the @@ -162,6 +162,11 @@

    Helping wild turtles in Seychelles

    Learning about the rainforest

    Find out More +
    + +

    Which big cat are you?

    + Find out More +
    diff --git a/zoo-css-challenge/style.css b/zoo-css-challenge/style.css index 421a15fc..5dba739b 100644 --- a/zoo-css-challenge/style.css +++ b/zoo-css-challenge/style.css @@ -33,6 +33,11 @@ section { background-color: #f8f0fb; } +#dakt { + color: #81DFE4; +} + + h1, h2, h3, @@ -57,13 +62,14 @@ h3 { button { display: inline-block; - border-radius: 3px; + border-radius: 5px; cursor: pointer; - padding: 10px 20px; + padding: 10px 40px; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2); background-color: #372772; border: 2px solid black; color: #fff; + } footer { @@ -82,7 +88,7 @@ footer { #badge { height: 120px; width: 120px; - background-color: #bbb; + background-color: #51b8e88c; border-radius: 50%; display: inline-block; position: fixed; @@ -93,11 +99,15 @@ footer { justify-content: center; align-content: center; flex-direction: column; + color: #0d101195; + transition: 3s; } #badge:hover { - background-color: yellow; - transition: ; + background-color: #e5650a; + height: 150px; + width: 150px; + color: #eeeeee; } #badge p { @@ -105,19 +115,14 @@ footer { font-size: 125%; } -.image-container img { - vertical-align: flex-start; - border: 5px solid #8a94b1; +img { + vertical-align: top; + border: 5px solid; } -/*.image-container img:first-of-type { - vertical-align: bottom; -}*/ - .tigers { background-color: #0a313c; - color: #f0e100; - + color:#BEEE62; } .giraffe { @@ -125,7 +130,7 @@ footer { color: #56e39f; } -.giraffe h2 h3 { +#tg1, #tg2, #tg3 { color:#F4743B; } @@ -133,12 +138,24 @@ footer { color: #BEEE62; } +.lion{ + background-color: #0a313c; + color:#BEEE62; +} + +#liont{ + color: #81DFE4; +} +.news{ + text-align: center; +} + .card { - display: inline-flexbox; + display: inline-block; background-color: white; padding: 20px; margin: 10px; - width: 30%; + width: 25%; border: 1px solid black; border-radius: 10px; } From c4b7ce8d6f25189e93b720afdccf9d68bd48ebb4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benja=20Mu=C3=B1oz?= Date: Sun, 14 Dec 2025 22:46:10 +0100 Subject: [PATCH 4/4] Now Yes --- zoo-css-challenge/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/zoo-css-challenge/index.html b/zoo-css-challenge/index.html index de3d9f98..a03dc6b2 100644 --- a/zoo-css-challenge/index.html +++ b/zoo-css-challenge/index.html @@ -1,6 +1,7 @@ + ZOO121