From f42a71feea8dcd0a717bd50a1ce3395a86419192 Mon Sep 17 00:00:00 2001 From: quechau Date: Thu, 12 Oct 2023 22:10:26 +0700 Subject: [PATCH 01/54] add HTML and CSS Fundamentals 12-10-2023. --- starter/02-HTML-Fundamentals/blog.html | 12 ++ starter/02-HTML-Fundamentals/challange_2.html | 38 +++++ .../{ => img}/challenges.jpg | Bin .../{ => img}/laura-jones.jpg | Bin .../{ => img}/post-img.jpg | Bin .../{ => img}/related-1.jpg | Bin .../{ => img}/related-2.jpg | Bin .../{ => img}/related-3.jpg | Bin starter/02-HTML-Fundamentals/index.html | 130 ++++++++++++++++++ starter/03-CSS-Fundamentals/index.html | 28 ++-- starter/03-CSS-Fundamentals/style.css | 130 ++++++++++++++++++ 11 files changed, 328 insertions(+), 10 deletions(-) create mode 100644 starter/02-HTML-Fundamentals/blog.html create mode 100644 starter/02-HTML-Fundamentals/challange_2.html rename starter/02-HTML-Fundamentals/{ => img}/challenges.jpg (100%) rename starter/02-HTML-Fundamentals/{ => img}/laura-jones.jpg (100%) rename starter/02-HTML-Fundamentals/{ => img}/post-img.jpg (100%) rename starter/02-HTML-Fundamentals/{ => img}/related-1.jpg (100%) rename starter/02-HTML-Fundamentals/{ => img}/related-2.jpg (100%) rename starter/02-HTML-Fundamentals/{ => img}/related-3.jpg (100%) create mode 100644 starter/02-HTML-Fundamentals/index.html create mode 100644 starter/03-CSS-Fundamentals/style.css diff --git a/starter/02-HTML-Fundamentals/blog.html b/starter/02-HTML-Fundamentals/blog.html new file mode 100644 index 000000000..582795d52 --- /dev/null +++ b/starter/02-HTML-Fundamentals/blog.html @@ -0,0 +1,12 @@ + + + + + + BLOG + + +

BLOG

+ Back to home + + diff --git a/starter/02-HTML-Fundamentals/challange_2.html b/starter/02-HTML-Fundamentals/challange_2.html new file mode 100644 index 000000000..2574db79d --- /dev/null +++ b/starter/02-HTML-Fundamentals/challange_2.html @@ -0,0 +1,38 @@ + + + + + + Document + + +

Converse Chuck Taylor All Star Low Top

+ +

$65.00

Free shipping

+ Ready to dress up or down, these classic canvas Chucks are an everyday + wardrobe staple. +

+ More information → + +

Product details

Lightweight, durable canvas sneaker
Lightly padded footbed for added comfort
Iconic Chuck Taylor ankle patch.

+ + +

+ + diff --git a/starter/02-HTML-Fundamentals/challenges.jpg b/starter/02-HTML-Fundamentals/img/challenges.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/challenges.jpg rename to starter/02-HTML-Fundamentals/img/challenges.jpg diff --git a/starter/02-HTML-Fundamentals/laura-jones.jpg b/starter/02-HTML-Fundamentals/img/laura-jones.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/laura-jones.jpg rename to starter/02-HTML-Fundamentals/img/laura-jones.jpg diff --git a/starter/02-HTML-Fundamentals/post-img.jpg b/starter/02-HTML-Fundamentals/img/post-img.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/post-img.jpg rename to starter/02-HTML-Fundamentals/img/post-img.jpg diff --git a/starter/02-HTML-Fundamentals/related-1.jpg b/starter/02-HTML-Fundamentals/img/related-1.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/related-1.jpg rename to starter/02-HTML-Fundamentals/img/related-1.jpg diff --git a/starter/02-HTML-Fundamentals/related-2.jpg b/starter/02-HTML-Fundamentals/img/related-2.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/related-2.jpg rename to starter/02-HTML-Fundamentals/img/related-2.jpg diff --git a/starter/02-HTML-Fundamentals/related-3.jpg b/starter/02-HTML-Fundamentals/img/related-3.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/related-3.jpg rename to starter/02-HTML-Fundamentals/img/related-3.jpg diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html new file mode 100644 index 000000000..8969be5fe --- /dev/null +++ b/starter/02-HTML-Fundamentals/index.html @@ -0,0 +1,130 @@ + + + + + The Basic Language of the Web: HTML + + + +

📘 The Code Magazine

+ +

The Basic Language of the Web: HTML

Posted by Laura Jones on Monday, June 21st 2027

+ +

+ All modern websites and web applications are built using three + fundamental + technologies: HTML, CSS and JavaScript. These are the languages of the + web. +

+ In this post, let's focus on HTML. We will learn what HTML is all about, + and why you too should learn it. +

+ +

What is HTML?

+ +

+ HTML stands for HyperText + Markup Language. It's a markup + language that web developers use to structure and describe the content + of a webpage (not a programming language). +

+ +

+ HTML consists of elements that describe different types of content: + paragraphs, links, headings, images, video, etc. Web browsers understand + HTML and render HTML code as websites. +

In HTML, each element is made up of 3 parts:

The opening tag
The closing tag
The actual element

+ +

+ You can learn more at + MDN Web Docs. +

+ +

Why should you learn HTML?

+ +

+ There are countless reasons for learning the fundamental language of the + web. Here are 5 of them: +

To be able to use the fundamental web dev language
+ To hand-craft beautiful websites instead of relying on tools like + Worpress or Wix +
To build web applications
To impress friends
To have fun 😃

Hopefully you learned something new here. See you next time!

+ + + + diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index df8a623a8..8737e2b37 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -2,6 +2,8 @@ + + The Basic Language of the Web: HTML @@ -15,7 +17,7 @@

The Basic Language of the Web: HTML

--> -

📘 The Code Magazine

@@ -37,7 +39,9 @@

The Basic Language of the Web: HTML

width="50" /> -

Posted by Laura Jones on Monday, June 21st 2027

+ Posted by Laura Jones on Monday, June 21st 2027 +

Why should you learn HTML?

web. Here are 5 of them:

To be able to use the fundamental web dev language

+ To be able to use the fundamental web dev language +
To hand-craft beautiful websites instead of relying on tools like Worpress or Wix @@ -112,8 +118,8 @@
Why should you learn HTML?
Related posts
-
- +
  - Related posts
    width="75" /> How to Learn Web Development -
    By Jonas Schmedtmann
    +
    By Jonas Schmedtmann
  - The Unknown Powers of CSS -
    By Jim Dillon
    +
    By Jim Dillon
  - Related posts
    height="75" /> Why JavaScript is Awesome -
    By Matilda
    +
    By Matilda
