diff --git a/zoo-css-challenge/index.html b/zoo-css-challenge/index.html index 0892fd58..86839219 100644 --- a/zoo-css-challenge/index.html +++ b/zoo-css-challenge/index.html @@ -1,85 +1,86 @@ - - - - -
- - -
-
-
-

Birmingham Zoo

-
- -
-

Opening 2021!

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

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!

+

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?

+

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

-

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

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

-

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

+ +
+ +

Which big cat are you?

+ Find out More +

Helping wild turtles in Seychelles

@@ -102,35 +103,69 @@

Learning resources for schools

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

+

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

Children and Family Programs

+ Find out More +
+
+

Adult Programs

+ Find out More +
+
+

Youth and young adults

+ Find out More +

Useful Links

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

Visit Zoo Aquarium of Madrid

+

Home to over 6,000 animals from across the globe, the Zoo Aquarium de Madrid offers an + unforgettable experience for visitors of all ages. Discover the wonders of wildlife through our + diverse habitats, engaging interactive programs, and spectacular animal presentations.

+
+
+

Highlights of Your Visit:

+
    +
  • Global Wildlife: Encounter a vast collection of species from every continent in carefully + designed ecosystems.
    • +
  • Education & Interaction: Participate in immersive educational programs and talks designed to + inspire conservation awareness.
    • +
  • Spectacular Shows: Witness breathtaking demonstrations of animal behavior and agility.
    • +
  • Conservation Mission: Learn about our active role in global species preservation and + protection efforts.
    • +
  • Perfect for All: An ideal destination for family fun, school trips, and wildlife + enthusiasts.
    • +
+
+
+ +
+
+
+ +
+ + + \ No newline at end of file diff --git a/zoo-css-challenge/style.css b/zoo-css-challenge/style.css index b9007645..3a39a8ee 100644 --- a/zoo-css-challenge/style.css +++ b/zoo-css-challenge/style.css @@ -1,5 +1,8 @@ +@import url("https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap"); * { font-family: sans-serif; + letter-spacing: 1px; + line-height: 1.6; } header { @@ -28,11 +31,11 @@ section { padding: 5%; background-color: #f8f0fb; } - +/* img { border: 5px solid #8075ff; } - +*/ h1, h2, h3, @@ -76,6 +79,8 @@ footer { } .introduction { + background-color: #ffffff; + text-align: center; } #badge { @@ -85,17 +90,21 @@ footer { border-radius: 50%; display: inline-block; position: fixed; - bottom: 20px; + top: 20px; right: 20px; + z-index: 1000; display: flex; justify-content: center; align-content: center; flex-direction: column; + + transition: all 0.3s ease; } #badge:hover { background-color: yellow; + cursor: pointer; } #badge p { @@ -109,7 +118,12 @@ footer { } .image-container img:first-of-type { - vertical-align: bottom; + /* vertical-align: bottom; */ + border-color: #56e39f; +} + +.image-container img:last-of-type { + border-color: #9c208c; } .tigers { @@ -117,21 +131,47 @@ footer { color: #f0e100; } +.tigers h2 { + color: #E6E6FA; + text-transform: uppercase; + letter-spacing: 1px; +} + .giraffe { - background-color: #465775; - color: #56e39f; + background-color: #483c46; + color: #beee62; +} + +.giraffe h2, +.giraffe h3 { + color: #f4743b; } -.giraffe h2 { - color: #ef6f6c; +.giraffe p:first-of-type { + font-size: 1.3rem; +} + +/*News*/ +.news { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 20px; +} + +.news h2 { + width: 100%; + text-align: center; + margin-bottom: 20px; } .card { - display: inline-block; + /*display: inline-block;*/ + flex: 1; + min-width: 250px; + max-width: 30%; background-color: white; padding: 20px; - margin: 10px; - width: 30%; border: 1px solid black; border-radius: 10px; } @@ -166,6 +206,29 @@ footer { background-color: rgba(255, 255, 255, 0.75); padding: 50px; max-width: 400px; + border-radius: 16px; +} + +.education-container button { + display: inline-block; + border-radius: 5px; + cursor: pointer; + padding: 10px 20px; + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2); + background-color: #372772; + border: none; + color: #fff; + font-size: 1.2em; +} + +.education-container button:hover { + background-color: #6320ee; +} + +.education-container button:active { + box-shadow: none; + transform: translateY(2px); + background-color: #9c208c; } .education-container h3, @@ -184,6 +247,13 @@ footer { color: #ff3f00; } +.membership p { + max-width: 700px; + margin-left: auto; + margin-right: auto; + margin-bottom: 20px; +} + .membership strong { color: #ff7f11; } @@ -192,4 +262,41 @@ footer { .programs .card { display: block; + flex: 1; + min-width: 200px; + max-width: 300px; +} + +.programs-container { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.zoo-visit { + background-color: #e0f7fa; +} +.zoo-visit h2, +.zoo-visit h3 { + color: #00796b; +} + +.container-zoo-visit { + margin-top: 60px; + display: flex; + width: 100%; +} + +.zoo-visit h2, +.zoo-visit p { + text-align: center; +} + +.zoo-list li { + font-family: "Poppins", sans-serif; + text-align: justify; + font-style: italic; + font-weight: 200; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); + margin: 10px 40px 0 0; }