diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..dd57aa745 Binary files /dev/null and b/.DS_Store differ diff --git a/final/.DS_Store b/final/.DS_Store new file mode 100644 index 000000000..966f49649 Binary files /dev/null and b/final/.DS_Store differ diff --git a/starter/.DS_Store b/starter/.DS_Store new file mode 100644 index 000000000..0eb8600b2 Binary files /dev/null and b/starter/.DS_Store differ diff --git a/starter/01-Test/index.html b/starter/01-Test/index.html new file mode 100644 index 000000000..3cc4f9df6 --- /dev/null +++ b/starter/01-Test/index.html @@ -0,0 +1,13 @@ + + + + + + + 我是你妈 + + +

我是你妈

+

你妈是我妈，我妈是你爹，你是我的爹

+ + diff --git a/starter/02-HTML-Fundamentals/blog.html b/starter/02-HTML-Fundamentals/blog.html new file mode 100644 index 000000000..d69b3a156 --- /dev/null +++ b/starter/02-HTML-Fundamentals/blog.html @@ -0,0 +1,13 @@ + + + + + + + Blog + + +

BLOG

+ back + + diff --git a/starter/02-HTML-Fundamentals/challenge.html b/starter/02-HTML-Fundamentals/challenge.html new file mode 100644 index 000000000..7a2ee9860 --- /dev/null +++ b/starter/02-HTML-Fundamentals/challenge.html @@ -0,0 +1,55 @@ + + + + + + + Challenges + + +
+ +
+

Converse Chuck Taylor All Star Low Top

+ + 图片炸了 +
+
+

$65.00

+

Free shipping

+
+
+

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

+ More information → + +
+
 
+
 
+
 
+
 
+
 
+
 
+
+
+
+

Product details

+
    +
  • Lightweight, durable canvas sneaker
    • +
  • Lightly padded footbed for added comfort
    • +
  • Iconic Chuck Taylor ankle patch
    • +
+
+ +
+ +
+ diff --git a/starter/02-HTML-Fundamentals/content.txt b/starter/02-HTML-Fundamentals/content.txt index ae01eb723..5aa4fa2f1 100644 --- a/starter/02-HTML-Fundamentals/content.txt +++ b/starter/02-HTML-Fundamentals/content.txt @@ -4,31 +4,17 @@ 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 + diff --git a/starter/02-HTML-Fundamentals/challenges.jpg b/starter/02-HTML-Fundamentals/img/challenges.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/challenges.jpg rename to starter/02-HTML-Fundamentals/img/challenges.jpg diff --git a/starter/02-HTML-Fundamentals/laura-jones.jpg b/starter/02-HTML-Fundamentals/img/laura-jones.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/laura-jones.jpg rename to starter/02-HTML-Fundamentals/img/laura-jones.jpg diff --git a/starter/02-HTML-Fundamentals/post-img.jpg b/starter/02-HTML-Fundamentals/img/post-img.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/post-img.jpg rename to starter/02-HTML-Fundamentals/img/post-img.jpg diff --git a/starter/02-HTML-Fundamentals/related-1.jpg b/starter/02-HTML-Fundamentals/img/related-1.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/related-1.jpg rename to starter/02-HTML-Fundamentals/img/related-1.jpg diff --git a/starter/02-HTML-Fundamentals/related-2.jpg b/starter/02-HTML-Fundamentals/img/related-2.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/related-2.jpg rename to starter/02-HTML-Fundamentals/img/related-2.jpg diff --git a/starter/02-HTML-Fundamentals/related-3.jpg b/starter/02-HTML-Fundamentals/img/related-3.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/related-3.jpg rename to starter/02-HTML-Fundamentals/img/related-3.jpg diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html new file mode 100644 index 000000000..f856946ee --- /dev/null +++ b/starter/02-HTML-Fundamentals/index.html @@ -0,0 +1,101 @@ + + + + + HTML第一课：基础级别（嘿嘿） + + + +
+

📘 The Code Magazines

+ + +
+ +
+

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:

+
    +
  1. The opening tag
    2. +
  2. The closing tag
    3. +
  3. The actual element
    4. +
+

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

+ + + +

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

