diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 4344b144..ccde11df 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -14,14 +14,43 @@

Product Pick

- - + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ +
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e69de29b..f32d65bc 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -0,0 +1,41 @@ +label { + display: block; + margin-bottom: 5px; + font-weight: bold; + } + + /* Style the form input elements */ + input, + select { + display: block; + width: 100%; + padding: 10px; + border: 2px solid #ccc; + border-radius: 4px; + font-size: 16px; + margin-bottom: 15px; + } + + /* Style the submit button */ + button[type="submit"] { + background-color: #4CAF50; + color: white; + padding: 12px 20px; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 16px; + } + + /* Style the form inputs when focused */ + input:focus, + select:focus { + outline: none; + border-color: #4CAF50; + } + + /* Style the form input labels when focused */ + input:focus + label, + select:focus + label { + color: #4CAF50; + } \ No newline at end of file diff --git a/Two-Truths-One-Lie/index.html b/Two-Truths-One-Lie/index.html index 37cdbfa1..955f7c66 100644 --- a/Two-Truths-One-Lie/index.html +++ b/Two-Truths-One-Lie/index.html @@ -15,10 +15,24 @@

Two Truths, One Lie

- +
+

Two Truths and a Lie

+
+

Truth or Lie #1

+

I am 4782 years old.

+
+
+

Truth or Lie #2

+

Red is a bigger number than white.

+
+
+

Truth or Lie #3

+

Apples can fall off trees.

+
+
\ No newline at end of file diff --git a/Two-Truths-One-Lie/styles.css b/Two-Truths-One-Lie/styles.css index b8e36944..5a6147c1 100644 --- a/Two-Truths-One-Lie/styles.css +++ b/Two-Truths-One-Lie/styles.css @@ -30,4 +30,60 @@ body { font: 100% "Poppins", sans-serif; + margin: 0; + padding: 0; +} + +/* Header styles */ +header { + background-color: #333; + color: #fff; + padding: 1em; +} + +h1 { + margin: 0; +} + +/* Main styles */ +main { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + padding: 1em; +} + +.grid-section { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 1em; + margin-bottom: 2em; +} + +.grid-article { + background-color: #f0f0f0; + border: 1px solid #ccc; + padding: 1em; +} + +.grid-article h3 { + margin-top: 0; +} + +/* Footer styles */ +footer { + background-color: #333; + color: #fff; + padding: 1em; +} + +/* Media query styles */ +@media screen and (max-width: 768px) { + main { + display: block; + } + + .grid-section { + grid-template-columns: repeat(2, 1fr); + } } 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..42725e24 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 {