From f52bd5ecc654ad35b01d596f915e1348c702ed5a Mon Sep 17 00:00:00 2001 From: Milton Ivan Diaz Torres Date: Wed, 12 Oct 2022 18:19:30 +0800 Subject: [PATCH 1/4] These are my modifications --- starter/01-TEST/index.html | 16 ++++++++++++++++ starter/02-HTML-Fundamentals/index.html | 12 ++++++++++++ 2 files changed, 28 insertions(+) create mode 100644 starter/01-TEST/index.html create mode 100644 starter/02-HTML-Fundamentals/index.html diff --git a/starter/01-TEST/index.html b/starter/01-TEST/index.html new file mode 100644 index 000000000..02a0bc290 --- /dev/null +++ b/starter/01-TEST/index.html @@ -0,0 +1,16 @@ + + + + + + + + My first webpage + + + +

Hello, world!

My name is Milton, and this is my very first webpage :D

+ + + \ No newline at end of file diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html new file mode 100644 index 000000000..74e7a48fe --- /dev/null +++ b/starter/02-HTML-Fundamentals/index.html @@ -0,0 +1,12 @@ + + + + + The Basic Language of the Web: HTML + + + +

The Basic Language of the Web: HTML

+ + + \ No newline at end of file From b07eeb78df315cedd023207acb2162cfd3311c19 Mon Sep 17 00:00:00 2001 From: Milton Ivan Diaz Torres Date: Wed, 12 Oct 2022 18:24:48 +0800 Subject: [PATCH 2/4] My changes today --- starter/02-HTML-Fundamentals/index.html | 63 ++++++++++++++++++++++++- 1 file changed, 62 insertions(+), 1 deletion(-) diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html index 74e7a48fe..0c8f3c804 100644 --- a/starter/02-HTML-Fundamentals/index.html +++ b/starter/02-HTML-Fundamentals/index.html @@ -1,12 +1,73 @@ - + + 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 the 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!

