From 854edea87b0df9c3707158f275c0bd4d743fd9c8 Mon Sep 17 00:00:00 2001 From: onurat <114289826+onurat@users.noreply.github.com> Date: Wed, 26 Apr 2023 17:39:59 +0100 Subject: [PATCH 1/4] HTML-CSS-Challenges --- Form-Controls/index.html | 33 ++++++++++++++++++++++++++++++--- Form-Controls/styles.css | 11 +++++++++++ 2 files changed, 41 insertions(+), 3 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 4344b144..6ff1c77f 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -14,14 +14,41 @@

Product Pick

- - + + + + + + + + + + + + + + + +
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e69de29b..27abc443 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -0,0 +1,11 @@ +:focus { + outline: none; + border: 2px solid blue; + box-shadow: 0 0 5px blue; + } + + form { + display: flex; + flex-direction: column; +} + \ No newline at end of file From 5df76a223ec9621920610aa345f8a80807f91fa5 Mon Sep 17 00:00:00 2001 From: onurat <114289826+onurat@users.noreply.github.com> Date: Wed, 26 Apr 2023 17:59:12 +0100 Subject: [PATCH 2/4] Update index.html --- Two-Truths-One-Lie/index.html | 61 +++++++++++++++++++++++------------ 1 file changed, 41 insertions(+), 20 deletions(-) diff --git a/Two-Truths-One-Lie/index.html b/Two-Truths-One-Lie/index.html index 37cdbfa1..7951a996 100644 --- a/Two-Truths-One-Lie/index.html +++ b/Two-Truths-One-Lie/index.html @@ -1,24 +1,45 @@ - - - - Our Grid Project - - - - - - - -
+ + + + Our Grid Project + + + + + + + +

Two Truths, One Lie

-
-
- -
- - +
+
+
+ A woman during sunset +
+

Person 1

+
    +
  • Truth 1
    • +
  • Truth 2
    • +
  • Lie
    • +
+
+
+
+ A woman leaning on a wall +
+

Person 2

+
    +
  • Truth 1
    • +
  • Truth 2
    • +
  • Lie
    • +