+
+ + + + diff --git a/starter/02-HTML-Fundamentals/stylec.css b/starter/02-HTML-Fundamentals/stylec.css new file mode 100644 index 000000000..677348f07 --- /dev/null +++ b/starter/02-HTML-Fundamentals/stylec.css @@ -0,0 +1,236 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: sans-serif; + line-height: 1.4; +} + +p { + margin-bottom: 15px; +} + +h2 { + text-align: center; + background-color: #f7f7f7; + text-transform: uppercase; + font-size: 22px; + /* height: 40px; */ + padding: 10px; + text-align: center; +} + +/* h3 { + margin-top: 30px; +} */ +b { + font-size: 24px; +} + +button { + /* height: 50px; */ + border-left: 0; + border-right: 0; + border-bottom: 0; + padding: 15px; + font-size: 26px; + margin: 0; + border-top: 5px solid black; + background-color: black; + color: white; + cursor: pointer; +} + +a:link { + color: black; +} + +a:visited { + color: black; +} + +a:hover { + color: black; + text-decoration: none; +} + +a:active { + font-style: italic; +} + +button:hover { + background-color: white; + color: black; + /* border-top: 5px solid black; */ +} + +li { + margin-bottom: 10px; +} +li:last-child { + margin-bottom: 0; +} + +li ul { + margin-left: 20px; +} + +.fshi { + text-transform: uppercase; + color: gray; + font-size: 12px; + font-weight: bold; +} + +.details { + list-style: square; +} + +.add-to-cart { + width: 100%; + grid-column: 1 / -1; +} + +.container { + border: 5px solid black; + width: 825px; + /* height: auto; */ + margin: 50px auto; + padding: 0; + position: relative; +} + +.container::before { + position: absolute; + content: "SALE"; + background-color: red; + color: white; + padding: 5px; + top: -20px; + left: -30px; + width: 50px; + text-align: center; + letter-spacing: 2px; +} +.color-bars { + margin-top: 20px; + display: block; +} + +.color-bar { + display: inline-block; + width: 20px; + height: 20px; + margin-right: 10px; +} + +.color-1 { + background-color: black; +} + +.color-2 { + background-color: blue; +} + +.color-3 { + background-color: red; +} + +.color-4 { + background-color: yellow; +} + +.color-5 { + background-color: green; +} + +.color-6 { + background-color: cyan; +} +/* +.part0 { + float: left; + width: 240px; +} +.part1 { + float: left; + width: 240px; + margin-left: 50px; + padding: 0; + margin-bottom: 0; +} +.part2 { + float: right; + width: 240px; + margin-top: 0; +} + +.money { + float: left; + margin-top: 10px; + padding: 0; +} + +.fshi { + float: right; + margin-top: 18px; + text-align: center; + clear: right; +} + +.clear { + clear: both; +} +*/ +.product-details { + /* margin-top: 10px; */ + margin-bottom: 10px; +} + +/* .clearfix::after { + content: ""; + clear: both; +} */ +.little-row { + display: flex; + align-items: center; + justify-content: space-between; + + /* gap: 25px; */ +} +.row { + display: flex; + /* justify-content: space-between; */ + align-items: center; + /* gap: 25px; */ + margin-bottom: 0; +} + +.part1 { + flex: 1; + /* margin-left: 40px; + margin-top: 20px; + margin-right: 40px; */ + margin-top: 20px; +} + +.part2 { + flex: 1; + /* margin-top: 20px; */ + /* margin-right: 40px; */ + margin-top: 20px; +} + +article { + display: grid; + grid-template-columns: 250px 1fr 1fr; + column-gap: 40px; + align-items: start; +} + +.title { + grid-column: 1 / -1; +} diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index df8a623a8..718f0c8dc 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -3,6 +3,7 @@ The Basic Language of the Web: HTML + @@ -15,132 +16,163 @@
The Basic Language of the Web: HTML
The Basic Language of the Web: HTML
--> -
-

📘 The Code Magazine

- - -
- -
-
-

The Basic Language of the Web: HTML

- - Headshot of Laura Jones - -

Posted by Laura Jones on Monday, June 21st 2027

- - HTML code on a screen +
+ +
+

📘 The Code Magazine

+ +
-

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

- -

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

- -

What is HTML?

-

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

-

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

-

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

- -
    -
  1. The opening tag
    2. -
  2. The closing tag
    3. -
  3. The actual element
    4. -
- -

- 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:

+ +
    +
  1. The opening tag
    2. +
  2. The closing tag
    3. +
  3. The actual element
    4. +
+ +

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

+ +

Why should you learn HTML?

+ +

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

+ + + +

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

+ + + + + + + + diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css new file mode 100644 index 000000000..574488c31 --- /dev/null +++ b/starter/03-CSS-Fundamentals/style.css @@ -0,0 +1,206 @@ +* { + margin: 0; + padding: 0; +} + +body { + border-top: #1098ad solid 10px; + position: relative; +} + +article { + margin-bottom: 60px; +} + +p { + font-size: 22px; + line-height: 1.5; + margin-bottom: 15px; +} + +h1, +h2, +h3, +h4, +p, +li { + font-family: sans-serif; + color: #444444; +} +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; +} + +li { + font-size: 20px; + margin-bottom: 10px; +} + +ul, +ol { + margin-bottom: 20px; + margin-left: 50px; +} + +footer p { + font-size: 16px; +} + +nav a:link { + font-size: 18px; + margin: 10px; + margin-top: 10px; + display: inline-block; +} + +nav a:link:last-child { + margin-right: 0; +} +/* article header p { + font-style: italic; +} */ + +/* .test { + display: inline-block; +} */ +#author { + font-style: italic; + font-size: 18px; +} + +.container { + width: 800px; + margin: 0 auto; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +.related { + list-style: none; +} + +.main-header { + background-color: #f7f7f7; + padding: 20px 40px; + margin-bottom: 60px; + height: 80px; +} + +.post-header { + margin-bottom: 40px; +} + +.post-img { + height: auto; + width: 100%; +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; + padding: 50px 0; + width: 500px; +} + +/* body { + background-color: blue; +} */ + +/* .first-li { + font-weight: bold; +} */ + +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; + margin-bottom: 0; +} + +/* li:nth-child(2) { + color: red; +} */ + +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + color: #1098ad; +} + +a:hover { + color: orangered; + text-decoration: underline; + font-weight: bold; +} + +a:active { + background-color: black; + font-style: italic; +} + +/* #copyright { + color: orangered; +} */ +.like { + font-size: 33px; + cursor: pointer; + padding: 10px; + position: absolute; + /* top: 0; + left: 0; */ + bottom: 50px; + right: 50px; +} + +h1::first-letter { + font-style: normal; + margin-right: 5px; +} +h2 { + position: relative; +} +h2::after { + position: absolute; + content: "TOP"; + background-color: #ffe70e; + font-size: 16px; + font-weight: bold; + padding: 5px 10px; + display: inline-block; + right: -25px; + top: -5px; + color: #444; +} diff --git a/starter/04-CSS-Layouts/css-grid.html b/starter/04-CSS-Layouts/css-grid.html index e2daa6d42..047169963 100644 --- a/starter/04-CSS-Layouts/css-grid.html +++ b/starter/04-CSS-Layouts/css-grid.html @@ -11,10 +11,13 @@ } .el--2 { background-color: orangered; + grid-column: 1 / 2; + grid-row: 2 / 3; } .el--3 { background-color: green; height: 150px; + align-self: end; } .el--4 { background-color: goldenrod; @@ -30,29 +33,51 @@ } .el--8 { background-color: crimson; + grid-column: 2 / 3; + grid-row: 1 / 2; } .container--1 { + display: none; /* STARTER */ font-family: sans-serif; background-color: #ddd; - font-size: 40px; + font-size: 20px; margin: 40px; /* CSS GRID */ + /* display: grid; */ + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-rows: repeat(2, 1fr); + + column-gap: 30px; + row-gap: 60px; } .container--2 { + /* display: none; */ /* STARTER */ font-family: sans-serif; background-color: black; font-size: 40px; margin: 100px; - width: 1000px; + width: 700px; height: 600px; + gap: 50px; + /* CSS GRID */ + display: grid; + grid-template-columns: 125px 200px 125px; + grid-template-rows: 250px 100px; + + justify-content: center; + + align-content: center; + + align-items: center; + justify-items: center; } diff --git a/starter/04-CSS-Layouts/flexbox.html b/starter/04-CSS-Layouts/flexbox.html index 496ef372a..260ba1238 100644 --- a/starter/04-CSS-Layouts/flexbox.html +++ b/starter/04-CSS-Layouts/flexbox.html @@ -8,6 +8,8 @@ @@ -50,9 +63,9 @@
CSS
are
amazing
-
languages
+ diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 15ecbeb77..5782adcb4 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -18,32 +18,37 @@
The Basic Language of the Web: HTML
-->
-
+

📘 The Code Magazine

+ +

The Basic Language of the Web: HTML

- Headshot of Laura Jones +
+ Headshot of Laura Jones -

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

+

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

+
Why should you learn HTML?

Related posts

diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index c879e79d2..4c58705e2 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -2,6 +2,7 @@ /* border-top: 10px solid #1098ad; */ margin: 0; padding: 0; + box-sizing: border-box; } /* PAGE SECTIONS */ @@ -14,7 +15,7 @@ body { } .container { - width: 800px; + width: 1200px; /* margin-left: auto; margin-right: auto; */ margin: 0 auto; @@ -26,8 +27,8 @@ body { padding-left: 40px; padding-right: 40px; */ padding: 20px 40px; - margin-bottom: 60px; - /* height: 80px; */ + /* margin-bottom: 60px; */ + height: auto; } nav { @@ -51,7 +52,7 @@ aside { /* padding-top: 50px; padding-bottom: 50px; */ padding: 50px 0; - width: 500px; + width: 300px; } /* SMALLER ELEMENTS */ @@ -197,7 +198,7 @@ nav a:link { display: block; */ margin-right: 30px; - margin-top: 10px; + margin-top: 0; display: inline-block; } @@ -265,3 +266,124 @@ footer p { nav p { font-size: 18px; } */ + +/* float +.author-img { + float: left; +} + +#author { + float: left; + margin-top: 10px; + margin-left: 20px; +} + +h1 { + float: left; +} + +nav { + float: right; +} + +.clearfix::after { + content: ""; + clear: both; + display: block; +} + +article { + float: left; + width: 825px; +} + +aside { + width: 300px; + float: right; + padding: 50px 40px; +} + +footer { + clear: both; +} + +.related { + margin: 0; +} +*/ + +/* flex */ +.article { + flex: 0 0 825px; + margin-bottom: 0; +} +.aside { + flex: 0 0 300px; +} +.main-header { + display: flex; + align-items: center; + justify-content: space-between; +} + +.author-box { + display: flex; + align-items: center; + margin-bottom: 15px; +} + +#author { + margin: 0 0; + margin-left: 15px; +} + +.related-post { + display: flex; + align-items: center; + gap: 20px; +} + +.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; + /* justify-content: space-between; */ + +/* css grid layout */ + +.container { + display: grid; + grid-template-columns: 1fr 300px; + /* grid-template-rows: 1fr 1fr 1fr; */ + column-gap: 75px; + row-gap: 60px; + align-items: start; +} + +.main-header { + grid-column: 1 / -1; +} + +article { +} + +aside { +} + +footer { + grid-column: 1 / -1; +} diff --git a/starter/05-Design/index.html b/starter/05-Design/index.html index 92b74fd48..ce824151c 100644 --- a/starter/05-Design/index.html +++ b/starter/05-Design/index.html @@ -5,6 +5,14 @@ + + + + + Lisbon Chair Shop @@ -27,6 +35,21 @@

We design and build better chairs, for a better life

What makes our chairs special

+ + + +

Science meets design

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

What makes our chairs special

+ + + +

Maximal comfort

@@ -45,6 +83,21 @@

What makes our chairs special

+ + + +

Ethical and sustainable

@@ -80,16 +133,76 @@

Our bestselling chairs

The Laid Back

  • + + + + Leisure and relaxing
  • + + + + Comfortable for 4h
  • + + + + Vegan leather
  • + + + + Weighs 16 kg
@@ -106,15 +219,71 @@

The Laid Back

The Worker Bee

  • + + + Work
  • + + + Comfortable for 8h
  • + + + Vegan leather
  • + + + Weighs 22 kg
@@ -131,15 +300,71 @@

The Worker Bee

The Chair 4/2

  • + + + Leisure and relaxing
  • + + + Comfortable all day!
  • + + + Organic cotton
  • + + + Weighs 80 kg
diff --git a/starter/05-Design/style.css b/starter/05-Design/style.css index 77dfdffa3..4f040892d 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 +Gray: #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,13 @@ body { header, section { - margin-bottom: 48px; + margin-bottom: 128px; } h2 { margin-bottom: 48px; + font-size: 36px; + letter-spacing: -0.5px; } .grid-3-cols { @@ -39,6 +49,36 @@ h2 { column-gap: 80px; } +.btn:link, +.btn:visited { + font-weight: 500; + background-color: #087f5b; + color: #fff; + text-decoration: none; + text-transform: uppercase; + 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; +} + +img { + border-radius: 12px; +} + /* ------------------------ */ /* COMPONENT STYLES */ /* ------------------------ */ @@ -48,7 +88,7 @@ header { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 80px; - margin-top: 48px; + margin-top: 64px; } .header-text-box { @@ -56,11 +96,17 @@ header { } h1 { - margin-bottom: 24px; + margin-bottom: 32px; + font-size: 44px; + line-height: 1.1; + letter-spacing: -1px; + text-shadow: 0 4px 3px rgba(177, 172, 172, 0.35); } .header-text { margin-bottom: 24px; + font-size: 18px; + line-height: 1.7; } img { @@ -69,17 +115,28 @@ img { /* 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: white; + padding: 24px; + border-radius: 12px; } .testimonial-box { @@ -89,32 +146,50 @@ img { .testimonial-box h2 { 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 20px 10px rgba(177, 172, 172, 0.35); + 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 +197,20 @@ h3 { } .chair-icon { + stroke: #087f5b; + width: 24px; + height: 24px; } .chair-price { display: flex; justify-content: space-between; + font-size: 20px; + align-items: center; } footer { margin-bottom: 48px; + font-size: 14px; + color: #52575d; } diff --git a/starter/06-Components/01-accordion.html b/starter/06-Components/01-accordion.html new file mode 100644 index 000000000..ef8d34fab --- /dev/null +++ b/starter/06-Components/01-accordion.html @@ -0,0 +1,286 @@ + + + + + + + Accordion Component + + + + + + + +
+
+

01

+

Where are these chairs assembled?

+ + + + +
+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. At + doloribus, quo impedit ipsum voluptatem, velit fugit nesciunt veniam + molestias sint culpa rem. Delectus impedit quas aut voluptas + repudiandae autem debitis? +

+
    +
  • Ab provident exercitationem eius sint dolore.
    • +
  • Corrupti id, dolores libero cum veniam magnam.
    • +
  • Enecessitaas consectetur, sit illo.
    • +
  • tibus doloribus assumenda eius qu
    • +
+
+
+
+

02

+

How long do I have to return my chari?

+ + + + +
+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. At + doloribus, quo impedit ipsum voluptatem, velit fugit nesciunt veniam + molestias sint culpa rem. Delectus impedit quas aut voluptas + repudiandae autem debitis? +

+
    +
  • Ab provident exercitationem eius sint dolore.
    • +
  • Corrupti id, dolores libero cum veniam magnam.
    • +
  • Enecessitaas consectetur, sit illo.
    • +
  • tibus doloribus assumenda eius qu
    • +
+
+
+
+

03

+

Do you ship to countries outside the EU?

+ + + + +
+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. At + doloribus, quo impedit ipsum voluptatem, velit fugit nesciunt veniam + molestias sint culpa rem. Delectus impedit quas aut voluptas + repudiandae autem debitis? +

+
    +
  • Ab provident exercitationem eius sint dolore.
    • +
  • Corrupti id, dolores libero cum veniam magnam.
    • +
  • Enecessitaas consectetur, sit illo.
    • +
  • tibus doloribus assumenda eius qu
    • +
+
+
+ + + diff --git a/starter/06-Components/02-carousel.html b/starter/06-Components/02-carousel.html new file mode 100644 index 000000000..19b24710e --- /dev/null +++ b/starter/06-Components/02-carousel.html @@ -0,0 +1,167 @@ + + + + + + + Carousel + + + + + + + +
+ maria +
+

"Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, atque blanditiis deleniti modi dolores saepe nesciunt quaerat nulla aspernatur perferendis beatae nemo."

+

Maria de Almedia

+

Senior Product Manager at EDP Cormercial

+
+ + + + + +
+ + + + +
+ +
+
+ + diff --git a/starter/06-Components/03-table.html b/starter/06-Components/03-table.html new file mode 100644 index 000000000..295da34de --- /dev/null +++ b/starter/06-Components/03-table.html @@ -0,0 +1,99 @@ + + + + + + + Table + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ChairThe Laid BackThe Worker BeeThe Chair 4/2
Width80 cm60 cm220 cm
Height100 cm110 cm90 cm
Depth70 cm65 cm80 cm
Weight16 kg22 kg80 kg
+ + diff --git a/starter/06-Components/04-pagination.html b/starter/06-Components/04-pagination.html new file mode 100644 index 000000000..de50cff6c --- /dev/null +++ b/starter/06-Components/04-pagination.html @@ -0,0 +1,150 @@ + + + + + + + Pagination + + + + + + + + + + diff --git a/starter/06-Components/05-hero.html b/starter/06-Components/05-hero.html new file mode 100644 index 000000000..2cce7a65c --- /dev/null +++ b/starter/06-Components/05-hero.html @@ -0,0 +1,142 @@ + + + + + + + Omifood Hero Section + + + + + + + + + + +
+ +
+
+

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

Some random title

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam + accusamus itaque eaque necessitatibus totam neque dolores! Quaerat + nihil repellendus ab, tempora accusamus molestiae rerum dicta, + praesentium dolor molestias saepe delectus. +

+
+
+ + diff --git a/starter/06-Components/06-layout.html b/starter/06-Components/06-layout.html new file mode 100644 index 000000000..ad0edfbff --- /dev/null +++ b/starter/06-Components/06-layout.html @@ -0,0 +1,123 @@ + + + + + + + Carousel + + + + + + + + + + + + + + + +
+ + + + + + + + + + +
+
Email view
+ + + diff --git a/starter/06-Components/templeate.html b/starter/06-Components/templeate.html new file mode 100644 index 000000000..92628222a --- /dev/null +++ b/starter/06-Components/templeate.html @@ -0,0 +1,30 @@ + + + + + + + Carousel + + + + + + + + diff --git a/starter/07-Omnifood-Desktop/content/content.md b/starter/07-Omnifood-Desktop/content/content.md index 7193e017f..ca3150dfd 100644 --- a/starter/07-Omnifood-Desktop/content/content.md +++ b/starter/07-Omnifood-Desktop/content/content.md @@ -126,3 +126,19 @@ Careers Recipe directory Help center Privacy & terms + + + +## Sections + +- Navigation +- Hero +- Featured in +- Features +- How it works +- Meals (and list of diets) +- Gallery +- Testimonials +- Pricing +- CTA +- Footer diff --git a/starter/07-Omnifood-Desktop/css/style.css b/starter/07-Omnifood-Desktop/css/style.css new file mode 100644 index 000000000..463c25b72 --- /dev/null +++ b/starter/07-Omnifood-Desktop/css/style.css @@ -0,0 +1,53 @@ +/* + +--- 01 Typography system + +- FONT SIZE SYSTEM (px) + 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + +- FONT WEIGHTS + default: 400; + + +- LINE HEIGHTS + default: 1 + + + +--- 02 Color system + +- Primary + #e67e22 + +- Tints + + +- Shades + +- Accents + +- Greys + #555 + +--- 03 Shadows + +--- 04 Border-radius + +--- 05 Whitespace + +- SACING SYSTEM (px) + 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 +*/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: sans-serif; + line-height: 1; + font-weight: 400; + color: #555; +} 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..eba7184fe --- /dev/null +++ b/starter/07-Omnifood-Desktop/index.html @@ -0,0 +1,13 @@ + + + + + + + Omnifood + + + +

A healthy meal delivered to your door, every single day

+ + diff --git a/test.txt b/test.txt new file mode 100644 index 000000000..d00491fd7 --- /dev/null +++ b/test.txt @@ -0,0 +1 @@ +1