diff --git a/assets/bold-confident.png b/assets/bold-confident.png new file mode 100644 index 000000000..289b11671 Binary files /dev/null and b/assets/bold-confident.png differ diff --git a/assets/calm-peaceful.png b/assets/calm-peaceful.png new file mode 100644 index 000000000..9851f145d Binary files /dev/null and b/assets/calm-peaceful.png differ diff --git a/assets/choose-color.png b/assets/choose-color.png new file mode 100644 index 000000000..8c7d27c1c Binary files /dev/null and b/assets/choose-color.png differ diff --git a/assets/font-size-1.png b/assets/font-size-1.png new file mode 100644 index 000000000..3ce8b1d22 Binary files /dev/null and b/assets/font-size-1.png differ diff --git a/assets/font-size-2.png b/assets/font-size-2.png new file mode 100644 index 000000000..1609c824c Binary files /dev/null and b/assets/font-size-2.png differ diff --git a/assets/font-size-3.png b/assets/font-size-3.png new file mode 100644 index 000000000..ec6994ef4 Binary files /dev/null and b/assets/font-size-3.png differ diff --git a/assets/font-size-4.png b/assets/font-size-4.png new file mode 100644 index 000000000..ab064d6ea Binary files /dev/null and b/assets/font-size-4.png differ diff --git a/assets/font-size-5.png b/assets/font-size-5.png new file mode 100644 index 000000000..cf07422b1 Binary files /dev/null and b/assets/font-size-5.png differ diff --git a/assets/font-size-6.png b/assets/font-size-6.png new file mode 100644 index 000000000..d74396441 Binary files /dev/null and b/assets/font-size-6.png differ diff --git a/assets/font-size-7.png b/assets/font-size-7.png new file mode 100644 index 000000000..40fdfc4bd Binary files /dev/null and b/assets/font-size-7.png differ diff --git a/assets/font-size-8.png b/assets/font-size-8.png new file mode 100644 index 000000000..ed3dba5ff Binary files /dev/null and b/assets/font-size-8.png differ diff --git a/assets/minimalist-simple.png b/assets/minimalist-simple.png new file mode 100644 index 000000000..95c9a39aa Binary files /dev/null and b/assets/minimalist-simple.png differ diff --git a/assets/personality01.png b/assets/personality01.png new file mode 100644 index 000000000..72e890059 Binary files /dev/null and b/assets/personality01.png differ diff --git a/assets/personality02.png b/assets/personality02.png new file mode 100644 index 000000000..23b786682 Binary files /dev/null and b/assets/personality02.png differ diff --git a/assets/personality03.png b/assets/personality03.png new file mode 100644 index 000000000..e3906a41b Binary files /dev/null and b/assets/personality03.png differ diff --git a/assets/personality04.png b/assets/personality04.png new file mode 100644 index 000000000..7f99d3978 Binary files /dev/null and b/assets/personality04.png differ diff --git a/assets/personality05.png b/assets/personality05.png new file mode 100644 index 000000000..762da697f Binary files /dev/null and b/assets/personality05.png differ diff --git a/assets/personality06.png b/assets/personality06.png new file mode 100644 index 000000000..c74596416 Binary files /dev/null and b/assets/personality06.png differ diff --git a/assets/personality07.png b/assets/personality07.png new file mode 100644 index 000000000..070ee7a46 Binary files /dev/null and b/assets/personality07.png differ diff --git a/assets/plain-neutral.png b/assets/plain-neutral.png new file mode 100644 index 000000000..a8adefc6d Binary files /dev/null and b/assets/plain-neutral.png differ diff --git a/assets/playful-fun.png b/assets/playful-fun.png new file mode 100644 index 000000000..5a2e26aec Binary files /dev/null and b/assets/playful-fun.png differ diff --git a/assets/sans-serif.png b/assets/sans-serif.png new file mode 100644 index 000000000..448f0abcb Binary files /dev/null and b/assets/sans-serif.png differ diff --git a/assets/serif.png b/assets/serif.png new file mode 100644 index 000000000..748cd2c26 Binary files /dev/null and b/assets/serif.png differ diff --git a/assets/serious-elegant.png b/assets/serious-elegant.png new file mode 100644 index 000000000..fbf020885 Binary files /dev/null and b/assets/serious-elegant.png differ diff --git a/assets/startup-upbeat.png b/assets/startup-upbeat.png new file mode 100644 index 000000000..3732ebc49 Binary files /dev/null and b/assets/startup-upbeat.png differ diff --git a/design.md b/design.md new file mode 100644 index 000000000..09213979f --- /dev/null +++ b/design.md @@ -0,0 +1,75 @@ +# design principles + +## Serious / Elegant + +![](./assets/serious-elegant.png) + +## Minimalist / Simple + +![](./assets/minimalist-simple.png) + +## Plain / Neutral + +![](./assets/plain-neutral.png) + +## Bold / Confident + +![](./assets/bold-confident.png) + +## Calm / Peaceful + +![](./assets/calm-peaceful.png) + +## Startup / Upbeat + +![](./assets/startup-upbeat.png) + +## Playful / Fun + +![](./assets/playful-fun.png) + +## Font style + +![](./assets/sans-serif.png) +![](./assets/serif.png) + +## Font size + +![](./assets/font-size-1.png) +![](./assets/font-size-2.png) +![](./assets/font-size-3.png) +![](./assets/font-size-4.png) +![](./assets/font-size-5.png) +![](./assets/font-size-6.png) +![](./assets/font-size-7.png) +![](./assets/font-size-8.png) + +### choose font size + +```text + +SPACING SYSTEM (px) +2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 + +FONT SIZE SYSTEM (px) +10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 +``` + +## Choose color + +![](./assets/choose-color.png) + +[open color 挑選顏色](https://yeun.github.io/open-color/) + +[背景與文字顏色對比](https://coolors.co) +使用`contrast-checker` + +## website personality + +![](assets/personality01.png) +![](assets/personality02.png) +![](assets/personality03.png) +![](assets/personality04.png) +![](assets/personality05.png) +![](assets/personality06.png) +![](assets/personality07.png) \ No newline at end of file diff --git a/starter/01_Test/index.html b/starter/01_Test/index.html new file mode 100644 index 000000000..37a999098 --- /dev/null +++ b/starter/01_Test/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + +

