diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 4344b144..ead8653e 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,28 +1,66 @@ - - - - My form exercise - - - - - -
-

Product Pick

-
-
-
- - -
- -
- - - - \ No newline at end of file + + + + My form exercise + + + + + +
+

Product Pick

+
+
+
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ + + diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e69de29b..eee357a0 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -0,0 +1,36 @@ +form { + display: flex; + flex-direction: column; + gap: 1rem; + margin: 2rem auto; + max-width: 600px; + padding: 2rem; + border: 1px solid #ccc; + border-radius: 5px; + font-family: Arial, sans-serif; +} + +label { + font-weight: bold; +} + +input, select { + padding: 0.5rem; + border: 1px solid #ccc; + border-radius: 3px; + font-size: 1rem; +} + +button[type="submit"] { + padding: 0.5rem; + border:none; + border-radius: 3px; + background-color: rgb(0, 7, 15); + color: rgb(243, 242, 242); + font-size: 1rem; + cursor: pointer; +} + +button[type="submit"]:hover { + background-color: rgb(48, 48, 48); +} \ No newline at end of file diff --git a/Two-Truths-One-Lie/index.html b/Two-Truths-One-Lie/index.html index 37cdbfa1..6ddd9104 100644 --- a/Two-Truths-One-Lie/index.html +++ b/Two-Truths-One-Lie/index.html @@ -1,5 +1,5 @@ - + @@ -11,14 +11,35 @@ -
+

Two Truths, One Lie

+

Can you guess which one is a lie?

+
+
+

Bekir

+

I am younger then 30 years old.

+

I like javascript functions.

+

I am not Turkish

+
+
+

Adrian

+

I am not over 30 years old.

+

I am Romanian.

+

I don't have kids.

+
+
+ My Second Image +
+
+ My Image +
+
\ No newline at end of file diff --git a/Two-Truths-One-Lie/styles.css b/Two-Truths-One-Lie/styles.css index b8e36944..3387b81e 100644 --- a/Two-Truths-One-Lie/styles.css +++ b/Two-Truths-One-Lie/styles.css @@ -30,4 +30,92 @@ body { font: 100% "Poppins", sans-serif; + display: flex; + background-color: aquamarine; + flex-direction: column; + align-items: center; + justify-content: center; + height: 60vh; + margin: 0; } +.header { + display: grid; + align-items: center; + justify-content: center; + height: 100%; +} +.header h1, .header h2 { + margin: 0; + text-align: center; +} +.container { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 20px; + position: relative; + width: 900px; + height: 400px; + box-shadow: 5px 5px 5px #888888; +} +.box { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color:aliceblue; +} +.box2 { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color:aliceblue; +} +.img-container { + object-fit: cover; + width: 20%; + height: 20%; +} + +footer { + position: fixed; + bottom: 0; + display: flex; + flex-direction: column; + width: 35%; + background-color: lightblue; + padding: 0.5px; + text-align: center; + font-size: 13px; +} + +/* Media query for mobile devices */ + +@media screen and (max-width: 768px) { + body { + height: auto; + } + + .container { + grid-template-columns: 1fr; + width: 90%; + height: auto; + box-shadow: none; + margin-bottom: 80px; + } + + .img-container { + width: 100%; + height: auto; + margin-top: 20px; + } + + .box, .box2 { + margin: 20px 0; + } + + footer { + position: relative; + bottom: auto; + } +} \ No newline at end of file diff --git a/zoo-css-challenge/index.html b/zoo-css-challenge/index.html index 0892fd58..63e28237 100644 --- a/zoo-css-challenge/index.html +++ b/zoo-css-challenge/index.html @@ -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.

@@ -31,18 +32,20 @@

Birmingham Zoo

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

    +

    Top 5 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. -
+
@@ -77,6 +80,21 @@

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.

+
+

Ryno

+ +

Ryno's are the world's strongest mammals, thanks to their big legs and fat necks.

+ +

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

+ +

Rynos 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

@@ -90,6 +108,11 @@

Helping wild turtles in Seychelles

Learning about the rainforest

Find out More
+
+ +

Which big cat are you?

+ Find out More +
@@ -110,15 +133,15 @@

Are there any benefits or discounts for members?

Programs

Children and Family Programs

- Find out More + Find out More

Adult Programs

- Find out More + Find out More

Youth and young adults

- Find out More + Find out More

Useful Links

diff --git a/zoo-css-challenge/style.css b/zoo-css-challenge/style.css index b9007645..5efd2a90 100644 --- a/zoo-css-challenge/style.css +++ b/zoo-css-challenge/style.css @@ -9,6 +9,10 @@ header { padding: 20px; } +#logo { + border: none; +} + nav { display: inline-block; width: 100%; @@ -19,6 +23,7 @@ header ul { padding: 0; } + header ul li { display: inline-block; margin-right: 10px; @@ -57,13 +62,19 @@ h3 { button { display: inline-block; - border-radius: 3px; + border-radius: 25px; 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; + font-size: large; +} +button:hover { + background-color: black; + transition: 0.7s; + color: #56e39f; } footer { @@ -76,6 +87,9 @@ footer { } .introduction { + background-color: white; + padding: 20px; + margin-bottom: 30px; } #badge { @@ -85,17 +99,18 @@ footer { border-radius: 50%; display: inline-block; position: fixed; - bottom: 20px; + bottom: 872px; right: 20px; display: flex; justify-content: center; - align-content: center; + align-items: center; flex-direction: column; } #badge:hover { background-color: yellow; + transition: 0.7s; } #badge p { @@ -105,7 +120,9 @@ footer { .image-container img { vertical-align: top; - border: 5px solid #747c92; + border: 5px solid #0734b2; + display: flex; + align-items: flex-start; } .image-container img:first-of-type { @@ -116,14 +133,25 @@ footer { background-color: #0b3c49; color: #f0e100; } - -.giraffe { - background-color: #465775; +.tigerh2, +.tigerh3 { + color: #f8f0fb; +} +.giraffe, .ryno { + background-color: #483C46; color: #56e39f; } -.giraffe h2 { - color: #ef6f6c; +.giraffe, .ryno h2, h3 { + color: #F4743B; +} + +.giraffe p { + color: #BEEE62; +} + +.news { + text-align: center; } .card { @@ -188,8 +216,18 @@ footer { color: #ff7f11; } +.membership p { + width: 700px; + margin: auto; +} + /*Programs*/ .programs .card { - display: block; + display: inline-block; } + +.programs .card a { + color: #211a1d; +} +