We design and build better chairs, for a better life

"We couldn't live without these chairs anymore"

@@ -80,16 +135,76 @@

Our bestselling chairs

The Laid Back

• + + Leisure and relaxing
• + + Comfortable for 4h
• + + Vegan leather
• + + Weighs 16 kg

@@ -106,15 +221,71 @@

The Laid Back

The Worker Bee

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

@@ -131,15 +302,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..8997aaca7 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,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 +33,13 @@ body { header, section { - margin-bottom: 48px; + margin-bottom: 96px; } h2 { margin-bottom: 48px; + font-size: 36px; + letter-spacing: -0.5px; } .grid-3-cols { @@ -39,6 +48,39 @@ h2 { column-gap: 80px; } +.btn:link, +.btn:visited { + background-color: #087f5b; + color: white; + text-decoration: none; + text-transform: uppercase; + font-weight: 500; + display: inline-block; + border-radius: 100px; +} + +.btn:hover, +.btn:active { + background-color: #099268; +} + +.btn { + letter-spacing: 1px; + border-radius: 30px; +} + +.btn--big { + font-size: 16px; + font-weight: 400; + padding: 16px 32px; +} + +.btn--small { + letter-spacing: 0.5px; + font-size: 14px; + padding: 6px 12px; +} + /* ------------------------ */ /* COMPONENT STYLES */ /* ------------------------ */ @@ -48,7 +90,7 @@ header { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 80px; - margin-top: 48px; + margin-top: 64px; } .header-text-box { @@ -56,19 +98,28 @@ header { } h1 { - margin-bottom: 24px; + margin-bottom: 32px; + line-height: 1.1; + font-size: 44px; + letter-spacing: 1.1; } .header-text { margin-bottom: 24px; + line-height: 1.6; } img { width: 100%; + border-radius: 12px; } /* FEATURES */ .features-icon { + height: 32px; + width: 32px; + stroke: #087f5b; + margin-bottom: 24px; } .features-title { @@ -76,10 +127,18 @@ img { } .features-text { + line-height: 1.6; } /* TESTIMONIAL */ .testimonial-section { + background-color: #087f5b; + color: white; + padding: 24px; + border-radius: 12px; +} + +.testimonial-img { } .testimonial-box { @@ -89,32 +148,53 @@ img { .testimonial-box h2 { margin-bottom: 24px; + /* 18 / 20 / 24 / 30 / 36 / 44 / 52 */ + font-size: 24px; } .testimonial-text { font-style: italic; margin-bottom: 24px; + font-size: 18px; + line-height: 1.7; + color: #e6fcf5; +} + +.testimonial-author { + color: #c3fae8; } /* CHAIRS */ + +.chair { + box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.07); + border-radius: 12px; +} + +.chair img { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + .chair-box { - padding: 24px; + padding: 32px; } h3 { margin-bottom: 24px; + font-size: 20px; } .chair-details { list-style: none; - margin-bottom: 24px; + margin-bottom: 48px; } .chair-details li { display: flex; align-items: center; gap: 12px; - margin-bottom: 24px; + margin-bottom: 16px; } .chair-details li:last-child { @@ -122,11 +202,16 @@ h3 { } .chair-icon { + stroke: #087f5b; + width: 24px; + height: 24px; } .chair-price { display: flex; justify-content: space-between; + align-items: center; + font-size: 20px; } footer {