Hello World

+

i am thomas

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

BLOG

+ Home + + diff --git a/starter/02-HTML-Fundamentals/challenge.html b/starter/02-HTML-Fundamentals/challenge.html new file mode 100644 index 000000000..fcec57e08 --- /dev/null +++ b/starter/02-HTML-Fundamentals/challenge.html @@ -0,0 +1,41 @@ + + + + + + + Challenges + + +

Converse low Top

+ challenges +
+
+

$60.0

+

Free shipping

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

Product details

+ +
+ + +

SALE

+ + 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..ec2093fe5 --- /dev/null +++ b/starter/02-HTML-Fundamentals/index.html @@ -0,0 +1,103 @@ + + + + + Web: HTML Demo + + + +

📘 The Code Magazine

+ + +
+
+

The Basic Language of the Web: HTML

+ laura jones +

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

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

+ see + 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/style.css b/starter/02-HTML-Fundamentals/style.css new file mode 100644 index 000000000..3dac0b3da --- /dev/null +++ b/starter/02-HTML-Fundamentals/style.css @@ -0,0 +1,129 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + border: 5px solid #000; + width: 800px; + margin: 50px auto; + position: relative; +} +h2 { + text-align: center; + background-color: #ddd; + text-transform: uppercase; + padding: 10px; + grid-column: 1/ -1; +} +.product-img { + /* margin-right: 20px; */ +} + +.product-info { + /* flex: 1; */ + /* margin-right: 20px; */ + margin-top: 20px; + /* padding-top: 20px; */ +} +.product-detail { + margin-top: 20px; + /* padding-top: 20px; */ + + /* flex: 1; */ +} + +.price { + font-weight: bold; + font-size: 25px; +} + +.shipping { + text-transform: uppercase; + font-weight: bold; + color: #777; +} + +.more-info:link { + display: inline-block; + margin-bottom: 30px; +} +.more-info:visited { + color: #000; + text-decoration: underline; +} + +.more-info:hover, +.more-info:active { + text-decoration: none; +} + +.detail-title { + text-transform: uppercase; + margin-bottom: 10px; +} +.detail-list { + list-style: square; + margin-left: 20px; +} +.detail-list li { + margin-bottom: 10px; +} + +.cart { + font-size: 30px; + text-transform: uppercase; + background-color: #000; + color: white; + padding: 10px; + grid-column: 1/ -1; + /* width: 100%; */ +} +.cart:hover { + color: black; + background-color: white; + cursor: pointer; +} +.sale { + font-size: 5px; + background-color: red; + color: white; + font-weight: bold; + position: absolute; + top: -10px; + left: -30px; + letter-spacing: 2px; + padding: 5px; +} + +.color { + background-color: #000; + width: 20px; + height: 20px; + margin-bottom: 0; +} + +.color-red { + background-color: red; +} +.color-green { + background-color: green; +} + +.color-pick { + display: flex; + gap: 20px; +} + +.price-ship-row { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; +} +.grid-container { + display: grid; + grid-template-columns: 250px 1fr 1fr; + column-gap: 30px; + /* margin-top: 20px; */ +} diff --git a/starter/03-CSS-Fundamentals/blog.html b/starter/03-CSS-Fundamentals/blog.html index 3b9b6e328..ce38577a8 100644 --- a/starter/03-CSS-Fundamentals/blog.html +++ b/starter/03-CSS-Fundamentals/blog.html @@ -1,4 +1,6 @@ + + BLOG diff --git a/starter/03-CSS-Fundamentals/css-grid.html b/starter/03-CSS-Fundamentals/css-grid.html new file mode 100644 index 000000000..2bada7ae5 --- /dev/null +++ b/starter/03-CSS-Fundamentals/css-grid.html @@ -0,0 +1,116 @@ + + + + + + + CSS Grid + + + +
+
(1) HTML
+
(2) and
+
(3) CSS
+
(4) are
+
(5) amazing
+
(6) languages
+
(7) to
+
(8) learn
+
+ +
+
(1)
+
(3)
+
(4)
+
(5)
+
(6)
+
(7)
+
+ + diff --git a/starter/03-CSS-Fundamentals/flexbox.html b/starter/03-CSS-Fundamentals/flexbox.html new file mode 100644 index 000000000..7744318db --- /dev/null +++ b/starter/03-CSS-Fundamentals/flexbox.html @@ -0,0 +1,83 @@ + + + + + + + Flexbox + + + +
+
HTML
+
and
+
CSS
+
are
+
amazing
+
languages
+
to
+
learn
+
+ + diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index df8a623a8..75e3092b7 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -2,6 +2,7 @@ + The Basic Language of the Web: HTML @@ -14,133 +15,157 @@

