diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 4344b144..406dd661 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -13,15 +13,43 @@

Product Pick

+
- - -
+ + + + + + + + + + + + + + + + +
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e69de29b..58fcb592 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -0,0 +1,45 @@ +/* Set global styles */ +body { + font-family: Arial, sans-serif; +} + +header, footer { + background-color: #333; + color: #fff; + padding: 1rem; +} + +main { + padding: 1rem; +} + +form { + display: flex; + flex-direction: column; + gap: 1rem; + max-width: 500px; + margin: 0 auto; +} + +label { + font-weight: bold; +} + +input, select { + padding: 0.5rem; + border-radius: 5px; + border: 1px solid #ccc; +} + +button[type="submit"] { + padding: 0.5rem 1rem; + background-color: #333; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; +} + +button[type="submit"]:hover { + background-color: #555; +} diff --git a/Two-Truths-One-Lie/index.html b/Two-Truths-One-Lie/index.html index 37cdbfa1..e028a50b 100644 --- a/Two-Truths-One-Lie/index.html +++ b/Two-Truths-One-Lie/index.html @@ -1,24 +1,42 @@ - - - - - Our Grid Project - - - - - - - -
-

Two Truths, One Lie

+ + + + Our Grid Project + + + + + +
+

Two Truths, One Lie

-
- + +
+
+ Image 1 +

Player One

+
    +
  • I've been to Paris
    • +
  • I've never broken a bone
    • +
  • I'm an Olympic medalist
    • +
+
+ +
+ Image 2 +

Player Two

+
    +
  • I'm a black belt in karate
    • +
  • I'm allergic to peanuts
    • +
  • I've never been on a roller coaster
    • +
+
+
-

By YOUR NAMES HERE

+

By Ebrahim Beiati-Asl

- - \ No newline at end of file + + + diff --git a/Two-Truths-One-Lie/styles.css b/Two-Truths-One-Lie/styles.css index b8e36944..61cec51c 100644 --- a/Two-Truths-One-Lie/styles.css +++ b/Two-Truths-One-Lie/styles.css @@ -29,5 +29,81 @@ */ body { - font: 100% "Poppins", sans-serif; + font-family: 'Poppins', sans-serif; + margin: 0; + padding: 0; +} + +header { + background-color: #222; + color: #fff; + padding: 20px; + text-align: center; +} + +main { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin: 20px; +} + +.card { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 1fr 2fr; + grid-gap: 10px; + margin: 10px; + border: 1px solid #ccc; + border-radius: 5px; + overflow: hidden; + max-width: 300px; +} + +.card img { + width: 100%; + height: auto; + object-fit: cover; +} + +.card h2 { + font-size: 1.5rem; + margin: 0; + padding: 10px; + grid-column: 1 / -1; + background-color: #333; + color: #fff; +} + +.card p { + margin: 10px; + font-size: 1.1rem; +} + +footer { + background-color: #222; + color: #fff; + padding: 20px; + text-align: center; +} + +h1, h2, h3 { + font-weight: 700; + margin: 0; +} + +@media screen and (max-width: 600px) { + .card { + grid-template-columns: 1fr; + grid-template-rows: 1fr auto 1fr; + max-width: 90%; + } + + .card img { + grid-row: 1 / 2; + } + + .card h2 { + grid-row: 2 / 3; + } } diff --git a/zoo-css-challenge/index.html b/zoo-css-challenge/index.html index 0892fd58..14705160 100644 --- a/zoo-css-challenge/index.html +++ b/zoo-css-challenge/index.html @@ -1,136 +1,121 @@ - - - - -
- - -
-
-
-

Birmingham Zoo

-
+ + + + +
+ Birmingham Zoo logo + +
+
+
+

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 Facts

+

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

+

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.

+
-

Behavior

+
+

Diet

+

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.

+
-

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

+
+

News

+
+ +

Helping wild turtles in Seychelles

+ Find out More +
+
+ +

Learning about the rainforest

+ Find out More +
+
-

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.

+
+
+

Learning resources for schools

+

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

+ +
+
-

Height and Size

+
+

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

+ +
-

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.

-
+
+

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

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

- -
-
- -
-

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
-
+
+ - \ No newline at end of file + diff --git a/zoo-css-challenge/style.css b/zoo-css-challenge/style.css index b9007645..f56cf40f 100644 --- a/zoo-css-challenge/style.css +++ b/zoo-css-challenge/style.css @@ -1,195 +1,149 @@ -* { - font-family: sans-serif; +/* Global styles */ +body { + font-family: Arial, sans-serif; + margin: 0; } +/* Header */ header { - background-color: #211a1d; - color: #ffffff; - width: 100%; + background-color: #1c1c1c; + color: #fff; + display: inline-flexbox; + justify-content: space-between; + align-items: center; padding: 20px; } -nav { - display: inline-block; - width: 100%; +header img { + max-width: 100%; + height: auto; } -header ul { - margin: 20px 0 0 0; +nav ul { + display: flex; + justify-content: space-between; + list-style: none; + margin: 0; padding: 0; } -header ul li { - display: inline-block; - margin-right: 10px; -} - -section { - padding: 5%; - background-color: #f8f0fb; -} - -img { - border: 5px solid #8075ff; -} - -h1, -h2, -h3, -h4, -h5 { - /*Purple*/ - color: #6320ee; - margin-bottom: 1em; -} - -h1 { - font-size: 250%; -} - -h2 { - font-size: 175%; -} - -h3 { - 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; +nav a { color: #fff; + text-decoration: none; } -footer { - background-color: #211a1d; - color: #ffffff; - width: 100%; +/* Main */ +main { padding: 20px; - display: flex; - justify-content: space-between; -} - -.introduction { -} - -#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; } -#badge:hover { - background-color: yellow; +section.introduction { + padding: 20px; + text-align: center; } -#badge p { +section.bears { + padding: 20px; text-align: center; - font-size: 125%; } -.image-container img { - vertical-align: top; - border: 5px solid #747c92; +section.bears .image-container { + margin-top: 20px; } -.image-container img:first-of-type { - vertical-align: bottom; +section.tigers { + padding: 20px; } -.tigers { - background-color: #0b3c49; - color: #f0e100; +section.giraffe-facts, +section.giraffe-behavior, +section.giraffe-diet { + padding: 20px; } -.giraffe { - background-color: #465775; - color: #56e39f; +section.giraffe-behavior, +section.giraffe-diet { + background-color: #f5f5f5; } -.giraffe h2 { - color: #ef6f6c; +section.news { + padding: 20px; } -.card { - display: inline-block; - background-color: white; - padding: 20px; +section.news .card { + background-color: #f5f5f5; + border: 1px solid #ccc; + padding: 10px; margin: 10px; - width: 30%; - border: 1px solid black; - border-radius: 10px; } -.card h4 { - margin-bottom: 1em; +section.news .card time { + display: inline-flexbox; + font-size: 0.8em; + color: #666; } -.card a { - text-decoration: underline; - font-weight: bold; +section.news .card h4 { + margin: 0; + font-size: 1.2em; } -.card time { - opacity: 0.5; - display: inline-block; - margin-bottom: 10px; +section.news .card a { + color: #1c1c1c; + text-decoration: none; } -/*Education*/ - -.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%; +section.education { + background-color: #1c1c1c; + color: #fff; + padding: 20px; } -.education-container { - background-color: rgba(255, 255, 255, 0.75); - padding: 50px; - max-width: 400px; +section.education button { + background-color: transparent; + border: 2px solid #fff; + color: #fff; + padding: 10px; + margin-top: 10px; + cursor: pointer; } -.education-container h3, -.education-container p { - margin-bottom: 1em; +section.education button:hover { + background-color: #fff; + color: #1c1c1c; } - -/*Membership*/ - -.membership { - text-align: center; - background-color: #fffffc; +section.programs { + padding: 20px; } -.membership h2 { - color: #ff3f00; +section.programs .card { + background-color: #f5f5f5; + border: 1px solid #ccc; + padding: 10px; + margin: 10px; } -.membership strong { - color: #ff7f11; +section.programs .card time { + display: inline-flexbox; + font-size: 0.8em; + color: #666; } -/*Programs*/ +section.programs .card h4 { + margin: 0; + font-size: 1.2em; +} -.programs .card { - display: block; +section.programs .card a { + color: #1c1c1c; + text-decoration: none; } +.links{ + justify-content: space-between; + align-items: center; + display: flexbox +} +.footer{ + justify-content: space-between; + align-items: center; +} \ No newline at end of file