+ \ No newline at end of file From 5cd2a811b3f9818883193414ae7d429add5a56b5 Mon Sep 17 00:00:00 2001 From: Milton Ivan Diaz Torres Date: Mon, 17 Oct 2022 21:49:19 +0800 Subject: [PATCH 3/4] October 17 --- starter/02-HTML-Fundamentals/blog.html | 17 ++ .../challenge2/index.html | 39 +++ .../{ => 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 | 150 +++++++---- starter/03-CSS-Fundamentals/index.html | 247 ++++++++---------- starter/03-CSS-Fundamentals/style.css | 121 +++++++++ 11 files changed, 391 insertions(+), 183 deletions(-) create mode 100644 starter/02-HTML-Fundamentals/blog.html create mode 100644 starter/02-HTML-Fundamentals/challenge2/index.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/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..a225a4982 --- /dev/null +++ b/starter/02-HTML-Fundamentals/blog.html @@ -0,0 +1,17 @@ + + + + + + + + BLOG + + + +

BLOG

+ Home + + + + \ No newline at end of file diff --git a/starter/02-HTML-Fundamentals/challenge2/index.html b/starter/02-HTML-Fundamentals/challenge2/index.html new file mode 100644 index 000000000..e0b730f26 --- /dev/null +++ b/starter/02-HTML-Fundamentals/challenge2/index.html @@ -0,0 +1,39 @@ + + + + + + + + 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 +

+ +

+ + + + \ No newline at end of file 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 index 0c8f3c804..787fc33bb 100644 --- a/starter/02-HTML-Fundamentals/index.html +++ b/starter/02-HTML-Fundamentals/index.html @@ -16,57 +16,105 @@

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 the 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!

📘 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..da1718533 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -1,12 +1,14 @@ - - - The Basic Language of the Web: HTML - - - +

📘 The Code Magazine

+ + +

+ +

📘 The Code Magazine

- - +

The Basic Language of the Web: HTML

+ +

Posted by Laura Jones on Monday, June 21st 2027

+ +

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!

+ + + + + + + \ No newline at end of file diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css new file mode 100644 index 000000000..f4e20cf22 --- /dev/null +++ b/starter/03-CSS-Fundamentals/style.css @@ -0,0 +1,121 @@ +h1, +h2, +h3, +h4, +p, +li { + font-family: sans-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; +} + +.related { + list-style: none; +} + +.main-header { + background-color: #f7f7f7; +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; +} + +/* pseudo class */ +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; +} + +/* +li:nth-child(2) { + 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 orangered; +} + +a:active { + background-color: black; + font-style: italic; +} \ No newline at end of file From fd9d19f731ff4c85125d6fc9dad84c907c83695b Mon Sep 17 00:00:00 2001 From: Milton Ivan Diaz Torres Date: Tue, 8 Nov 2022 01:47:24 +0800 Subject: [PATCH 4/4] Section pricing --- final/04-CSS-Layouts/index.html | 300 +++++----- .../03-CSS-Fundamentals/challenge1/index.html | 40 ++ .../03-CSS-Fundamentals/challenge1/style.css | 65 +++ .../03-CSS-Fundamentals/challenge2/index.html | 40 ++ .../03-CSS-Fundamentals/challenge2/style.css | 92 +++ .../03-CSS-Fundamentals/challenge3/index.html | 48 ++ .../03-CSS-Fundamentals/challenge3/style.css | 143 +++++ starter/03-CSS-Fundamentals/index.html | 216 +++---- starter/03-CSS-Fundamentals/style.css | 155 ++++- starter/04-CSS-Layouts/challenge1/index.html | 51 ++ starter/04-CSS-Layouts/challenge1/style.css | 180 ++++++ starter/04-CSS-Layouts/challenge2/index.html | 53 ++ starter/04-CSS-Layouts/challenge2/style.css | 199 +++++++ starter/04-CSS-Layouts/challenge3/index.html | 52 ++ starter/04-CSS-Layouts/challenge3/style.css | 171 ++++++ starter/04-CSS-Layouts/css-grid.html | 214 ++++--- .../04-CSS-Layouts/flexbox backup/index.html | 140 +++++ .../04-CSS-Layouts/flexbox backup/style.css | 297 ++++++++++ starter/04-CSS-Layouts/flexbox.html | 153 +++-- .../04-CSS-Layouts/float backup/index.html | 136 +++++ starter/04-CSS-Layouts/float backup/style.css | 239 ++++++++ starter/04-CSS-Layouts/index.html | 272 ++++----- starter/04-CSS-Layouts/style.css | 214 ++++--- starter/05-Design/index.html | 370 +++++++----- starter/05-Design/style.css | 102 +++- starter/06-Components/01-accordion.html | 179 ++++++ starter/06-Components/02-carousel.html | 169 ++++++ starter/06-Components/03-table.html | 110 ++++ starter/06-Components/05-hero.html | 143 +++++ starter/06-Components/06-app-layout.html | 116 ++++ starter/06-Components/component.html | 43 ++ .../{content => }/content.md | 15 + starter/07-Omnifood-Desktop/css/general.css | 281 +++++++++ starter/07-Omnifood-Desktop/css/style.css | 538 ++++++++++++++++++ .../{content => }/img/app/app-screen-1.png | Bin .../{content => }/img/app/app-screen-2.png | Bin .../{content => }/img/app/app-screen-3.png | Bin .../{content => }/img/customers/ben.jpg | Bin .../img/customers/customer-1.jpg | Bin .../img/customers/customer-2.jpg | Bin .../img/customers/customer-3.jpg | Bin .../img/customers/customer-4.jpg | Bin .../img/customers/customer-5.jpg | Bin .../img/customers/customer-6.jpg | Bin .../{content => }/img/customers/dave.jpg | Bin .../{content => }/img/customers/hannah.jpg | Bin .../{content => }/img/customers/steve.jpg | Bin .../{content => }/img/eating.jpg | Bin .../{content => }/img/favicon.png | Bin .../{content => }/img/gallery/gallery-1.jpg | Bin .../{content => }/img/gallery/gallery-10.jpg | Bin .../{content => }/img/gallery/gallery-11.jpg | Bin .../{content => }/img/gallery/gallery-12.jpg | Bin .../{content => }/img/gallery/gallery-2.jpg | Bin .../{content => }/img/gallery/gallery-3.jpg | Bin .../{content => }/img/gallery/gallery-4.jpg | Bin .../{content => }/img/gallery/gallery-5.jpg | Bin .../{content => }/img/gallery/gallery-6.jpg | Bin .../{content => }/img/gallery/gallery-7.jpg | Bin .../{content => }/img/gallery/gallery-8.jpg | Bin .../{content => }/img/gallery/gallery-9.jpg | Bin .../{content => }/img/hero.png | Bin .../img/logos/business-insider.png | Bin .../{content => }/img/logos/forbes.png | Bin .../{content => }/img/logos/techcrunch.png | Bin .../img/logos/the-new-york-times.png | Bin .../{content => }/img/logos/usa-today.png | Bin .../{content => }/img/meals/meal-1.jpg | Bin .../{content => }/img/meals/meal-2.jpg | Bin .../{content => }/img/omnifood-logo.png | Bin starter/07-Omnifood-Desktop/index.html | 431 ++++++++++++++ 71 files changed, 5163 insertions(+), 804 deletions(-) create mode 100644 starter/03-CSS-Fundamentals/challenge1/index.html create mode 100644 starter/03-CSS-Fundamentals/challenge1/style.css create mode 100644 starter/03-CSS-Fundamentals/challenge2/index.html create mode 100644 starter/03-CSS-Fundamentals/challenge2/style.css create mode 100644 starter/03-CSS-Fundamentals/challenge3/index.html create mode 100644 starter/03-CSS-Fundamentals/challenge3/style.css create mode 100644 starter/04-CSS-Layouts/challenge1/index.html create mode 100644 starter/04-CSS-Layouts/challenge1/style.css create mode 100644 starter/04-CSS-Layouts/challenge2/index.html create mode 100644 starter/04-CSS-Layouts/challenge2/style.css create mode 100644 starter/04-CSS-Layouts/challenge3/index.html create mode 100644 starter/04-CSS-Layouts/challenge3/style.css create mode 100644 starter/04-CSS-Layouts/flexbox backup/index.html create mode 100644 starter/04-CSS-Layouts/flexbox backup/style.css create mode 100644 starter/04-CSS-Layouts/float backup/index.html create mode 100644 starter/04-CSS-Layouts/float backup/style.css create mode 100644 starter/06-Components/01-accordion.html create mode 100644 starter/06-Components/02-carousel.html create mode 100644 starter/06-Components/03-table.html create mode 100644 starter/06-Components/05-hero.html create mode 100644 starter/06-Components/06-app-layout.html create mode 100644 starter/06-Components/component.html rename starter/07-Omnifood-Desktop/{content => }/content.md (96%) create mode 100644 starter/07-Omnifood-Desktop/css/general.css create mode 100644 starter/07-Omnifood-Desktop/css/style.css rename starter/07-Omnifood-Desktop/{content => }/img/app/app-screen-1.png (100%) rename starter/07-Omnifood-Desktop/{content => }/img/app/app-screen-2.png (100%) rename starter/07-Omnifood-Desktop/{content => }/img/app/app-screen-3.png (100%) rename starter/07-Omnifood-Desktop/{content => }/img/customers/ben.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/customers/customer-1.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/customers/customer-2.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/customers/customer-3.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/customers/customer-4.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/customers/customer-5.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/customers/customer-6.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/customers/dave.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/customers/hannah.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/customers/steve.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/eating.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/favicon.png (100%) rename starter/07-Omnifood-Desktop/{content => }/img/gallery/gallery-1.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/gallery/gallery-10.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/gallery/gallery-11.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/gallery/gallery-12.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/gallery/gallery-2.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/gallery/gallery-3.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/gallery/gallery-4.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/gallery/gallery-5.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/gallery/gallery-6.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/gallery/gallery-7.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/gallery/gallery-8.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/gallery/gallery-9.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/hero.png (100%) rename starter/07-Omnifood-Desktop/{content => }/img/logos/business-insider.png (100%) rename starter/07-Omnifood-Desktop/{content => }/img/logos/forbes.png (100%) rename starter/07-Omnifood-Desktop/{content => }/img/logos/techcrunch.png (100%) rename starter/07-Omnifood-Desktop/{content => }/img/logos/the-new-york-times.png (100%) rename starter/07-Omnifood-Desktop/{content => }/img/logos/usa-today.png (100%) rename starter/07-Omnifood-Desktop/{content => }/img/meals/meal-1.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/meals/meal-2.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/omnifood-logo.png (100%) create mode 100644 starter/07-Omnifood-Desktop/index.html diff --git a/final/04-CSS-Layouts/index.html b/final/04-CSS-Layouts/index.html index 33a6af10c..1ac240ef2 100644 --- a/final/04-CSS-Layouts/index.html +++ b/final/04-CSS-Layouts/index.html @@ -1,14 +1,15 @@ - - - - The Basic Language of the Web: HTML - + + + - - -

📘 The Code Magazine

- - - - +

📘 The Code Magazine

+ + + + +

+ + + +

The Basic Language of the Web: HTML

+ +

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

+ +

- - -

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!

- - - - - - -

- - + + + + + + + + + + + \ No newline at end of file diff --git a/starter/03-CSS-Fundamentals/challenge1/index.html b/starter/03-CSS-Fundamentals/challenge1/index.html new file mode 100644 index 000000000..0870d75d8 --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge1/index.html @@ -0,0 +1,40 @@ + + + + + + + + + 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 +

+ +

+ + + + \ No newline at end of file diff --git a/starter/03-CSS-Fundamentals/challenge1/style.css b/starter/03-CSS-Fundamentals/challenge1/style.css new file mode 100644 index 000000000..251c00006 --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge1/style.css @@ -0,0 +1,65 @@ +/* *, +*::after, +*::before { + margin: 0; + padding: 0; + box-sizing: inherit; +} */ + +body { + font-family: sans-serif; + line-height: 1.4; +} + +h2, +h3 { + text-transform: uppercase; +} + +article { + border: 5px solid black; +} + +article h2 { + text-align: center; + background-color: rgba(194, 194, 194, 0.1); +} + +p>strong { + font-size: 22px; +} + +.article-shipping { + text-transform: uppercase; + color: #929292; + font-size: small; +} + +ul { + list-style-type: square; +} + +.article-info:link, +.article-info:visited { + color: black; +} + +.article-info:hover, +.article-info:active { + text-decoration: none; +} + +button { + background-color: black; + color: #fff; + border: none; + padding: 5px 10px 5px 10px; + text-transform: uppercase; + font-size: 20px; + cursor: pointer; +} + +button:hover { + background-color: #fff; + color: black; +} \ No newline at end of file diff --git a/starter/03-CSS-Fundamentals/challenge2/index.html b/starter/03-CSS-Fundamentals/challenge2/index.html new file mode 100644 index 000000000..17f2b9d72 --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge2/index.html @@ -0,0 +1,40 @@ + + + + + + + + + Challenge #2 + + + +

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

+ + +

+ +

+ + + + + \ No newline at end of file diff --git a/starter/03-CSS-Fundamentals/challenge2/style.css b/starter/03-CSS-Fundamentals/challenge2/style.css new file mode 100644 index 000000000..91569e768 --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge2/style.css @@ -0,0 +1,92 @@ +*, +*::after, +*::before { + margin: 0; + padding: 0; +} + +body { + font-family: sans-serif; + line-height: 1.7; +} + +/* CONTAINER */ +.container { + width: 825px; + margin: 50px auto; +} + +/* PRODUCT */ +.product { + border: 4px solid black; + +} + +.product-title { + text-align: center; + font-size: 22px; + text-transform: uppercase; + background-color: #f7f7f7; + padding: 15px; +} + +/* PRODUCT INFORMATION */ +.price { + font-size: 24px; +} + +.shipping { + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + color: #777; + margin-bottom: 20px; +} + +.container-more-info { + margin-bottom: 20px; +} + +.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; + margin-bottom: 15px; +} + +.details-list { + list-style: square; + margin-left: 20px; +} + +.details-list li { + margin-bottom: 10px; +} + +/* BUTTON */ +.add-cart { + background-color: #000; + border: none; + border-top: 4px solid black; + color: #fff; + font-size: 20px; + text-transform: uppercase; + cursor: pointer; + padding: 20px; + width: 100%; +} + +.add-cart:hover { + color: #000; + background-color: #fff; +} \ No newline at end of file diff --git a/starter/03-CSS-Fundamentals/challenge3/index.html b/starter/03-CSS-Fundamentals/challenge3/index.html new file mode 100644 index 000000000..3264df8d0 --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge3/index.html @@ -0,0 +1,48 @@ + + + + + + + + + Challenge #2 + + + +

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

+ + +

+ +

+ + + + \ No newline at end of file diff --git a/starter/03-CSS-Fundamentals/challenge3/style.css b/starter/03-CSS-Fundamentals/challenge3/style.css new file mode 100644 index 000000000..b73dca4ea --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge3/style.css @@ -0,0 +1,143 @@ +*, +*::after, +*::before { + margin: 0; + padding: 0; +} + +body { + font-family: sans-serif; + line-height: 1.7; +} + +/* CONTAINER */ +.container { + width: 825px; + margin: 50px auto; + position: relative; +} + +.container::before { + content: "sale"; + color: #fff; + background-color: #de1b1b; + display: inline-block; + font-weight: bold; + padding: 7px 15px; + letter-spacing: 2px; + text-align: center; + text-transform: uppercase; + position: absolute; + left: -40px; + top: -15px; +} + +.colors { + margin-bottom: 20px; +} + +.color { + display: inline-block; + height: 30px; + width: 30px; + margin-right: 10px; +} + +.color-black { + background-color: #000; +} + +.color-blue { + background-color: #0000ff; +} + +.color-red { + background-color: #ff0000; +} + +.color-yellow { + background-color: #ffff00; +} + +.color-green { + background-color: #008000; +} + +.color-brown { + background-color: #a52a2ab6; + margin-right: 0; +} + +/* PRODUCT */ +.product { + border: 4px solid black; +} + +.product-title { + text-align: center; + font-size: 22px; + text-transform: uppercase; + background-color: #f7f7f7; + padding: 15px; +} + +/* PRODUCT INFORMATION */ +.price { + font-size: 24px; +} + +.shipping { + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + color: #777; + margin-bottom: 20px; +} + +.container-more-info { + margin-bottom: 20px; +} + +.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; + margin-bottom: 15px; +} + +.details-list { + list-style: square; + margin-left: 20px; +} + +.details-list li { + margin-bottom: 10px; +} + +/* BUTTON */ +.add-cart { + background-color: #000; + border: none; + border-top: 4px solid black; + color: #fff; + font-size: 20px; + text-transform: uppercase; + cursor: pointer; + padding: 20px; + width: 100%; +} + +.add-cart:hover { + color: #000; + background-color: #fff; +} \ No newline at end of file diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index da1718533..afbbcd4ad 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -2,9 +2,9 @@ - + The Basic Language of the Web: HTML - + @@ -17,113 +17,119 @@

The Basic Language of the Web: HTML

--> -

📘 The Code Magazine

- -

📘 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!

- - - - +

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!

+ + + + + + \ No newline at end of file diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css index f4e20cf22..595f4a9a0 100644 --- a/starter/03-CSS-Fundamentals/style.css +++ b/starter/03-CSS-Fundamentals/style.css @@ -1,13 +1,54 @@ -h1, -h2, -h3, -h4, -p, -li { +*, +*::after, +*::before { + margin: 0; + padding: 0; +} + +/* PAGE SECTIONS */ + +body { font-family: sans-serif; color: #444; + position: relative; +} + +.container { + width: 800px; + margin: 0 auto; } +.main-header { + background-color: #f7f7f7; + padding: 20px 40px; + margin-bottom: 60px; + /* height: 80px; */ +} + +nav { + font-size: 18px; + text-align: center; +} + +article { + margin-bottom: 60px; +} + +.post-header { + margin-bottom: 40px; + /* position: relative; */ +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; + padding: 50px 0; + width: 500px; +} + +/* SMALLER ELEMENTS */ + h1, h2, h3 { @@ -22,10 +63,13 @@ h1 { h2 { font-size: 40px; + margin-bottom: 30px; } h3 { font-size: 30px; + margin-bottom: 20px; + margin-top: 40px; } h4 { @@ -37,10 +81,23 @@ h4 { p { font-size: 22px; line-height: 1.5; + margin-bottom: 15px; +} + +ul, +ol { + margin-left: 50px; + margin-bottom: 20px; } li { font-size: 20px; + margin: 10px; + /* display: inline; */ +} + +li:last-child { + margin-bottom: 0; } /* footer p { @@ -69,16 +126,6 @@ li { list-style: none; } -.main-header { - background-color: #f7f7f7; -} - -aside { - background-color: #f7f7f7; - border-top: 5px solid #1098ad; - border-bottom: 5px solid #1098ad; -} - /* pseudo class */ li:first-child { font-weight: bold; @@ -118,4 +165,78 @@ a:hover { a:active { background-color: black; font-style: italic; -} \ No newline at end of file +} + +.post-img { + width: 100%; + height: auto; +} + +nav a:link { + /* background-color: orangered; + margin: 20px; + padding: 20px; + display: block; */ + display: inline-block; + margin-right: 30px; + margin-top: 10px; +} + +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; +} + +h3+p::first-line { + /* color: red; */ +} + +h2 { + position: relative; +} + +h2::after { + 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; +} + +/* Resolving conflicts */ +/* #copyright { + color: red; +} + +.copyright { + color: blue; +} + +.text { + color: yellow; +} + +footer p { + color: green; +} */ \ No newline at end of file diff --git a/starter/04-CSS-Layouts/challenge1/index.html b/starter/04-CSS-Layouts/challenge1/index.html new file mode 100644 index 000000000..defd4e44e --- /dev/null +++ b/starter/04-CSS-Layouts/challenge1/index.html @@ -0,0 +1,51 @@ + + + + + + + + + Challenge #2 + + + +

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

+ +

+ + + \ No newline at end of file diff --git a/starter/04-CSS-Layouts/challenge1/style.css b/starter/04-CSS-Layouts/challenge1/style.css new file mode 100644 index 000000000..47ecd6bc2 --- /dev/null +++ b/starter/04-CSS-Layouts/challenge1/style.css @@ -0,0 +1,180 @@ +*, +*::after, +*::before { + margin: 0; + padding: 0; + + box-sizing: inherit; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + line-height: 1.7; +} + +/* CONTAINER */ +.container { + width: 825px; + margin: 50px auto; + position: relative; +} + +.container::before { + content: "sale"; + color: #fff; + background-color: #de1b1b; + display: inline-block; + font-weight: bold; + padding: 7px 15px; + letter-spacing: 2px; + text-align: center; + text-transform: uppercase; + position: absolute; + left: -40px; + top: -15px; +} + +.colors { + margin-bottom: 20px; +} + +.color { + display: inline-block; + height: 25px; + width: 25px; + margin-right: 10px; +} + +.color-black { + background-color: #000; +} + +.color-blue { + background-color: #0000ff; +} + +.color-red { + background-color: #ff0000; +} + +.color-yellow { + background-color: #ffff00; +} + +.color-green { + background-color: #008000; +} + +.color-brown { + background-color: #a52a2ab6; + margin-right: 0; +} + +/* PRODUCT */ +.product { + border: 4px solid black; +} + +.product-title { + text-align: center; + font-size: 22px; + text-transform: uppercase; + background-color: #f7f7f7; + padding: 15px; +} + +/* PRODUCT INFORMATION */ +.price { + font-size: 24px; + float: left; +} + +.shipping-tag { + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + color: #777; + float: right; + margin-top: 8px; +} + +.container-more-info { + margin-bottom: 20px; +} + +.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; + margin-top: 20px; +} + +.details-list { + list-style: square; + margin-left: 20px; +} + +/* BUTTON */ +.add-cart { + background-color: #000; + border: none; + border-top: 4px solid black; + color: #fff; + font-size: 20px; + text-transform: uppercase; + cursor: pointer; + padding: 20px; + width: 100%; +} + +.add-cart:hover { + color: #000; + background-color: #fff; +} + +/* FlOAT LAYOUT */ +.product-img { + float: left; + margin-right: 40px; +} + +.product-details { + width: 247px; + float: left; + margin-right: 40px; + margin-top: 20px; +} + +.shipping-description { + clear: both; + display: inline-block; +} + +.details-container { + width: 240px; + float: left; +} + +.clearfix::after { + content: ""; + display: block; + clear: both; +} + +/* .product-container { + background-color: pink; +} */ \ No newline at end of file diff --git a/starter/04-CSS-Layouts/challenge2/index.html b/starter/04-CSS-Layouts/challenge2/index.html new file mode 100644 index 000000000..0da15d5be --- /dev/null +++ b/starter/04-CSS-Layouts/challenge2/index.html @@ -0,0 +1,53 @@ + + + + + + + + + Challenge #2 + + + +

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

+ +

+ + + \ No newline at end of file diff --git a/starter/04-CSS-Layouts/challenge2/style.css b/starter/04-CSS-Layouts/challenge2/style.css new file mode 100644 index 000000000..99667aef4 --- /dev/null +++ b/starter/04-CSS-Layouts/challenge2/style.css @@ -0,0 +1,199 @@ +*, +*::after, +*::before { + margin: 0; + padding: 0; + + box-sizing: inherit; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + line-height: 1.7; +} + +/* CONTAINER */ +.container { + width: 825px; + margin: 50px auto; + position: relative; +} + +.container::before { + content: "sale"; + color: #fff; + background-color: #de1b1b; + display: inline-block; + font-weight: bold; + padding: 7px 15px; + letter-spacing: 2px; + text-align: center; + text-transform: uppercase; + position: absolute; + left: -40px; + top: -15px; +} + +.product-colors { + display: flex; + gap: 10px; + margin-bottom: 25px; +} + +.color { + height: 25px; + width: 25px; +} + +.color-black { + background-color: #000; +} + +.color-blue { + background-color: #0000ff; +} + +.color-red { + background-color: #ff0000; +} + +.color-yellow { + background-color: #ffff00; +} + +.color-green { + background-color: #008000; +} + +.color-brown { + background-color: #a52a2ab6; + margin-right: 0; +} + +/* PRODUCT */ +.product { + border: 4px solid black; +} + +.product-title { + text-align: center; + font-size: 22px; + text-transform: uppercase; + background-color: #f7f7f7; + padding: 15px; +} + +/* PRODUCT INFORMATION */ +.price-shipping { + display: flex; + align-items: center; + justify-content: space-between; + margin: 20px 0 10px; +} + +.price { + font-size: 24px; +} + +.shipping-tag { + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + color: #777; + /* margin-top: 8px; */ +} + +.container-more-info { + margin-bottom: 20px; +} + +.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; + margin-bottom: 10px; +} + +.details-list { + list-style: square; + margin-left: 20px; +} + +/* BUTTON */ +.add-cart { + background-color: #000; + border: none; + border-top: 4px solid black; + color: #fff; + font-size: 20px; + text-transform: uppercase; + cursor: pointer; + padding: 20px; + width: 100%; +} + +.add-cart:hover { + color: #000; + background-color: #fff; +} + +/* FlOAT LAYOUT */ +/* .product-img { + float: left; + margin-right: 40px; +} + +.product-details { + width: 247px; + float: left; + margin-right: 40px; + margin-top: 20px; +} + +.shipping-description { + clear: both; + display: inline-block; +} + +.details-container { + width: 240px; + float: left; +} + +.clearfix::after { + content: ""; + display: block; + clear: both; +} */ + +/* FLEXBOX LAYOUT */ +.product-container { + display: flex; + gap: 40px; + /* background-color: red; */ +} + +.product-details { + flex: 1; + /* background-color: pink; */ +} + +.details-container { + flex: 1; + margin: 20px 0 25px; + /* background-color: green; */ +} \ No newline at end of file diff --git a/starter/04-CSS-Layouts/challenge3/index.html b/starter/04-CSS-Layouts/challenge3/index.html new file mode 100644 index 000000000..cce867852 --- /dev/null +++ b/starter/04-CSS-Layouts/challenge3/index.html @@ -0,0 +1,52 @@ + + + + + + + + + Challenge #2 + + + +

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 → + +

+ +

Product details

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

+ +

+ + + \ No newline at end of file diff --git a/starter/04-CSS-Layouts/challenge3/style.css b/starter/04-CSS-Layouts/challenge3/style.css new file mode 100644 index 000000000..6afbd3fa8 --- /dev/null +++ b/starter/04-CSS-Layouts/challenge3/style.css @@ -0,0 +1,171 @@ +*, +*::after, +*::before { + margin: 0; + padding: 0; + + box-sizing: inherit; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + line-height: 1.4; +} + +.product-img {} + +/* PRODUCT */ +.product { + border: 4px solid black; + width: 825px; + margin: 50px auto; + position: relative; + + display: grid; + grid-template-columns: 250px 1fr 1fr; + column-gap: 40px; +} + +.product-title { + text-align: center; + font-size: 22px; + text-transform: uppercase; + background-color: #f7f7f7; + padding: 15px; + grid-column: 1 / -1; +} + +/* PRODUCT INFORMATION */ +.product-info { + /* (825 - 8 - 250 - 80) / 2 */ + /* width: 243px; */ + flex: 1; + margin-top: 20px; +} + +.product-price { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; +} + +.price { + font-size: 24px; +} + +.shipping { + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + color: #777; +} + +.sale { + background-color: #ec2f2f; + color: #fff; + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + letter-spacing: 2px; + padding: 7px 15px; + display: inline-block; + position: absolute; + top: -17px; + left: -38px; + + /* width: 40px; + text-align: center; */ +} + +.product-description { + margin-bottom: 10px; +} + +.more-info:link, +.more-info:visited { + color: black; + margin-bottom: 30px; + display: inline-block; +} + +.more-info:hover, +.more-info:active { + text-decoration: none; +} + +.product-colors { + display: flex; + gap: 10px; +} + +.color { + background-color: #000; + height: 22px; + width: 22px; +} + +.color-blue { + background-color: #2f6ee2; +} + +.color-red { + background-color: #ec2f2f; +} + +.color-yellow { + background-color: #f0bf1e; +} + +.color-green { + background-color: #90cc20; +} + +.color-brown { + background-color: #885214; +} + +/* PRODUCT DETAILS */ +.product-details { + /* width: 243px; */ + margin-top: 20px; + flex: 1; +} + +.details-title { + text-transform: uppercase; + font-size: 16px; + margin-bottom: 15px; +} + +.details-list { + list-style: square; + margin-left: 20px; +} + +.details-list li { + margin-bottom: 10px; +} + +/* BUTTON */ +.add-cart { + background-color: #000; + border: none; + color: #fff; + font-size: 20px; + text-transform: uppercase; + cursor: pointer; + padding: 15px; + width: 100%; + border-top: 4px solid black; + grid-column: 1 / -1; +} + +.add-cart:hover { + color: #000; + background-color: #fff; +} \ No newline at end of file diff --git a/starter/04-CSS-Layouts/css-grid.html b/starter/04-CSS-Layouts/css-grid.html index e2daa6d42..70235acf1 100644 --- a/starter/04-CSS-Layouts/css-grid.html +++ b/starter/04-CSS-Layouts/css-grid.html @@ -1,80 +1,138 @@ - - - - - CSS Grid - - - -

(1) HTML

(2) and

(3) CSS

(4) are

(5) amazing

(6) languages

(7) to

(8) learn

- -

(1)

(3)

(4)

(5)

(6)

(7)

- - + + + + + + CSS Grid + + + + +

(1) HTML

(2) and

(3) CSS

(4) are

(5) amazing

(6) languages

+ +

(8) learn

+ +

(1)

(3)

(4)

(5)

(6)

(7)

+ + + \ No newline at end of file diff --git a/starter/04-CSS-Layouts/flexbox backup/index.html b/starter/04-CSS-Layouts/flexbox backup/index.html new file mode 100644 index 000000000..54b14a3d9 --- /dev/null +++ b/starter/04-CSS-Layouts/flexbox backup/index.html @@ -0,0 +1,140 @@ + + + + + + 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!

+ + +

+ +

+ + + + \ No newline at end of file diff --git a/starter/04-CSS-Layouts/flexbox backup/style.css b/starter/04-CSS-Layouts/flexbox backup/style.css new file mode 100644 index 000000000..49b047d36 --- /dev/null +++ b/starter/04-CSS-Layouts/flexbox backup/style.css @@ -0,0 +1,297 @@ +*, +*::after, +*::before { + margin: 0; + padding: 0; + + box-sizing: inherit; +} + +/* PAGE SECTIONS */ + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #444; + border-top: 10px solid #1098ad; + position: relative; +} + +.container { + width: 1200px; + margin: 0 auto; +} + +.main-header { + background-color: #f7f7f7; + padding: 20px 40px; + margin-bottom: 60px; +} + +nav { + font-size: 18px; +} + +article { + margin-bottom: 60px; +} + +.post-header { + margin-bottom: 40px; +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; + padding: 50px 25px; +} + +/* SMALLER ELEMENTS */ + +h1, +h2, +h3 { + color: #1098ad; +} + +h1 { + font-size: 26px; + text-transform: uppercase; + font-style: italic; +} + +h2 { + font-size: 40px; + margin-bottom: 30px; +} + +h3 { + font-size: 30px; + margin-bottom: 20px; + margin-top: 40px; +} + +h4 { + font-size: 20px; + text-transform: uppercase; + text-align: center; + margin-bottom: 30px; +} + +p { + font-size: 22px; + line-height: 1.5; + margin-bottom: 15px; +} + +ul, +ol { + margin-left: 50px; + margin-bottom: 20px; +} + +li { + font-size: 20px; + margin: 10px; +} + +li:last-child { + margin-bottom: 0; +} + +#author { + font-style: italic; + font-size: 18px; +} + +#copyright { + font-size: 16px; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +.related { + list-style: none; + margin-left: 0; +} + +/* pseudo class */ +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; +} + +/* Styling links */ +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + color: #1098ad; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline orangered; +} + +a:active { + background-color: black; + font-style: italic; +} + +.post-img { + width: 100%; + height: auto; +} + +nav a:link { + display: inline-block; + margin-right: 30px; + /* margin-top: 10px; */ +} + +nav a:link:last-child { + margin-right: 0; +} + +button { + font-size: 22px; + padding: 20px; + cursor: pointer; + position: absolute; + bottom: 50px; + right: 50px; +} + +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +h2 { + position: relative; +} + +h2::after { + 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; +} + +/* FLOATS */ +/* .author-img { + float: left; + margin-bottom: 20px; +} + +.author { + float: left; + margin-top: 10px; + margin-left: 20px; +} + +.clearfix::after { + content: ""; + display: block; + clear: both; +} + +h1 { + float: left; +} + +nav { + float: right; +} + +article { + width: 825px; + float: left; +} + +aside { + width: 300px; + float: right; +} + +footer { + clear: both; +} */ + +/* FLEXBOX */ + +.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-size: 14px; + font-weight: normal; + font-style: italic; +} + +.row { + display: flex; + align-items: flex-start; + gap: 75px; + margin-bottom: 60px; +} + +article { + /* flex: 0 0 825px; */ + flex: 1; + margin-bottom: 0; +} + +aside { + flex: 0 0 300px; +} \ No newline at end of file diff --git a/starter/04-CSS-Layouts/flexbox.html b/starter/04-CSS-Layouts/flexbox.html index 496ef372a..b681a6485 100644 --- a/starter/04-CSS-Layouts/flexbox.html +++ b/starter/04-CSS-Layouts/flexbox.html @@ -1,58 +1,99 @@ - - - - - Flexbox - - - -

HTML

and

CSS

are

amazing

languages

learn

- - + + + + + + Flexbox + + + + +

HTML

and

CSS

are

amazing

+ +

+ + + \ No newline at end of file diff --git a/starter/04-CSS-Layouts/float backup/index.html b/starter/04-CSS-Layouts/float backup/index.html new file mode 100644 index 000000000..dea809426 --- /dev/null +++ b/starter/04-CSS-Layouts/float backup/index.html @@ -0,0 +1,136 @@ + + + + + + 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!

+ + + + + +

+ + + + \ No newline at end of file diff --git a/starter/04-CSS-Layouts/float backup/style.css b/starter/04-CSS-Layouts/float backup/style.css new file mode 100644 index 000000000..a58ef1b98 --- /dev/null +++ b/starter/04-CSS-Layouts/float backup/style.css @@ -0,0 +1,239 @@ +*, +*::after, +*::before { + margin: 0; + padding: 0; + + box-sizing: inherit; +} + +/* PAGE SECTIONS */ + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #444; + border-top: 10px solid #1098ad; + position: relative; +} + +.container { + width: 1200px; + margin: 0 auto; +} + +.main-header { + background-color: #f7f7f7; + padding: 20px 40px; + margin-bottom: 60px; +} + +nav { + font-size: 18px; +} + +article { + margin-bottom: 60px; +} + +.post-header { + margin-bottom: 40px; +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; + padding: 50px 25px; +} + +/* SMALLER ELEMENTS */ + +h1, +h2, +h3 { + color: #1098ad; +} + +h1 { + font-size: 26px; + text-transform: uppercase; + font-style: italic; +} + +h2 { + font-size: 40px; + margin-bottom: 30px; +} + +h3 { + font-size: 30px; + margin-bottom: 20px; + margin-top: 40px; +} + +h4 { + font-size: 20px; + text-transform: uppercase; + text-align: center; + margin-bottom: 30px; +} + +p { + font-size: 22px; + line-height: 1.5; + margin-bottom: 15px; +} + +ul, +ol { + margin-left: 50px; + margin-bottom: 20px; +} + +li { + font-size: 20px; + margin: 10px; +} + +li:last-child { + margin-bottom: 0; +} + +#author { + font-style: italic; + font-size: 18px; +} + +#copyright { + font-size: 16px; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +.related { + list-style: none; + margin-left: 0; +} + +/* pseudo class */ +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; +} + +/* Styling links */ +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + color: #1098ad; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline orangered; +} + +a:active { + background-color: black; + font-style: italic; +} + +.post-img { + width: 100%; + height: auto; +} + +nav a:link { + display: inline-block; + margin-right: 30px; + /* margin-top: 10px; */ +} + +nav a:link:last-child { + margin-right: 0; +} + +button { + font-size: 22px; + padding: 20px; + cursor: pointer; + position: absolute; + bottom: 50px; + right: 50px; +} + +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +h2 { + position: relative; +} + +h2::after { + 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; +} + +/* FLOATS */ +.author-img { + float: left; + margin-bottom: 20px; +} + +.author { + float: left; + margin-top: 10px; + margin-left: 20px; +} + +.clearfix::after { + content: ""; + display: block; + clear: both; +} + +h1 { + float: left; +} + +nav { + float: right; +} + +article { + width: 825px; + float: left; +} + +aside { + width: 300px; + float: right; +} + +footer { + clear: both; +} \ No newline at end of file diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 15ecbeb77..32c5c1be0 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -1,14 +1,14 @@ - - - - The Basic Language of the Web: HTML - + + + The Basic Language of the Web: HTML + + - - -

📘 The Code Magazine

- - +

📘 The Code Magazine

+ + +

+ + + +

The Basic Language of the Web: HTML

+ +

Posted by Laura Jones on Monday, June 21st 2027

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!

- -

+ + -

- Why JavaScript is Awesome +

+ + - - - - - - - + + + + + + + + + + + \ No newline at end of file diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index c879e79d2..da46cdf9d 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -1,60 +1,57 @@ -* { - /* border-top: 10px solid #1098ad; */ +*, +*::after, +*::before { margin: 0; padding: 0; + + box-sizing: inherit; } /* PAGE SECTIONS */ + +html { + box-sizing: border-box; +} + body { - color: #444; font-family: sans-serif; - + color: #444; border-top: 10px solid #1098ad; position: relative; } .container { - width: 800px; - /* margin-left: auto; - margin-right: auto; */ + width: 1200px; margin: 0 auto; } .main-header { background-color: #f7f7f7; - /* padding: 20px; - padding-left: 40px; - padding-right: 40px; */ padding: 20px 40px; - margin-bottom: 60px; - /* height: 80px; */ + /* margin-bottom: 60px; */ } nav { font-size: 18px; - /* text-align: center; */ } article { - margin-bottom: 60px; + /* margin-bottom: 60px; */ } .post-header { margin-bottom: 40px; - /* position: relative; */ } 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 25px; } /* SMALLER ELEMENTS */ + h1, h2, h3 { @@ -82,6 +79,7 @@ h4 { font-size: 20px; text-transform: uppercase; text-align: center; + margin-bottom: 30px; } p { @@ -98,22 +96,13 @@ ol { li { font-size: 20px; - margin-bottom: 10px; - /* display: inline; */ + margin: 10px; } li:last-child { margin-bottom: 0; } -/* footer p { - font-size: 16px; -} */ - -/* article header p { - font-style: italic; -} */ - #author { font-style: italic; font-size: 18px; @@ -128,22 +117,12 @@ li:last-child { font-weight: bold; } -/* ul { - list-style: none; -} */ - .related { list-style: none; + margin-left: 0; } -body { - /* background-color: orangered; */ -} - -/* .first-li { - font-weight: bold; -} */ - +/* pseudo class */ li:first-child { font-weight: bold; } @@ -152,15 +131,6 @@ 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; @@ -168,7 +138,6 @@ a:link { } a:visited { - /* color: #777; */ color: #1098ad; } @@ -182,7 +151,6 @@ a:active { background-color: black; font-style: italic; } -/* LVHA */ .post-img { width: 100%; @@ -190,15 +158,9 @@ a:active { } nav a:link { - /* background-color: orangered; - margin: 20px; - padding: 20px; - - display: block; */ - - margin-right: 30px; - margin-top: 10px; display: inline-block; + margin-right: 30px; + /* margin-top: 10px; */ } nav a:link:last-child { @@ -209,10 +171,7 @@ button { font-size: 22px; padding: 20px; cursor: pointer; - position: absolute; - /* top: 50px; - left: 50px; */ bottom: 50px; right: 50px; } @@ -222,16 +181,11 @@ h1::first-letter { margin-right: 5px; } -h3 + p::first-line { - /* color: red; */ -} - h2 { - /* background-color: orange; */ position: relative; } -h2::before { +h2::after { content: "TOP"; background-color: #ffe70e; color: #444; @@ -244,24 +198,122 @@ h2::before { right: -25px; } -/* Resolving conflicts */ -/* #copyright { - color: red; +/* FLOATS */ +/* .author-img { + float: left; + margin-bottom: 20px; +} + +.author { + float: left; + margin-top: 10px; + margin-left: 20px; +} + +.clearfix::after { + content: ""; + display: block; + clear: both; +} + +h1 { + float: left; +} + +nav { + float: right; } -.copyright { - color: blue; +article { + width: 825px; + float: left; } -.text { - color: yellow; +aside { + width: 300px; + float: right; } -footer p { - color: green !important; +footer { + clear: both; } */ -/* nav a:link, -nav p { - font-size: 18px; +/* FLEXBOX LAYOUT */ + +.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-size: 14px; + font-weight: normal; + font-style: italic; +} + +/* WE'LL DISABLE THIS PART IN ORDER TO USE GRID LAYOUT */ + +/* .row { + display: flex; + align-items: flex-start; + gap: 75px; + margin-bottom: 60px; +} + +article { + flex: 1; + margin-bottom: 0; +} + +aside { + 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 / -1; +} + +article {} + +aside {} + +footer { + grid-column: 1 / -1; +} \ No newline at end of file diff --git a/starter/05-Design/index.html b/starter/05-Design/index.html index 92b74fd48..e70c49118 100644 --- a/starter/05-Design/index.html +++ b/starter/05-Design/index.html @@ -1,162 +1,242 @@ - - - - - - Lisbon Chair Shop - - -

We design and build better chairs, for a better life

- In a small shop in the heart of Lisbon, we spend our days - relentlessly perfecting the chair. The result is a perfect blend of - beauty and comfort, that will have a lasting impact on your health. + + + + + + + + + Lisbon Chair Shop + + + +

We design and build better chairs, for a better life

+ In a small shop in the heart of Lisbon, we spend our days + relentlessly perfecting the chair. The result is a perfect blend of + beauty and comfort, that will have a lasting impact on your health. +

+ Shop chairs +

+ +

What makes our chairs special

+ +

Science meets design

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus + similique adipisci praesentium.

- Shop chairs

What makes our chairs special

Science meets design

- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus - similique adipisci praesentium. -

- -

- Maximal comfort -

- Reprehenderit optio placeat quasi excepturi architecto, explicabo - facilis perspiciatis error maxime magnam. -

+ +

+ Maximal comfort +

+ Reprehenderit optio placeat quasi excepturi architecto, explicabo + facilis perspiciatis error maxime magnam. +

- Ethical and sustainable -

- Deleniti recusandae quidem nesciunt, eos dolorum iure, quaerat - omnis est laudantium voluptatem voluptas! -

+ +

+ Ethical and sustainable +

+ Deleniti recusandae quidem nesciunt, eos dolorum iure, quaerat + omnis est laudantium voluptatem voluptas! +

+ -

"We couldn't live without these chairs anymore"

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor - repellat at, nesciunt quia cum minima ipsum culpa totam sapiente - recusandae earum debitis doloribus in quasi voluptatibus! -

— Mary and Sarah Johnson

"We couldn't live without these chairs anymore"

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor + repellat at, nesciunt quia cum minima ipsum culpa totam sapiente + recusandae earum debitis doloribus in quasi voluptatibus! +

— Mary and Sarah Johnson

Our bestselling chairs

The Worker Bee

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

- 525€ - Add to cart -

The Worker Bee

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

+ 525€ + Add to cart

+ -

The Chair 4/2

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

- 1450€ - Add to cart -

The Chair 4/2

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

+ 1450€ + Add to cart

+ + + + + + + + - - - - + \ No newline at end of file diff --git a/starter/05-Design/style.css b/starter/05-Design/style.css index 77dfdffa3..617e9297a 100644 --- a/starter/05-Design/style.css +++ b/starter/05-Design/style.css @@ -6,6 +6,12 @@ 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; @@ -16,7 +22,9 @@ FONT SIZE SYSTEM (px) /* GENERAL STYLES */ /* ------------------------ */ body { - font-family: sans-serif; + font-family: 'Inter', sans-serif; + color: #343a40; + border-bottom: 8px solid #087f5b; } .container { @@ -26,11 +34,15 @@ body { header, section { - margin-bottom: 48px; + /* 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 */ + margin-bottom: 96px; } h2 { + /* 24 / 30 / 36 */ margin-bottom: 48px; + font-size: 36px; + letter-spacing: -0.5px; } .grid-3-cols { @@ -39,6 +51,33 @@ 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; + border-radius: 100px; +} + +.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 */ /* ------------------------ */ @@ -48,7 +87,7 @@ header { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 80px; - margin-top: 48px; + margin-top: 64px; } .header-text-box { @@ -56,30 +95,50 @@ header { } h1 { - margin-bottom: 24px; + /* / 44 / 52 / 62 / */ + margin-bottom: 32px; + font-size: 44px; + line-height: 1.2; + letter-spacing: -1px; + /* text-shadow: 0 20px 3px rgb(0, 0, 0, 0.07); */ } .header-text { margin-bottom: 24px; + font-size: 18px; + line-height: 1.7; + /* 18 / 20 / 24 */ } img { width: 100%; + border-radius: 12px; } /* FEATURES */ .features-icon { + stroke: #087f5b; + width: 32px; + height: 32px; + margin-bottom: 24px; } .features-title { margin-bottom: 16px; + font-size: 20px; } .features-text { + font-size: 18px; + line-height: 1.7; } /* TESTIMONIAL */ .testimonial-section { + background-color: #087f5b; + color: #fff; + padding: 24px; + border-radius: 12px; } .testimonial-box { @@ -88,33 +147,53 @@ img { } .testimonial-box h2 { + /* 20 / 24 / 30 */ margin-bottom: 24px; + font-size: 24px; } .testimonial-text { font-style: italic; margin-bottom: 24px; + font-size: 18px; + line-height: 1.7; + color: #e6fcf5; +} + +.testimonial-author { + color: #c3fae8; } /* CHAIRS */ +.chair { + box-shadow: 0 20px 30px 0 rgb(0, 0, 0, 0.07); + border-radius: 12px; +} + +.chair img { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + .chair-box { - padding: 24px; + padding: 32px; } h3 { margin-bottom: 24px; + font-size: 20px; } .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 { @@ -122,13 +201,20 @@ h3 { } .chair-icon { + stroke: #087f5b; + width: 24px; + height: 24px; } .chair-price { display: flex; justify-content: space-between; + align-items: center; + font-size: 20px; } footer { margin-bottom: 48px; -} + font-size: 14px; + color: #495057; +} \ No newline at end of file diff --git a/starter/06-Components/01-accordion.html b/starter/06-Components/01-accordion.html new file mode 100644 index 000000000..66ee3518b --- /dev/null +++ b/starter/06-Components/01-accordion.html @@ -0,0 +1,179 @@ + + + + + + + + + Accordion Component + + + + +

Where are these chairs assemble?

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ullam modi inventore quidem est, + distinctio, + aliquid optio eos iure sequi nemo nulla, tenetur praesentium animi maiores illo aliquam unde veniam? +

+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ullam voluptatem provident quia doloribus.
Neque quam saepe quidem aperiam tempora atque, sapiente non.
blanditiis natus iste nam voluptate ipsam distinctio perspiciatis

+ +

How long do I have to return my chair?

+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ullam voluptatem provident quia doloribus.
Neque quam saepe quidem aperiam tempora atque, sapiente non.
blanditiis natus iste nam voluptate ipsam distinctio perspiciatis

+ +

Do you ship to countries outside the EU?

+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ullam voluptatem provident quia doloribus.
Neque quam saepe quidem aperiam tempora atque, sapiente non.
blanditiis natus iste nam voluptate ipsam distinctio perspiciatis

+ + + + \ No newline at end of file diff --git a/starter/06-Components/02-carousel.html b/starter/06-Components/02-carousel.html new file mode 100644 index 000000000..0a57df7a2 --- /dev/null +++ b/starter/06-Components/02-carousel.html @@ -0,0 +1,169 @@ + + + + + + + + + Carousel Component + + + +

+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. + Quia quis unde tempora eaque sit ea est aliquid? Numquam.
+
Maria de Almeida
+
Senior Product Manager at EDP Comercial
+

+ + + +

+ + + + +

+ + + + + + + \ No newline at end of file diff --git a/starter/06-Components/03-table.html b/starter/06-Components/03-table.html new file mode 100644 index 000000000..b8896c80d --- /dev/null +++ b/starter/06-Components/03-table.html @@ -0,0 +1,110 @@ + + + + + + + + + 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

+ + + + \ No newline at end of file diff --git a/starter/06-Components/05-hero.html b/starter/06-Components/05-hero.html new file mode 100644 index 000000000..ffc7efd84 --- /dev/null +++ b/starter/06-Components/05-hero.html @@ -0,0 +1,143 @@ + + + + + + + + + + + Omnifood Hero Section + + + + +

+ + +

+ +

Some random heading

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere fugiat aperiam blanditiis + delectus corrupti quod officiis perferendis beatae omnis et perspiciatis inventore illo, itaque rerum. + Blanditiis vero corporis ab dolore. Lorem ipsum dolor sit amet consectetur adipisicing elit. + Modi quod a pariatur, et natus, recusandae eveniet id atque doloribus quibusdam dolore dignissimos + perspiciatis eligendi dolorum? Eaque aliquam voluptate autem facere.

+ + + + \ No newline at end of file diff --git a/starter/06-Components/06-app-layout.html b/starter/06-Components/06-app-layout.html new file mode 100644 index 000000000..00a50c609 --- /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

+ + + + + \ No newline at end of file diff --git a/starter/06-Components/component.html b/starter/06-Components/component.html new file mode 100644 index 000000000..c5c1753e0 --- /dev/null +++ b/starter/06-Components/component.html @@ -0,0 +1,43 @@ + + + + + + + + + Carousel Component + + + + + + + + + \ No newline at end of file diff --git a/starter/07-Omnifood-Desktop/content/content.md b/starter/07-Omnifood-Desktop/content.md similarity index 96% rename from starter/07-Omnifood-Desktop/content/content.md rename to starter/07-Omnifood-Desktop/content.md index 7193e017f..c37b08a49 100644 --- a/starter/07-Omnifood-Desktop/content/content.md +++ b/starter/07-Omnifood-Desktop/content.md @@ -126,3 +126,18 @@ Careers Recipe directory Help center Privacy & terms + + +######## + +## Sections + +- Logo + Navigation +- Hero +- features in +- How it works +- Meals (and list of diets) +- Testimonials + Gallery +- Pricing + Features +- CTA +- Footer \ No newline at end of file diff --git a/starter/07-Omnifood-Desktop/css/general.css b/starter/07-Omnifood-Desktop/css/general.css new file mode 100644 index 000000000..a0e270c70 --- /dev/null +++ b/starter/07-Omnifood-Desktop/css/general.css @@ -0,0 +1,281 @@ +/* + +--- 01 TYPOGRAPHY SYSTEM + +- Font sizes (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 +heading-secondary: 1.2 +heading-primary: 1.05 +Paragraph default: 1.6 + +- Letter Spacing +-0.5px +0.75px + +--- 02 COLORS + +-- Primary: +#e67e22 +- Tints: +#fdf2e9 +#fae5d3 +#eb984e +- Shades: +#cf711f +#45260a +-- Accent: +- Tints: +- Shades: + +-- Greys: +#555 #333 +- Tints: #6f6f6f (lightest grey allowed on #fdf2e9) + +- Shades: + +--- 05 SHADOWS + +box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075); + +--- 06 BORDER-RADIUS +9px +11px + +--- 07 WHITESPACE + + +- Spacing System (px) +2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 +/ 96 / 128 + +*/ + +*, +*::after, +*::before { + margin: 0; + padding: 0; + box-sizing: inherit; +} + +html { + /* 1rem = 10px */ + font-size: 62.5%; + box-sizing: border-box; +} + +body { + /* overflow-y: hidden; */ + 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; + /* margin-bottom: 9.6rem; */ +} + +/* .grid:last-child { + margin-bottom: 0; +} */ + +.grid:not(:last-child) { + margin-bottom: 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; +} + +/* .step-text-box { + align-self: center; +} */ + +.heading-primary, +.heading-secondary { + font-weight: 700; + color: #333; + 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, +.btn:link, +.btn:visited { + display: inline-block; + border-radius: 9px; + font-size: 2rem; + font-weight: 600; + text-decoration: none; + padding: 1.6rem 3.2rem; + /* transition: background-color .3s; */ + transition: all .3s; + + /* Only neccessary for .btn */ + border: none; + cursor: pointer; + font-family: inherit; +} + +.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; + /* border: 3px solid #fff; */ + color: #555; +} + +.btn--outline:hover, +.btn--outline:active { + background-color: #fdf2e9; + + /* 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 { + display: inline-block; + color: #e67e22; + text-decoration: none; + border-bottom: 1px solid currentColor; + padding-bottom: 2px; + transition: all .3s; +} + +.link:hover, +.link:active { + color: #cf711f; + border-bottom: 1px solid transparent; +} + + +.list { + list-style: none; + display: flex; + flex-direction: column; + gap: 1.6rem; +} + +.list-icon { + width: 3rem; + height: 3rem; + color: #e67e22; +} + +.list-item { + font-size: 1.8rem; + display: flex; + align-items: center; + gap: 1.6rem; +} + +*: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; +} + +.margin-bottom-md { + margin-bottom: 4.8rem !important; +} + +.center-text { + text-align: center; +} + +strong { + font-weight: 500; +} \ No newline at end of file diff --git a/starter/07-Omnifood-Desktop/css/style.css b/starter/07-Omnifood-Desktop/css/style.css new file mode 100644 index 000000000..8496e3c3a --- /dev/null +++ b/starter/07-Omnifood-Desktop/css/style.css @@ -0,0 +1,538 @@ +/*****************************/ +/* 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; +} + +/*****************************/ +/* NAVIGATION */ +/*****************************/ + +.main-nav-list { + list-style-type: 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 { + border-radius: 9px; + padding: 1.2rem 2.4rem; + color: #fff; + background-color: #e67e22; +} + +.main-nav-link.nav-cta:hover, +.main-nav-link.nav-cta:active { + background-color: #cf711f; +} + +/*****************************/ +/* HERO SECTION */ +/*****************************/ + +.section-hero { + background-color: #fdf2e9; + padding: 4.8rem 0 9.6rem 0; +} + +.hero { + max-width: 130rem; + margin: 0 auto; + padding: 0 3.2rem; + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + gap: 9.6rem; +} + +.hero-description { + font-size: 2rem; + line-height: 1.6; + margin-bottom: 4.8rem; +} + +.hero-img { + width: 100%; +} + +.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; +} + +/*****************************/ +/* FEATURED IN SECTION */ +/*****************************/ + +.section-featured { + padding: 4.8rem 0 3.2rem 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: #888; +} + +.logos { + display: flex; + justify-content: space-around; +} + +.logos img { + height: 3.2rem; + filter: brightness(0); + opacity: 50%; +} + +/*****************************/ +/* HOW IT WORKS SECTION */ +/*****************************/ + +.section-how { + padding: 9.6rem 0; +} + +.step-number { + font-size: 8.6rem; + font-weight: 600; + color: #ddd; + margin-bottom: 1.2rem; +} + +.step-description { + font-size: 1.8rem; + line-height: 1.8; +} + +.step-img-box { + display: flex; + align-items: center; + justify-content: center; + position: relative; +} + +.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%; */ + 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%; +} + +/*****************************/ +/* 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: #94d82d; +} + +.tag--paleo { + background-color: #ffd43b; +} + +.meal-title { + 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; +} + +/*****************************/ +/* TESTIMONIALS SECTION */ +/*****************************/ + +.section-testimonials { + 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; + row-gap: 4.8rem; + column-gap: 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: #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); +} + +/*****************************/ +/* 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-bottom: 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: .8rem; +} + +.plan-text { + font-size: 1.6rem; + line-height: 1.6; + color: #6f6f6f; +} + +.plan-sing-up { + text-align: center; + margin-top: 4.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; + border-radius: 50%; + padding: 1.6rem; + margin-bottom: 3.2rem; +} + +.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; +} + +/*****************************/ +/* 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(235, 151, 78, 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); +} \ No newline at end of file diff --git a/starter/07-Omnifood-Desktop/content/img/app/app-screen-1.png b/starter/07-Omnifood-Desktop/img/app/app-screen-1.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/app/app-screen-1.png rename to starter/07-Omnifood-Desktop/img/app/app-screen-1.png diff --git a/starter/07-Omnifood-Desktop/content/img/app/app-screen-2.png b/starter/07-Omnifood-Desktop/img/app/app-screen-2.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/app/app-screen-2.png rename to starter/07-Omnifood-Desktop/img/app/app-screen-2.png diff --git a/starter/07-Omnifood-Desktop/content/img/app/app-screen-3.png b/starter/07-Omnifood-Desktop/img/app/app-screen-3.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/app/app-screen-3.png rename to starter/07-Omnifood-Desktop/img/app/app-screen-3.png diff --git a/starter/07-Omnifood-Desktop/content/img/customers/ben.jpg b/starter/07-Omnifood-Desktop/img/customers/ben.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/ben.jpg rename to starter/07-Omnifood-Desktop/img/customers/ben.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-1.jpg b/starter/07-Omnifood-Desktop/img/customers/customer-1.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/customer-1.jpg rename to starter/07-Omnifood-Desktop/img/customers/customer-1.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-2.jpg b/starter/07-Omnifood-Desktop/img/customers/customer-2.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/customer-2.jpg rename to starter/07-Omnifood-Desktop/img/customers/customer-2.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-3.jpg b/starter/07-Omnifood-Desktop/img/customers/customer-3.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/customer-3.jpg rename to starter/07-Omnifood-Desktop/img/customers/customer-3.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-4.jpg b/starter/07-Omnifood-Desktop/img/customers/customer-4.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/customer-4.jpg rename to starter/07-Omnifood-Desktop/img/customers/customer-4.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-5.jpg b/starter/07-Omnifood-Desktop/img/customers/customer-5.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/customer-5.jpg rename to starter/07-Omnifood-Desktop/img/customers/customer-5.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-6.jpg b/starter/07-Omnifood-Desktop/img/customers/customer-6.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/customer-6.jpg rename to starter/07-Omnifood-Desktop/img/customers/customer-6.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/dave.jpg b/starter/07-Omnifood-Desktop/img/customers/dave.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/dave.jpg rename to starter/07-Omnifood-Desktop/img/customers/dave.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/hannah.jpg b/starter/07-Omnifood-Desktop/img/customers/hannah.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/hannah.jpg rename to starter/07-Omnifood-Desktop/img/customers/hannah.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/steve.jpg b/starter/07-Omnifood-Desktop/img/customers/steve.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/steve.jpg rename to starter/07-Omnifood-Desktop/img/customers/steve.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/eating.jpg b/starter/07-Omnifood-Desktop/img/eating.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/eating.jpg rename to starter/07-Omnifood-Desktop/img/eating.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/favicon.png b/starter/07-Omnifood-Desktop/img/favicon.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/favicon.png rename to starter/07-Omnifood-Desktop/img/favicon.png diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-1.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-1.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-1.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-1.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-10.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-10.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-10.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-10.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-11.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-11.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-11.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-11.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-12.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-12.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-12.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-12.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-2.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-2.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-2.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-2.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-3.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-3.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-3.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-3.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-4.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-4.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-4.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-4.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-5.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-5.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-5.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-5.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-6.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-6.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-6.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-6.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-7.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-7.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-7.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-7.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-8.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-8.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-8.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-8.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-9.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-9.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-9.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-9.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/hero.png b/starter/07-Omnifood-Desktop/img/hero.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/hero.png rename to starter/07-Omnifood-Desktop/img/hero.png diff --git a/starter/07-Omnifood-Desktop/content/img/logos/business-insider.png b/starter/07-Omnifood-Desktop/img/logos/business-insider.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/logos/business-insider.png rename to starter/07-Omnifood-Desktop/img/logos/business-insider.png diff --git a/starter/07-Omnifood-Desktop/content/img/logos/forbes.png b/starter/07-Omnifood-Desktop/img/logos/forbes.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/logos/forbes.png rename to starter/07-Omnifood-Desktop/img/logos/forbes.png diff --git a/starter/07-Omnifood-Desktop/content/img/logos/techcrunch.png b/starter/07-Omnifood-Desktop/img/logos/techcrunch.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/logos/techcrunch.png rename to starter/07-Omnifood-Desktop/img/logos/techcrunch.png diff --git a/starter/07-Omnifood-Desktop/content/img/logos/the-new-york-times.png b/starter/07-Omnifood-Desktop/img/logos/the-new-york-times.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/logos/the-new-york-times.png rename to starter/07-Omnifood-Desktop/img/logos/the-new-york-times.png diff --git a/starter/07-Omnifood-Desktop/content/img/logos/usa-today.png b/starter/07-Omnifood-Desktop/img/logos/usa-today.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/logos/usa-today.png rename to starter/07-Omnifood-Desktop/img/logos/usa-today.png diff --git a/starter/07-Omnifood-Desktop/content/img/meals/meal-1.jpg b/starter/07-Omnifood-Desktop/img/meals/meal-1.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/meals/meal-1.jpg rename to starter/07-Omnifood-Desktop/img/meals/meal-1.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/meals/meal-2.jpg b/starter/07-Omnifood-Desktop/img/meals/meal-2.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/meals/meal-2.jpg rename to starter/07-Omnifood-Desktop/img/meals/meal-2.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/omnifood-logo.png b/starter/07-Omnifood-Desktop/img/omnifood-logo.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/omnifood-logo.png rename to starter/07-Omnifood-Desktop/img/omnifood-logo.png diff --git a/starter/07-Omnifood-Desktop/index.html b/starter/07-Omnifood-Desktop/index.html new file mode 100644 index 000000000..e61053231 --- /dev/null +++ b/starter/07-Omnifood-Desktop/index.html @@ -0,0 +1,431 @@ + + + + + + + + + + + + + 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 ↓ +

250,000+ meals delivered last year!

+ +

As featured in

+ +

+ How it works +

Your daily dose of health in 3 simple steps

+ +

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! +

+ +

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

+ +

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! +

+ +

+ 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 +
+ Vegan +
+ Lactose-free +
+ Keto +
+ Paleo +
+ Low FODMAP +
+ Kid-friendly +

+ 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

+ +

+ + +

+ +

+ Pricing +

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 +

+ +

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

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? + +

+ + +

+ + + + + + \ No newline at end of file

Hello, world!

The Basic Language of the Web: HTML

📘 The Code Magazine

The Basic Language of the Web: HTML

What is HTML?

Why should you learn HTML?

BLOG

Converse Chuck Taylor All Star Low Top

Product details

The Basic Language of the Web: HTML

The Basic Language of the Web: HTML

📘 The Code Magazine

The Basic Language of the Web: HTML

What is HTML?

Why should you learn HTML?

What is HTML?

Why should you learn HTML?

What is HTML?

Why should you learn HTML?

What is HTML?

Why should you learn HTML?

What is HTML?

Why should you learn HTML?

Converse Chuck Taylor All Star Low Top

Product details

Converse Chuck Taylor All Star Low Top

Product details

Converse Chuck Taylor All Star Low Top

Product details

The Basic Language of the Web: HTML

The Basic Language of the Web: HTML

The Laid Back