diff --git a/zoo-css-challenge/index.html b/zoo-css-challenge/index.html index 0892fd58..d6a9b96f 100644 --- a/zoo-css-challenge/index.html +++ b/zoo-css-challenge/index.html @@ -21,6 +21,7 @@

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

@@ -34,32 +35,31 @@

Bears

Grizzly Bear Grizzly Bear Grizzly Bear
-

Tiger

-

Top 5 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!
    • 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. -
+
@@ -78,8 +78,9 @@

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

+
+

News

+

Helping wild turtles in Seychelles

@@ -90,12 +91,19 @@

Helping wild turtles in Seychelles

Learning about the rainforest

Find out More
+
+ +

Which big cat are you?

+ Find out More +
+
+

Learning resources for schools

-

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

+

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

@@ -108,6 +116,7 @@

Are there any benefits or discounts for members?

Programs

+

Children and Family Programs

Find out More @@ -120,12 +129,13 @@

Adult Programs

Youth and young adults

Find out More
+

Useful Links

- w3schools.com + w3schools.com National Geographic - Wikipedia + Wikipedia
diff --git a/zoo-css-challenge/style.css b/zoo-css-challenge/style.css index b9007645..bbe443fe 100644 --- a/zoo-css-challenge/style.css +++ b/zoo-css-challenge/style.css @@ -8,7 +8,9 @@ header { width: 100%; padding: 20px; } - + #logo { + border: none; +} nav { display: inline-block; width: 100%; @@ -28,18 +30,13 @@ section { padding: 5%; background-color: #f8f0fb; } - -img { - border: 5px solid #8075ff; -} - h1, h2, h3, h4, h5 { /*Purple*/ - color: #6320ee; + color: #9d88ce; margin-bottom: 1em; } @@ -57,13 +54,17 @@ h3 { button { display: inline-block; - border-radius: 3px; + border-radius: 5px; cursor: pointer; padding: 10px 20px; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2); background-color: #372772; border: 2px solid black; color: #fff; + +} +button:hover { +background-color: #ff7f11; } footer { @@ -76,6 +77,7 @@ footer { } .introduction { + background-color:#f8f0fb } #badge { @@ -85,9 +87,8 @@ footer { border-radius: 50%; display: inline-block; position: fixed; - bottom: 20px; - right: 20px; - + top: 20px; + right: 20px; display: flex; justify-content: center; align-content: center; @@ -96,20 +97,29 @@ footer { #badge:hover { background-color: yellow; + transition: 4s; } #badge p { text-align: center; font-size: 125%; } - .image-container img { vertical-align: top; - border: 5px solid #747c92; } +.image-container img:nth-child(1) { + border: 5px solid royalblue; +} +.image-container img:nth-child(2) { + border: 5px solid greenyellow; +} +.image-container img:nth-child(3) { + border: 5px solid palevioletred; +} +#img1 .image-container img:first-of-type { - vertical-align: bottom; + vertical-align: bottoms; } .tigers { @@ -118,22 +128,32 @@ footer { } .giraffe { - background-color: #465775; - color: #56e39f; + background-color: #483C46; + color:#BEEE62 } -.giraffe h2 { - color: #ef6f6c; +.giraffe h2 ,h3{ + color:#F4743B; +} +.giraffe p:first-of-type { + font-size: 20px; +} + +.news h2 { + text-align: center; +} +.newcards { + display: flex; } .card { - display: inline-block; + display: block; background-color: white; padding: 20px; margin: 10px; width: 30%; border: 1px solid black; - border-radius: 10px; + border-radius: 13px; } .card h4 { @@ -178,6 +198,7 @@ footer { .membership { text-align: center; background-color: #fffffc; + margin: auto; } .membership h2 { @@ -187,9 +208,25 @@ footer { .membership strong { color: #ff7f11; } +.membership p { + width: 700px; +} /*Programs*/ +.cards { + display: flex; + +} .programs .card { display: block; + } + +p { + text-indent: 25px; + letter-spacing: 2px; + word-spacing: 4px; + + +} \ No newline at end of file