From 0113f2e7a184634b3dae0ef43d6af04cf4a50b1f Mon Sep 17 00:00:00 2001 From: sSalem123 <84107441+sSalem123@users.noreply.github.com> Date: Mon, 31 May 2021 00:34:58 +0100 Subject: [PATCH 1/3] I add same to the code --- zoo-css-challenge/index.html | 19 +++++++++++++----- zoo-css-challenge/style.css | 37 +++++++++++++++++++++++++++--------- 2 files changed, 42 insertions(+), 14 deletions(-) diff --git a/zoo-css-challenge/index.html b/zoo-css-challenge/index.html index 0892fd58..85957cd3 100644 --- a/zoo-css-challenge/index.html +++ b/zoo-css-challenge/index.html @@ -21,6 +21,11 @@

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.’ + Most of the text on the page is very + close together. Increase the amount of space of the text so that there's more breathing space. +

@@ -51,15 +56,14 @@

Bears

-

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. -
+
@@ -88,7 +92,12 @@

Helping wild turtles in Seychelles

Learning about the rainforest

- Find out More + 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 b9007645..668798d8 100644 --- a/zoo-css-challenge/style.css +++ b/zoo-css-challenge/style.css @@ -28,11 +28,11 @@ section { padding: 5%; background-color: #f8f0fb; } - +/* img { border: 5px solid #8075ff; } - +*/ h1, h2, h3, @@ -76,8 +76,10 @@ footer { } .introduction { + background-color: #fff } + #badge { height: 120px; width: 120px; @@ -109,23 +111,35 @@ footer { } .image-container img:first-of-type { - vertical-align: bottom; + vertical-align: top; + border-color:#56e39f; +} +.image-container img:last-of-type{ +border-color:#ff3f00 } .tigers { - background-color: #0b3c49; + background-color: #45490bef; color: #f0e100; } .giraffe { - background-color: #465775; + background-color: #483C46; color: #56e39f; } .giraffe h2 { - color: #ef6f6c; + color: #F4743B; +} +.giraffe p { + color: #BEEE62; +} +.giraffe p:first-child{ +font-size: 10px; +} +.news h2 { + text-align: center; } - .card { display: inline-block; background-color: white; @@ -152,7 +166,9 @@ footer { } /*Education*/ - +button:hover { + color: green; +} .education { height: 500px; background-image: url("https://source.unsplash.com/1200x900/?tiger"); @@ -174,7 +190,10 @@ footer { } /*Membership*/ - +.membership p:first-child { + width: 0px; + margin: 1rem 1rem 0.5rem 1.5rem; +} .membership { text-align: center; background-color: #fffffc; From b47463c22fd679761680a9c409854c939a91be35 Mon Sep 17 00:00:00 2001 From: sSalem123 <84107441+sSalem123@users.noreply.github.com> Date: Mon, 31 May 2021 18:32:44 +0100 Subject: [PATCH 2/3] I added some style to this repo --- zoo-css-challenge/style.css | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/zoo-css-challenge/style.css b/zoo-css-challenge/style.css index 668798d8..d84c5861 100644 --- a/zoo-css-challenge/style.css +++ b/zoo-css-challenge/style.css @@ -135,7 +135,7 @@ border-color:#ff3f00 color: #BEEE62; } .giraffe p:first-child{ -font-size: 10px; +font-size: 20px; } .news h2 { text-align: center; @@ -187,11 +187,18 @@ button:hover { .education-container h3, .education-container p { margin-bottom: 1em; + border-radius: 5px; +} +.education-container { + border-radius: 10px; +} +button:hover, +button:focus{ +background-color: #F4743B; } - /*Membership*/ .membership p:first-child { - width: 0px; + width: 700px; margin: 1rem 1rem 0.5rem 1.5rem; } .membership { From 5c6414227c2c15281b168cf612814c00ac539914 Mon Sep 17 00:00:00 2001 From: sSalem123 <84107441+sSalem123@users.noreply.github.com> Date: Tue, 8 Jun 2021 11:47:14 +0100 Subject: [PATCH 3/3] I finished my home work --- .vscode/launch.json | 0 zoo-css-challenge/index.html | 278 +++++++++++++++++------------------ zoo-css-challenge/style.css | 233 ++++++++++++++++------------- 3 files changed, 266 insertions(+), 245 deletions(-) create mode 100644 .vscode/launch.json diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 00000000..e69de29b diff --git a/zoo-css-challenge/index.html b/zoo-css-challenge/index.html index 85957cd3..c1633646 100644 --- a/zoo-css-challenge/index.html +++ b/zoo-css-challenge/index.html @@ -1,145 +1,139 @@ - - - - -
- - -
-
-
-

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.’ - Most of the text on the page is very - close together. Increase the amount of space of the text so that there's more breathing space. -

-
- -
-

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

- -

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

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

- -
-
- -
-

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

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.’ Most of the text on the page is very close together. Increase the amount of space of the text so that there's more breathing space. +

+
+ +
+

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

panda storey

+

e great camouflage for their environment Their eyes are different to normal bears Cubs are well protected in their first month Courageous cubs!

+

A helping handThey spend a lot of their day eating Bamboo is critical to their diet.

+ panda +
+ +
+

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.

+ +

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

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

+ +
+
+ +
+

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 d84c5861..a3401c06 100644 --- a/zoo-css-challenge/style.css +++ b/zoo-css-challenge/style.css @@ -1,221 +1,248 @@ * { - font-family: sans-serif; + font-family: sans-serif; } header { - background-color: #211a1d; - color: #ffffff; - width: 100%; - padding: 20px; + background-color: #211a1d; + color: #ffffff; + width: 100%; + padding: 20px; } nav { - display: inline-block; - width: 100%; + display: inline-block; + width: 100%; } header ul { - margin: 20px 0 0 0; - padding: 0; + margin: 20px 0 0 0; + padding: 0; } header ul li { - display: inline-block; - margin-right: 10px; + display: inline-block; + margin-right: 10px; } section { - padding: 5%; - background-color: #f8f0fb; + padding: 5%; + background-color: #f8f0fb; } + + /* img { border: 5px solid #8075ff; } */ + h1, h2, h3, h4, h5 { - /*Purple*/ - color: #6320ee; - margin-bottom: 1em; + /*Purple*/ + color: #6320ee; + margin-bottom: 1em; } h1 { - font-size: 250%; + font-size: 250%; } h2 { - font-size: 175%; + font-size: 175%; } h3 { - font-size: 150%; + font-size: 150%; } button { - display: inline-block; - border-radius: 3px; - 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; + display: inline-block; + border-radius: 3px; + 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; } footer { - background-color: #211a1d; - color: #ffffff; - width: 100%; - padding: 20px; - display: flex; - justify-content: space-between; + background-color: #211a1d; + color: #ffffff; + width: 100%; + padding: 20px; + display: flex; + justify-content: space-between; } .introduction { - background-color: #fff + background-color: #fff } - #badge { - height: 120px; - width: 120px; - background-color: #bbb; - border-radius: 50%; - display: inline-block; - position: fixed; - bottom: 20px; - right: 20px; - - display: flex; - justify-content: center; - align-content: center; - flex-direction: column; + height: 120px; + width: 120px; + background-color: #bbb; + border-radius: 50%; + display: inline-block; + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + justify-content: center; + align-content: center; + flex-direction: column; } #badge:hover { - background-color: yellow; + background-color: yellow; } #badge p { - text-align: center; - font-size: 125%; + text-align: center; + font-size: 125%; } .image-container img { - vertical-align: top; - border: 5px solid #747c92; + vertical-align: top; + border: 5px solid #747c92; } .image-container img:first-of-type { - vertical-align: top; - border-color:#56e39f; + vertical-align: top; + border-color: #56e39f; } -.image-container img:last-of-type{ -border-color:#ff3f00 + +.image-container img:last-of-type { + border-color: #ff3f00 } .tigers { - background-color: #45490bef; - color: #f0e100; + background-color: #45490bef; + color: #f0e100; } .giraffe { - background-color: #483C46; - color: #56e39f; + background-color: #483C46; + color: #56e39f; } .giraffe h2 { - color: #F4743B; + color: #F4743B; } + .giraffe p { - color: #BEEE62; + color: #BEEE62; } -.giraffe p:first-child{ -font-size: 20px; + +.giraffe p:first-child { + font-size: 20px; } + .news h2 { - text-align: center; + text-align: center; } + .card { - display: inline-block; - background-color: white; - padding: 20px; - margin: 10px; - width: 30%; - border: 1px solid black; - border-radius: 10px; + display: inline-block; + background-color: white; + padding: 20px; + margin: 10px; + width: 30%; + border: 1px solid black; + border-radius: 10px; } .card h4 { - margin-bottom: 1em; + margin-bottom: 1em; } .card a { - text-decoration: underline; - font-weight: bold; + text-decoration: underline; + font-weight: bold; } .card time { - opacity: 0.5; - display: inline-block; - margin-bottom: 10px; + opacity: 0.5; + display: inline-block; + margin-bottom: 10px; } + /*Education*/ + button:hover { - color: green; + color: green; } + .education { - height: 500px; - background-image: url("https://source.unsplash.com/1200x900/?tiger"); - background-repeat: no-repeat; - background-size: cover; - background-position: center; - padding: 100px 5%; + height: 500px; + background-image: url("https://source.unsplash.com/1200x900/?tiger"); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + padding: 100px 5%; } .education-container { - background-color: rgba(255, 255, 255, 0.75); - padding: 50px; - max-width: 400px; + background-color: rgba(255, 255, 255, 0.75); + padding: 50px; + max-width: 400px; } .education-container h3, .education-container p { - margin-bottom: 1em; - border-radius: 5px; + margin-bottom: 1em; + border-radius: 5px; } + .education-container { - border-radius: 10px; + border-radius: 10px; } + button:hover, -button:focus{ -background-color: #F4743B; +button:focus { + background-color: #F4743B; } + + /*Membership*/ -.membership p:first-child { - width: 700px; - margin: 1rem 1rem 0.5rem 1.5rem; + +.membership p:first-child { + width: 700px; + margin: 1rem 1rem 0.5rem 1.5rem; } + .membership { - text-align: center; - background-color: #fffffc; + text-align: center; + background-color: #fffffc; } .membership h2 { - color: #ff3f00; + color: #ff3f00; } .membership strong { - color: #ff7f11; + color: #ff7f11; } + /*Programs*/ .programs .card { - display: block; -} + display: block; + color: blue; +} + +.programs { + width: 97%; + height: auto; + padding: 10px; + display: flex; + flex-direction: row; + align-content: space-around; + justify-content: flex-start; +} \ No newline at end of file