The Basic Language of the Web: HTML

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

+ +
+
+
+

The Basic Language of the Web: HTML

+ +
+ Headshot of Laura Jones + +

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

-
- - - -
Copyright © 2027 by 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: +

+ + + +

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..9646712a4 --- /dev/null +++ b/starter/03-CSS-Fundamentals/style.css @@ -0,0 +1,347 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + /* color: red; */ + border-top: 10px solid #1098ad; + position: relative; +} +.container { + width: 1200px; + /* margin-left: auto; + margin-right: auto; */ + margin: 0 auto; + position: relative; +} + +nav { + font-size: 18px; +} +article { + /* margin-bottom: 60px; */ +} +.main-header { + background-color: #f7f7f7; + + /* padding: 20px; + padding-left: 40px; + padding-right: 40px; */ + padding: 20px 40px; + /* margin-bottom: 60px; */ + /* height: 80px; */ +} +.post-header { + margin-bottom: 40px; +} +aside { + background-color: #f7f7f7; + border-bottom: 5px solid #1098ad; + border-top: 5px solid #1098ad; + padding: 50px 40px; +} + +h1, +h2, +h3, +h4, +p, +li { + font-family: serif; + color: #444; +} + +h1, +h2, +h3 { + color: #1098ad; +} + +h1 { + font-size: 26px; + text-transform: uppercase; + font-style: italic; +} +h2 { + font-size: 40px; + 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-bottom: 10px; +} +li:last-child { + margin-bottom: 0; +} +/* footer p { + font-size: 16px; +} */ + +#copyright { + font-size: 16px; +} + +/* article header p { + font-style: italic; +} */ + +#author { + font-style: italic; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +/* ul { + list-style: none; +} */ + +.un-list-removal { + list-style: none; + margin-left: 0; +} + +/* .first-li { + font-weight: bold; +} */ + +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; +} + +li:nth-child(even) { + color: blueviolet; +} + +/* article p:last-child { + color: red; +} */ + +/* styling links, 有href的會套用 */ +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + /* color: #777; */ + color: #1098ad; +} + +a:hover { + color: orange; + font-weight: bold; + text-decoration: underline orangered; +} + +a:active { + background-color: black; + font-style: italic; +} + +/* resolving conflicts */ +/* #copyright { + color: red; +} +.copyright { + color: blue; +} +.text { + color: yellow; +} + +footer p { + color: green; +} */ + +.post-img { + width: 100%; + height: auto; +} + +nav a:link { + /* background-color: orange; + margin: 20px; + padding: 10px; + display: block; */ + margin-right: 30px; + /* margin-top: 10px; */ + /* margin-bottom: 20px; */ + display: inline-block; +} + +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 { + color: #000; + content: "TOP"; + background-color: #f2bf81; + font-size: 16px; + font-weight: bold; + display: inline-block; + padding: 5px 10px; + position: absolute; + top: -10px; + right: -20px; +} +/* FLOATS */ + +/* .author-img { + float: left; + margin-bottom: 20px; +} +.author { + margin-left: 20px; + margin-bottom: 0; + margin-top: 10px; + float: left; +} +h1 { + float: left; +} +nav { + float: right; +} +.clearfix::after { + clear: both; + content: ""; + display: block; +} + +article { + width: 830px; + 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: 15px; +} +.related-title { + font-weight: bold; +} +.related-author { + margin-bottom: 0; + font-style: italic; + font-weight: normal; +} +.row { + display: flex; + gap: 75px; + margin-bottom: 60px; + align-items: flex-start; +} +.aside { + flex: 0 0 300px; +} +.article { + flex: 0 0 825px; + margin-bottom: 0; +} +*/ + +/* css-grid layout */ +.container { + display: grid; + grid-template-columns: 1fr 300px; + column-gap: 75px; + row-gap: 60px; + align-items: start; +} +.main-header { + display: flex; + align-items: center; + justify-content: space-between; + grid-column: 1 / -1; +} +.related-post { + display: flex; + align-items: center; + gap: 15px; +} +.article { +} +.aside { +} +.footer { + grid-column: 1 / -1; +} diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index c879e79d2..0b80bebae 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -12,23 +12,30 @@ body { border-top: 10px solid #1098ad; position: relative; } - -.container { - width: 800px; - /* margin-left: auto; - margin-right: auto; */ - margin: 0 auto; -} - .main-header { background-color: #f7f7f7; /* padding: 20px; padding-left: 40px; padding-right: 40px; */ padding: 20px 40px; - margin-bottom: 60px; + /* margin-bottom: 60px; */ /* height: 80px; */ } +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; +} +.container { + width: 800px; + /* margin-left: auto; + margin-right: auto; */ + margin: 0 auto; +} nav { font-size: 18px; @@ -44,16 +51,6 @@ article { /* 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; -} - /* SMALLER ELEMENTS */ h1, h2, diff --git a/starter/05-Design/index.html b/starter/05-Design/index.html index 92b74fd48..c9f4eff67 100644 --- a/starter/05-Design/index.html +++ b/starter/05-Design/index.html @@ -4,7 +4,13 @@ - + + + Lisbon Chair Shop @@ -27,6 +33,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 +56,21 @@

