diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 4344b144..cdd1d481 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,28 +1,54 @@ - - - - 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..dc619fc5 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -0,0 +1,26 @@ +/* basic styling for the form */ +form { + max-width: 500px; + margin: 0 auto; +} + +label, input, select { + display: flex; + margin-bottom: 10px; +} + +input { + width: 50%; +} + +#submit-button { + margin-top: 20px; + padding: 10px; + background-color: #007bff; + color: white; + border: none; + border-radius: 4px; + font-size: 1.2em; +} + + diff --git a/Two-Truths-One-Lie/index.html b/Two-Truths-One-Lie/index.html index 37cdbfa1..2935c129 100644 --- a/Two-Truths-One-Lie/index.html +++ b/Two-Truths-One-Lie/index.html @@ -1,24 +1,60 @@ - - - - - Our Grid Project - - - - - - - -
+ + + + + Our Grid Project + + + + + + + +

Two Truths, One Lie

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

Can you guess which statament is false?

+
+
+ +

Saim Korkmaz

+
+
    +
  1. saim has two sisters
    2. +
  2. saim likes horror movies
    3. +
  3. saim can speak turkish
    4. +
+
+
+
+ +

Other

+
+
    +
  1. other is from world
    2. +
  2. other can speak dutch
    3. +
  3. other likes
    4. +
+
+
+
+ + + diff --git a/Two-Truths-One-Lie/styles.css b/Two-Truths-One-Lie/styles.css index b8e36944..b1021c01 100644 --- a/Two-Truths-One-Lie/styles.css +++ b/Two-Truths-One-Lie/styles.css @@ -30,4 +30,108 @@ body { font: 100% "Poppins", sans-serif; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + background-color: chocolate; } + +#container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + grid: + ". a ." + "b b b" + "c c c"; + align-items: center; + justify-content: center; + grid-gap: 50px; +} + +#parag { + grid-area: a; +} + +#baki { + grid-area: c; + + border: 2px solid red; + height: 300px; + width: 450px; + align-items: center; + justify-content: center; +} + +#container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + grid: '. a .' + 'b b b' + 'c c c'; + align-items: center; + justify-content: center; +} + +#parag { + grid-area: a; +} + +#saim { + grid-area: b; + align-items: center; + justify-content: center; + border: 2px solid grey; + height: 300px; + width: 450px; + margin: auto; + background-color: aquamarine; +} +#saim-container{ + display: flex; + justify-content: space-around; + margin-top: 20px; +} + +#baki { + grid-area: c; + border: 2px solid grey; + height: 300px; + width: 450px; + margin: auto; + background-color: aquamarine; +} +#baki-container{ + display: flex; + justify-content: space-around; + margin-top: 20px; +} + + +footer{ + padding-top: 170px; +} + +@media screen and (min-width: 820px) { + #container { + display: grid; + grid-template-columns: repeat(7, 1fr); + grid-template-rows: 1fr 1fr; + grid: '. . . a . . .' + '. . b . c . .'; + align-items: center; + justify-content: center; + } + #saim{ + grid-area: b; + } + #baki{ + grid-area: c; + } + #parag{ + grid-area: a; + } + +} \ No newline at end of file diff --git a/zoo-css-challenge/index.html b/zoo-css-challenge/index.html index 0892fd58..545c8ef7 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 +
+
+ +

Which 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..6d4af013 100644 --- a/zoo-css-challenge/style.css +++ b/zoo-css-challenge/style.css @@ -1,5 +1,6 @@ * { font-family: sans-serif; + line-height: 2; } header { @@ -75,9 +76,6 @@ footer { justify-content: space-between; } -.introduction { -} - #badge { height: 120px; width: 120px; @@ -85,7 +83,7 @@ footer { border-radius: 50%; display: inline-block; position: fixed; - bottom: 20px; + top: 20px; right: 20px; display: flex; @@ -108,9 +106,9 @@ footer { border: 5px solid #747c92; } -.image-container img:first-of-type { +/* .image-container img:first-of-type { vertical-align: bottom; -} +} */ .tigers { background-color: #0b3c49; @@ -118,13 +116,13 @@ footer { } .giraffe { - background-color: #465775; - color: #56e39f; + background-color: #483c46; + color: #beee62; } -.giraffe h2 { +/* .giraffe h2 { color: #ef6f6c; -} +} */ .card { display: inline-block; @@ -187,9 +185,61 @@ footer { .membership strong { color: #ff7f11; } +.membership p{ + width: 700px; + margin: auto; +} /*Programs*/ .programs .card { - display: block; + display: inline-block; + vertical-align: top; + margin-right: 20px; +} + +/* my cahnges */ + +#logo { + border: none; +} + +#bear-1 { + border: 5px solid green; +} +#bear-2 { + border: 5px solid red; +} +#bear-3 { + border: 5px solid yellow; + height: 300px; } + +#tiger-h2 { + color: #fbff00; +} + +.giraffe-h { + color: #f4743b; +} + +#giraffe-first-p{ + font-size: 24px; +} + +.news h2{ + text-align: center; +} +button{ + font-size: 24px; + border-radius: 20px; +} +button:hover{ + background-color: #f0e100; +} + +.membership p{ + + max-width: 700px; + margin: 0 auto; +} \ No newline at end of file