diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6b665aaa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/Form-Controls/README.md b/Form-Controls/README.md index 6d74a7a8..6cacf284 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -31,22 +31,22 @@ Do not write a form action for this project. Let's write out our testable criteria: -- [ ] I have used HTML and CSS only. +- [V] I have used HTML and CSS only. ### HTML -- [ ] My form is semantic html. -- [ ] All inputs have associated labels. +- [V] My form is semantic html. +- [V] All inputs have associated labels. - [ ] My Lighthouse Accessibility score is 100. -- [ ] I require a valid name. I have defined a valid name as a text string of two characters or more. -- [ ] I require a valid email. -- [ ] I require one colour from a defined set of 3 colours. -- [ ] I require one size from a defined set of 6 sizes. -- [ ] I require one date from a constrained date range. +- [V] I require a valid name. I have defined a valid name as a text string of two characters or more. +- [V] I require a valid email. +- [V] I require one colour from a defined set of 3 colours. +- [V] I require one size from a defined set of 6 sizes. +- [V] I require one date from a constrained date range. ### CSS -- [ ] I show which element is focused. +- [V] I show which element is focused. - [ ] My Lighthouse Accessibility score is 100. ## Extension Task diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 4344b144..b0bafca2 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -16,6 +16,32 @@

Product Pick

+ + +
+ + +
+ + +
+ + +
+ + +
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e69de29b..94029b74 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -0,0 +1,13 @@ +#name:focus { + background: rgb(224, 224, 224); + color: rgb(0, 0, 0); +} +#email:focus { + background: rgb(201, 201, 201); + color: rgb(0, 0, 0); +} + +#date:focus, #colour:focus, #size:focus { + background: rgb(201, 201, 201); + color: rgb(0, 0, 0); +} \ No newline at end of file diff --git a/Two-Truths-One-Lie/index.html b/Two-Truths-One-Lie/index.html index 37cdbfa1..751df693 100644 --- a/Two-Truths-One-Lie/index.html +++ b/Two-Truths-One-Lie/index.html @@ -13,12 +13,42 @@

Two Truths, One Lie

+

Can you guess which statement is false

+
+
+
+ +

Olha Danylevska

+
+
    +
  1. I don't like Ice Cream
    2. +
  2. I have never been to USA
    3. +
  3. I have never dyed my hair
    4. +
+ +
+ +
+
+ +

Olha Danylevska

+
+
    +
  1. I don't like Ice Cream
    2. +
  2. I have never been to USA
    3. +
  3. I have never dyed my hair
    4. +
+ +
+
+ +
\ No newline at end of file diff --git a/Two-Truths-One-Lie/styles.css b/Two-Truths-One-Lie/styles.css index b8e36944..75e3ff07 100644 --- a/Two-Truths-One-Lie/styles.css +++ b/Two-Truths-One-Lie/styles.css @@ -30,4 +30,50 @@ body { font: 100% "Poppins", sans-serif; + background-color: rgb(178, 186, 125); + margin: 0 auto; +} + +.container { + + display: flex; + flex-direction: row; + align-items: center; + gap: 1rem; +} + +section { +background-color: rgb(220, 234, 194); + width: 30%; + height: 16rem; + padding: 1rem; +} + +#container-for-sections{ + display: flex; + justify-content: center; + margin-top: 3rem; + gap: 3rem +} + +ol{ + margin-left: -1rem; + +} + +#image { +height: 10rem; +width: auto; +} + +header { + text-align: center; +} + +footer{ + position: absolute; + bottom: 0; + width: 100%; + height: 4rem; + text-align: center; } diff --git a/zoo-css-challenge/index.html b/zoo-css-challenge/index.html index 0892fd58..26bc0606 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.

@@ -52,14 +55,14 @@

Bears

Tiger

-

Top 5 Tiger Facts

-
    +

    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. -
+
@@ -90,6 +93,11 @@

Helping wild turtles in Seychelles

Learning about the rainforest

Find out More
+
+ +

Which big cat are you?

+ Find out More +
@@ -108,18 +116,21 @@

Are there any benefits or discounts for members?

Programs

-
-

Children and Family Programs

- Find out More -
-
-

Adult Programs

- Find out More -
-
-

Youth and young adults

- Find out More -
+
+
+

Children and Family Programs

+ Find out More +
+
+

Adult Programs

+ Find out More +
+
+

Youth and young adults

+ Find out More +
+
+

Useful Links

diff --git a/zoo-css-challenge/style.css b/zoo-css-challenge/style.css index b9007645..9d5f2697 100644 --- a/zoo-css-challenge/style.css +++ b/zoo-css-challenge/style.css @@ -29,8 +29,9 @@ section { background-color: #f8f0fb; } -img { - border: 5px solid #8075ff; +.introduction { + background-color: white; + line-height: 2; } h1, @@ -39,7 +40,7 @@ h3, h4, h5 { /*Purple*/ - color: #6320ee; + color: #9FE9EA; margin-bottom: 1em; } @@ -66,6 +67,14 @@ button { color: #fff; } +.education-container button{ + font-size: 16px; +} + +.education-container button:hover { + background-color: #211a1d; +} + footer { background-color: #211a1d; color: #ffffff; @@ -75,8 +84,7 @@ footer { justify-content: space-between; } -.introduction { -} + #badge { height: 120px; @@ -85,7 +93,7 @@ footer { border-radius: 50%; display: inline-block; position: fixed; - bottom: 20px; + top: 20px; right: 20px; display: flex; @@ -96,6 +104,7 @@ footer { #badge:hover { background-color: yellow; + transition: 0.3s; } #badge p { @@ -103,13 +112,20 @@ footer { font-size: 125%; } +.image-container{ + display: flex; + justify-content: baseline; + gap: 1rem; +} + .image-container img { vertical-align: top; - border: 5px solid #747c92; + border: 3px solid #b8bcfe; + } .image-container img:first-of-type { - vertical-align: bottom; + } .tigers { @@ -118,12 +134,12 @@ footer { } .giraffe { - background-color: #465775; - color: #56e39f; + background-color: #483C46; + color: #BEEE62; } -.giraffe h2 { - color: #ef6f6c; +.giraffe h2, h3 { + color: #F4743B; } .card { @@ -136,6 +152,10 @@ footer { border-radius: 10px; } +.news h2{ + text-align: center; +} + .card h4 { margin-bottom: 1em; } @@ -166,6 +186,7 @@ footer { background-color: rgba(255, 255, 255, 0.75); padding: 50px; max-width: 400px; + border-radius: 5px; } .education-container h3, @@ -178,6 +199,8 @@ footer { .membership { text-align: center; background-color: #fffffc; + max-width: 700px; + margin: auto ; } .membership h2 { @@ -190,6 +213,8 @@ footer { /*Programs*/ -.programs .card { - display: block; +.programs section { + display: flex; + flex-direction: row; + gap:2rem }