+
+
+
+ + \ No newline at end of file From f08e821d0c74cca58b23f6db975511d979e4fcc4 Mon Sep 17 00:00:00 2001 From: onurat <114289826+onurat@users.noreply.github.com> Date: Wed, 26 Apr 2023 18:18:30 +0100 Subject: [PATCH 3/4] challenges --- Two-Truths-One-Lie/styles.css | 99 ++++++++++++++++++++++++----------- zoo-css-challenge/style.css | 81 +++++++++++----------------- 2 files changed, 99 insertions(+), 81 deletions(-) diff --git a/Two-Truths-One-Lie/styles.css b/Two-Truths-One-Lie/styles.css index b8e36944..8ed7d6bb 100644 --- a/Two-Truths-One-Lie/styles.css +++ b/Two-Truths-One-Lie/styles.css @@ -1,33 +1,72 @@ -/* HTML/CSS W2 Project -* Work in pairs -* Mark up your content with semantic html -* Lay out your page using flexbox and grid -* Test your work with Devtools. -* You can get pictures and choose custom size in the download at -* https://www.pexels.com/ -* If you want to use a different font, get them from -* https://fonts.google.com/ -*/ - -/* Testing your work -== check your CSS -* uses grid -* uses flexbox -* uses at least one media query - -== check your HTML -* uses semantic HTML -* has a Lighthouse Access score of 100 <-- -* works on desktop and mobile -* works when you size the text up by 200% - -== check your design -* follows the example -* you can choose your own colours and fonts if you like -* write your names at the bottom -* take a screenshot at laptop and Moto G4 device sizes in Devtools -*/ +/* Global styles */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} body { - font: 100% "Poppins", sans-serif; + font-family: 'Poppins', sans-serif; + color: #333; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 1rem; +} + +/* Header styles */ +header { + background-color: #f2f2f2; + padding: 1rem; +} + +h1 { + font-size: 2rem; +} + +/* Main styles */ +main { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 1rem; +} + +.card { + display: flex; + flex-direction: column; + background-color: #fff; + border: 1px solid #ccc; + padding: 1rem; +} + +.card img { + max-width: 100%; + height: auto; + margin-bottom: 1rem; +} + +.card h2 { + font-size: 1.2rem; + margin-bottom: 0.5rem; } + +.card p { + font-size: 1rem; + margin-bottom: 0.5rem; +} + +/* Footer styles */ +footer { + background-color: #f2f2f2; + padding: 1rem; + text-align: center; +} + +/* Media query */ +@media (max-width: 768px) { + main { + grid-template-columns: 1fr; + } +} \ No newline at end of file diff --git a/zoo-css-challenge/style.css b/zoo-css-challenge/style.css index b9007645..33fbf8ee 100644 --- a/zoo-css-challenge/style.css +++ b/zoo-css-challenge/style.css @@ -30,7 +30,7 @@ section { } img { - border: 5px solid #8075ff; + border-radius: 5px; } h1, @@ -76,6 +76,13 @@ footer { } .introduction { + background-color: white; + line-height: 1.5; + padding: 5%; +} + +.introduction p { + margin-bottom: 1.5em; } #badge { @@ -109,7 +116,8 @@ footer { } .image-container img:first-of-type { - vertical-align: bottom; + vertical-align: top; + border-color: #8075ff; } .tigers { @@ -117,13 +125,28 @@ footer { color: #f0e100; } +.tigers h2 { + color: #ffffff; +} + +.tigers ul { + list-style-type: disc; + padding-left: 1.5em; + margin-bottom: 1em; +} + .giraffe { - background-color: #465775; - color: #56e39f; + background-color: #483c46; + color: #beee62; +} + +.giraffe h2, +.giraffe h3 { + color: #f4743b; } -.giraffe h2 { - color: #ef6f6c; +.giraffe p { + color: #beee62; } .card { @@ -148,48 +171,4 @@ footer { .card time { opacity: 0.5; display: inline-block; - margin-bottom: 10px; -} - -/*Education*/ - -.education { - height: 500px; - background-image: url("https://source.unsplash.com/1200x900/?tiger"); - background-repeat: no-repeat; - background-size: cover; - background-position: center; - padding: 100px 5%; -} - -.education-container { - background-color: rgba(255, 255, 255, 0.75); - padding: 50px; - max-width: 400px; -} - -.education-container h3, -.education-container p { - margin-bottom: 1em; -} - -/*Membership*/ - -.membership { - text-align: center; - background-color: #fffffc; -} - -.membership h2 { - color: #ff3f00; -} - -.membership strong { - color: #ff7f11; -} - -/*Programs*/ - -.programs .card { - display: block; -} + margin-bottom: 10 \ No newline at end of file From a813ec90c89c979ebebabf9d5426ee3f385678bf Mon Sep 17 00:00:00 2001 From: onurat <114289826+onurat@users.noreply.github.com> Date: Wed, 26 Apr 2023 18:22:17 +0100 Subject: [PATCH 4/4] xc --- Two-Truths-One-Lie/index.html | 75 +++++++++++-------------- Two-Truths-One-Lie/styles.css | 103 ++++++++++++++++++++-------------- 2 files changed, 94 insertions(+), 84 deletions(-) diff --git a/Two-Truths-One-Lie/index.html b/Two-Truths-One-Lie/index.html index 7951a996..78be07a9 100644 --- a/Two-Truths-One-Lie/index.html +++ b/Two-Truths-One-Lie/index.html @@ -1,45 +1,38 @@ - - - - Our Grid Project - - - - - - - -
+ + + + Our Grid Project + + + + + + + +

Two Truths, One Lie

-
-
-
- A woman during sunset -
-

Person 1

-
    -
  • Truth 1
    • -
  • Truth 2
    • -
  • Lie
    • -
-
-
-
- A woman leaning on a wall -
-

Person 2

-
    -
  • Truth 1
    • -
  • Truth 2
    • -
  • 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 8ed7d6bb..c9bc97ed 100644 --- a/Two-Truths-One-Lie/styles.css +++ b/Two-Truths-One-Lie/styles.css @@ -1,72 +1,89 @@ -/* Global styles */ -* { - box-sizing: border-box; - margin: 0; - padding: 0; -} +/* HTML/CSS W2 Project +* Work in pairs +* Mark up your content with semantic html +* Lay out your page using flexbox and grid +* Test your work with Devtools. +* You can get pictures and choose custom size in the download at +* https://www.pexels.com/ +* If you want to use a different font, get them from +* https://fonts.google.com/ +*/ -body { - font-family: 'Poppins', sans-serif; - color: #333; -} +/* Testing your work +== check your CSS +* uses grid +* uses flexbox +* uses at least one media query -.container { - max-width: 1200px; - margin: 0 auto; - padding: 1rem; +== check your HTML +* uses semantic HTML +* has a Lighthouse Access score of 100 <-- +* works on desktop and mobile +* works when you size the text up by 200% + +== check your design +* follows the example +* you can choose your own colours and fonts if you like +* write your names at the bottom +* take a screenshot at laptop and Moto G4 device sizes in Devtools +*/ + +body { + font: 100% "Poppins", sans-serif; + margin: 0; + padding: 0; } /* Header styles */ header { - background-color: #f2f2f2; - padding: 1rem; + background-color: #333; + color: #fff; + padding: 1em; } h1 { - font-size: 2rem; + margin: 0; } /* Main styles */ main { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 1rem; -} - -.card { display: flex; - flex-direction: column; - background-color: #fff; - border: 1px solid #ccc; - padding: 1rem; + flex-wrap: wrap; + justify-content: space-between; + padding: 1em; } -.card img { - max-width: 100%; - height: auto; - margin-bottom: 1rem; +.grid-section { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 1em; + margin-bottom: 2em; } -.card h2 { - font-size: 1.2rem; - margin-bottom: 0.5rem; +.grid-article { + background-color: #f0f0f0; + border: 1px solid #ccc; + padding: 1em; } -.card p { - font-size: 1rem; - margin-bottom: 0.5rem; +.grid-article h3 { + margin-top: 0; } /* Footer styles */ footer { - background-color: #f2f2f2; - padding: 1rem; - text-align: center; + background-color: #333; + color: #fff; + padding: 1em; } -/* Media query */ -@media (max-width: 768px) { +/* Media query styles */ +@media screen and (max-width: 768px) { main { - grid-template-columns: 1fr; + display: block; + } + + .grid-section { + grid-template-columns: repeat(2, 1fr); } } \ No newline at end of file