From ef7b12b86a30bde0709287b1a8e8230f7b23d05e Mon Sep 17 00:00:00 2001 From: Yuliya110692 <122671093+Yuliya110692@users.noreply.github.com> Date: Fri, 2 Jun 2023 08:47:49 +0100 Subject: [PATCH] London10 - Yulia - HTML-CSS-Challenges --- Form-Controls/index.html | 48 +++++++++++++++++++++++++++---- Form-Controls/styles.css | 28 ++++++++++++++++++ Two-Truths-One-Lie/index.html | 19 +++++++++++-- Two-Truths-One-Lie/styles.css | 53 ++++++++++++++++++++++++++++++++++- zoo-css-challenge/index.html | 3 ++ zoo-css-challenge/style.css | 8 +++++- 6 files changed, 149 insertions(+), 10 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 4344b144..bb5d1927 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -13,14 +13,50 @@

Product Pick

-
- - -
- +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e69de29b..7bb6ba70 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -0,0 +1,28 @@ +body{ + text-align: center; +} + +.form-group { + margin-bottom: 10px; + text-align: center; + } + + label { + display: block; + font-weight: bold; + } + + input[type="text"], + input[type="email"], + select { + width: 300px; + height: 30px; + margin-top: 5px; + } + + input[type="submit"] { + width: 100px; + height: 30px; + margin-top: 10px; + text-align: center; + } \ No newline at end of file diff --git a/Two-Truths-One-Lie/index.html b/Two-Truths-One-Lie/index.html index 37cdbfa1..57cf73fb 100644 --- a/Two-Truths-One-Lie/index.html +++ b/Two-Truths-One-Lie/index.html @@ -15,10 +15,25 @@

Two Truths, One Lie

- +
+ Image 1 +

I have traveled to five different countries.

+

I can speak three languages fluently.

+

I have climbed Mount Everest.

+
+ +
+ Image 2 +

I have run a marathon.

+

I have skydived from a plane.

+

I have swum with dolphins in the ocean.

+
+ +
+ \ No newline at end of file diff --git a/Two-Truths-One-Lie/styles.css b/Two-Truths-One-Lie/styles.css index b8e36944..124c88e6 100644 --- a/Two-Truths-One-Lie/styles.css +++ b/Two-Truths-One-Lie/styles.css @@ -29,5 +29,56 @@ */ body { - font: 100% "Poppins", sans-serif; + font: 100% "Poppins", sans-serif; + margin: 0; + padding: 0; } + +header { + background-color: #333; + color: #fff; + padding: 20px; + text-align: center; +} + +main { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + padding: 20px; +} + +.card { + background-color: #f1f1f1; + border: 1px solid #ccc; + border-radius: 4px; + flex: 0 0 calc(33.33% - 20px); + margin-bottom: 20px; + padding: 20px; +} + +.card img { + display: block; + max-width: 100%; + height: auto; + margin-bottom: 10px; +} + +footer { + background-color: #333; + color: #fff; + padding: 20px; + text-align: center; +} + +@media (max-width: 768px) { + main { + flex-direction: column; + align-items: center; + } + + .card { + flex: 0 0 100%; + } +} + diff --git a/zoo-css-challenge/index.html b/zoo-css-challenge/index.html index 0892fd58..6fd8dcfa 100644 --- a/zoo-css-challenge/index.html +++ b/zoo-css-challenge/index.html @@ -21,6 +21,9 @@

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

diff --git a/zoo-css-challenge/style.css b/zoo-css-challenge/style.css index b9007645..3a36c355 100644 --- a/zoo-css-challenge/style.css +++ b/zoo-css-challenge/style.css @@ -1,7 +1,12 @@ * { + letter-spacing: 0.2em; font-family: sans-serif; } +#logo { + border: none; +} + header { background-color: #211a1d; color: #ffffff; @@ -76,6 +81,7 @@ footer { } .introduction { + background-color: white; } #badge { @@ -192,4 +198,4 @@ footer { .programs .card { display: block; -} +} \ No newline at end of file