diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 4344b144..5c71cd38 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -14,14 +14,46 @@

Product Pick

- - + + +
+
+ + +
+
+
+ + + + + + +
+
+ + +
+
+ + +
+ +
+ +
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e69de29b..693ad084 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -0,0 +1,18 @@ +html { + background-color: darkgray; + text-align: center; +} +h1{ + text-align: center; + border: 1px solid maroon; + font-weight: normal; + background-color: maroon; + border-radius: 5px; +} +h2{ + text-align: center; + border: 1px solid maroon; + font-weight: small; + background-color: maroon; + border-radius: 5px; +} \ No newline at end of file diff --git a/zoo-css-challenge/index.html b/zoo-css-challenge/index.html index 0892fd58..e484496c 100644 --- a/zoo-css-challenge/index.html +++ b/zoo-css-challenge/index.html @@ -1,136 +1,194 @@ - - - - -
- - -
-
-
-

Birmingham Zoo

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

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!

-
+
+

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

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

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

+
+

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

+

Behavior

-

Typically, these fascinating animals roam the open grasslands in small groups of about half a dozen.

+

+ 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

+

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

-
- -

Helping wild turtles in Seychelles

- Find out More -
-
- -

Learning about the rainforest

- Find out More -
-
+
+

News

+
+ +

Helping wild turtles in Seychelles

+ Find out More +
+
+ +

Learning about the rainforest

+ Find out More +
+
+ +

What 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

- -
-
+
+
+

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

- -
+
+

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

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..4b2799f8 100644 --- a/zoo-css-challenge/style.css +++ b/zoo-css-challenge/style.css @@ -30,7 +30,8 @@ section { } img { - border: 5px solid #8075ff; + display: flex; + vertical-align: top; } h1, @@ -38,8 +39,8 @@ h2, h3, h4, h5 { - /*Purple*/ - color: #6320ee; + /*changed from purple to blue*/ + color: #0000ff; margin-bottom: 1em; } @@ -76,6 +77,7 @@ footer { } .introduction { + background-color: white; } #badge { @@ -85,7 +87,7 @@ footer { border-radius: 50%; display: inline-block; position: fixed; - bottom: 20px; + top: 20px; right: 20px; display: flex; @@ -95,6 +97,7 @@ footer { } #badge:hover { + transition: background-color 0.5s ease; background-color: yellow; } @@ -105,7 +108,15 @@ footer { .image-container img { vertical-align: top; - border: 5px solid #747c92; +} +.bear1 { + border: 5px solid black; +} +.bear2 { + border: 5px solid green; +} +.bear3 { + border: 5px solid purple; } .image-container img:first-of-type { @@ -118,7 +129,7 @@ footer { } .giraffe { - background-color: #465775; + background-color: #483c46; color: #56e39f; } @@ -133,7 +144,11 @@ footer { margin: 10px; width: 30%; border: 1px solid black; - border-radius: 10px; + border-radius: 20px; + font-size: large; +} +.card:hover { + background-color: #483c46; } .card h4 { @@ -150,7 +165,15 @@ footer { display: inline-block; margin-bottom: 10px; } - +.giraffe p { + color: #beee62; +} +.giraffe p:first-of-type { + font-size: large; +} +.news { + text-align: center; +} /*Education*/ .education { @@ -187,9 +210,15 @@ footer { .membership strong { color: #ff7f11; } - +.membership p { + max-width: 700px; + margin: 150px; +} /*Programs*/ .programs .card { - display: block; + display: incline-flex; + width: 20%; + margin: 30px; + }