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 @@ -42,6 +57,21 @@
What makes our chairs special
+
+
Maximal comfort
@@ -52,6 +82,21 @@What makes our chairs special
+
+
Date: Sat, 19 Nov 2022 10:23:42 -0300
Subject: [PATCH 04/34] feat: implementing shadows
---
starter/05-Design/style.css | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/starter/05-Design/style.css b/starter/05-Design/style.css
index 02c24a1b1..8a440c8fc 100644
--- a/starter/05-Design/style.css
+++ b/starter/05-Design/style.css
@@ -94,6 +94,7 @@ h1 {
font-size: 44px;
line-height: 1.1;
letter-spacing: -1px;
+ /* text-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); */
}
.header-text {
@@ -149,6 +150,10 @@ img {
}
/* CHAIRS */
+.chair {
+ box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.07);
+}
+
.chair-box {
padding: 24px;
}
From 4328d453fae82c46e4a2bdeaaaca6f636c57b818 Mon Sep 17 00:00:00 2001
From: Luciano Zangeronimo
Date: Sat, 19 Nov 2022 10:40:15 -0300
Subject: [PATCH 05/34] feat: implementing border-radius
---
starter/05-Design/style.css | 12 ++++++++++++
1 file changed, 12 insertions(+)
diff --git a/starter/05-Design/style.css b/starter/05-Design/style.css
index 8a440c8fc..eeb816a35 100644
--- a/starter/05-Design/style.css
+++ b/starter/05-Design/style.css
@@ -56,6 +56,7 @@ h2 {
text-transform: uppercase;
font-weight: 500;
display: inline-block;
+ border-radius: 100px;
}
.btn:hover,
@@ -73,6 +74,10 @@ h2 {
padding: 8px 12px;
}
+img {
+ border-radius: 12px;
+}
+
/* ------------------------ */
/* COMPONENT STYLES */
/* ------------------------ */
@@ -130,6 +135,7 @@ img {
background-color: #087f5b;
color: #fff;
padding: 24px;
+ border-radius: 12px;
}
.testimonial-box {
@@ -152,6 +158,12 @@ img {
/* 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 {
From d546ac3234831feeb5bb7d7432d1510c130aedbe Mon Sep 17 00:00:00 2001
From: Luciano Zangeronimo
Date: Sat, 19 Nov 2022 15:44:20 -0300
Subject: [PATCH 06/34] feat: implementing whitespace and visual hierarchy
---
starter/05-Design/index.html | 6 +++---
starter/05-Design/style.css | 20 +++++++++++++-------
2 files changed, 16 insertions(+), 10 deletions(-)
diff --git a/starter/05-Design/index.html b/starter/05-Design/index.html
index 57ad5ee0d..1ae166d5f 100644
--- a/starter/05-Design/index.html
+++ b/starter/05-Design/index.html
@@ -377,9 +377,9 @@
diff --git a/starter/05-Design/style.css b/starter/05-Design/style.css
index eeb816a35..c00629883 100644
--- a/starter/05-Design/style.css
+++ b/starter/05-Design/style.css
@@ -33,7 +33,7 @@ body {
header,
section {
- margin-bottom: 48px;
+ margin-bottom: 96px;
}
h2 {
@@ -87,7 +87,7 @@ header {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 80px;
- margin-top: 48px;
+ margin-top: 64px;
}
.header-text-box {
@@ -95,7 +95,7 @@ header {
}
h1 {
- margin-bottom: 24px;
+ margin-bottom: 32px;
font-size: 44px;
line-height: 1.1;
letter-spacing: -1px;
@@ -117,7 +117,7 @@ img {
stroke: #087f5b;
width: 32px;
height: 32px;
- margin-bottom: 16px;
+ margin-bottom: 24px;
}
.features-title {
@@ -153,6 +153,11 @@ img {
margin-bottom: 24px;
font-size: 18px;
line-height: 1.7;
+ color: #e6fcf5;
+}
+
+.testimonial-author {
+ color: #c3fae8;
}
/* CHAIRS */
@@ -167,7 +172,7 @@ img {
}
.chair-box {
- padding: 24px;
+ padding: 32px;
}
h3 {
@@ -177,14 +182,14 @@ h3 {
.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 {
@@ -201,6 +206,7 @@ h3 {
display: flex;
justify-content: space-between;
font-size: 20px;
+ align-items: center;
}
footer {
From 8a29140145b830954ff517c7db3769cced3eb99f Mon Sep 17 00:00:00 2001
From: Luciano Zangeronimo Ethical and sustainable
@@ -87,16 +132,76 @@Our bestselling chairs
The Laid Back
- + + Leisure and relaxing
- + + Comfortable for 4h
- + + Vegan leather
- + + Weighs 16 kg
The Laid Back
The Worker Bee
- + Work
- + Comfortable for 8h
- + Vegan leather
- + Weighs 22 kg
The Worker Bee
The Chair 4/2
- + Leisure and relaxing
- + Comfortable all day!
- + Organic cotton
- + Weighs 80 kg
The Chair 4/2
+
+
+
diff --git a/starter/06-Components/Accordion/style.css b/starter/06-Components/Accordion/style.css
new file mode 100644
index 000000000..547abbf84
--- /dev/null
+++ b/starter/06-Components/Accordion/style.css
@@ -0,0 +1,95 @@
+/*
+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
+*/
+
+/*
+MAIN COLOR: #087f5b
+GREY COLOR: #343a40
+*/
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+/* ------------------------ */
+/* GENERAL STYLES */
+/* ------------------------ */
+body {
+ font-family: "Inter", sans-serif;
+ color: #343a40;
+ line-height: 1;
+}
+
+.accordion {
+ width: 700px;
+ margin: 0 auto;
+
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+
+.item {
+ box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
+ padding: 24px;
+
+ display: grid;
+ grid-template-columns: auto 1fr auto;
+ column-gap: 24px;
+ row-gap: 32px;
+ align-items: center;
+}
+
+.number,
+.text {
+ font-size: 24px;
+ font-weight: 500;
+}
+
+.number {
+ color: #ced4da;
+}
+
+.icon {
+ width: 24px;
+ height: 24px;
+ stroke: #087f5b;
+}
+
+.hidden-box {
+ grid-column: 2;
+ display: none;
+}
+
+.hidden-box p {
+ line-height: 1.6;
+ margin-bottom: 24px;
+}
+
+.hidden-box ul {
+ color: #868e96;
+ margin-left: 20px;
+
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.open {
+ border-top: 4px solid #087f5b;
+}
+
+.open .number,
+.open .text {
+ color: #087f5b;
+}
+
+.open .hidden-box {
+ display: block;
+}
From 495b6a3e1b370b96c5fe37b59760b6ee46e14694 Mon Sep 17 00:00:00 2001
From: Luciano Zangeronimo
+
+
+ 01
+Where are these chairs assembled?
+ +
+
+ + Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia dolore + culpa saepe rerum voluptates officia tempora deleniti repellat + laborum, cupiditate hic cumque amet impedit eius. Sint nobis + molestiae quisquam consequuntur! +
+-
+
- + Sit quaerat quis odio quasi tempore quae harum ratione sint eos + +
- Lorem ipsum dolor sit amet consectetur adipisicing elit +
- + quis odio quasi tempore quae harum ratione sint eos atque vero + +
- + quidem doloremque reprehenderit rem cum corrupti ab, aut hic + +
+
+
+ 02
+How long do I have to return my chair?
+ +
+
+ + Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia dolore + culpa saepe rerum voluptates officia tempora deleniti repellat + laborum, cupiditate hic cumque amet impedit eius. Sint nobis + molestiae quisquam consequuntur! +
+-
+
- + Sit quaerat quis odio quasi tempore quae harum ratione sint eos + +
- Lorem ipsum dolor sit amet consectetur adipisicing elit +
- + quis odio quasi tempore quae harum ratione sint eos atque vero + +
- + quidem doloremque reprehenderit rem cum corrupti ab, aut hic + +
+
+ 03
+Do you ship to countries outside the EU?
+ +
+
+ + Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia dolore + culpa saepe rerum voluptates officia tempora deleniti repellat + laborum, cupiditate hic cumque amet impedit eius. Sint nobis + molestiae quisquam consequuntur! +
+-
+
- + Sit quaerat quis odio quasi tempore quae harum ratione sint eos + +
- Lorem ipsum dolor sit amet consectetur adipisicing elit +
- + quis odio quasi tempore quae harum ratione sint eos atque vero + +
- + quidem doloremque reprehenderit rem cum corrupti ab, aut hic + +
+ 
+
+
+
diff --git a/starter/06-Components/Carousel/style.css b/starter/06-Components/Carousel/style.css
new file mode 100644
index 000000000..ae6a0fbc4
--- /dev/null
+++ b/starter/06-Components/Carousel/style.css
@@ -0,0 +1,130 @@
+/*
+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
+*/
+
+/*
+MAIN COLOR: #087f5b
+GREY COLOR: #343a40
+*/
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+/* ------------------------ */
+/* GENERAL STYLES */
+/* ------------------------ */
+body {
+ font-family: "Inter", sans-serif;
+ color: #343a40;
+ line-height: 1;
+}
+
+.carousel {
+ width: 800px;
+ margin: 100px auto;
+ background-color: #087f5b;
+ padding: 32px 48px 32px 86px;
+ border-radius: 8px;
+
+ display: flex;
+ align-items: center;
+ gap: 86px;
+
+ position: relative;
+}
+
+img {
+ height: 200px;
+ border-radius: 8px;
+ transform: scale(1.5);
+
+ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
+}
+
+.testimonial {
+}
+
+.testimonial-text {
+ font-size: 18px;
+ font-weight: 500;
+ line-height: 1.5;
+ margin-bottom: 32px;
+ color: #e6fcf5;
+}
+
+.testimonial-author {
+ font-size: 14px;
+ margin-bottom: 4px;
+ color: #c3fae8;
+}
+
+.testimonial-job {
+ font-size: 12px;
+ color: #c3fae8;
+}
+
+.btn {
+ background-color: #fff;
+ border: none;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ position: absolute;
+ top: 50%;
+
+ cursor: pointer;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+}
+
+.btn--left {
+ left: 0;
+ transform: translate(-50%, -50%);
+}
+
+.btn--right {
+ right: 0;
+ transform: translate(50%, -50%);
+}
+
+.btn-icon {
+ height: 24px;
+ width: 24px;
+
+ stroke: #087f5b;
+}
+
+.dots {
+ position: absolute;
+ left: 50%;
+ bottom: 0;
+ transform: translate(-50%, 32px);
+
+ display: flex;
+ gap: 12px;
+}
+
+.dot {
+ height: 12px;
+ width: 12px;
+
+ background-color: #fff;
+ border: 2px solid #087f5b;
+ border-radius: 50%;
+ cursor: pointer;
+}
+
+.dot--fill {
+ background-color: #087f5b;
+}
From 2582247a55b29d47b495921e7c145d5ba955ba24 Mon Sep 17 00:00:00 2001
From: Luciano Zangeronimo
+ ++ + + + + ++ "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Saepe, + dignissimos itaque minima aut. Rerum odit qui nostrum officia fugit, + quae sit ut consequuntur." +
+ +Senior Product Manager at EDP Comercial
+
+
+
+
+
+
+ | Chair | +The Laid Back | +The Worker Bee | +The Chair 4/2 | +
|---|---|---|---|
| Width | +80 cm | +60 cm | +220 cm | +
| Height | +100 cm | +110 cm | +90 cm | +
| Depth | +70 cm | +65 cm | +80 cm | +
| Weight | +16 kg | +22 kg | +80 kg | +
+
+
+
+
+
+
+
+ ...
+
+
+