What makes our chairs special

+ + + +

Maximal comfort

@@ -45,6 +81,21 @@

What makes our chairs special

+ + + +

Ethical and sustainable

@@ -80,16 +131,76 @@

Our bestselling chairs

The Laid Back

@@ -106,15 +217,73 @@

The Laid Back

The Worker Bee

@@ -131,15 +300,71 @@

The Worker Bee

The Chair 4/2

diff --git a/starter/05-Design/style.css b/starter/05-Design/style.css index 77dfdffa3..a9fbfdb10 100644 --- a/starter/05-Design/style.css +++ b/starter/05-Design/style.css @@ -4,6 +4,10 @@ SPACING SYSTEM (px) 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 */ * { @@ -16,7 +20,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 +32,38 @@ body { header, section { - margin-bottom: 48px; + margin-bottom: 96px; } h2 { margin-bottom: 48px; + /* 24 / 30 / 36 */ + font-size: 36px; + letter-spacing: -0.5px; +} + +.btn:link, +.btn:visited { + background-color: #087f5b; + color: #fff; + text-decoration: none; + text-transform: uppercase; + font-weight: 500; + + display: inline-block; + border-radius: 1200px; +} +.btn:hover, +.btn:active { + background-color: #099268; +} +.btn--big { + font-size: 18px; + padding: 16px 32px; +} +.btn--small { + font-size: 14px; + padding: 8px 12px; } .grid-3-cols { @@ -48,7 +81,7 @@ header { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 80px; - margin-top: 48px; + margin-top: 64px; } .header-text-box { @@ -56,30 +89,49 @@ header { } h1 { - margin-bottom: 24px; + margin-bottom: 32px; + /* 44 / 52 / 62 */ + font-size: 44px; + line-height: 1; + letter-spacing: -1px; + text-shadow: 0 20px 30px rgba(0, 0, 0, 0.2); } .header-text { margin-bottom: 24px; + /* 18 / 20 */ + line-height: 1.7; } 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 { @@ -89,32 +141,50 @@ img { .testimonial-box h2 { margin-bottom: 24px; + /* 24 / 30 / 36 */ + 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 0px rgba(0, 0, 0, 0.1); + 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 +192,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; }