-
Copyright © 2027 by The Code Magazine.
+
+
Copyright © 2027 by The Code Magazine.
+
diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css new file mode 100644 index 000000000..c249dfd3d --- /dev/null +++ b/starter/03-CSS-Fundamentals/style.css @@ -0,0 +1,130 @@ +h1, +h2, +h3, +h4, +p, +li { + font-family: serif; + color: #444; +} +h1, +h2, +h3 { + color: #1098ad; +} +h1 { + font-size: 26px; + text-transform: uppercase; + font-style: italic; +} +h2 { + font-size: 40px; +} + +h3 { + font-size: 30px; +} + +h4 { + font-size: 20px; + text-transform: uppercase; + text-align: center; +} +p { + font-size: 22px; + line-height: 1.5; +} + +li { + font-size: 20px; +} + +/* +footer p { + font-size: 16px; +} */ + +/* article header p { + font-style: italic; +} */ + +#author { + font-style: italic; + font-size: 18px; +} + +#copyright { + font-size: 16px; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +/* ul { + list-style: none; +} */ + +.related { + list-style: none; +} + +.main-header { + background-color: #f7f7f7; +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; +} + +body { + /* background-color: #f7f7f7; */ +} + +/* .first-li { + font-weight: bold; +} */ + +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; +} + +li:nth-child(even) { + /* color: red; */ +} + +/* Misconception: this won't work! */ +article p:first-child { + color: red; +} + +/* Styling links */ +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + /* color: #777; */ + color: #1098ad; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline dotted orangered; +} + +a:active { + background-color: black; + font-style: italic; +} + +/* LVHA */ From 36c88070695ed522004b4e6477dfe057d5316100 Mon Sep 17 00:00:00 2001 From: quechau
Date: Thu, 12 Oct 2023 22:55:01 +0700 Subject: [PATCH 02/54] Resolve - Conflicts Between Selectors. --- starter/03-CSS-Fundamentals/index.html | 4 +++- starter/03-CSS-Fundamentals/style.css | 18 ++++++++++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index 8737e2b37..fb55142f6 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -148,7 +148,9 @@
Related posts

-
Copyright © 2027 by The Code Magazine.
+
+ Copyright © 2027 by The Code Magazine. +

diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index c249dfd3d..878dc3f87 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -127,4 +127,22 @@ a:active { font-style: italic; } +a { + color: red; +} + /* LVHA */ + +/* Resolving Conflicts */ +/* #copyright { + color: red; +} +.copyright { + color: blue; +} +.text { + color: yellow; +} +footer p { + color: green !important; +} */ From 120d01ce707a0938aebaa20f1d05c8abf4c571b7 Mon Sep 17 00:00:00 2001 From: quechau
Date: Fri, 13 Oct 2023 14:37:04 +0700 Subject: [PATCH 03/54] done challange no.1 CSS fundamental. --- starter/02-HTML-Fundamentals/challange_2.html | 21 ++++--- .../style-for-challange-2.css | 63 +++++++++++++++++++ starter/03-CSS-Fundamentals/index.html | 1 + starter/03-CSS-Fundamentals/style.css | 24 ++++--- 4 files changed, 93 insertions(+), 16 deletions(-) create mode 100644 starter/02-HTML-Fundamentals/style-for-challange-2.css diff --git a/starter/02-HTML-Fundamentals/challange_2.html b/starter/02-HTML-Fundamentals/challange_2.html index 2574db79d..6bac658a9 100644 --- a/starter/02-HTML-Fundamentals/challange_2.html +++ b/starter/02-HTML-Fundamentals/challange_2.html @@ -3,11 +3,12 @@ - Document + + Converse Chuck Taylor -
-
Converse Chuck Taylor All Star Low Top
+
+
Converse Chuck Taylor All Star Low Top

Converse Chuck Taylor All Star Low Top
width="250" /> -
$65.00
-
Free shipping
+
$65.00
+
Free shipping

Ready to dress up or down, these classic canvas Chucks are an everyday wardrobe staple.
- More information → -
Product details
-
+
Product details
+

Lightweight, durable canvas sneaker

Lightly padded footbed for added comfort

Iconic Chuck Taylor ankle patch.

- +
diff --git a/starter/02-HTML-Fundamentals/style-for-challange-2.css b/starter/02-HTML-Fundamentals/style-for-challange-2.css new file mode 100644 index 000000000..3b23487e8 --- /dev/null +++ b/starter/02-HTML-Fundamentals/style-for-challange-2.css @@ -0,0 +1,63 @@ +body { + font-family: sans-serif; + line-height: 1.4; +} + +/* PRODUCT */ +.product { + border: 4px solid black; +} + +.product-title { + text-align: center; + font-size: 22px; + text-transform: uppercase; + background-color: #f7f7f7; +} + +/* PRODUCT INFOMATION */ +.price { + font-size: 24px; +} + +.shipping { + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + color: #777; +} + +.more-info:link, +.more-info:visited { + color: black; +} + +.more-info:hover, +.more-info:active { + text-decoration: none; +} + +/* PRODUCT DETAILS */ +.details-title { + text-transform: uppercase; + font-size: 16px; +} + +.details-list { + list-style: square; +} + +/* BUTTON */ +.add-cart { + background-color: #000; + border: none; + color: #fff; + font-size: 20px; + text-transform: uppercase; + cursor: pointer; +} + +.add-cart:hover { + color: #000; + background-color: #fff; +} diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index fb55142f6..e0e68eda1 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -21,6 +21,7 @@
The Basic Language of the Web: HTML

📘 The Code Magazine

+ Blog Challenges Flexbox diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index 878dc3f87..381f7985c 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -1,12 +1,13 @@ -h1, -h2, -h3, -h4, -p, -li { - font-family: serif; +* { + /* border-top: 10px solid #1098ad; */ +} + +body { color: #444; + font-family: serif; + border-top: 10px solid #1098ad; } + h1, h2, h3 { @@ -146,3 +147,12 @@ a { footer p { color: green !important; } */ + +/* nav a:link, +nav p { + font-size: 18px; +} */ + +nav { + font-size: 18px; +} From c3cad53f2d63f92ebbe4293f46d3934bf71b8e2f Mon Sep 17 00:00:00 2001 From: quechau Date: Fri, 13 Oct 2023 15:38:51 +0700 Subject: [PATCH 04/54] Using margins and paddings. --- starter/03-CSS-Fundamentals/index.html | 2 +- starter/03-CSS-Fundamentals/style.css | 61 +++++++++++++++++++------- 2 files changed, 47 insertions(+), 16 deletions(-) diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index e0e68eda1..a83f08047 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -30,7 +30,7 @@
📘 The Code Magazine

The Basic Language of the Web: HTML

Date: Fri, 13 Oct 2023 15:49:41 +0700 Subject: [PATCH 05/54] Add dimensions. --- starter/03-CSS-Fundamentals/index.html | 1 + starter/03-CSS-Fundamentals/style.css | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index a83f08047..7fe50703d 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -49,6 +49,7 @@

The Basic Language of the Web: HTML

alt="HTML code on a screen" width="500" height="200" + class="post-img" />

diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index ceee27f75..6833ce10c 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -17,6 +17,7 @@ body { padding-right: 40px; */ padding: 20px 40px; margin-bottom: 60px; + height: 80px; } nav { @@ -38,6 +39,7 @@ aside { /* padding-top: 50px; padding-bottom: 50px; */ padding: 50px 0; + width: 500px; } h1, h2, @@ -169,6 +171,10 @@ a { /* LVHA */ +.post-img { + width: 100%; + height: auto; +} /* Resolving Conflicts */ /* #copyright { color: red; From dfe3c5c5876827f49947192063b2330a40e77326 Mon Sep 17 00:00:00 2001 From: quechau Date: Fri, 13 Oct 2023 16:12:03 +0700 Subject: [PATCH 06/54] Centering Our Page. --- starter/03-CSS-Fundamentals/index.html | 270 +++++++++++++------------ starter/03-CSS-Fundamentals/style.css | 6 + 2 files changed, 144 insertions(+), 132 deletions(-) diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index 7fe50703d..63ace40b9 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -16,143 +16,149 @@

The Basic Language of the Web: HTML

--> - -

📘 The Code Magazine

- - -

- -

The Basic Language of the Web: HTML

- -

- Posted by Laura Jones on Monday, June 21st 2027 -

- -

📘 The Code Magazine

+ +

- All modern websites and web applications are built using three - fundamental - technologies: HTML, CSS and JavaScript. These are the languages of the - web. -

- -

- In this post, let's focus on HTML. We will learn what HTML is all about, - and why you too should learn it. -

- -

What is HTML?

- HTML stands for HyperText - Markup Language. It's a markup - language that web developers use to structure and describe the content - of a webpage (not a programming language). -

- HTML consists of elements that describe different types of content: - paragraphs, links, headings, images, video, etc. Web browsers understand - HTML and render HTML code as websites. -

In HTML, each element is made up of 3 parts:

- -

The opening tag
The closing tag
The actual element

- -

- You can learn more at - MDN Web Docs. -

- -

Why should you learn HTML?

- -

- There are countless reasons for learning the fundamental language of the - web. Here are 5 of them: -

- - - -

Hopefully you learned something new here. See you next time!

- - - - +

+ +

+ All modern websites and web applications are built using three + fundamental + technologies: HTML, CSS and JavaScript. These are the languages of the + web. +

+ +

+ In this post, let's focus on HTML. We will learn what HTML is all + about, and why you too should learn it. +

+ +

What is HTML?

+ HTML stands for HyperText + Markup Language. It's a markup + language that web developers use to structure and describe the content + of a webpage (not a programming language). +

+ HTML consists of elements that describe different types of content: + paragraphs, links, headings, images, video, etc. Web browsers + understand HTML and render HTML code as websites. +

In HTML, each element is made up of 3 parts:

+ +

The opening tag
The closing tag
The actual element

+ +

+ You can learn more at + MDN Web Docs. +

+ +

Why should you learn HTML?

+ +

+ There are countless reasons for learning the fundamental language of + the web. Here are 5 of them: +

+ + + +

Hopefully you learned something new here. See you next time!

+ + + + + diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index 6833ce10c..ee24c963f 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -10,6 +10,12 @@ body { border-top: 10px solid #1098ad; } +.container { + width: 800px; + /* margin-left: auto; + margin-right: auto; */ + margin: 0 auto; +} .main-header { background-color: #f7f7f7; /* padding: 20px; From 7ad1ec4c548c2c7db5516d21756d0be7f0a30eb7 Mon Sep 17 00:00:00 2001 From: quechau Date: Fri, 13 Oct 2023 16:28:40 +0700 Subject: [PATCH 07/54] Challenge No 2 CSS Fundametal. --- .../style-for-challange-2.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/starter/02-HTML-Fundamentals/style-for-challange-2.css b/starter/02-HTML-Fundamentals/style-for-challange-2.css index 3b23487e8..88bbb3ccd 100644 --- a/starter/02-HTML-Fundamentals/style-for-challange-2.css +++ b/starter/02-HTML-Fundamentals/style-for-challange-2.css @@ -1,3 +1,8 @@ +* { + margin: 0; + padding: 0; +} + body { font-family: sans-serif; line-height: 1.4; @@ -6,6 +11,8 @@ body { /* PRODUCT */ .product { border: 4px solid black; + width: 825px; + margin: 50px auto; } .product-title { @@ -13,6 +20,7 @@ body { font-size: 22px; text-transform: uppercase; background-color: #f7f7f7; + padding: 15px; } /* PRODUCT INFOMATION */ @@ -25,6 +33,7 @@ body { text-transform: uppercase; font-weight: bold; color: #777; + margin-bottom: 20px; } .more-info:link, @@ -41,12 +50,18 @@ body { .details-title { text-transform: uppercase; font-size: 16px; + margin-bottom: 15px; + margin-top: 30px; } .details-list { list-style: square; + margin-left: 20px; } +.details-list li { + margin-bottom: 10px; +} /* BUTTON */ .add-cart { background-color: #000; @@ -55,6 +70,9 @@ body { font-size: 20px; text-transform: uppercase; cursor: pointer; + padding: 15px; + width: 100%; + border-top: 4px solid black; } .add-cart:hover { From 52f3be892e59e160b21d627a9075a83d897e6ce4 Mon Sep 17 00:00:00 2001 From: quechau Date: Sat, 14 Oct 2023 10:35:06 +0700 Subject: [PATCH 08/54] add box types and debug skills. --- starter/03-CSS-Fundamentals/index.html | 5 +- starter/03-CSS-Fundamentals/style.css | 75 +++++++++++++++++++++++++- 2 files changed, 76 insertions(+), 4 deletions(-) diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index 63ace40b9..7516e7692 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -51,6 +51,7 @@

The Basic Language of the Web: HTML

height="200" class="post-img" /> +

@@ -126,7 +127,7 @@

src="img/related-1.jpg" alt="Person programming" width="75" - width="75" + height="75" /> How to Learn Web Development @@ -136,7 +137,7 @@

src="img/related-2.jpg" alt="Lightning" width="75" - heigth="75" + height="75" /> The Unknown Powers of CSS diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index ee24c963f..20e259383 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -4,10 +4,12 @@ padding: 0; } +/* PAGE SELECTIONS */ body { color: #444; - font-family: serif; + font-family: sans-serif; border-top: 10px solid #1098ad; + position: relative; } .container { @@ -15,6 +17,7 @@ body { /* margin-left: auto; margin-right: auto; */ margin: 0 auto; + /* position: relative; */ } .main-header { background-color: #f7f7f7; @@ -23,11 +26,12 @@ body { padding-right: 40px; */ padding: 20px 40px; margin-bottom: 60px; - height: 80px; + /* height: 80px; */ } nav { font-size: 18px; + /* text-align: center; */ } article { @@ -36,6 +40,7 @@ article { .post-header { margin-bottom: 40px; + /* position: relative; */ } aside { @@ -47,6 +52,7 @@ aside { padding: 50px 0; width: 500px; } +/* SMALLER ELEMENTS */ h1, h2, h3 { @@ -77,11 +83,13 @@ p { font-size: 22px; line-height: 1.5; margin-bottom: 15px; + /* display: inline; */ } li { font-size: 20px; margin-bottom: 10px; + /* display: inline; */ } li:last-child { @@ -181,6 +189,69 @@ a { width: 100%; height: auto; } + +nav a:link { + /* background-color: orangered; + margin: 20px; + padding: 20px; + display: block; */ + margin-right: 30px; + margin-top: 10px; + display: inline-block; +} + +nav a:link:last-child { + margin-right: 0; +} + +button { + font-size: 22px; + padding: 20px; + cursor: pointer; + position: absolute; + /* top: 50px; + left: 50px; */ + bottom: 50px; + right: 50px; +} + +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +/* h2::first-letter { + font-size: 80px; +} */ + +h3 + p::first-line { + /* color: red; */ +} + +h2 { + /* background-color: orange; */ + position: relative; +} + +/* h2::after {} */ +h2::before { + content: "TOP"; + background-color: #ffe70e; + color: #444; + font-size: 16px; + font-weight: bold; + display: inline-block; + padding: 5px 10px; + position: absolute; + top: -10px; + right: -25px; +} + +/* For make bug conflict selector a tag */ +.main-header nav a:link { + color: red; + margin-top: 100px; +} /* Resolving Conflicts */ /* #copyright { color: red; From 3ed887ea3b07bf7a2dfc52f249f3acfcc149714e Mon Sep 17 00:00:00 2001 From: quechau Date: Sat, 14 Oct 2023 13:21:17 +0700 Subject: [PATCH 09/54] add challenge no.3 CSS Fundamental. --- starter/02-HTML-Fundamentals/challange_2.html | 9 ++++ .../style-for-challange-2.css | 49 +++++++++++++++++++ 2 files changed, 58 insertions(+) diff --git a/starter/02-HTML-Fundamentals/challange_2.html b/starter/02-HTML-Fundamentals/challange_2.html index 6bac658a9..afe93102b 100644 --- a/starter/02-HTML-Fundamentals/challange_2.html +++ b/starter/02-HTML-Fundamentals/challange_2.html @@ -18,6 +18,7 @@

Converse Chuck Taylor All Star Low Top

$65.00

Free shipping

Sale

Ready to dress up or down, these classic canvas Chucks are an everyday wardrobe staple. @@ -28,6 +29,14 @@

Converse Chuck Taylor All Star Low Top

>More information → +

Product details

Lightweight, durable canvas sneaker

Date: Sat, 14 Oct 2023 15:43:02 +0700 Subject: [PATCH 10/54] Using floats. --- starter/04-CSS-Layouts/index.html | 3 ++- starter/04-CSS-Layouts/style.css | 21 +++++++++++++++++++++ 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 15ecbeb77..64d75e106 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -39,9 +39,10 @@

The Basic Language of the Web: HTML

alt="Headshot of Laura Jones" height="50" width="50" + class="author-img" /> -

Posted by Laura Jones on Monday, June 21st 2027

diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index c879e79d2..f8004c6ce 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -265,3 +265,24 @@ footer p { nav p { font-size: 18px; } */ + +/* FLOATS */ +.author-img { + float: left; + margin-bottom: 20px; +} + +.author { + /* padding-left: 80px; */ + float: left; + margin-top: 10px; + margin-left: 20px; +} + +h1 { + float: left; +} + +nav { + float: right; +} From 796f407fee3307003912662324cccc661e30eece Mon Sep 17 00:00:00 2001 From: quechau Date: Sat, 14 Oct 2023 15:52:17 +0700 Subject: [PATCH 11/54] Clearfix in Float. --- starter/04-CSS-Layouts/index.html | 3 ++- starter/04-CSS-Layouts/style.css | 11 +++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 64d75e106..ab285fc03 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -18,7 +18,7 @@

The Basic Language of the Web: HTML

-->

📘 The Code Magazine

diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index f8004c6ce..58f8ed5a5 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -22,6 +22,7 @@ body { .main-header { background-color: #f7f7f7; + background-color: red; /* padding: 20px; padding-left: 40px; padding-right: 40px; */ @@ -286,3 +287,13 @@ h1 { nav { float: right; } + +.clear { + clear: both; +} + +.clearfix::after { + clear: both; + content: ""; + display: block; +} From ea8e0634f3956bf7ea80fe200467d73293448ae3 Mon Sep 17 00:00:00 2001 From: quechau Date: Sat, 14 Oct 2023 16:07:09 +0700 Subject: [PATCH 12/54] build a simple float layout. --- starter/04-CSS-Layouts/style.css | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index 58f8ed5a5..c15899de2 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -14,7 +14,7 @@ body { } .container { - width: 800px; + width: 1200px; /* margin-left: auto; margin-right: auto; */ margin: 0 auto; @@ -22,7 +22,6 @@ body { .main-header { background-color: #f7f7f7; - background-color: red; /* padding: 20px; padding-left: 40px; padding-right: 40px; */ @@ -297,3 +296,17 @@ nav { content: ""; display: block; } + +article { + width: 825px; + float: left; +} + +aside { + width: 300px; + float: right; +} + +footer { + clear: both; +} From 59e4016799f3131f1644be29e49338e07e073ab2 Mon Sep 17 00:00:00 2001 From: quechau Date: Sat, 14 Oct 2023 16:43:24 +0700 Subject: [PATCH 13/54] box-sizing: border-box. --- starter/04-CSS-Layouts/style.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index c15899de2..347e104f7 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -2,6 +2,7 @@ /* border-top: 10px solid #1098ad; */ margin: 0; padding: 0; + box-sizing: border-box; } /* PAGE SECTIONS */ @@ -48,10 +49,7 @@ aside { background-color: #f7f7f7; border-top: 5px solid #1098ad; border-bottom: 5px solid #1098ad; - /* padding-top: 50px; - padding-bottom: 50px; */ - padding: 50px 0; - width: 500px; + padding: 50px 40px; } /* SMALLER ELEMENTS */ @@ -82,6 +80,7 @@ h4 { font-size: 20px; text-transform: uppercase; text-align: center; + margin-bottom: 30px; } p { @@ -134,6 +133,7 @@ li:last-child { .related { list-style: none; + margin-left: 0; } body { From acfa25c9ac839fdc132255b79191c47fa8ddd342 Mon Sep 17 00:00:00 2001 From: quechau Date: Sat, 14 Oct 2023 17:47:35 +0700 Subject: [PATCH 14/54] Challenge No.1 section 4 Layouts. --- starter/02-HTML-Fundamentals/challange_2.html | 70 ++++++++++--------- .../style-for-challange-2.css | 38 +++++++++- 2 files changed, 74 insertions(+), 34 deletions(-) diff --git a/starter/02-HTML-Fundamentals/challange_2.html b/starter/02-HTML-Fundamentals/challange_2.html index afe93102b..f3d8feb4c 100644 --- a/starter/02-HTML-Fundamentals/challange_2.html +++ b/starter/02-HTML-Fundamentals/challange_2.html @@ -9,41 +9,47 @@

Converse Chuck Taylor All Star Low Top

$65.00

Free shipping

Sale

- Ready to dress up or down, these classic canvas Chucks are an everyday - wardrobe staple. -

- More information → +

$65.00

Free shipping

Sale

+ Ready to dress up or down, these classic canvas Chucks are an + everyday wardrobe staple. +

+ More information → -

Product details

Lightweight, durable canvas sneaker
Lightly padded footbed for added comfort
Iconic Chuck Taylor ankle patch.

Product details

Lightweight, durable canvas sneaker
Lightly padded footbed for added comfort
Iconic Chuck Taylor ankle patch.

diff --git a/starter/02-HTML-Fundamentals/style-for-challange-2.css b/starter/02-HTML-Fundamentals/style-for-challange-2.css index 7b991f3e7..438786d53 100644 --- a/starter/02-HTML-Fundamentals/style-for-challange-2.css +++ b/starter/02-HTML-Fundamentals/style-for-challange-2.css @@ -1,6 +1,7 @@ * { margin: 0; padding: 0; + box-sizing: border-box; } body { @@ -8,6 +9,20 @@ body { line-height: 1.4; } +.clearfix::after { + content: ""; + display: block; + clear: both; +} +.container { + /* background-color: red; */ +} + +.product-img { + float: left; + margin-right: 40px; +} + /* PRODUCT */ .product { border: 4px solid black; @@ -25,8 +40,17 @@ body { } /* PRODUCT INFOMATION */ +.product-info { + /* (825 - 8 - 250 - 80) */ + width: 243px; + float: left; + margin-right: 40px; + margin-top: 20px; +} + .price { font-size: 24px; + float: left; } .shipping { @@ -35,6 +59,8 @@ body { font-weight: bold; color: #777; margin-bottom: 20px; + float: right; + margin-top: 8px; } .sale { @@ -54,7 +80,10 @@ body { top: -17px; left: -38px; } - +.product-description { + clear: both; + margin-bottom: 10px; +} .more-info:link, .more-info:visited { color: black; @@ -96,11 +125,16 @@ body { } /* PRODUCT DETAILS */ +.product-details { + width: 243px; + float: left; + margin-top: 20px; +} + .details-title { text-transform: uppercase; font-size: 16px; margin-bottom: 15px; - margin-top: 30px; } .details-list { From b231db2f6f1751f36d28315b747c850ac6398ad2 Mon Sep 17 00:00:00 2001 From: quechau Date: Sun, 15 Oct 2023 13:00:52 +0700 Subject: [PATCH 15/54] Spacing and Aligning Fle Items. --- starter/04-CSS-Layouts/flexbox.html | 28 +++++++++++++++++++++++++--- starter/04-CSS-Layouts/index.html | 4 ++-- 2 files changed, 27 insertions(+), 5 deletions(-) diff --git a/starter/04-CSS-Layouts/flexbox.html b/starter/04-CSS-Layouts/flexbox.html index 496ef372a..ee6a026ca 100644 --- a/starter/04-CSS-Layouts/flexbox.html +++ b/starter/04-CSS-Layouts/flexbox.html @@ -36,10 +36,32 @@ /* STARTER */ font-family: sans-serif; background-color: #ddd; - font-size: 40px; + font-size: 32px; margin: 40px; /* FLEXBOX */ + display: flex; + align-items: center; + justify-content: flex-start; + gap: 30px; + } + + .el { + /* margin-right: 30px; */ + } + + .el--1 { + align-self: flex-start; + /* order: 2; */ + } + + .el--5 { + align-self: stretch; + order: 1; + } + + .el--6 { + order: -1; } @@ -51,8 +73,8 @@

are

amazing

languages

learn

diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index ab285fc03..fe7c5d3a9 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -25,8 +25,8 @@

📘 The Code Magazine

Blog Challenges - Flexbox - CSS Grid + Flexbox + CSS Grid From 70686204acd99e09cd0e09f23f273f1cafc8a44d Mon Sep 17 00:00:00 2001 From: quechau Date: Mon, 16 Oct 2023 20:50:00 +0700 Subject: [PATCH 16/54] The flex property. --- starter/04-CSS-Layouts/flexbox.html | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/starter/04-CSS-Layouts/flexbox.html b/starter/04-CSS-Layouts/flexbox.html index ee6a026ca..f915503de 100644 --- a/starter/04-CSS-Layouts/flexbox.html +++ b/starter/04-CSS-Layouts/flexbox.html @@ -43,16 +43,26 @@ display: flex; align-items: center; justify-content: flex-start; - gap: 30px; + gap: 10px; } .el { - /* margin-right: 30px; */ + /* DEFAULT + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; */ + /* flex-basis: 200px; + flex-shrink: 0; */ + /* flex: 0 0 200px; */ + + /* flex-grow: 1; */ + flex: 1; } .el--1 { align-self: flex-start; /* order: 2; */ + /* flex-grow: 3; */ } .el--5 { @@ -72,7 +82,7 @@

CSS

are

amazing

languages

+ From f4c8885d339b64706088f55f2056a2d0cdf31c88 Mon Sep 17 00:00:00 2001 From: quechau Date: Mon, 16 Oct 2023 21:48:56 +0700 Subject: [PATCH 17/54] Adding Flexbox to Our Project. --- starter/04-CSS-Layouts/index.html | 47 ++++++++++++++++++------------- starter/04-CSS-Layouts/style.css | 43 ++++++++++++++++++++++++++-- 2 files changed, 68 insertions(+), 22 deletions(-) diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index fe7c5d3a9..11f227e46 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -34,18 +34,19 @@

📘 The Code Magazine

The Basic Language of the Web: HTML

- -

- Posted by Laura Jones on Monday, June 21st 2027 -

+ Posted by Laura Jones on Monday, June 21st 2027 +

Why should you learn HTML?

diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index 347e104f7..7a73c42c3 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -197,7 +197,6 @@ nav a:link { display: block; */ margin-right: 30px; - margin-top: 10px; display: inline-block; } @@ -267,13 +266,13 @@ nav p { } */ /* FLOATS */ +/* .author-img { float: left; margin-bottom: 20px; } .author { - /* padding-left: 80px; */ float: left; margin-top: 10px; margin-left: 20px; @@ -310,3 +309,43 @@ aside { footer { clear: both; } +*/ + +/* FLEX BOX */ +.main-header { + display: flex; + align-items: center; + justify-content: space-between; +} + +.author-box { + display: flex; + align-items: center; + margin-bottom: 15px; +} + +.author { + margin-bottom: 0; + margin-left: 15px; +} + +.related-post { + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 30px; +} + +.related-link::link { + font-size: 17px; + font-weight: bold; + font-style: normal; + margin-bottom: 5px; + display: block; +} + +.related-author { + margin-bottom: 0; + font-weight: normal; + font-style: italic; +} From 32a73f78e0b0c7e3591a884fbfdd44c4ee2f8228 Mon Sep 17 00:00:00 2001 From: quechau Date: Mon, 16 Oct 2023 22:17:40 +0700 Subject: [PATCH 18/54] Build a simple Flexbox Layout. --- starter/04-CSS-Layouts/index.html | 265 +++++++++++++++--------------- starter/04-CSS-Layouts/style.css | 19 +++ 2 files changed, 153 insertions(+), 131 deletions(-) diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 11f227e46..a92f80a50 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -30,140 +30,143 @@

📘 The Code Magazine

- -

The Basic Language of the Web: HTML

- -

- Posted by Laura Jones on Monday, June 21st 2027 -

- -

- All modern websites and web applications are built using three - fundamental - technologies: HTML, CSS and JavaScript. These are the languages of the - web. -

- -

- In this post, let's focus on HTML. We will learn what HTML is all - about, and why you too should learn it. -

- -

What is HTML?

- HTML stands for HyperText - Markup Language. It's a markup - language that web developers use to structure and describe the content - of a webpage (not a programming language). -

- HTML consists of elements that describe different types of content: - paragraphs, links, headings, images, video, etc. Web browsers - understand HTML and render HTML code as websites. -

In HTML, each element is made up of 3 parts:

- -

The opening tag
The closing tag
The actual element

- -

- You can learn more at - MDN Web Docs. -

- -

Why should you learn HTML?

- -

- There are countless reasons for learning the fundamental language of - the web. Here are 5 of them: -

- -

- To be able to use the fundamental web dev language -
- To hand-craft beautiful websites instead of relying on tools like - Worpress or Wix -
To build web applications
To impress friends
To have fun 😃

- -

Hopefully you learned something new here. See you next time!

- - + + + +

+ All modern websites and web applications are built using three + fundamental + technologies: HTML, CSS and JavaScript. These are the languages of + the web. +

+ +

+ In this post, let's focus on HTML. We will learn what HTML is all + about, and why you too should learn it. +

+ +

What is HTML?

+ HTML stands for HyperText + Markup Language. It's a markup + language that web developers use to structure and describe the + content of a webpage (not a programming language). +

+ HTML consists of elements that describe different types of content: + paragraphs, links, headings, images, video, etc. Web browsers + understand HTML and render HTML code as websites. +

In HTML, each element is made up of 3 parts:

+ +

The opening tag
The closing tag
The actual element

+ +

+ You can learn more at + MDN Web Docs. +

+ +

Why should you learn HTML?

+ +

+ There are countless reasons for learning the fundamental language of + the web. Here are 5 of them: +

+ +

+ To be able to use the fundamental web dev language +
+ To hand-craft beautiful websites instead of relying on tools like + Worpress or Wix +
To build web applications
To impress friends
To have fun 😃

+ +

Hopefully you learned something new here. See you next time!

+ + +

+ +

diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index b0fefe92d..a7b6b7557 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -27,7 +27,7 @@ body { padding-left: 40px; padding-right: 40px; */ padding: 20px 40px; - margin-bottom: 60px; + /* margin-bottom: 60px; */ /* height: 80px; */ } @@ -37,7 +37,7 @@ nav { } article { - margin-bottom: 60px; + /* margin-bottom: 60px; */ } .post-header { @@ -349,8 +349,8 @@ footer { font-weight: normal; font-style: italic; } - -.row { +/* FLEXBOX LAYOUT */ +/* .row { display: flex; align-items: flex-start; gap: 75px; @@ -362,9 +362,33 @@ article { margin-bottom: 0; } aside { - /* DEFAULT + DEFAULT flex-grow: 0; flex-shrink: 1; - flex-basis: auto; */ + flex-basis: auto; flex: 0 0 300px; +} */ + +/* CSS GRID LAYOUT */ +.container { + display: grid; + grid-template-columns: 1fr 300px; + column-gap: 75px; + row-gap: 60px; + align-items: start; +} + +.main-header { + /* grid-column: 1 / span 2; */ + grid-column: 1 / -1; +} + +article { +} + +aside { + /* align-self: start; */ +} +footer { + grid-column: 1 / -1; } From 94488083987efa40604e6452d3fd79f1887e0c6d Mon Sep 17 00:00:00 2001 From: quechau Date: Tue, 17 Oct 2023 23:09:34 +0700 Subject: [PATCH 25/54] add Challenge No.3 Section 4 Layouts. --- starter/02-HTML-Fundamentals/challange_2.html | 78 +++++++++---------- .../style-for-challange-2.css | 15 ++-- 2 files changed, 49 insertions(+), 44 deletions(-) diff --git a/starter/02-HTML-Fundamentals/challange_2.html b/starter/02-HTML-Fundamentals/challange_2.html index 12cdf0e30..5b1ae5649 100644 --- a/starter/02-HTML-Fundamentals/challange_2.html +++ b/starter/02-HTML-Fundamentals/challange_2.html @@ -9,49 +9,49 @@

Converse Chuck Taylor All Star Low Top

+ +

$65.00

Free shipping

Sale

- Ready to dress up or down, these classic canvas Chucks are an - everyday wardrobe staple. -

- More information → - -

$65.00

Free shipping

Product details

Lightweight, durable canvas sneaker
Lightly padded footbed for added comfort
Iconic Chuck Taylor ankle patch.

Sale

+ Ready to dress up or down, these classic canvas Chucks are an everyday + wardrobe staple. +

+ More information → + +

Product details

Lightweight, durable canvas sneaker
Lightly padded footbed for added comfort
Iconic Chuck Taylor ankle patch.

diff --git a/starter/02-HTML-Fundamentals/style-for-challange-2.css b/starter/02-HTML-Fundamentals/style-for-challange-2.css index 433bb8404..150f65d22 100644 --- a/starter/02-HTML-Fundamentals/style-for-challange-2.css +++ b/starter/02-HTML-Fundamentals/style-for-challange-2.css @@ -9,16 +9,15 @@ body { line-height: 1.4; } -.clearfix::after { +/* .clearfix::after { content: ""; display: block; clear: both; -} -.container { - /* background-color: red; */ +} */ +/* .container { display: flex; gap: 40px; -} +} */ .product-img { } @@ -29,6 +28,10 @@ body { width: 825px; margin: 50px auto; position: relative; + + display: grid; + grid-template-columns: 250px 1fr 1fr; + column-gap: 40px; } .product-title { @@ -37,6 +40,7 @@ body { text-transform: uppercase; background-color: #f7f7f7; padding: 15px; + grid-column: 1 / -1; } /* PRODUCT INFOMATION */ @@ -161,6 +165,7 @@ body { padding: 15px; width: 100%; border-top: 4px solid black; + grid-column: 1 / -1; } .add-cart:hover { From 9ce5c073564f256e92c210404209cc2910289b26 Mon Sep 17 00:00:00 2001 From: quechau Date: Wed, 18 Oct 2023 20:35:53 +0700 Subject: [PATCH 26/54] Implementing Colors. --- starter/05-Design/index.html | 7 +++++++ starter/05-Design/style.css | 21 ++++++++++++++++++++- 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/starter/05-Design/index.html b/starter/05-Design/index.html index 92b74fd48..1e3691fa5 100644 --- a/starter/05-Design/index.html +++ b/starter/05-Design/index.html @@ -5,6 +5,13 @@ + + + + Lisbon Chair Shop diff --git a/starter/05-Design/style.css b/starter/05-Design/style.css index 77dfdffa3..aa3e91509 100644 --- a/starter/05-Design/style.css +++ b/starter/05-Design/style.css @@ -16,7 +16,7 @@ FONT SIZE SYSTEM (px) /* GENERAL STYLES */ /* ------------------------ */ body { - font-family: sans-serif; + font-family: "Inter", sans-serif; } .container { @@ -31,6 +31,9 @@ section { h2 { margin-bottom: 48px; + font-size: 36px; + letter-spacing: -0.5px; + /* 24 / 30 / 36 */ } .grid-3-cols { @@ -57,10 +60,16 @@ header { h1 { margin-bottom: 24px; + font-size: 44px; + line-height: 1.1; + letter-spacing: -1px; + /* 44 / 52 / 62 */ } .header-text { margin-bottom: 24px; + font-size: 18px; + line-height: 1.7; } img { @@ -73,9 +82,12 @@ img { .features-title { margin-bottom: 16px; + font-size: 20px; } .features-text { + font-size: 18px; + line-height: 1.7; } /* TESTIMONIAL */ @@ -89,11 +101,15 @@ img { .testimonial-box h2 { margin-bottom: 24px; + font-size: 24px; + /* 20 / 24 / 30 */ } .testimonial-text { font-style: italic; margin-bottom: 24px; + font-size: 18px; + line-height: 1.7; } /* CHAIRS */ @@ -103,6 +119,7 @@ img { h3 { margin-bottom: 24px; + font-size: 20px; } .chair-details { @@ -127,8 +144,10 @@ h3 { .chair-price { display: flex; justify-content: space-between; + font-size: 20px; } footer { margin-bottom: 48px; + font-size: 14px; } From 000a6146cced42a8a449f6a3538cd1d456845ce7 Mon Sep 17 00:00:00 2001 From: quechau Date: Wed, 18 Oct 2023 22:08:01 +0700 Subject: [PATCH 27/54] Implementing Colors. --- starter/05-Design/style.css | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/starter/05-Design/style.css b/starter/05-Design/style.css index aa3e91509..992abb183 100644 --- a/starter/05-Design/style.css +++ b/starter/05-Design/style.css @@ -6,6 +6,11 @@ FONT SIZE SYSTEM (px) 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 */ +/* +MAIN COLOR: #087f5b +GREY COLOR: #343a40 +*/ + * { margin: 0; padding: 0; @@ -17,6 +22,8 @@ FONT SIZE SYSTEM (px) /* ------------------------ */ body { font-family: "Inter", sans-serif; + color: #343a40; + border-bottom: 8px solid #087f5b; } .container { @@ -42,6 +49,31 @@ h2 { column-gap: 80px; } +.btn:link, +.btn:visited { + background-color: #087f5b; + color: #fff; + text-decoration: none; + text-transform: uppercase; + font-weight: 500; + display: inline-block; +} + +.btn:hover, +.btn:active { + background-color: #099268; +} + +.btn--big { + font-size: 18px; + padding: 16px 32px; +} + +.btn--small { + font-size: 14px; + padding: 8px 12px; +} + /* ------------------------ */ /* COMPONENT STYLES */ /* ------------------------ */ @@ -92,6 +124,9 @@ img { /* TESTIMONIAL */ .testimonial-section { + background-color: #087f5b; + color: #fff; + padding: 24px; } .testimonial-box { @@ -150,4 +185,5 @@ h3 { footer { margin-bottom: 48px; font-size: 14px; + color: #868e96; } From efd692027fa5783a893363551bb9a8271985572e Mon Sep 17 00:00:00 2001 From: quechau Date: Wed, 18 Oct 2023 23:59:49 +0700 Subject: [PATCH 28/54] Implementing Icons. --- starter/05-Design/index.html | 217 +++++++++++++++++++++++++++++++++++ starter/05-Design/style.css | 7 ++ 2 files changed, 224 insertions(+) diff --git a/starter/05-Design/index.html b/starter/05-Design/index.html index 1e3691fa5..b7d53f90e 100644 --- a/starter/05-Design/index.html +++ b/starter/05-Design/index.html @@ -34,6 +34,21 @@

We design and build better chairs, for a better life

What makes our chairs special

+ +

Science meets design

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus @@ -42,6 +57,21 @@

What makes our chairs special

+ +

Maximal comfort

@@ -52,6 +82,21 @@

What makes our chairs special

+ +

Ethical and sustainable

@@ -87,16 +132,76 @@

Our bestselling chairs

The Laid Back

+ + Leisure and relaxing
+ + Comfortable for 4h
+ + Vegan leather
+ + Weighs 16 kg

@@ -113,15 +218,71 @@

The Laid Back

The Worker Bee

+ Work
+ Comfortable for 8h
+ Vegan leather
+ Weighs 22 kg

@@ -138,15 +299,71 @@

The Worker Bee

The Chair 4/2

+ Leisure and relaxing
+ Comfortable all day!
+ Organic cotton
+ Weighs 80 kg

diff --git a/starter/05-Design/style.css b/starter/05-Design/style.css index 992abb183..2c258a59a 100644 --- a/starter/05-Design/style.css +++ b/starter/05-Design/style.css @@ -110,6 +110,10 @@ img { /* FEATURES */ .features-icon { + stroke: #087f5b; + width: 32px; + height: 32px; + margin-bottom: 16px; } .features-title { @@ -174,6 +178,9 @@ h3 { } .chair-icon { + stroke: #087f5b; + width: 24px; + height: 24px; } .chair-price { From 65999d0b6ea7e5445914b0f342294d46991124c3 Mon Sep 17 00:00:00 2001 From: quechau Date: Thu, 19 Oct 2023 11:02:34 +0700 Subject: [PATCH 29/54] Implementing Shadows. --- starter/05-Design/style.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/starter/05-Design/style.css b/starter/05-Design/style.css index 2c258a59a..7318a3ef3 100644 --- a/starter/05-Design/style.css +++ b/starter/05-Design/style.css @@ -96,6 +96,8 @@ h1 { line-height: 1.1; letter-spacing: -1px; /* 44 / 52 / 62 */ + + text-shadow: 0 20px 3px rgba(0, 0, 0, 0.07); } .header-text { @@ -152,6 +154,10 @@ img { } /* CHAIRS */ +.chair { + box-shadow: 0 20px 30px rgba(0, 0, 0, 0.07); +} + .chair-box { padding: 24px; } From a2ac52ae799ed1610a786a3b9b16450c857885c4 Mon Sep 17 00:00:00 2001 From: quechau Date: Thu, 19 Oct 2023 11:31:28 +0700 Subject: [PATCH 30/54] Implementing Border-radius. --- starter/05-Design/style.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/starter/05-Design/style.css b/starter/05-Design/style.css index 7318a3ef3..a586590b4 100644 --- a/starter/05-Design/style.css +++ b/starter/05-Design/style.css @@ -56,7 +56,9 @@ h2 { text-decoration: none; text-transform: uppercase; font-weight: 500; + display: inline-block; + border-radius: 100px; } .btn:hover, @@ -74,6 +76,9 @@ h2 { padding: 8px 12px; } +img { + border-radius: 12px; +} /* ------------------------ */ /* COMPONENT STYLES */ /* ------------------------ */ @@ -133,6 +138,7 @@ img { background-color: #087f5b; color: #fff; padding: 24px; + border-radius: 12px; } .testimonial-box { @@ -156,6 +162,12 @@ img { /* CHAIRS */ .chair { box-shadow: 0 20px 30px rgba(0, 0, 0, 0.07); + border-radius: 12px; +} + +.chair img { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } .chair-box { From 94d78a7d89540c48071bd4c9b26bfddfdd3506c6 Mon Sep 17 00:00:00 2001 From: quechau Date: Thu, 19 Oct 2023 16:06:31 +0700 Subject: [PATCH 31/54] Implementing Whitespace and Visual Hierarchy. --- starter/05-Design/style.css | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/starter/05-Design/style.css b/starter/05-Design/style.css index a586590b4..c4b86ead9 100644 --- a/starter/05-Design/style.css +++ b/starter/05-Design/style.css @@ -33,7 +33,7 @@ body { header, section { - margin-bottom: 48px; + margin-bottom: 96px; } h2 { @@ -88,7 +88,7 @@ header { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 80px; - margin-top: 48px; + margin-top: 64px; } .header-text-box { @@ -96,13 +96,13 @@ header { } h1 { - margin-bottom: 24px; + margin-bottom: 32px; font-size: 44px; line-height: 1.1; letter-spacing: -1px; /* 44 / 52 / 62 */ - text-shadow: 0 20px 3px rgba(0, 0, 0, 0.07); + /* text-shadow: 0 20px 3px rgba(0, 0, 0, 0.07); */ } .header-text { @@ -120,7 +120,7 @@ img { stroke: #087f5b; width: 32px; height: 32px; - margin-bottom: 16px; + margin-bottom: 24px; } .features-title { @@ -157,6 +157,11 @@ img { margin-bottom: 24px; font-size: 18px; line-height: 1.7; + color: #e6fcf5; +} + +.testimonial-author { + color: #c3fae8; } /* CHAIRS */ @@ -171,7 +176,7 @@ img { } .chair-box { - padding: 24px; + padding: 32px; } h3 { @@ -181,14 +186,14 @@ h3 { .chair-details { list-style: none; - margin-bottom: 24px; + margin-bottom: 48px; } .chair-details li { display: flex; align-items: center; gap: 12px; - margin-bottom: 24px; + margin-bottom: 16px; } .chair-details li:last-child { @@ -204,6 +209,7 @@ h3 { .chair-price { display: flex; justify-content: space-between; + align-items: center; font-size: 20px; } From 2f22bece3bd02bfd17e18500bb71a75f25e3fe29 Mon Sep 17 00:00:00 2001 From: quechau Date: Mon, 23 Oct 2023 16:39:30 +0700 Subject: [PATCH 32/54] Add a new accordion component. --- .vscode/settings.json | 3 + starter/06-Components/01-accordiion.html | 125 +++++++++++++++++++++++ 2 files changed, 128 insertions(+) create mode 100644 .vscode/settings.json create mode 100644 starter/06-Components/01-accordiion.html diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..4c7ff40f6 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} diff --git a/starter/06-Components/01-accordiion.html b/starter/06-Components/01-accordiion.html new file mode 100644 index 000000000..537eb4159 --- /dev/null +++ b/starter/06-Components/01-accordiion.html @@ -0,0 +1,125 @@ + + + + + + + + Accordion Component + + + + +

How long do I have to retrun my chair?

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore + debitis ducimus autem nisi, ipsam, reprehenderit omnis itaque quae + saepe fugit, magnam soluta molestiae cum reiciendis quas eligendi + earum ipsa molestias? +

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+ Repudiandae natus blanditiis omnis eum, ut labore quam veniam vel + nesciunt, quibusdam temporibus error qui sequi assumenda nemo, + laborum ipsum possimus quo. +
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+ Repudiandae natus blanditiis omnis eum, ut labore quam veniam vel + nesciunt, quibusdam temporibus error qui sequi assumenda nemo, + laborum ipsum possimus quo. +

+ + From 5d532b2d7d5f92aa4f5e40e6889ff54f95dd34bb Mon Sep 17 00:00:00 2001 From: quechau Date: Sat, 28 Oct 2023 10:57:03 +0700 Subject: [PATCH 33/54] add intro component and accordion component --- starter/06-Components/01-accordiion.html | 125 ------------- starter/06-Components/01-accordion.html | 227 +++++++++++++++++++++++ starter/06-Components/component.html | 116 ++++++++++++ 3 files changed, 343 insertions(+), 125 deletions(-) delete mode 100644 starter/06-Components/01-accordiion.html create mode 100644 starter/06-Components/01-accordion.html create mode 100644 starter/06-Components/component.html diff --git a/starter/06-Components/01-accordiion.html b/starter/06-Components/01-accordiion.html deleted file mode 100644 index 537eb4159..000000000 --- a/starter/06-Components/01-accordiion.html +++ /dev/null @@ -1,125 +0,0 @@ - - - - - - - - Accordion Component - - - - -

How long do I have to retrun my chair?

- -

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore - debitis ducimus autem nisi, ipsam, reprehenderit omnis itaque quae - saepe fugit, magnam soluta molestiae cum reiciendis quas eligendi - earum ipsa molestias? -

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
- Repudiandae natus blanditiis omnis eum, ut labore quam veniam vel - nesciunt, quibusdam temporibus error qui sequi assumenda nemo, - laborum ipsum possimus quo. -
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
- Repudiandae natus blanditiis omnis eum, ut labore quam veniam vel - nesciunt, quibusdam temporibus error qui sequi assumenda nemo, - laborum ipsum possimus quo. -

- - diff --git a/starter/06-Components/01-accordion.html b/starter/06-Components/01-accordion.html new file mode 100644 index 000000000..2136c0b0a --- /dev/null +++ b/starter/06-Components/01-accordion.html @@ -0,0 +1,227 @@ + + + + + + + + Accordion Component + + + + +

Where are the chairs assembled?

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+ Repudiandae natus blanditiis omnis eum, ut labore quam veniam. +
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+ Repudiandae natus blanditiis omnis eum, ut labore quam veniam vel. +

+ +

How long do I have to retrun my chair?

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+ Repudiandae natus blanditiis omnis eum, ut labore quam veniam. +
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+ Repudiandae natus blanditiis omnis eum, ut labore quam veniam vel. +

+ +

Do you ship to countries outsidethe1

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+ Repudiandae natus blanditiis omnis eum, ut labore quam veniam. +
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+ Repudiandae natus blanditiis omnis eum, ut labore quam veniam vel. +

+ + diff --git a/starter/06-Components/component.html b/starter/06-Components/component.html new file mode 100644 index 000000000..1257f2c18 --- /dev/null +++ b/starter/06-Components/component.html @@ -0,0 +1,116 @@ + + + + + + + + Table Component + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Chair	The Laid Back	The Worker Bee	The Chair 4/2
Width	80 cm	60 cm	220 cm
Height	100cm cm	110 cm
Depth	70 cm	65 cm	80 cm
Weight	16 kg	22 kg	80 kg

+ + From 3a1aa33c03b29275f9fcf836e2a37a37f5e3b202 Mon Sep 17 00:00:00 2001 From: quechau Date: Sat, 28 Oct 2023 12:59:12 +0700 Subject: [PATCH 34/54] Building a Carousel Component. --- starter/06-Components/02-carousel.html | 199 +++++++++++++++++++++++++ starter/06-Components/component.html | 123 ++++++++------- 2 files changed, 258 insertions(+), 64 deletions(-) create mode 100644 starter/06-Components/02-carousel.html diff --git a/starter/06-Components/02-carousel.html b/starter/06-Components/02-carousel.html new file mode 100644 index 000000000..0bf2bde3e --- /dev/null +++ b/starter/06-Components/02-carousel.html @@ -0,0 +1,199 @@ + + + + + + + + Accordion Component + + + + +

+
+ "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt + numquam alias iusto sit repellat iste neque pariatur corrupti + blanditiis laudantium, rem at iure et sequi ducimus repellendus ea, + corporis tempore." +
+
Maria de Almeida
+
Senior Product Manager at EDP Comercial
+

+ + + +

+ + + + +

+ + diff --git a/starter/06-Components/component.html b/starter/06-Components/component.html index 1257f2c18..0a4eb7384 100644 --- a/starter/06-Components/component.html +++ b/starter/06-Components/component.html @@ -8,7 +8,7 @@ rel="stylesheet" /> - Table Component + Accordion Component - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Chair	The Laid Back	The Worker Bee	The Chair 4/2
Width	80 cm	60 cm	220 cm
Height	100cm cm	110 cm
Depth	70 cm	65 cm	80 cm
Weight	16 kg	22 kg	80 kg

- + From fd2a9b81651b4601f2d612651d98c1d2cfe16609 Mon Sep 17 00:00:00 2001 From: quechau Date: Sat, 28 Oct 2023 16:38:34 +0700 Subject: [PATCH 35/54] build a table component. --- starter/06-Components/03-table.html | 117 ++++++++++++++++++++++++++++ 1 file changed, 117 insertions(+) create mode 100644 starter/06-Components/03-table.html diff --git a/starter/06-Components/03-table.html b/starter/06-Components/03-table.html new file mode 100644 index 000000000..92ff52b8e --- /dev/null +++ b/starter/06-Components/03-table.html @@ -0,0 +1,117 @@ + + + + + + + + Table Component + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Chair	The Laid Back	The Worker Bee	The Chair 4/2
Width	80 cm	60 cm	220 cm
Height	100 cm	110 cm	90 cm
Depth	70 cm	65 cm	80 cm
Weight	16 kg	22 kg	80 kg

+ + From 3f587aeafc0676e348bfc6ea960bbacd797be60c Mon Sep 17 00:00:00 2001 From: quechau Date: Sat, 28 Oct 2023 17:28:52 +0700 Subject: [PATCH 36/54] Add Pagination component. --- starter/06-Components/04-pagination.html | 144 +++++++++++++++++++++++ starter/06-Components/component.html | 67 ----------- 2 files changed, 144 insertions(+), 67 deletions(-) create mode 100644 starter/06-Components/04-pagination.html diff --git a/starter/06-Components/04-pagination.html b/starter/06-Components/04-pagination.html new file mode 100644 index 000000000..83c9468b0 --- /dev/null +++ b/starter/06-Components/04-pagination.html @@ -0,0 +1,144 @@ + + + + + + + + Accordion Component + + + + +

+ + 1 + 2 + 3 + 4 + 5 + 6 + ... + 23 + +

+ + diff --git a/starter/06-Components/component.html b/starter/06-Components/component.html index 0a4eb7384..1bdeb1be2 100644 --- a/starter/06-Components/component.html +++ b/starter/06-Components/component.html @@ -38,73 +38,6 @@ color: #343a40; line-height: 1; } - - .accordion { - width: 700px; - margin: 100px auto; - - display: flex; - flex-direction: column; - gap: 24px; - } - - .item { - box-shadow: 0 0 32px rgba(0, 0, 0, 0.1); - padding: 24px; - - display: grid; - grid-template-columns: auto 1fr auto; - column-gap: 24px; - row-gap: 32px; - align-items: center; - } - - .number, - .text { - font-size: 24px; - font-weight: 500; - /* color: #087f5b; */ - } - - .number { - color: #ced4da; - } - .icon { - width: 24px; - height: 24px; - stroke: #087f5b; - } - - .hidden-box { - grid-column: 2; - display: none; - } - - .hidden-box p { - line-height: 1.6; - margin-bottom: 24px; - } - .hidden-box ul { - color: #868e96; - margin-left: 20px; - - display: flex; - flex-direction: column; - gap: 12px; - } - - .open { - border-top: 4px solid #087f5b; - } - - .open .hidden-box { - display: block; - } - - .open .number, - .open .text { - color: #087f5b; - } From ac4d93beec9cc69fc4a0542f9167a7480386425b Mon Sep 17 00:00:00 2001 From: quechau Date: Mon, 30 Oct 2023 07:23:32 +0700 Subject: [PATCH 37/54] Add hero Section of page. --- starter/06-Components/05-hero.html | 136 +++++++++++++++++++++++++++++ 1 file changed, 136 insertions(+) create mode 100644 starter/06-Components/05-hero.html diff --git a/starter/06-Components/05-hero.html b/starter/06-Components/05-hero.html new file mode 100644 index 000000000..6a7fb8154 --- /dev/null +++ b/starter/06-Components/05-hero.html @@ -0,0 +1,136 @@ + + + + + + Omnifood Hero Section + + + + + + +

+ + + +

Some random heading

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum porro + animi quod at officia? Cupiditate, praesentium! Consectetur quam sit + amet cupiditate reiciendis suscipit, placeat nulla. Ratione sed veniam + ea soluta! +

+ + From 37f4a9051cb86c219435b972ae9a6d050db40634 Mon Sep 17 00:00:00 2001 From: quechau Date: Mon, 30 Oct 2023 23:30:09 +0700 Subject: [PATCH 38/54] add app layout. --- starter/06-Components/06-app-layout.html | 116 ++++++++++++++++++ .../07-Omnifood-Desktop/content/content.md | 15 +++ .../07-Omnifood-Desktop/content/css/style.css | 0 .../07-Omnifood-Desktop/content/index.html | 14 +++ 4 files changed, 145 insertions(+) create mode 100644 starter/06-Components/06-app-layout.html create mode 100644 starter/07-Omnifood-Desktop/content/css/style.css create mode 100644 starter/07-Omnifood-Desktop/content/index.html diff --git a/starter/06-Components/06-app-layout.html b/starter/06-Components/06-app-layout.html new file mode 100644 index 000000000..f52b1d10f --- /dev/null +++ b/starter/06-Components/06-app-layout.html @@ -0,0 +1,116 @@ + + + + + + App Layout + + + + + + + + + + + +

Email 1

Email 2

Email 3

Email 4

Email 5

Email 6

Email 7

Email 8

Email 9

Email 10

Email view

+ + + diff --git a/starter/07-Omnifood-Desktop/content/content.md b/starter/07-Omnifood-Desktop/content/content.md index 7193e017f..d42e2286c 100644 --- a/starter/07-Omnifood-Desktop/content/content.md +++ b/starter/07-Omnifood-Desktop/content/content.md @@ -126,3 +126,18 @@ Careers Recipe directory Help center Privacy & terms + +####### + +## Sections + +- Logo + Navigation +- Hero +- Featured in +- How it works +- Meals (and list of diets) + --> 3 Phần tiếp theo khác quan trọng để trying to sell products & services. +- Testimonials + Gallery +- Pricing + Features +- CTA: Call to action +- Footer diff --git a/starter/07-Omnifood-Desktop/content/css/style.css b/starter/07-Omnifood-Desktop/content/css/style.css new file mode 100644 index 000000000..e69de29bb diff --git a/starter/07-Omnifood-Desktop/content/index.html b/starter/07-Omnifood-Desktop/content/index.html new file mode 100644 index 000000000..c26c7e7e5 --- /dev/null +++ b/starter/07-Omnifood-Desktop/content/index.html @@ -0,0 +1,14 @@ + + + + + + + + + Omnifood + + +

A healthy meal delivered to your door, every single day

+ + From f32f6a8b88d6bb93c62d0482c7792551c64cb610 Mon Sep 17 00:00:00 2001 From: quechau Date: Tue, 31 Oct 2023 14:54:23 +0700 Subject: [PATCH 39/54] rem and max-width lesson. --- .../07-Omnifood-Desktop/content/css/style.css | 66 +++++++++++++++++++ .../07-Omnifood-Desktop/content/index.html | 1 + 2 files changed, 67 insertions(+) diff --git a/starter/07-Omnifood-Desktop/content/css/style.css b/starter/07-Omnifood-Desktop/content/css/style.css index e69de29bb..e5551f999 100644 --- a/starter/07-Omnifood-Desktop/content/css/style.css +++ b/starter/07-Omnifood-Desktop/content/css/style.css @@ -0,0 +1,66 @@ +/* + + +--- 01 TYPOGRAPHY SYSTEM +FONT SIZE SYSTEM (px) + 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + +FONT WEIGHTS: +Default: 400 + +LINE HEIGHTS: +Default: 1 + + + +--- 02 COLORS + +- Primary color: #e67e22 +- Tints: +- Shades: +- Accents: +- Greys: +#555 + +--- 05 SHADOWS + +--- 06 BORDER-RADIUS + +--- 07 WHITESPACE +SPACING SYSTEM (px) + 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 + +*/ + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +html { + /* font-size: 10px; */ + /* 10px / 16px = 0.625 = 62.5% */ + /* Percentage of user's browser font-size setting */ + font-size: 62.5%; +} + +body { + font-family: sans-serif; + line-height: 1; + font-weight: 400; + color: #555; +} + +.test { + background-color: red; + padding: 100px; + /* width: 1000px; */ + max-width: 1000px; + + max-width: 50rem; + padding: 4rem; + font-size: 2rem; + color: #fff; + /* 1 rem = 16px -> 50rem = 800px */ +} diff --git a/starter/07-Omnifood-Desktop/content/index.html b/starter/07-Omnifood-Desktop/content/index.html index c26c7e7e5..6a815ae55 100644 --- a/starter/07-Omnifood-Desktop/content/index.html +++ b/starter/07-Omnifood-Desktop/content/index.html @@ -10,5 +10,6 @@

A healthy meal delivered to your door, every single day

TEST

From 934a0a62c26fb224e2e5996fae443506627c82a3 Mon Sep 17 00:00:00 2001 From: quechau Date: Tue, 31 Oct 2023 15:23:05 +0700 Subject: [PATCH 40/54] Add Hero section part1. --- .../07-Omnifood-Desktop/content/css/style.css | 22 ++++++++-------- .../07-Omnifood-Desktop/content/index.html | 26 +++++++++++++++++-- 2 files changed, 35 insertions(+), 13 deletions(-) diff --git a/starter/07-Omnifood-Desktop/content/css/style.css b/starter/07-Omnifood-Desktop/content/css/style.css index e5551f999..31d057353 100644 --- a/starter/07-Omnifood-Desktop/content/css/style.css +++ b/starter/07-Omnifood-Desktop/content/css/style.css @@ -52,15 +52,15 @@ body { color: #555; } -.test { - background-color: red; - padding: 100px; - /* width: 1000px; */ - max-width: 1000px; - - max-width: 50rem; - padding: 4rem; - font-size: 2rem; - color: #fff; - /* 1 rem = 16px -> 50rem = 800px */ +.hero { + /* width: 1300px; */ + max-width: 130rem; + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1fr; + background-color: blueviolet; +} + +.hero-img { + width: 100%; } diff --git a/starter/07-Omnifood-Desktop/content/index.html b/starter/07-Omnifood-Desktop/content/index.html index 6a815ae55..0dca435cc 100644 --- a/starter/07-Omnifood-Desktop/content/index.html +++ b/starter/07-Omnifood-Desktop/content/index.html @@ -9,7 +9,29 @@ Omnifood -

A healthy meal delivered to your door, every single day

TEST

+ A healthy meal delivered to your door, every single day +

+ The smart 365-days-per-year food subscription that will make you eat + healthy again. Tailored to your personal tastes and nutritional + needs. We have delivered 250,000+ meals last year! +

+ + Start eating well + Learn more ↓ +

Woman enjoying food, meals in storage container, and food bowls on a table.

From 6b9d04ce04011fa8ea3f053c9b44da4cb5645ddf Mon Sep 17 00:00:00 2001 From: quechau Date: Wed, 1 Nov 2023 20:09:45 +0700 Subject: [PATCH 41/54] Add Hero section. --- .../07-Omnifood-Desktop/content/css/style.css | 108 +++++++++++++++++- .../07-Omnifood-Desktop/content/index.html | 25 +++- 2 files changed, 126 insertions(+), 7 deletions(-) diff --git a/starter/07-Omnifood-Desktop/content/css/style.css b/starter/07-Omnifood-Desktop/content/css/style.css index 31d057353..bc39ce7cd 100644 --- a/starter/07-Omnifood-Desktop/content/css/style.css +++ b/starter/07-Omnifood-Desktop/content/css/style.css @@ -16,11 +16,12 @@ Default: 1 --- 02 COLORS - Primary color: #e67e22 -- Tints: -- Shades: +- Tints: #fdf2e9 +- Shades: #cf711f - Accents: - Greys: #555 +#333 --- 05 SHADOWS @@ -46,21 +47,120 @@ html { } body { - font-family: sans-serif; + font-family: "Rubik", sans-serif; line-height: 1; font-weight: 400; color: #555; } +.section-hero { + background-color: #fdf2e9; + padding: 9.6rem 0; +} + .hero { /* width: 1300px; */ max-width: 130rem; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; - background-color: blueviolet; + gap: 9.6rem; + align-items: center; +} + +.heading-primary { + font-size: 5.2rem; + font-weight: 600; + line-height: 1.05; + color: #333; + margin-bottom: 3.2rem; +} + +.hero-description { + font-size: 2rem; + line-height: 1.5; + letter-spacing: -0.5px; + margin-bottom: 4.8rem; +} + +.btn:link, +.btn:visited { + display: inline-block; + background-color: #e67e22; + text-decoration: none; + font-size: 2rem; + font-weight: 600; + padding: 1.6rem 3.2rem; + border-radius: 9px; + + /* Put transition on original "state" */ + transition: background-color 0.3s; +} + +.btn--full:link, +.btn--full:visited { + background-color: #e67e22; + color: #fff; +} + +.btn--full:hover, +.btn--full:active { + background-color: #cf711f; +} + +.btn--outline:link, +.btn--outline:visited { + background-color: #fff; + color: #555; +} + +.btn--outline:hover, +.btn--outline:active { + background-color: #fdf2e9; + + /* border: 3px solid #fff; */ + + /* Trick to add border inside */ + box-shadow: inset 0 0 0 3px #fff; } .hero-img { width: 100%; } + +.margin-right-sm { + margin-right: 1.6rem !important; +} + +.delivered-meals { + display: flex; + align-items: center; + gap: 1.6rem; + margin-top: 8rem; +} + +.delivered-imgs { + display: flex; +} + +.delivered-imgs img { + height: 4.8rem; + width: 4.8rem; + border-radius: 50%; + margin-right: -1.6rem; + border: 3px solid #fdf2e9; +} + +.delivered-imgs img:last-child { + margin: 0; +} + +.delivered-text { + font-size: 1.8rem; + font-weight: 600; +} + +.delivered-text span { + color: #cf711f; + font-weight: 700; +} diff --git a/starter/07-Omnifood-Desktop/content/index.html b/starter/07-Omnifood-Desktop/content/index.html index 0dca435cc..7ecd424d1 100644 --- a/starter/07-Omnifood-Desktop/content/index.html +++ b/starter/07-Omnifood-Desktop/content/index.html @@ -3,6 +3,12 @@ + + + @@ -18,11 +24,24 @@

The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal tastes and nutritional - needs. We have delivered 250,000+ meals last year! + needs.
- Start eating well - Learn more ↓ + Start eating well + Learn more ↓ +
+
+ + + + + + +
+
250,000+ meals last year!
+

Date: Wed, 1 Nov 2023 20:36:50 +0700 Subject: [PATCH 42/54] add Header (logo). --- .../07-Omnifood-Desktop/content/css/style.css | 77 ++++++++++++------- .../07-Omnifood-Desktop/content/index.html | 75 ++++++++++-------- 2 files changed, 93 insertions(+), 59 deletions(-) diff --git a/starter/07-Omnifood-Desktop/content/css/style.css b/starter/07-Omnifood-Desktop/content/css/style.css index bc39ce7cd..53b9fca22 100644 --- a/starter/07-Omnifood-Desktop/content/css/style.css +++ b/starter/07-Omnifood-Desktop/content/css/style.css @@ -53,21 +53,9 @@ body { color: #555; } -.section-hero { - background-color: #fdf2e9; - padding: 9.6rem 0; -} - -.hero { - /* width: 1300px; */ - max-width: 130rem; - margin: 0 auto; - display: grid; - grid-template-columns: 1fr 1fr; - gap: 9.6rem; - align-items: center; -} - +/***************************/ +/* GENERAL REUSABLE COMPONENTS */ +/***************************/ .heading-primary { font-size: 5.2rem; font-weight: 600; @@ -76,13 +64,6 @@ body { margin-bottom: 3.2rem; } -.hero-description { - font-size: 2rem; - line-height: 1.5; - letter-spacing: -0.5px; - margin-bottom: 4.8rem; -} - .btn:link, .btn:visited { display: inline-block; @@ -124,14 +105,58 @@ body { box-shadow: inset 0 0 0 3px #fff; } -.hero-img { - width: 100%; -} - .margin-right-sm { margin-right: 1.6rem !important; } +/***************************/ +/* HEADER */ +/***************************/ +.header { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #fdf2e9; + + /* Because we want header to be sticky later */ + height: 9.6rem; + padding: 0 4.8rem; +} + +.logo { + height: 2.2rem; +} + +/***************************/ +/* HERO SECTION */ +/***************************/ +.section-hero { + background-color: #fdf2e9; + padding: 4.8rem 0 9.6rem 0; +} + +.hero { + /* width: 1300px; */ + max-width: 130rem; + margin: 0 auto; + padding: 0 3.2rem; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 9.6rem; + align-items: center; +} + +.hero-description { + font-size: 2rem; + line-height: 1.5; + letter-spacing: -0.5px; + margin-bottom: 4.8rem; +} + +.hero-img { + width: 100%; +} + .delivered-meals { display: flex; align-items: center; diff --git a/starter/07-Omnifood-Desktop/content/index.html b/starter/07-Omnifood-Desktop/content/index.html index 7ecd424d1..7af2fdfd1 100644 --- a/starter/07-Omnifood-Desktop/content/index.html +++ b/starter/07-Omnifood-Desktop/content/index.html @@ -15,42 +15,51 @@ Omnifood -

- A healthy meal delivered to your door, every single day -

- The smart 365-days-per-year food subscription that will make you eat - healthy again. Tailored to your personal tastes and nutritional - needs. -

+ - Start eating well - Learn more ↓ -

+ A healthy meal delivered to your door, every single day +

+ The smart 365-days-per-year food subscription that will make you + eat healthy again. Tailored to your personal tastes and + nutritional needs. +

+ + Start eating well + Learn more ↓ +

+ 250,000+ meals last year! +

250,000+ meals last year!

+ + From f58e15e65a35513cdb9e3cd2d078f0d8ebf7cc81 Mon Sep 17 00:00:00 2001 From: quechau Date: Wed, 1 Nov 2023 21:00:20 +0700 Subject: [PATCH 43/54] Add navigation of header. --- .../07-Omnifood-Desktop/content/css/style.css | 47 ++++++++++++++++++- .../07-Omnifood-Desktop/content/index.html | 10 +++- 2 files changed, 54 insertions(+), 3 deletions(-) diff --git a/starter/07-Omnifood-Desktop/content/css/style.css b/starter/07-Omnifood-Desktop/content/css/style.css index 53b9fca22..cdce80b94 100644 --- a/starter/07-Omnifood-Desktop/content/css/style.css +++ b/starter/07-Omnifood-Desktop/content/css/style.css @@ -7,11 +7,14 @@ FONT SIZE SYSTEM (px) FONT WEIGHTS: Default: 400 +Medium: 500 +Semi-bold: 600 +Bold: 700 LINE HEIGHTS: Default: 1 - - +Small: 1.05 +Paragraph default: 1.6 --- 02 COLORS @@ -27,6 +30,8 @@ Default: 1 --- 06 BORDER-RADIUS +Default: 9px + --- 07 WHITESPACE SPACING SYSTEM (px) 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 @@ -127,6 +132,44 @@ body { height: 2.2rem; } +/***************************/ +/* NAVIGATION */ +/***************************/ +.main-nav-list { + list-style: none; + display: flex; + align-items: center; + gap: 3.2rem; +} + +.main-nav-link:link, +.main-nav-link:visited { + display: inline-block; + text-decoration: none; + color: #333; + font-weight: 500; + font-size: 1.8rem; + transition: all 0.3s; +} + +.main-nav-link:hover, +.main-nav-link:active { + color: #cf711f; +} + +.main-nav-link.nav-cta:link, +.main-nav-link.nav-cta:visited { + padding: 1.2rem 2.4rem; + border-radius: 9px; + color: #fff; + background-color: #e67e22; +} + +.main-nav-link.nav-cta:hover, +.main-nav-link.nav-cta:active { + background-color: #cf711f; +} + /***************************/ /* HERO SECTION */ /***************************/ diff --git a/starter/07-Omnifood-Desktop/content/index.html b/starter/07-Omnifood-Desktop/content/index.html index 7af2fdfd1..7fb004cb1 100644 --- a/starter/07-Omnifood-Desktop/content/index.html +++ b/starter/07-Omnifood-Desktop/content/index.html @@ -17,7 +17,15 @@

From fc31932a5b3ab7c0f4303b2dbc73c2808da61e4a Mon Sep 17 00:00:00 2001 From: quechau Date: Sat, 4 Nov 2023 18:44:17 +0700 Subject: [PATCH 44/54] Add Reusable grid css for the next steps or the future :D. --- .../07-Omnifood-Desktop/content/css/style.css | 33 +++++++++++++++++++ .../07-Omnifood-Desktop/content/index.html | 8 +++++ 2 files changed, 41 insertions(+) diff --git a/starter/07-Omnifood-Desktop/content/css/style.css b/starter/07-Omnifood-Desktop/content/css/style.css index cdce80b94..9ca59d387 100644 --- a/starter/07-Omnifood-Desktop/content/css/style.css +++ b/starter/07-Omnifood-Desktop/content/css/style.css @@ -61,6 +61,31 @@ body { /***************************/ /* GENERAL REUSABLE COMPONENTS */ /***************************/ + +.container { + /* 1140px */ + max-width: 120rem; + padding: 0 3.2rem; + margin: 0 auto; +} + +.grid { + display: grid; + gap: 9.6rem; +} + +.grid--2-cols { + grid-template-columns: repeat(2, 1fr); +} + +.grid--3-cols { + grid-template-columns: repeat(3, 1fr); +} + +.grid--4-cols { + grid-template-columns: repeat(4, 1fr); +} + .heading-primary { font-size: 5.2rem; font-weight: 600; @@ -232,3 +257,11 @@ body { color: #cf711f; font-weight: 700; } + +/***************************/ +/* HOW IT WORKS SECTION */ +/***************************/ +.section-how { + padding: 9.6rem 0; + background-color: orangered; +} diff --git a/starter/07-Omnifood-Desktop/content/index.html b/starter/07-Omnifood-Desktop/content/index.html index 7fb004cb1..a21716727 100644 --- a/starter/07-Omnifood-Desktop/content/index.html +++ b/starter/07-Omnifood-Desktop/content/index.html @@ -68,6 +68,14 @@

Test 1

Test 2

Test 3

Test 4

From 34cca2173db893e01d47f29170699811521a690e Mon Sep 17 00:00:00 2001 From: quechau Date: Sun, 5 Nov 2023 12:47:35 +0700 Subject: [PATCH 45/54] Add the How it works section. --- .../content/css/general.css | 183 +++++++++++++++++ .../07-Omnifood-Desktop/content/css/style.css | 194 +++++------------- .../07-Omnifood-Desktop/content/index.html | 70 ++++++- 3 files changed, 300 insertions(+), 147 deletions(-) create mode 100644 starter/07-Omnifood-Desktop/content/css/general.css diff --git a/starter/07-Omnifood-Desktop/content/css/general.css b/starter/07-Omnifood-Desktop/content/css/general.css new file mode 100644 index 000000000..e4ab757a6 --- /dev/null +++ b/starter/07-Omnifood-Desktop/content/css/general.css @@ -0,0 +1,183 @@ +/* + + +--- 01 TYPOGRAPHY SYSTEM +FONT SIZE SYSTEM (px) + 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + +FONT WEIGHTS: +Default: 400 +Medium: 500 +Semi-bold: 600 +Bold: 700 + +LINE HEIGHTS: +Default: 1 +Small: 1.05 +Medium: 1.2 +Paragraph default: 1.6 + +- Letter spacing +-0.5px +0.75px + +--- 02 COLORS + +- Primary color: #e67e22 +- Tints: +#fdf2e9 +#fae5d3 + +- Shades: #cf711f +- Accents: +- Greys: +#555 +#333 + +--- 05 SHADOWS + +--- 06 BORDER-RADIUS + +Default: 9px + +--- 07 WHITESPACE +SPACING SYSTEM (px) + 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 + +*/ + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +html { + /* font-size: 10px; */ + /* 10px / 16px = 0.625 = 62.5% */ + /* Percentage of user's browser font-size setting */ + font-size: 62.5%; +} + +body { + font-family: "Rubik", sans-serif; + line-height: 1; + font-weight: 400; + color: #555; +} + +/***************************/ +/* GENERAL REUSABLE COMPONENTS */ +/***************************/ + +.container { + /* 1140px */ + max-width: 120rem; + padding: 0 3.2rem; + margin: 0 auto; +} + +.grid { + display: grid; + column-gap: 6.4rem; + row-gap: 9.6rem; +} + +.grid--2-cols { + grid-template-columns: repeat(2, 1fr); +} + +.grid--3-cols { + grid-template-columns: repeat(3, 1fr); +} + +.grid--4-cols { + grid-template-columns: repeat(4, 1fr); +} + +.grid--center-v { + align-items: center; +} + +.heading-primary, +.heading-secondary, +.heading-tertiary { + font-weight: 700; + color: #333; + /* color: #45260a; */ + /* color: #343a40; */ + letter-spacing: -0.5px; +} + +.heading-primary { + font-size: 5.2rem; + line-height: 1.05; + margin-bottom: 3.2rem; +} + +.heading-secondary { + font-size: 4.4rem; + line-height: 1.2; + margin-bottom: 9.6rem; +} + +.heading-tertiary { + font-size: 3rem; + line-height: 1.2; + margin-bottom: 3.2rem; +} + +.subheading { + display: block; + font-size: 1.6rem; + font-weight: 500; + color: #cf711f; + text-transform: uppercase; + margin-bottom: 1.6rem; + letter-spacing: 0.75px; +} + +.btn:link, +.btn:visited { + display: inline-block; + background-color: #e67e22; + text-decoration: none; + font-size: 2rem; + font-weight: 600; + padding: 1.6rem 3.2rem; + border-radius: 9px; + + /* Put transition on original "state" */ + transition: background-color 0.3s; +} + +.btn--full:link, +.btn--full:visited { + background-color: #e67e22; + color: #fff; +} + +.btn--full:hover, +.btn--full:active { + background-color: #cf711f; +} + +.btn--outline:link, +.btn--outline:visited { + background-color: #fff; + color: #555; +} + +.btn--outline:hover, +.btn--outline:active { + background-color: #fdf2e9; + + /* border: 3px solid #fff; */ + + /* Trick to add border inside */ + box-shadow: inset 0 0 0 3px #fff; +} + +.margin-right-sm { + margin-right: 1.6rem !important; +} diff --git a/starter/07-Omnifood-Desktop/content/css/style.css b/starter/07-Omnifood-Desktop/content/css/style.css index 9ca59d387..a2cca87be 100644 --- a/starter/07-Omnifood-Desktop/content/css/style.css +++ b/starter/07-Omnifood-Desktop/content/css/style.css @@ -1,144 +1,3 @@ -/* - - ---- 01 TYPOGRAPHY SYSTEM -FONT SIZE SYSTEM (px) - 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 - -FONT WEIGHTS: -Default: 400 -Medium: 500 -Semi-bold: 600 -Bold: 700 - -LINE HEIGHTS: -Default: 1 -Small: 1.05 -Paragraph default: 1.6 - ---- 02 COLORS - -- Primary color: #e67e22 -- Tints: #fdf2e9 -- Shades: #cf711f -- Accents: -- Greys: -#555 -#333 - ---- 05 SHADOWS - ---- 06 BORDER-RADIUS - -Default: 9px - ---- 07 WHITESPACE -SPACING SYSTEM (px) - 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 - -*/ - -* { - padding: 0; - margin: 0; - box-sizing: border-box; -} - -html { - /* font-size: 10px; */ - /* 10px / 16px = 0.625 = 62.5% */ - /* Percentage of user's browser font-size setting */ - font-size: 62.5%; -} - -body { - font-family: "Rubik", sans-serif; - line-height: 1; - font-weight: 400; - color: #555; -} - -/***************************/ -/* GENERAL REUSABLE COMPONENTS */ -/***************************/ - -.container { - /* 1140px */ - max-width: 120rem; - padding: 0 3.2rem; - margin: 0 auto; -} - -.grid { - display: grid; - gap: 9.6rem; -} - -.grid--2-cols { - grid-template-columns: repeat(2, 1fr); -} - -.grid--3-cols { - grid-template-columns: repeat(3, 1fr); -} - -.grid--4-cols { - grid-template-columns: repeat(4, 1fr); -} - -.heading-primary { - font-size: 5.2rem; - font-weight: 600; - line-height: 1.05; - color: #333; - margin-bottom: 3.2rem; -} - -.btn:link, -.btn:visited { - display: inline-block; - background-color: #e67e22; - text-decoration: none; - font-size: 2rem; - font-weight: 600; - padding: 1.6rem 3.2rem; - border-radius: 9px; - - /* Put transition on original "state" */ - transition: background-color 0.3s; -} - -.btn--full:link, -.btn--full:visited { - background-color: #e67e22; - color: #fff; -} - -.btn--full:hover, -.btn--full:active { - background-color: #cf711f; -} - -.btn--outline:link, -.btn--outline:visited { - background-color: #fff; - color: #555; -} - -.btn--outline:hover, -.btn--outline:active { - background-color: #fdf2e9; - - /* border: 3px solid #fff; */ - - /* Trick to add border inside */ - box-shadow: inset 0 0 0 3px #fff; -} - -.margin-right-sm { - margin-right: 1.6rem !important; -} - /***************************/ /* HEADER */ /***************************/ @@ -263,5 +122,56 @@ body { /***************************/ .section-how { padding: 9.6rem 0; - background-color: orangered; +} + +.step-number { + font-size: 8.6rem; + font-weight: 600; + color: #eee; + margin-bottom: 1.2rem; +} + +.step-description { + font-size: 1.8rem; + line-height: 1.8; +} + +.step-img-box { + position: relative; + display: flex; + align-items: center; + justify-content: center; +} + +.step-img-box::before, +.step-img-box::after { + content: ""; + display: block; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.step-img-box::before { + width: 60%; + /* height: 60%; */ + + /* 60% of parent's width */ + padding-bottom: 60%; + + background-color: #fdf2e9; + z-index: -2; +} + +.step-img-box::after { + width: 45%; + padding-bottom: 45%; + background-color: #fae5d3; + z-index: -1; +} + +.step-img { + width: 35%; + /* z-index: 10; */ } diff --git a/starter/07-Omnifood-Desktop/content/index.html b/starter/07-Omnifood-Desktop/content/index.html index a21716727..2d4c6252e 100644 --- a/starter/07-Omnifood-Desktop/content/index.html +++ b/starter/07-Omnifood-Desktop/content/index.html @@ -10,6 +10,7 @@ rel="stylesheet" /> + Omnifood @@ -69,11 +70,70 @@

-
-
Test 1
-
Test 2
-
Test 3
-
Test 4
+
+ How it works +
+ Your daily dose of health in 3 simple steps +
+
+ +
+ +
+
01
+
+ Tell us what you like (and what not): +
+
+ Never again waste time thinking about what to eat! Omnifood AI + will create a 100% personalized weekly meal plan just for you. It + makes sure you get all the nutrients and vitamins you need, no + matter what diet you follow! +
+
+
+ +
+ + +
+ +
+
+
02
+
Approve your weekly meal plan:
+
+ Once per week, approve the meal plan generated for you by Omnifood + AI. You can change ingredients, swap entire meals, or even add + your own recipes. +
+
+ + +
+
03
+
Receive meals at convenient time:
+
+ Best chefs in town will cook your selected meal every day, and we + will deliver it to your door whenever works best for you. You can + change delivery schedule and address daily! +
+
+
+ +

From 13bb2150819373a8ba0ee49b317e076e1e062a64 Mon Sep 17 00:00:00 2001 From: quechau Date: Sun, 5 Nov 2023 17:09:56 +0700 Subject: [PATCH 46/54] Add the featured-in section. --- .../07-Omnifood-Desktop/content/css/style.css | 28 +++++++++++++++++++ .../07-Omnifood-Desktop/content/index.html | 21 ++++++++++++++ 2 files changed, 49 insertions(+) diff --git a/starter/07-Omnifood-Desktop/content/css/style.css b/starter/07-Omnifood-Desktop/content/css/style.css index a2cca87be..8e4ab9177 100644 --- a/starter/07-Omnifood-Desktop/content/css/style.css +++ b/starter/07-Omnifood-Desktop/content/css/style.css @@ -117,6 +117,34 @@ font-weight: 700; } +/***************************/ +/* FEATURED IN SECTION / +// +.section-featured { + padding: 4.8rem 0; +} + +.heading-featured-in { + font-size: 1.4rem; + text-transform: uppercase; + letter-spacing: 0.75px; + font-weight: 500; + text-align: center; + margin-bottom: 2.4rem; + color: #000; +} + +.logos { + display: flex; + justify-content: space-around; +} + +.logos img { + height: 3.2rem; + filter: brightness(0); + opacity: 50%; +} + // / HOW IT WORKS SECTION */ /***************************/ diff --git a/starter/07-Omnifood-Desktop/content/index.html b/starter/07-Omnifood-Desktop/content/index.html index 2d4c6252e..4e2cbb1d8 100644 --- a/starter/07-Omnifood-Desktop/content/index.html +++ b/starter/07-Omnifood-Desktop/content/index.html @@ -69,6 +69,27 @@
+ + +
+
+
As featured in
+
+ + + + + +
+
+
+

How it works From 5bca439c23d81144112be0c27a7914dc168b7352 Mon Sep 17 00:00:00 2001 From: quechau Date: Mon, 6 Nov 2023 23:35:06 +0700 Subject: [PATCH 47/54] Add meals section. --- .../content/css/general.css | 33 ++++- .../07-Omnifood-Desktop/content/css/style.css | 107 ++++++++++++++ .../07-Omnifood-Desktop/content/index.html | 130 ++++++++++++++++++ 3 files changed, 269 insertions(+), 1 deletion(-) diff --git a/starter/07-Omnifood-Desktop/content/css/general.css b/starter/07-Omnifood-Desktop/content/css/general.css index e4ab757a6..f9589e718 100644 --- a/starter/07-Omnifood-Desktop/content/css/general.css +++ b/starter/07-Omnifood-Desktop/content/css/general.css @@ -39,6 +39,7 @@ Paragraph default: 1.6 --- 06 BORDER-RADIUS Default: 9px +Medium: 11px --- 07 WHITESPACE SPACING SYSTEM (px) @@ -148,7 +149,8 @@ body { border-radius: 9px; /* Put transition on original "state" / - transition: background-color 0.3s; + / transition: background-color 0.3s; / + transition: all 0.3s; } .btn--full:link, @@ -178,6 +180,35 @@ body { box-shadow: inset 0 0 0 3px #fff; } +.link:link, +.link:visited { + display: inline-block; + color: #e67e22; + text-decoration: none; + border-bottom: 1px solid currentColor; + padding-bottom: 2px; + transition: all 0.3; +} + +.link:hover, +.link:active { + color: #cf711f; + border-bottom: 1px solid transparent; +} + +/ HELPER/SETTINGS CLASSES / .margin-right-sm { margin-right: 1.6rem !important; } + +.margin-bottom-md { + margin-bottom: 4.8rem !important; +} + +.center-text { + text-align: center; +} + +strong { + font-weight: 500; +} diff --git a/starter/07-Omnifood-Desktop/content/css/style.css b/starter/07-Omnifood-Desktop/content/css/style.css index 8e4ab9177..0c04dae18 100644 --- a/starter/07-Omnifood-Desktop/content/css/style.css +++ b/starter/07-Omnifood-Desktop/content/css/style.css @@ -203,3 +203,110 @@ width: 35%; / z-index: 10; */ } + +/***************************/ +/* MEALS SECTION / +// +.section-meals { + padding: 9.6rem 0; +} + +.meal { + box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075); + border-radius: 11px; + overflow: hidden; + transition: all 0.4s; +} + +.meal:hover { + transform: translateY(-1.2rem); + box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.06); +} + +.meal-content { + padding: 3.2rem 4.8rem 4.8rem 4.8rem; +} + +.meal-tags { + margin-bottom: 1.2rem; + display: flex; + gap: 0.4rem; +} + +.tag { + display: inline-block; + padding: 0.4rem 0.8rem; + font-size: 1.2rem; + text-transform: uppercase; + color: #333; + border-radius: 100px; + font-weight: 600; +} + +.tag--vegetarian { + background-color: #51cf66; +} + +.tag--vegan { + background-color: #51cf66; +} + +.tag--paleo { + background-color: #ffd43b; +} + +.meal-tittle { + font-size: 2.4rem; + color: #333; + font-weight: 600; + margin-bottom: 3.2rem; +} + +.meal-attributes { + list-style: none; + display: flex; + flex-direction: column; + gap: 2rem; +} + +.meal-attribute { + font-size: 1.8rem; + display: flex; + align-items: center; + gap: 1.6rem; +} + +.meal-icon { + height: 2.4rem; + width: 2.4rem; + color: #e67e22; +} + +.meal-img { + width: 100%; +} + +.all-recipes { + text-align: center; + font-size: 1.8rem; +} + +.list { + list-style: none; + display: flex; + flex-direction: column; + gap: 1.6rem; +} + +.list-item { + font-size: 1.8rem; + display: flex; + align-items: center; + gap: 1.6rem; +} + +.list-icon { + width: 3rem; + height: 3rem; + color: #e67e22; +} diff --git a/starter/07-Omnifood-Desktop/content/index.html b/starter/07-Omnifood-Desktop/content/index.html index 4e2cbb1d8..b5c5f1783 100644 --- a/starter/07-Omnifood-Desktop/content/index.html +++ b/starter/07-Omnifood-Desktop/content/index.html @@ -13,6 +13,16 @@ + + + + Omnifood @@ -157,6 +167,126 @@
Receive meals at convenient time:

+ + +
+
+ Meals +
+ Omnifood AI chooses from 5,000+ recipes +
+
+ +
+
+ +
+
+ Vegetarian +
+
Japanese Gyozas
+
+
+ + 650 calories +
+
+ + NutriScore ® 74 +
+
+ + 4.9 rating (537) +
+
+
+
+ +
+ +
+
+ Vegan + Paleo +
+
Avocado Salad
+
+
+ + 400 calories +
+
+ + NutriScore ® 92 +
+
+ + 4.8 rating (441) +
+
+
+
+
+
Works with any diet
+
+
+ Vegetarian +
+
+ Vegan +
+
+ Pescatarian +
+
+ Gluten-free +
+
+ Lactose-free +
+
+ Keto +
+
+ Paleo +
+
+ Low FODMAP +
+
+ Kid-friendly +
+
+
+
+ +
+ See all recipes → +
+
From 99897b8823e67e4f836164575b638a880282efc2 Mon Sep 17 00:00:00 2001 From: quechau Date: Mon, 6 Nov 2023 23:35:06 +0700 Subject: [PATCH 48/54] Add meals section. --- starter/07-Omnifood-Desktop/content/css/general.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/starter/07-Omnifood-Desktop/content/css/general.css b/starter/07-Omnifood-Desktop/content/css/general.css index f9589e718..02ec2036c 100644 --- a/starter/07-Omnifood-Desktop/content/css/general.css +++ b/starter/07-Omnifood-Desktop/content/css/general.css @@ -187,7 +187,7 @@ body { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; - transition: all 0.3; + transition: all 0.3s; } .link:hover, From 00784b02b9d3aedef7801e6bd2e8cca8cb13c0e2 Mon Sep 17 00:00:00 2001 From: quechau Date: Tue, 7 Nov 2023 19:04:23 +0700 Subject: [PATCH 49/54] add testimonials (left side). --- .../07-Omnifood-Desktop/content/css/style.css | 31 ++++++++++ .../07-Omnifood-Desktop/content/index.html | 60 +++++++++++++++++++ 2 files changed, 91 insertions(+) diff --git a/starter/07-Omnifood-Desktop/content/css/style.css b/starter/07-Omnifood-Desktop/content/css/style.css index 0c04dae18..5318dca5b 100644 --- a/starter/07-Omnifood-Desktop/content/css/style.css +++ b/starter/07-Omnifood-Desktop/content/css/style.css @@ -310,3 +310,34 @@ height: 3rem; color: #e67e22; } + +// +/ TESTIMONIALS SECTION / +// + +.section-testimonials { + padding: 9.6rem 0; +} + +.testimonials { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4.8rem; +} + +.testimonial-img { + width: 6.4rem; + border-radius: 50%; + margin-bottom: 1.2rem; +} + +.testimonial-text { + font-size: 1.8rem; + line-height: 1.8; + margin-bottom: 1.6rem; +} + +.testimonial-name { + font-size: 1.6rem; + color: #777; +} diff --git a/starter/07-Omnifood-Desktop/content/index.html b/starter/07-Omnifood-Desktop/content/index.html index b5c5f1783..57602de8d 100644 --- a/starter/07-Omnifood-Desktop/content/index.html +++ b/starter/07-Omnifood-Desktop/content/index.html @@ -287,6 +287,66 @@
Works with any diet
See all recipes → + + +
+
+ Testimonials +
Once you try it, you can't go back
+ +
+
+ +
+ Inexpensive, healthy and great-tasting meals, without even + having to order manually! It feels truly magical. +
+
— Dave Bryson
+
+
+ +
+ The AI algorithm is crazy good, it chooses the right meals for + me every time. It's amazing not to worry about food anymore! +
+
— Ben Hadley
+
+
+ +
+ Omnifood is a life saver! I just started a company, so there's + no time for cooking. I couldn't live without my daily meals now! +
+
— Steve Miller
+
+
+ +
+ I got Omnifood for the whole family, and it frees up so much + time! Plus, everything is organic and vegan and without plastic. +
+
— Hannah Smith
+
+
+
+
Gallery
+
From 0bff4155d9c6825573bb653c3ef65104b9879f41 Mon Sep 17 00:00:00 2001 From: quechau Date: Tue, 7 Nov 2023 20:00:10 +0700 Subject: [PATCH 50/54] add testimonials (right side) and finish testimonials. --- .../content/css/general.css | 1 + .../07-Omnifood-Desktop/content/css/style.css | 35 ++++++++- .../07-Omnifood-Desktop/content/index.html | 78 ++++++++++++++++++- 3 files changed, 109 insertions(+), 5 deletions(-) diff --git a/starter/07-Omnifood-Desktop/content/css/general.css b/starter/07-Omnifood-Desktop/content/css/general.css index 02ec2036c..d1cc6342c 100644 --- a/starter/07-Omnifood-Desktop/content/css/general.css +++ b/starter/07-Omnifood-Desktop/content/css/general.css @@ -31,6 +31,7 @@ Paragraph default: 1.6 - Shades: #cf711f - Accents: - Greys: +#6f6f6f (lightest grey allowed on #6f6f6f) #555 #333 diff --git a/starter/07-Omnifood-Desktop/content/css/style.css b/starter/07-Omnifood-Desktop/content/css/style.css index 5318dca5b..d3e3ae2a5 100644 --- a/starter/07-Omnifood-Desktop/content/css/style.css +++ b/starter/07-Omnifood-Desktop/content/css/style.css @@ -316,13 +316,21 @@ // .section-testimonials { - padding: 9.6rem 0; + background-color: #fdf2e9; + display: grid; + grid-template-columns: 55fr 45fr; + align-items: center; +} + +.testimonials-container { + padding: 9.6rem; } .testimonials { display: grid; grid-template-columns: 1fr 1fr; - gap: 4.8rem; + row-gap: 4.8rem; + column-gap: 8rem; } .testimonial-img { @@ -339,5 +347,26 @@ .testimonial-name { font-size: 1.6rem; - color: #777; + color: #6f6f6f; +} + +.gallery { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.6rem; + padding: 1.6rem; +} + +.gallery-item { + overflow: hidden; +} + +.gallery-item img { + display: block; + width: 100%; + transition: all 0.4s; +} + +.gallery-item img:hover { + transform: scale(1.1); } diff --git a/starter/07-Omnifood-Desktop/content/index.html b/starter/07-Omnifood-Desktop/content/index.html index 57602de8d..c753165b1 100644 --- a/starter/07-Omnifood-Desktop/content/index.html +++ b/starter/07-Omnifood-Desktop/content/index.html @@ -289,7 +289,7 @@
Works with any diet
-
+

Testimonials
Once you try it, you can't go back
@@ -345,7 +345,81 @@
Once you try it, you can't go back

-
Gallery
+
+
+ + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+

From 4090483bba95091c980be73da1aa551429df8e3d Mon Sep 17 00:00:00 2001 From: quechau Date: Wed, 8 Nov 2023 20:04:45 +0700 Subject: [PATCH 51/54] Add Pricing section. --- .../content/css/general.css | 45 ++++++- .../07-Omnifood-Desktop/content/css/style.css | 111 +++++++++++++----- .../07-Omnifood-Desktop/content/index.html | 79 ++++++++++++- 3 files changed, 201 insertions(+), 34 deletions(-) diff --git a/starter/07-Omnifood-Desktop/content/css/general.css b/starter/07-Omnifood-Desktop/content/css/general.css index d1cc6342c..0466784db 100644 --- a/starter/07-Omnifood-Desktop/content/css/general.css +++ b/starter/07-Omnifood-Desktop/content/css/general.css @@ -2,16 +2,16 @@ --- 01 TYPOGRAPHY SYSTEM -FONT SIZE SYSTEM (px) +- FONT SIZE SYSTEM (px) 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 -FONT WEIGHTS: +- FONT WEIGHTS: Default: 400 Medium: 500 Semi-bold: 600 Bold: 700 -LINE HEIGHTS: +- LINE HEIGHTS: Default: 1 Small: 1.05 Medium: 1.2 @@ -23,12 +23,13 @@ Paragraph default: 1.6 --- 02 COLORS -- Primary color: #e67e22 +- Primary: #e67e22 - Tints: #fdf2e9 #fae5d3 -- Shades: #cf711f +- Shades: +#cf711f - Accents: - Greys: #6f6f6f (lightest grey allowed on #6f6f6f) @@ -36,6 +37,7 @@ Paragraph default: 1.6 #333 --- 05 SHADOWS +0 2.4rem 4.8rem rgba(0, 0, 0, 0.075); --- 06 BORDER-RADIUS @@ -43,7 +45,8 @@ Default: 9px Medium: 11px --- 07 WHITESPACE -SPACING SYSTEM (px) + +- SPACING SYSTEM (px) 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 / @@ -83,6 +86,16 @@ body { display: grid; column-gap: 6.4rem; row-gap: 9.6rem; + + /* margin-bottom: 9.6rem; / +} + +/ .grid:last-child { + margin-bottom: 0; +} / + +.grid:not(:last-child) { + margin-bottom: 9.6rem; } .grid--2-cols { @@ -197,6 +210,26 @@ body { border-bottom: 1px solid transparent; } +.list { + list-style: none; + display: flex; + flex-direction: column; + gap: 1.6rem; +} + +.list-item { + font-size: 1.8rem; + display: flex; + align-items: center; + gap: 1.6rem; +} + +.list-icon { + width: 3rem; + height: 3rem; + color: #e67e22; +} + / HELPER/SETTINGS CLASSES / .margin-right-sm { margin-right: 1.6rem !important; diff --git a/starter/07-Omnifood-Desktop/content/css/style.css b/starter/07-Omnifood-Desktop/content/css/style.css index d3e3ae2a5..3140f5760 100644 --- a/starter/07-Omnifood-Desktop/content/css/style.css +++ b/starter/07-Omnifood-Desktop/content/css/style.css @@ -75,8 +75,7 @@ .hero-description { font-size: 2rem; - line-height: 1.5; - letter-spacing: -0.5px; + line-height: 1.6; margin-bottom: 4.8rem; } @@ -121,7 +120,7 @@ / FEATURED IN SECTION / // .section-featured { - padding: 4.8rem 0; + padding: 4.8rem 0 3.2rem 0; } .heading-featured-in { @@ -131,7 +130,7 @@ font-weight: 500; text-align: center; margin-bottom: 2.4rem; - color: #000; + color: #888; } .logos { @@ -155,7 +154,7 @@ .step-number { font-size: 8.6rem; font-weight: 600; - color: #eee; + color: #ddd; margin-bottom: 1.2rem; } @@ -248,14 +247,14 @@ } .tag--vegan { - background-color: #51cf66; + background-color: #94d82d; } .tag--paleo { background-color: #ffd43b; } -.meal-tittle { +.meal-title { font-size: 2.4rem; color: #333; font-weight: 600; @@ -291,26 +290,6 @@ font-size: 1.8rem; } -.list { - list-style: none; - display: flex; - flex-direction: column; - gap: 1.6rem; -} - -.list-item { - font-size: 1.8rem; - display: flex; - align-items: center; - gap: 1.6rem; -} - -.list-icon { - width: 3rem; - height: 3rem; - color: #e67e22; -} - // / TESTIMONIALS SECTION / // @@ -370,3 +349,81 @@ .gallery-item img:hover { transform: scale(1.1); } + +// +/ PRICING SECTION */ +/***********************/ + +.section-pricing { + padding: 9.6rem 0; +} + +.pricing-plan { + border-radius: 11px; + width: 75%; +} + +.pricing-plan--starter { + justify-self: end; + border: 2px solid #fdf2e9; + padding: 4.6rem; +} + +.pricing-plan--complete { + background-color: #fdf2e9; + padding: 4.8rem; + position: relative; + overflow: hidden; +} + +.pricing-plan--complete::after { + content: "Best value"; + position: absolute; + top: 6%; + right: -18%; + + text-transform: uppercase; + font-size: 1.4rem; + font-weight: 700; + color: #333; + background-color: #ffd43b; + padding: 0.8rem 8rem; + transform: rotate(45deg); +} +.plan-header { + text-align: center; + margin: 4.8rem; +} + +.plan-name { + color: #cf711f; + font-weight: 600; + font-size: 2rem; + text-transform: uppercase; + letter-spacing: 0.75; + margin-bottom: 3.2rem; +} + +.plan-price { + font-size: 6.2rem; + font-weight: 600; + color: #333; + margin-bottom: 1.6rem; +} + +.plan-price span { + font-size: 3rem; + font-weight: 500; + margin-right: 0.8rem; +} + +.plan-text { + font-size: 1.6rem; + line-height: 1.6; + color: #6f6f6f; +} + +.plan-sign-up { + text-align: center; + margin-top: 2.8rem; +} diff --git a/starter/07-Omnifood-Desktop/content/index.html b/starter/07-Omnifood-Desktop/content/index.html index c753165b1..57bd7e212 100644 --- a/starter/07-Omnifood-Desktop/content/index.html +++ b/starter/07-Omnifood-Desktop/content/index.html @@ -188,7 +188,7 @@

Vegetarian
-
Japanese Gyozas
+
Japanese Gyozas

@@ -421,6 +421,83 @@
Once you try it, you can't go back

+ + +
+
+ Princing +
+ Eating well without breaking the bank +
+
+ +
+
+
+
Starter
+
$399
+
per month. That's just #13 per meal!
+
+ +
+
+ 1 meal per day +
+
+ Order from 11am to 9pm +
+
+ Delivery is free +
+
+ +
+
+
+ Start eating well +
+
+
+
+
Complete
+
$649
+
per month. That's just #11 per meal!
+
+ +
+
+ 2 meals per day +
+
+ Order 24/7 +
+
+ Delivery is free +
+
+ Get access to latest recipes +
+
+
+ Start eating well +
+
+
+ +
+
Feature 1
+
Feature 2
+
Feature 3
+
Feature 4
+
+
From c833b054fed4805cee6e1a1d839da0b0e524a9d3 Mon Sep 17 00:00:00 2001 From: quechau Date: Wed, 8 Nov 2023 20:47:43 +0700 Subject: [PATCH 52/54] Add Features Part. --- .../07-Omnifood-Desktop/content/css/style.css | 28 +++++++++++ .../07-Omnifood-Desktop/content/index.html | 47 +++++++++++++++++-- 2 files changed, 70 insertions(+), 5 deletions(-) diff --git a/starter/07-Omnifood-Desktop/content/css/style.css b/starter/07-Omnifood-Desktop/content/css/style.css index 3140f5760..f7cdcc1f8 100644 --- a/starter/07-Omnifood-Desktop/content/css/style.css +++ b/starter/07-Omnifood-Desktop/content/css/style.css @@ -427,3 +427,31 @@ text-align: center; margin-top: 2.8rem; } + +.plan-details { + font-size: 1.6rem; + line-height: 1.6; + text-align: center; +} + +.feature-icon { + color: #e67e22; + height: 3.2rem; + width: 3.2rem; + background-color: #fdf2e9; + margin-bottom: 3.2rem; + padding: 1.6rem; + border-radius: 50%; +} + +.feature-title { + font-size: 2.4rem; + color: #333; + font-weight: 700; + margin-bottom: 1.6rem; +} + +.feature-text { + font-size: 1.8rem; + line-height: 1.8; +} diff --git a/starter/07-Omnifood-Desktop/content/index.html b/starter/07-Omnifood-Desktop/content/index.html index 57bd7e212..25ad15a98 100644 --- a/starter/07-Omnifood-Desktop/content/index.html +++ b/starter/07-Omnifood-Desktop/content/index.html @@ -431,7 +431,7 @@

-
+

Starter
@@ -491,11 +491,48 @@

+
+
+ Prices include all applicable taxes. Users can cancel at any time. + Both plans include the following: +
+
+
-
Feature 1
-
Feature 2
-
Feature 3
-
Feature 4
+
+ +
Never cook again!
+
+ Our subscriptions cover 365 days per year, even including major + holidays. +
+
+
+ + +
Local and organic
+ +
+ Our cooks only use local, fresh, and organic products to prepare + your meals. +
+
+
+ +
No waste
+
+ All our partners only use reusable containers to package all your + meals. +
+
+
+ +
Pause anytime
+
+ Going on vacation? Just pause your subscription, and we refund + unused days. +
+

From 73015c1095f42cb24032b3fa5f35bba393fd6303 Mon Sep 17 00:00:00 2001 From: quechau Date: Wed, 8 Nov 2023 23:44:52 +0700 Subject: [PATCH 53/54] Add the Call to Action section. --- .../content/css/general.css | 29 ++++++- .../07-Omnifood-Desktop/content/css/style.css | 82 +++++++++++++++++++ .../07-Omnifood-Desktop/content/index.html | 60 ++++++++++++++ 3 files changed, 170 insertions(+), 1 deletion(-) diff --git a/starter/07-Omnifood-Desktop/content/css/general.css b/starter/07-Omnifood-Desktop/content/css/general.css index 0466784db..18ea4dd8f 100644 --- a/starter/07-Omnifood-Desktop/content/css/general.css +++ b/starter/07-Omnifood-Desktop/content/css/general.css @@ -27,9 +27,12 @@ Paragraph default: 1.6 - Tints: #fdf2e9 #fae5d3 +#eb984e - Shades: #cf711f +#45260a + - Accents: - Greys: #6f6f6f (lightest grey allowed on #6f6f6f) @@ -152,16 +155,22 @@ body { letter-spacing: 0.75px; } +.btn, .btn:link, .btn:visited { display: inline-block; - background-color: #e67e22; + text-decoration: none; font-size: 2rem; font-weight: 600; padding: 1.6rem 3.2rem; border-radius: 9px; + /* Only necessary for .btn / + border: none; + cursor: pointer; + font-family: inherit; + / Put transition on original "state" / / transition: background-color 0.3s; / transition: all 0.3s; @@ -193,6 +202,17 @@ body { / Trick to add border inside / box-shadow: inset 0 0 0 3px #fff; } +.btn--form { + background-color: #45260a; + color: #fdf2e9; + align-self: end; + padding: 1.2rem; +} + +.btn--form:hover { + background-color: #fff; + color: #555; +} .link:link, .link:visited { @@ -230,6 +250,13 @@ body { color: #e67e22; } +:focus { + outline: none; + /* outline: 4px dotted #e67e22; + outline-offset: 8px; / + box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.5); +} + / HELPER/SETTINGS CLASSES */ .margin-right-sm { margin-right: 1.6rem !important; diff --git a/starter/07-Omnifood-Desktop/content/css/style.css b/starter/07-Omnifood-Desktop/content/css/style.css index f7cdcc1f8..e77da5136 100644 --- a/starter/07-Omnifood-Desktop/content/css/style.css +++ b/starter/07-Omnifood-Desktop/content/css/style.css @@ -455,3 +455,85 @@ font-size: 1.8rem; line-height: 1.8; } + +/***************************/ +/* CTA SECTION */ +/***************************/ +.section-cta { + padding: 9.6rem 0; +} + +.cta { + display: grid; + grid-template-columns: 2fr 1fr; + /* background-color: #e67e22; / + box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.15); + border-radius: 11px; + + background-image: linear-gradient(to right bottom, #eb984e, #e67e22); + overflow: hidden; +} + +.cta-text-box { + padding: 4.8rem 6.4rem 6.4rem 6.4rem; + color: #45260a; +} + +.cta .heading-secondary { + / color: #45260a; / + color: inherit; + margin-bottom: 3.2rem; +} + +.cta-text { + font-size: 1.8rem; + line-height: 1.8; + margin-bottom: 4.8rem; +} + +.cta-img-box { + background-image: linear-gradient( + to right bottom, + rgba(235, 151, 78, 0.35), + rgba(230, 125, 34, 0.35) + ), + url("../img/eating.jpg"); + background-size: cover; + background-position: center; +} + +.cta-form { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 3.2rem; + row-gap: 2.4rem; +} + +.cta-form label { + display: block; + font-size: 1.6rem; + font-weight: 500; + margin-bottom: 1.2rem; +} + +.cta-form input, +.cta-form select { + width: 100%; + padding: 1.2rem; + font-size: 1.8rem; + font-family: inherit; + color: inherit; + border: none; + background-color: #fdf2e9; + border-radius: 9px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.cta-form input::placeholder { + color: #aaa; +} + +.cta :focus { + outline: none; + box-shadow: 0 0 0 0.8rem rgba(253, 242, 233, 0.5); +} diff --git a/starter/07-Omnifood-Desktop/content/index.html b/starter/07-Omnifood-Desktop/content/index.html index 25ad15a98..d3b6a5ac8 100644 --- a/starter/07-Omnifood-Desktop/content/index.html +++ b/starter/07-Omnifood-Desktop/content/index.html @@ -535,6 +535,66 @@

+ + +
+
+
+
+
Get your first meal for free
+
+ Healthy, tasty and hassle-free meals are waiting for you. Start + eating well today. You can cancel or pause anytime. And the + first meal is on us! +
+ +
+
+ Full Name + +
+ +
+ Email Address + +
+ +
+ Where did you hear from us? + +
+ + + + +
+
+
+
+
+
From 9d654161828da891e5952f26864e234be8ca3e50 Mon Sep 17 00:00:00 2001 From: quechau Date: Thu, 9 Nov 2023 22:29:15 +0700 Subject: [PATCH 54/54] Add footer to Omnifood project. --- .../content/css/general.css | 6 ++ .../07-Omnifood-Desktop/content/css/style.css | 85 +++++++++++++++++- .../07-Omnifood-Desktop/content/index.html | 90 +++++++++++++++++-- 3 files changed, 173 insertions(+), 8 deletions(-) diff --git a/starter/07-Omnifood-Desktop/content/css/general.css b/starter/07-Omnifood-Desktop/content/css/general.css index 18ea4dd8f..17e21c370 100644 --- a/starter/07-Omnifood-Desktop/content/css/general.css +++ b/starter/07-Omnifood-Desktop/content/css/general.css @@ -35,6 +35,8 @@ Paragraph default: 1.6 - Accents: - Greys: +#888 +#767676 (lightest grey allowed on #fff) #6f6f6f (lightest grey allowed on #6f6f6f) #555 #333 @@ -113,6 +115,10 @@ body { grid-template-columns: repeat(4, 1fr); } +.grid--5-cols { + grid-template-columns: repeat(5, 1fr); +} + .grid--center-v { align-items: center; } diff --git a/starter/07-Omnifood-Desktop/content/css/style.css b/starter/07-Omnifood-Desktop/content/css/style.css index e77da5136..37558a0c8 100644 --- a/starter/07-Omnifood-Desktop/content/css/style.css +++ b/starter/07-Omnifood-Desktop/content/css/style.css @@ -130,7 +130,7 @@ font-weight: 500; text-align: center; margin-bottom: 2.4rem; - color: #888; + color: #767676; } .logos { @@ -459,8 +459,13 @@ /***************************/ /* CTA SECTION */ /***************************/ + .section-cta { - padding: 9.6rem 0; + /* top / right / bottom / left / + / padding: 9.6rem 0 12.8rem 0; / + + / top / horizontal / bottom */ + padding: 4.8rem 0 12.8rem; } .cta { @@ -537,3 +542,79 @@ outline: none; box-shadow: 0 0 0 0.8rem rgba(253, 242, 233, 0.5); } + +/***************************/ +/* FOOTER */ +/***************************/ + +.footer { + padding: 12.8rem 0; + border-top: 1px solid #eee; +} + +.grid--footer { + grid-template-columns: 1.5fr 1.5fr 1fr 1fr 1fr; +} + +.logo-col { + display: flex; + flex-direction: column; +} +.footer-logo { + display: block; + margin-bottom: 3.2rem; +} + +.social-links { + list-style: none; + display: flex; + gap: 2.4rem; +} + +.social-icon { + height: 2.4rem; + width: 2.4rem; +} + +.copyright { + font-size: 1.4rem; + line-height: 1.6; + color: #767676; + margin-top: auto; +} + +.footer-heading { + font-size: 1.8rem; + font-weight: 500; + margin-bottom: 4rem; +} + +.contacts { + font-style: normal; + font-size: 1.6rem; + line-height: 1.6; +} + +.address { + margin-bottom: 2.4rem; +} + +.footer-nav { + list-style: none; + display: flex; + flex-direction: column; + gap: 2.4rem; +} + +.footer-link:link, +.footer-link:visited { + text-decoration: none; + font-size: 1.6rem; + color: #767676; + transition: all 0.3s; +} + +.footer-link:hover, +.footer-link:active { + color: #555; +} diff --git a/starter/07-Omnifood-Desktop/content/index.html b/starter/07-Omnifood-Desktop/content/index.html index d3b6a5ac8..e162668c8 100644 --- a/starter/07-Omnifood-Desktop/content/index.html +++ b/starter/07-Omnifood-Desktop/content/index.html @@ -27,14 +27,16 @@
- + + +

-
Section 1
-
Section 2
-
Section 3
-
Section 4
-
Section 5
+
How it works
+
Meals
+
Testimonials
+
Pricing
+
Try for free

@@ -596,5 +598,81 @@
Get your first meal for free
+ +
+
+
+ + + + +
+
+ +
+
+ +
+
+ +
+
+ +
+ Copyright © 2027 by Omnifood, Inc. All rights reserved. +
+
+
+
Contact us
+
+
+ 623 Harrison St., 2nd Floor, San Francisco, CA 94107 +
+
+ 415-201-6370
+ hello@omnifood.com +
+
+
+ +
+
Account
+
+
Create account
+
Sign in
+
iOS app
+
Android app
+
+
+ +
+
Company
+
+
About Omnifood
+
For Business
+
Cooking partners
+
Careers
+
+
+ +
+
Resources
+
+
Recipe directory
+
Help center
+
Privacy & terms
+
+
+
+

BLOG

Converse Chuck Taylor All Star Low Top

Product details

What is HTML?

Why should you learn HTML?

The Basic Language of the Web: HTML

The Basic Language of the Web: HTML

Product details

Related posts

Related posts

Converse Chuck Taylor All Star Low Top

Converse Chuck Taylor All Star Low Top

Product details

The Basic Language of the Web: HTML

The Basic Language of the Web: HTML

Product details

📘 The Code Magazine

📘 The Code Magazine

What is HTML?

Why should you learn HTML?

What is HTML?

Why should you learn HTML?

What is HTML?

Why should you learn HTML?

Some random heading

A healthy meal delivered to your door, every single day

A healthy meal delivered to your door, every single day

A healthy meal delivered to your door, every single day

+ A healthy meal delivered to your door, every single day +

- A healthy meal delivered to your door, every single day -

+ A healthy meal delivered to your door, every single day +

+ Your daily dose of health in 3 simple steps +

+ Tell us what you like (and what not): +

Approve your weekly meal plan:

Receive meals at convenient time:

As featured in

Receive meals at convenient time:

+ Omnifood AI chooses from 5,000+ recipes +

Works with any diet

Works with any diet

Once you try it, you can't go back

Works with any diet

Once you try it, you can't go back

Once you try it, you can't go back

Vegetarian - Japanese Gyozas + Japanese Gyozas @@ -421,6 +421,83 @@ Once you try it, you can't go back

Once you try it, you can't go back

+ Eating well without breaking the bank +

Get your first meal for free

Get your first meal for free

Vegetarian
-
Japanese Gyozas
+
Japanese Gyozas

@@ -421,6 +421,83 @@
Once you try it, you can't go back