diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..3be1ba23 Binary files /dev/null and b/.DS_Store differ diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 4344b144..95bb9d1b 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,28 +1,69 @@ - - - - My form exercise - - - - - -
-

Product Pick

-
-
-
- - -
+ + + + My form exercise + + + + + +
+

Product Pick

+
+
+
+ + + -
- - - \ No newline at end of file + + + + + + + + + + +

+ + + +

+ + + + + + +
+ + + diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e69de29b..c6459eba 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -0,0 +1,48 @@ +body { + background-color: antiquewhite; +} + +h1, h2 { + text-align: center; +} + +form { + max-width: 500px; + margin: 0 auto; +} + +label { + display: block; + margin-bottom: 10px; + font-weight: bold; +} + +input[type="text"], +input[type="email"], +select { + display: block; + width: 100%; + padding: 10px; + border: 1px solid #ccc; + border-radius: 4px; + font-size: 16px; + margin-bottom: 20px; +} + +select { + height: 40px; +} + +input[type="submit"] { + background-color: #008CBA; + color: #fff; + padding: 10px 20px; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 16px; +} + +input[type="submit"]:hover { + background-color: #006B8F; +} \ No newline at end of file diff --git a/zoo-css-challenge/index.html b/zoo-css-challenge/index.html index 0892fd58..7e5f5e6d 100644 --- a/zoo-css-challenge/index.html +++ b/zoo-css-challenge/index.html @@ -1,136 +1,186 @@ - - - - -
- - -
-
-
-

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

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..f0925f50 100644 --- a/zoo-css-challenge/style.css +++ b/zoo-css-challenge/style.css @@ -22,6 +22,7 @@ header ul { header ul li { display: inline-block; margin-right: 10px; + } section { @@ -29,8 +30,12 @@ section { background-color: #f8f0fb; } +section > .introduction { + background-color: white; +} + img { - border: 5px solid #8075ff; + border: none; } h1, @@ -55,6 +60,10 @@ h3 { font-size: 150%; } +p { + line-height: 1.5; +} + button { display: inline-block; border-radius: 3px; @@ -64,8 +73,16 @@ button { background-color: #372772; border: 2px solid black; color: #fff; + font-weight: 700; + font-size: larger; +} + +button:hover { + background-color: #747c92; } + + footer { background-color: #211a1d; color: #ffffff; @@ -106,6 +123,15 @@ footer { .image-container img { vertical-align: top; border: 5px solid #747c92; + vertical-align: top; +} + +.image-container img:first-of-type { + border-color: #372772; +} + +.image-container img:last-of-type { + border-color: #6320ee; } .image-container img:first-of-type { @@ -117,13 +143,29 @@ footer { color: #f0e100; } +.tigers h2, h3 { + color: #f8f0fb; +} + +.tigers > ul > li { + margin-bottom: 10px; +} + .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: larger ; +} + +.news h2 { + text-align: center; } .card { @@ -166,6 +208,7 @@ footer { background-color: rgba(255, 255, 255, 0.75); padding: 50px; max-width: 400px; + border-radius: 10px; } .education-container h3,