diff --git a/zoo-css-challenge/index.html b/zoo-css-challenge/index.html index 0892fd58..f96e5eb4 100644 --- a/zoo-css-challenge/index.html +++ b/zoo-css-challenge/index.html @@ -1,136 +1,245 @@ - - - - -
- - -
-
-
-

Birmingham Zoo

-
- -
-

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

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

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.

- -

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.

- -

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.

-
- -
-

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

- -
-
- -
-

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

Opening 2021!

+
+ + +
+
+
+

Birmingham Zoo

+
+ +
+

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

Panda

+

+ The giant panda, also known as the panda bear or simply panda, is a + bear species endemic to China. It is characterised by its white coat + with black patches around the eyes, ears, legs and shoulders. Its body + is rotund; adult individuals weigh 100 to 115 kg and are typically 1.2 + to 1.9 m long. +

+

🐼 Here are some interesting facts about Giant Pandas:

+ + +
+ Giant Panda + Giant Panda + Giant Panda +
+
+ +
+

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

+ +

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

+ +

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

+
+ +
+

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 +

+ +
+
+ +
+

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 +
+
+ - \ No newline at end of file + diff --git a/zoo-css-challenge/style.css b/zoo-css-challenge/style.css index b9007645..205f5fcc 100644 --- a/zoo-css-challenge/style.css +++ b/zoo-css-challenge/style.css @@ -7,6 +7,7 @@ header { color: #ffffff; width: 100%; padding: 20px; + } nav { @@ -66,6 +67,7 @@ button { color: #fff; } + footer { background-color: #211a1d; color: #ffffff; @@ -84,14 +86,19 @@ footer { background-color: #bbb; border-radius: 50%; display: inline-block; - position: fixed; - bottom: 20px; - right: 20px; + position: absolute; + margin-left: auto; + top: 10px; + right: 10px; + display: flex; justify-content: center; align-content: center; flex-direction: column; + + /* add smooth to the changing color when a user hovers over the badge */ + transition: background-color 0.3s ease-in-out; } #badge:hover { @@ -111,6 +118,10 @@ footer { .image-container img:first-of-type { vertical-align: bottom; } +/* edit align of the third image with panda */ +#third-panda-image { + vertical-align: bottom; +} .tigers { background-color: #0b3c49; @@ -166,6 +177,7 @@ footer { background-color: rgba(255, 255, 255, 0.75); padding: 50px; max-width: 400px; + border-radius: 10px; } .education-container h3, @@ -173,6 +185,15 @@ footer { margin-bottom: 1em; } +/* change the font-size of a button in education section */ +.education-container button { + font-size: 150%; +} + +.education-container button:hover { + background-color: #6742ee; +} + /*Membership*/ .membership { @@ -188,8 +209,19 @@ footer { color: #ff7f11; } +/* Center the paragraph in the membership section */ +.membership p { + max-width: 700px; + margin-left: auto; + margin-right: auto; +} + /*Programs*/ +/* commenting out to fix the layout issue with cards stacking vertically*/ + +/* .programs .card { display: block; } +*/