From 63b96e5cb39e9614a1cebd8c120ffa1fcd40bf91 Mon Sep 17 00:00:00 2001 From: Michael Date: Mon, 7 Mar 2022 21:07:17 -0600 Subject: [PATCH] started icons --- projectfolder/Design/index.html | 316 +++++++++++++++++--------------- projectfolder/Design/style.css | 100 ++++++---- 2 files changed, 228 insertions(+), 188 deletions(-) diff --git a/projectfolder/Design/index.html b/projectfolder/Design/index.html index 92b74fd48..cced3c0f4 100644 --- a/projectfolder/Design/index.html +++ b/projectfolder/Design/index.html @@ -1,162 +1,176 @@ - - - - + + + + + + + + + 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 +
+ Photo +
- - 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 -
- Photo -
+
+

What makes our chairs special

+
+
+

+ Science meets design +

+

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

+
-
-

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

-
-
-
+
+
+ People sitting on chairs +
+

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

+
+
+
-
-
- People sitting on chairs -
-

"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

+
+
+ Chair +
+

The Laid Back

+
    +
  • + + Leisure and relaxing +
    • +
  • + Comfortable for 4h +
    • +
  • + Vegan leather +
    • +
  • + Weighs 16 kg +
    • +
+
+ 250€ + Add to cart +
+
+
-
-

Our bestselling chairs

-
-
- Chair -
-

The Laid Back

-
    -
  • - - Leisure and relaxing -
    • -
  • - Comfortable for 4h -
    • -
  • - Vegan leather -
    • -
  • - Weighs 16 kg -
    • -
-
- 250€ - Add to cart -
-
-
+
+ Chair +
+

The Worker Bee

+
    +
  • + Work +
    • +
  • + Comfortable for 8h +
    • +
  • + Vegan leather +
    • +
  • + Weighs 22 kg +
    • +
+
+ 525€ + Add to cart +
+
+
-
- Chair -
-

The Worker Bee

-
    -
  • - Work -
    • -
  • - Comfortable for 8h -
    • -
  • - Vegan leather -
    • -
  • - Weighs 22 kg -
    • -
-
- 525€ - Add to cart -
-
-
+
+ Chair +
+

The Chair 4/2

+
    +
  • + Leisure and relaxing +
    • +
  • + Comfortable all day! +
    • +
  • + Organic cotton +
    • +
  • + Weighs 80 kg +
    • +
+
+ 1450€ + Add to cart +
+
+
+
+
-
- Chair -
-

The Chair 4/2

-
    -
  • - Leisure and relaxing -
    • -
  • - Comfortable all day! -
    • -
  • - Organic cotton -
    • -
  • - Weighs 80 kg -
    • -
-
- 1450€ - Add to cart -
-
-
-
-
- -
- Copyright © 2027 by Jonas Schmedtmann. Part of "Build Responsive - Real-World Websites with HTML and CSS" online course. Use for learning - purposes only. -
-
- + +
+ diff --git a/projectfolder/Design/style.css b/projectfolder/Design/style.css index 77dfdffa3..90349dc50 100644 --- a/projectfolder/Design/style.css +++ b/projectfolder/Design/style.css @@ -6,37 +6,44 @@ FONT SIZE SYSTEM (px) 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 */ +:root { + --MainColor: #087f5b; + --SecondaryColor: #343a40; +} + * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } /* ------------------------ */ /* GENERAL STYLES */ /* ------------------------ */ body { - font-family: sans-serif; + font-family: 'Poppins' sans-serif; + color: var(--SecondaryColor); + border-bottom: 8px solid var(--MainColor); } .container { - width: 960px; - margin: 0 auto; + width: 960px; + margin: 0 auto; } header, section { - margin-bottom: 48px; + margin-bottom: 48px; } h2 { - margin-bottom: 48px; + margin-bottom: 48px; } .grid-3-cols { - display: grid; - grid-template-columns: repeat(3, 1fr); - column-gap: 80px; + display: grid; + grid-template-columns: repeat(3, 1fr); + column-gap: 80px; } /* ------------------------ */ @@ -45,26 +52,26 @@ h2 { /* HEADER */ header { - display: grid; - grid-template-columns: repeat(2, 1fr); - column-gap: 80px; - margin-top: 48px; + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 80px; + margin-top: 48px; } .header-text-box { - align-self: center; + align-self: center; } h1 { - margin-bottom: 24px; + margin-bottom: 24px; } .header-text { - margin-bottom: 24px; + margin-bottom: 24px; } img { - width: 100%; + width: 100%; } /* FEATURES */ @@ -72,7 +79,7 @@ img { } .features-title { - margin-bottom: 16px; + margin-bottom: 16px; } .features-text { @@ -83,52 +90,71 @@ img { } .testimonial-box { - grid-column: 2 / -1; - align-self: center; + grid-column: 2 / -1; + align-self: center; } .testimonial-box h2 { - margin-bottom: 24px; + margin-bottom: 24px; } .testimonial-text { - font-style: italic; - margin-bottom: 24px; + font-style: italic; + margin-bottom: 24px; } /* CHAIRS */ .chair-box { - padding: 24px; + padding: 24px; } h3 { - margin-bottom: 24px; + margin-bottom: 24px; } .chair-details { - list-style: none; - margin-bottom: 24px; + list-style: none; + margin-bottom: 24px; } .chair-details li { - display: flex; - align-items: center; - gap: 12px; - margin-bottom: 24px; + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 24px; } .chair-details li:last-child { - margin-bottom: 0; + margin-bottom: 0; } .chair-icon { } .chair-price { - display: flex; - justify-content: space-between; + display: flex; + justify-content: space-between; } footer { - margin-bottom: 48px; + margin-bottom: 48px; +} +/* Buttons */ + +.btn { + text-decoration: none; +} +.btn--big { + border-color: var(--MainColor); + font-size: 18; + padding: 14px 28px; + color: white; + background-color: var(--MainColor); +} +.btn--small { + border-color: var(--MainColor); + font-size: 12; + padding: 14px 28px; + color: white; + background-color: var(--MainColor); }