From 0c58f009a9f96160a2e6576ed1eb46482297d4ad Mon Sep 17 00:00:00 2001 From: AnnaClaytonWright Date: Mon, 12 Jul 2021 14:30:54 +0100 Subject: [PATCH 1/2] Completed changes --- zoo-css-challenge/index.html | 24 +++++++----- zoo-css-challenge/style.css | 73 +++++++++++++++++++++++++++++------- 2 files changed, 75 insertions(+), 22 deletions(-) diff --git a/zoo-css-challenge/index.html b/zoo-css-challenge/index.html index 0892fd58..79b2bc3d 100644 --- a/zoo-css-challenge/index.html +++ b/zoo-css-challenge/index.html @@ -1,4 +1,4 @@ - + @@ -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."

@@ -32,17 +33,18 @@

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

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. -
+
@@ -79,7 +81,11 @@

Height and Size

+

News

+

12/07/2021 + Which Cat are you? +

Helping wild turtles in Seychelles

@@ -133,4 +139,4 @@

Useful Links

Open Monday-Friday 7am-4pm

1 Birmingham Road
- \ No newline at end of file + \ No newline at end of file diff --git a/zoo-css-challenge/style.css b/zoo-css-challenge/style.css index b9007645..fd14fbfd 100644 --- a/zoo-css-challenge/style.css +++ b/zoo-css-challenge/style.css @@ -1,7 +1,9 @@ * { font-family: sans-serif; } - +#logo { + border: 0; +} header { background-color: #211a1d; color: #ffffff; @@ -49,10 +51,12 @@ h1 { h2 { font-size: 175%; + color:#ec4fb8; } h3 { font-size: 150%; + color:#F4743B; } button { @@ -62,10 +66,14 @@ button { padding: 10px 20px; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2); background-color: #372772; - border: 2px solid black; + border: 2px solid rgb(145, 91, 91); color: #fff; + font-size: larger; +} +button:hover { + background-color: #4CAF50; + color: white; } - footer { background-color: #211a1d; color: #ffffff; @@ -75,7 +83,10 @@ footer { justify-content: space-between; } -.introduction { +.introduction{ + background-color: #ffffff; + line-height: 1.5em; + word-spacing: 0.2; } #badge { @@ -85,13 +96,14 @@ footer { border-radius: 50%; display: inline-block; position: fixed; - bottom: 20px; + top: 20px; right: 20px; display: flex; justify-content: center; align-content: center; flex-direction: column; + transition: background-color 2s; } #badge:hover { @@ -105,11 +117,34 @@ footer { .image-container img { vertical-align: top; - border: 5px solid #747c92; + } .image-container img:first-of-type { - vertical-align: bottom; + vertical-align: top; + +} +#img1{ + border-color:olivedrab; + border-style: solid; + border-width: 5px; +} + +.news{ + text-align: center; + +} + + + #img2{ + border-color:blue; + border-style: solid; + border-width: 5px; + } +#img3{ + border-color:crimson; + border-style: solid; + border-width: 5px; } .tigers { @@ -118,8 +153,9 @@ footer { } .giraffe { - background-color: #465775; - color: #56e39f; + background-color: #483c46; + color: #BEEE62; + font-size:120%; } .giraffe h2 { @@ -160,12 +196,14 @@ footer { background-size: cover; background-position: center; padding: 100px 5%; + } .education-container { background-color: rgba(255, 255, 255, 0.75); padding: 50px; max-width: 400px; + border-radius: 40px; } .education-container h3, @@ -178,8 +216,9 @@ footer { .membership { text-align: center; background-color: #fffffc; + max-width: 700px; + margin-left: 250px; } - .membership h2 { color: #ff3f00; } @@ -189,7 +228,15 @@ footer { } /*Programs*/ - -.programs .card { - display: block; +.programs h2{ + text-align: center; } +.programs .card { + display: inline-block; + margin: 0; + } + + + + + From 723c6b5e8971dd17bbbbb74ac94574a522187a90 Mon Sep 17 00:00:00 2001 From: AnnaClaytonWright Date: Fri, 23 Jul 2021 09:32:26 +0100 Subject: [PATCH 2/2] completed flex --- zoo-css-challenge/README.md | 1 + zoo-css-challenge/index.html | 25 +++++++++++------- zoo-css-challenge/style.css | 51 +++++++++++++++++++++++++----------- 3 files changed, 52 insertions(+), 25 deletions(-) diff --git a/zoo-css-challenge/README.md b/zoo-css-challenge/README.md index ef30e833..de78ae8a 100644 --- a/zoo-css-challenge/README.md +++ b/zoo-css-challenge/README.md @@ -65,3 +65,4 @@ When a user hovers over the badge, add a transition so the change in colour is s ## 10) New section If you have time, add a new section for your favorite animal. + \ No newline at end of file diff --git a/zoo-css-challenge/index.html b/zoo-css-challenge/index.html index 79b2bc3d..e963559d 100644 --- a/zoo-css-challenge/index.html +++ b/zoo-css-challenge/index.html @@ -47,7 +47,7 @@

Bears

Grizzly Bear
@@ -80,12 +80,14 @@

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

12/07/2021 Which Cat are you?

+
+

Helping wild turtles in Seychelles

@@ -111,9 +113,10 @@

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
-

Programs

+

Children and Family Programs

Find out More @@ -126,17 +129,21 @@

Adult Programs

Youth and young adults

Find out More
-

Useful Links

-

-

+
+ + +

Useful Links

+
+
+
- \ No newline at end of file + \ No newline at end of file diff --git a/zoo-css-challenge/style.css b/zoo-css-challenge/style.css index fd14fbfd..ed24c2a5 100644 --- a/zoo-css-challenge/style.css +++ b/zoo-css-challenge/style.css @@ -50,8 +50,9 @@ h1 { } h2 { - font-size: 175%; - color:#ec4fb8; +font-size: 175%; +color:#ec4fb8; +text-align: center; } h3 { @@ -80,7 +81,8 @@ footer { width: 100%; padding: 20px; display: flex; - justify-content: space-between; + justify-content: space-evenly; + margin-top: 50px; } .introduction{ @@ -115,8 +117,10 @@ footer { font-size: 125%; } -.image-container img { - vertical-align: top; +.image-container { + display: flex; + justify-content: space-evenly; + } @@ -130,13 +134,16 @@ footer { border-width: 5px; } -.news{ - text-align: center; +#news{ + display: flex; + justify-content: space-around; } - - #img2{ +#news .card{ +display: flex; +} +#img2{ border-color:blue; border-style: solid; border-width: 5px; @@ -163,13 +170,15 @@ footer { } .card { - display: inline-block; + display: flex; + flex-direction: row; background-color: white; padding: 20px; - margin: 10px; + margin: 10px; width: 30%; border: 1px solid black; border-radius: 10px; + } .card h4 { @@ -227,14 +236,24 @@ footer { color: #ff7f11; } -/*Programs*/ -.programs h2{ +.programs{ + display: flex; +} +.programheading{ text-align: center; + font-size: 200%; + color:#ec4fb8; } + .programs .card { - display: inline-block; - margin: 0; - } + display: flex; + +} +#useful { +display: flex; +justify-content: space-around; + +}