diff --git a/code-challenge/03/index.html b/code-challenge/03/index.html new file mode 100644 index 000000000..aef3188f1 --- /dev/null +++ b/code-challenge/03/index.html @@ -0,0 +1,59 @@ + + + + + + + challenge 2 + + + +
+

Converse Chuck Taylor All Star Low Top

+ shoe +

+ $65.00 +

+

+ Free shipping +

+

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

+ + More Information → + +
+
+
+
+
+
+
+
+ +

Product details

+ + + + + +
+ + \ No newline at end of file diff --git a/code-challenge/03/style.css b/code-challenge/03/style.css new file mode 100644 index 000000000..ff39f6a81 --- /dev/null +++ b/code-challenge/03/style.css @@ -0,0 +1,150 @@ +* { + padding: 0; + margin: 0; +} + +body { + font-family: sans-serif; + font-size: 16px; + line-height: 1.4; +} + +/* PRODUCT */ + +.product { + width: 825px; + margin: 50px auto; + border: 4px solid black; +} + +.product-img { + /* margin-top: 0; */ +} + +.product-title { + font-size: 22px; + background-color: #f7f7f7; + text-align: center; + text-transform: uppercase; + padding: 15px; + position: relative; +} + +.product-title::before { + content: 'SALE'; + color: #f7f7f7; + font-size: 12px; + font-family: sans-serif; + letter-spacing: 0.2em; + + display: inline-block; + background-color: orangered; + border: 1px solid black; + padding: 5px 10px; + position: absolute; + top: -15px; + left: -30px; +} + +/* PRODUCT INFORRMATION */ + +.price { + font-size: 24px; + font-weight: bolder; +} + +.shipping { + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + color: #777; + margin-bottom: 20px; +} + +.more-info { + display: inline-block; + margin-top: 10px; +} + +.more-info:link, .more-info:visited { + color: black; +} + +.more-info:hover, .more-info:active { + text-decoration: none; +} + +.color-picker { + margin-top: 30px; +} + +.color-picker div { + width: 22px; + height: 22px; + display: inline-block; + background-color: red; + margin-right: 10px; +} + +.color-picker div:nth-child(1) { + background-color: black; +} + +.color-picker div:nth-child(2) { + background-color: blue; +} + +.color-picker div:nth-child(3) { + background-color: red; +} + +.color-picker div:nth-child(4) { + background-color: yellow; +} + +.color-picker div:nth-child(5) { + background-color: green; +} + +.color-picker div:nth-child(6) { + background-color: brown; +} + +/* PRODUCT　DETAILS */ + +.details-title { + text-transform: uppercase; + font-size: 16px; + margin-bottom: 15px; + margin-top: 30px; +} + +.details-list { + list-style: square; + margin-left: 20px; +} + +.details-list li { + padding-bottom: 10px; +} + +/* BUTTON */ + +.add-cart { + width: 100%; + padding: 15px; + + font-size: 20px; + color: #fff; + text-transform: uppercase; + + background-color: #000; + border-top: 4px solid #000; +} + +.add-cart:hover { + background-color: #fff; + color: #000; + + cursor: pointer; +} \ No newline at end of file diff --git a/code-challenge/04/index.html b/code-challenge/04/index.html new file mode 100644 index 000000000..dbfcd2d77 --- /dev/null +++ b/code-challenge/04/index.html @@ -0,0 +1,62 @@ + + + + + + + challenge 2 + + + +
+

Converse Chuck Taylor All Star Low Top

+
+ shoe +
+ +
+
+

+ $65.00 +

+

+ Free shipping +

+
+

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

+ + More Information → + +
+
+
+
+
+
+
+
+
+ +
+

Product details

+ + +
+ + + +
+ + \ No newline at end of file diff --git a/code-challenge/04/style.css b/code-challenge/04/style.css new file mode 100644 index 000000000..29f034d0c --- /dev/null +++ b/code-challenge/04/style.css @@ -0,0 +1,249 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + font-family: sans-serif; + font-size: 16px; + line-height: 1.4; +} + +/* PRODUCT */ + +.product { + width: 825px; + margin: 50px auto; + border: 4px solid black; +} + +.product-img { + /* margin-top: 0; */ + display: block; +} + +.product-title { + font-size: 22px; + background-color: #f7f7f7; + text-align: center; + text-transform: uppercase; + padding: 15px; + position: relative; +} + +.product-title::before { + content: 'SALE'; + color: #f7f7f7; + font-size: 12px; + font-family: sans-serif; + letter-spacing: 0.2em; + + display: inline-block; + background-color: orangered; + border: 1px solid black; + padding: 5px 10px; + position: absolute; + top: -15px; + left: -30px; +} + +/* PRODUCT INFORRMATION */ + +.price { + font-size: 24px; + font-weight: bolder; +} + +.shipping { + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + color: #777; + margin-bottom: 20px; +} + +.more-info { + display: inline-block; + margin-top: 10px; +} + +.more-info:link, .more-info:visited { + color: black; +} + +.more-info:hover, .more-info:active { + text-decoration: none; +} + +.color-picker { + margin-top: 30px; +} + +.color-picker div { + width: 22px; + height: 22px; + /* display: inline-block; */ + background-color: red; + margin-right: 10px; +} + +.color-picker div:nth-child(1) { + background-color: black; +} + +.color-picker div:nth-child(2) { + background-color: blue; +} + +.color-picker div:nth-child(3) { + background-color: red; +} + +.color-picker div:nth-child(4) { + background-color: yellow; +} + +.color-picker div:nth-child(5) { + background-color: green; +} + +.color-picker div:nth-child(6) { + background-color: brown; +} + +/* PRODUCT　DETAILS */ + +.details-title { + text-transform: uppercase; + font-size: 16px; + margin-bottom: 15px; + margin-top: 20px; +} + +.details-list { + list-style: square; + margin-left: 20px; +} + +.details-list li { + padding-bottom: 10px; +} + +/* BUTTON */ + +.add-cart { + width: 100%; + padding: 15px; + + font-size: 20px; + color: #fff; + text-transform: uppercase; + + background-color: #000; + border-top: 4px solid #000; +} + +.add-cart:hover { + background-color: #fff; + color: #000; + + cursor: pointer; +} + +/* FLOATS */ +/* .container-img { + float: left; +} + +.container-info { + float: left; + width: 243px; + margin: 0 40px; + padding-top: 20px; +} + +.price { + float: left; +} + +.shipping { + float: right; + margin-top: 8px; +} + +.clear { + clear: both; +} + +.container-details { + float: left; + width: 243px; +} */ + +/* FLEX */ + +/* .container { + display: flex; + justify-content: space-between; + gap: 40px; +} + +.container-info { + margin-top: 15px; + flex: 1; +} + +.row { + display: flex; + align-items: center; + justify-content: space-between; +} + +.shipping { + margin-bottom: 0; +} + +.container-details { + flex: 1; +} + +.color-picker { + display: flex; + gap: 10px; +} + */ + +/* GRID */ +.product { + display: grid; + grid-template-columns: 250px 1fr 1fr; + column-gap: 40px; +} + +.product-title { + grid-column: 1 / -1; +} + +.add-cart { + grid-column: 1 / -1; +} + +.container-info { + margin-top: 15px; +} + +.color-picker { + display: flex; + gap: 10px; +} + +.row { + display: flex; + align-items: center; + justify-content: space-between; +} + +.shipping { + margin-bottom: 0; +} \ No newline at end of file diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index df8a623a8..1f98e5e6f 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,140 @@
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..b69f1ae04 --- /dev/null +++ b/starter/03-CSS-Fundamentals/style.css @@ -0,0 +1,212 @@ +* { + margin: 0; + padding: 0; +} + +/* 使用body设置需要继承的样式 */ +/* 如果一个样式related to text, 那么它将会继承 */ +body { + font-family: sans-serif; + color: #444; + border-top: 10px solid #1098ad; + position: relative; +} + +.container { + width: 700px; + margin: 0 auto; +} + +.main-header { + background-color: #f7f7f7; + padding: 20px 40px; + margin-bottom: 60px; +} + +.post-header { + margin-bottom: 40px; +} + +.post-img { + width: 100%; + height: auto; +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1089ad; + border-bottom: 5px solid #1089ad; + padding: 50px 0; +} + + +h1, h2, h3 { + color: #1098ad; +} + +h1 { + font-size: 26px; + font-style: italic; +} + +/* become a 'h1' is not because its size, it's sementics */ +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; +} + +p { + font-size: 22px; + line-height: 1.5; + margin-bottom: 15px; +} + +ul, ol { + margin-left: 50px; + margin-bottom: 20px; +} + +li { + font-size: 20px; + margin-bottom: 10px; +} + +#copyright { + font-size: 16px; +} + +#author { + font-style: italic; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +/* ul { + list-style: none; +} */ + +.related { + list-style: none; +} + +/* if r & g & b have the same value, its actually is white to black */ + +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; + margin-bottom: 0; +} + +li:nth-child(odd) { + /* color: red; */ +} + +/* article p:last-child { + color: red; +} */ + +/* Styling links */ +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + color: #1098ad; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline; +} + +a:active { + background-color: black; + font-style: italic; +} + +/* LVHA */ + +/* Resolving conflicts */ +/* #copyright { + color: red; +} + +.copyright { + color: blue; +} + +.text { + color: yellow; +} + +footer p { + color: green !important; +} */ + +nav { + font-size: 16px; +} + +.button-like { + font-size: 24px; + + position: absolute; + right: 10px; + bottom: 10px; + padding: 15px; + + cursor: pointer; +} + +/* 伪元素 */ +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +h2::first-letter { + font-size: 80px; +} + +/* 与h3相邻的p标签的第一行 */ +h3 + p::first-line { + /* color: red; */ +} + +h2 { + /* background-color: orange; */ + position: relative; +} + +h2::after { + content: 'TOP'; + font-size: 16px; + background-color: #ffe70e; + font-weight: bold; + display: inline-block; + padding: 5px 10px; + position: absolute; + top: -10px; + right: -25px; +} +/* 不要写过长的css选择器 */ \ 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..85d7fd84e 100644 --- a/starter/04-CSS-Layouts/css-grid.html +++ b/starter/04-CSS-Layouts/css-grid.html @@ -11,6 +11,9 @@ } .el--2 { background-color: orangered; + /* grid-column: 1 / 3; */ + grid-column: 1 / -1; + grid-row: 2 / span 3; } .el--3 { background-color: green; @@ -18,6 +21,8 @@ } .el--4 { background-color: goldenrod; + grid-column: 2; + grid-row: 2; } .el--5 { background-color: palevioletred; @@ -27,9 +32,13 @@ } .el--7 { background-color: yellow; + grid-column: 2; + grid-row: 2; } .el--8 { background-color: crimson; + grid-column: 2 / 3; + grid-row: 1 / 2; } .container--1 { @@ -40,6 +49,12 @@ margin: 40px; /* CSS GRID */ + display: grid; + /* grid-template-columns: 1fr 1fr 1fr auto; */ + /* grid-template-rows: 200px 200px 200px; */ + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(3, 1fr); + gap: 10px } .container--2 { @@ -53,6 +68,25 @@ height: 600px; /* CSS GRID */ + display: grid; + grid-template-columns: 125px 200px 125px; + grid-template-rows: 250px 100px; + gap: 50px; + + /* aligning tracks inside container: + distribute empty space; + */ + justify-content: center; + align-content: center; + + /* Aligning items inside cells: moving items around iside cells */ + align-items: center; + justify-items: center; + } + + .el--3 { + align-self: end; + justify-self: end; } diff --git a/starter/04-CSS-Layouts/flexbox.html b/starter/04-CSS-Layouts/flexbox.html index 496ef372a..aab6e9fb9 100644 --- a/starter/04-CSS-Layouts/flexbox.html +++ b/starter/04-CSS-Layouts/flexbox.html @@ -40,6 +40,8 @@ margin: 40px; /* FLEXBOX */ + display: flex; + align-items: flex-start; } diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 15ecbeb77..92a33be7b 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -18,55 +18,45 @@
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 + +
+ Headshot of Laura Jones + +

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

+
+ + HTML code on a screen
- +

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 @@ -80,29 +70,25 @@

What is HTML?

understand HTML and render HTML code as websites.

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

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

You can learn more at - MDN Web Docs. + 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 @@ -115,43 +101,34 @@

    Why should you learn HTML?

  • To impress friends
  • To have fun 😃
- +

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

- + diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index c879e79d2..f92b85930 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; @@ -43,15 +44,12 @@ article { 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 40px; } /* SMALLER ELEMENTS */ @@ -82,6 +80,7 @@ h4 { font-size: 20px; text-transform: uppercase; text-align: center; + margin-bottom: 30px; } p { @@ -134,6 +133,7 @@ li:last-child { .related { list-style: none; + margin-left: 0; } body { @@ -265,3 +265,124 @@ footer p { nav p { font-size: 18px; } */ + +/* FLOATS */ +/* +.author-img { + float: left; + margin-bottom: 20px; +} + +.author { + float: left; + margin-left: 20px; + margin-top: 10px; +} + +h1 { + float: left; +} + +nav { + float: right; +} + +.clearfix::after { + clear: both; + display: block; + content: ''; +} + +article { + width: 825px; + float: left; +} + +aside { + width: 300px; + float: right; +} + +footer { + clear: both; +} +*/ + +/* flex */ +.main-header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.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-author { + margin-bottom: 0; + font-size: 14px; + font-weight: normal; + font-style: italic; +} + +.related-link:link { + font-size: 17px; + font-weight: bold; + font-style: normal; + margin-bottom: 5px; + display: block; +} + +/* .row { + display: flex; + gap: 75px; +} + +aside { + flex: 0 0 300px; + align-self: flex-start; +} + +article { + flex: 0 0 825px; + margin-bottom: 0; +} */ + +.container { + display: grid; + grid-template-columns: 3fr 1fr; + /* grid-template-rows: auto 1fr auto; */ + column-gap: 75px; + row-gap: 60px; +} + +header { + grid-column: 1 / -1; +} + +article { + margin-bottom: 0; +} + +aside { + align-self: start; +} + +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..26b66bb36 100644 --- a/starter/05-Design/index.html +++ b/starter/05-Design/index.html @@ -4,7 +4,9 @@ - + + + Lisbon Chair Shop @@ -27,6 +29,11 @@

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 +42,11 @@

What makes our chairs special

+ + +

Maximal comfort

@@ -45,6 +57,11 @@

What makes our chairs special

+ + +

Ethical and sustainable

@@ -80,16 +97,34 @@

Our bestselling chairs

The Laid Back

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

The Laid Back

The Worker Bee

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

The Worker Bee

The Chair 4/2

  • + + + Leisure and relaxing
  • + + + Comfortable all day!
  • + + + Organic cotton
  • + + + Weighs 80 kg
diff --git a/starter/05-Design/review.md b/starter/05-Design/review.md new file mode 100644 index 000000000..4aecfcd72 --- /dev/null +++ b/starter/05-Design/review.md @@ -0,0 +1,24 @@ +# web design + +## what is web design + +web designers create the overall `look and fell` of a website + +## how to learn web design + +you don't need to be an artist + +And the only thing you need to do is to learn some `rules` + +## web design ingredient + +- Typography +- Colors +- Images / Ilustrations +- Icons +- Shadows +- Border-radius +- Whitesapce +- Visual Hierarchy +- User Experience +- Components / Layouts diff --git a/starter/05-Design/style.css b/starter/05-Design/style.css index 77dfdffa3..4f80d6a51 100644 --- a/starter/05-Design/style.css +++ b/starter/05-Design/style.css @@ -6,6 +6,11 @@ FONT SIZE SYSTEM (px) 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 */ +/* +MAIN COLOR: #087f5b +GREY COLOR: #343a40 +*/ + * { margin: 0; padding: 0; @@ -16,7 +21,10 @@ FONT SIZE SYSTEM (px) /* GENERAL STYLES */ /* ------------------------ */ body { - font-family: sans-serif; + /* font-family: sans-serif; */ + font-family: 'Inter', sans-serif; + color: #343a40; + border-bottom: 8px solid #087f5b; } .container { @@ -26,11 +34,14 @@ body { header, section { - margin-bottom: 48px; + margin-bottom: 96px; } h2 { margin-bottom: 48px; + /* 24 / 30 / 36 / */ + font-size: 36px; + letter-spacing: -0.5px; } .grid-3-cols { @@ -39,6 +50,38 @@ 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; + /* gt than height will make it be a completely circle */ + /* if its a suqare, we can use 50% */ + 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 +91,7 @@ header { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 80px; - margin-top: 48px; + margin-top: 80px; } .header-text-box { @@ -56,11 +99,19 @@ header { } h1 { - margin-bottom: 24px; + margin-bottom: 32px; + /* 44 / 52 / 62 */ + font-size: 44px; + line-height: 1.1; + letter-spacing: -1px; + + text-shadow: 0 5px 5px rgba(0, 0, 0, 0.07); } .header-text { margin-bottom: 24px; + font-size: 18px; + line-height: 1.7; } img { @@ -68,18 +119,29 @@ img { } /* FEATURES */ -.features-icon { -} - .features-title { margin-bottom: 16px; + font-size: 20px; } .features-text { + font-size: 18px; + line-height: 1.7; +} + +.features-icon { + stroke: #087f5b; + width: 32px; + height: 32px; + margin-bottom: 24px; } /* TESTIMONIAL */ .testimonial-section { + background-color: #087f5b; + color: #fff; + padding: 24px; + border-radius: 12px; } .testimonial-box { @@ -88,26 +150,46 @@ img { } .testimonial-box h2 { - margin-bottom: 24px; + margin-bottom: 24px; + /* 20 / 24 / 30 / */ + 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: 0px 20px 30px 0px rgba(0, 0, 0, 0.07); +} + +.chair img { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + .chair-box { padding: 24px; } h3 { margin-bottom: 24px; + /* 18 / 20 / 24 / 30 / */ + font-size: 20px; } .chair-details { list-style: none; - margin-bottom: 24px; + margin-bottom: 48px; } .chair-details li { @@ -122,13 +204,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: #495057; }