From 460658f8cb4ad5d2798e8e772351fe6a819f57bb Mon Sep 17 00:00:00 2001
From: Luciano Zangeronimo
Date: Fri, 18 Nov 2022 21:05:32 -0300
Subject: [PATCH 01/34] feat: Implementing Typography
---
starter/05-Design/index.html | 7 +++++++
starter/05-Design/style.css | 18 +++++++++++++++++-
2 files changed, 24 insertions(+), 1 deletion(-)
diff --git a/starter/05-Design/index.html b/starter/05-Design/index.html
index 92b74fd48..7bd855393 100644
--- a/starter/05-Design/index.html
+++ b/starter/05-Design/index.html
@@ -1,10 +1,17 @@
+
+
+
+
Lisbon Chair Shop
diff --git a/starter/05-Design/style.css b/starter/05-Design/style.css
index 77dfdffa3..a76d0b94f 100644
--- a/starter/05-Design/style.css
+++ b/starter/05-Design/style.css
@@ -16,7 +16,7 @@ FONT SIZE SYSTEM (px)
/* GENERAL STYLES */
/* ------------------------ */
body {
- font-family: sans-serif;
+ font-family: "Inter", sans-serif;
}
.container {
@@ -31,6 +31,8 @@ section {
h2 {
margin-bottom: 48px;
+ font-size: 36px;
+ letter-spacing: -0.5px;
}
.grid-3-cols {
@@ -57,10 +59,15 @@ header {
h1 {
margin-bottom: 24px;
+ font-size: 44px;
+ line-height: 1.1;
+ letter-spacing: -1px;
}
.header-text {
margin-bottom: 24px;
+ font-size: 18px;
+ line-height: 1.7;
}
img {
@@ -73,9 +80,12 @@ img {
.features-title {
margin-bottom: 16px;
+ font-size: 20px;
}
.features-text {
+ font-size: 18px;
+ line-height: 1.7;
}
/* TESTIMONIAL */
@@ -89,11 +99,14 @@ img {
.testimonial-box h2 {
margin-bottom: 24px;
+ font-size: 24px;
}
.testimonial-text {
font-style: italic;
margin-bottom: 24px;
+ font-size: 18px;
+ line-height: 1.7;
}
/* CHAIRS */
@@ -103,6 +116,7 @@ img {
h3 {
margin-bottom: 24px;
+ font-size: 20px;
}
.chair-details {
@@ -127,8 +141,10 @@ h3 {
.chair-price {
display: flex;
justify-content: space-between;
+ font-size: 20px;
}
footer {
margin-bottom: 48px;
+ font-size: 14px;
}
From db39c6b607cd451d290bfd6a09a43b1920a99c7a Mon Sep 17 00:00:00 2001
From: Luciano Zangeronimo
Date: Sat, 19 Nov 2022 09:31:55 -0300
Subject: [PATCH 02/34] feat: implementing icons
---
starter/05-Design/style.css | 36 ++++++++++++++++++++++++++++++++++++
1 file changed, 36 insertions(+)
diff --git a/starter/05-Design/style.css b/starter/05-Design/style.css
index a76d0b94f..0007b61d9 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;
@@ -17,6 +22,8 @@ FONT SIZE SYSTEM (px)
/* ------------------------ */
body {
font-family: "Inter", sans-serif;
+ color: #343a40;
+ border-bottom: 8px solid #087f5b;
}
.container {
@@ -41,6 +48,31 @@ 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;
+}
+
+.btn:hover,
+.btn:active {
+ background-color: #099268;
+}
+
+.btn--big {
+ font-size: 18px;
+ padding: 16px 32px;
+}
+
+.btn--small {
+ font-size: 14px;
+ padding: 8px 12px;
+}
+
/* ------------------------ */
/* COMPONENT STYLES */
/* ------------------------ */
@@ -90,6 +122,9 @@ img {
/* TESTIMONIAL */
.testimonial-section {
+ background-color: #087f5b;
+ color: #fff;
+ padding: 24px;
}
.testimonial-box {
@@ -147,4 +182,5 @@ h3 {
footer {
margin-bottom: 48px;
font-size: 14px;
+ color: #495057;
}
From ba669bc78fdb3f58acc41bfd0aedaa39452a18d0 Mon Sep 17 00:00:00 2001
From: Luciano Zangeronimo
Date: Sat, 19 Nov 2022 10:01:10 -0300
Subject: [PATCH 03/34] feat: implementing icons
---
starter/05-Design/index.html | 217 +++++++++++++++++++++++++++++++++++
starter/05-Design/style.css | 7 ++
2 files changed, 224 insertions(+)
diff --git a/starter/05-Design/index.html b/starter/05-Design/index.html
index 7bd855393..57ad5ee0d 100644
--- a/starter/05-Design/index.html
+++ b/starter/05-Design/index.html
@@ -34,6 +34,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
@@ -42,6 +57,21 @@
What makes our chairs special
+
+
+
+
Maximal comfort
@@ -52,6 +82,21 @@
What makes our chairs special
+
+
+
+
Ethical and sustainable
@@ -87,16 +132,76 @@
Our bestselling chairs
The Laid Back
+
+
+
+
Leisure and relaxing
+
+
+
+
Comfortable for 4h
+
+
+
+
Vegan leather
+
+
+
+
Weighs 16 kg
@@ -113,15 +218,71 @@
The Laid Back
The Worker Bee
+
+
+
Work
+
+
+
Comfortable for 8h
+
+
+
Vegan leather
+
+
+
Weighs 22 kg
@@ -138,15 +299,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 0007b61d9..02c24a1b1 100644
--- a/starter/05-Design/style.css
+++ b/starter/05-Design/style.css
@@ -108,6 +108,10 @@ img {
/* FEATURES */
.features-icon {
+ stroke: #087f5b;
+ width: 32px;
+ height: 32px;
+ margin-bottom: 16px;
}
.features-title {
@@ -171,6 +175,9 @@ h3 {
}
.chair-icon {
+ stroke: #087f5b;
+ width: 24px;
+ height: 24px;
}
.chair-price {
From f185411fcf11ec11a6c557d6c964ca41e0229b64 Mon Sep 17 00:00:00 2001
From: Luciano Zangeronimo
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 @@ The Chair 4/2
- Copyright © 2027 by Jonas Schmedtmann. Part of "Build Responsive
- Real-World Websites with HTML and CSS" online course. Use for learning
- purposes only.
+ 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/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
Date: Sun, 20 Nov 2022 07:43:22 -0300
Subject: [PATCH 07/34] feat: building an accordion component
---
starter/06-Components/Accordion/index.html | 136 +++++++++++++++++++++
starter/06-Components/Accordion/style.css | 95 ++++++++++++++
2 files changed, 231 insertions(+)
create mode 100644 starter/06-Components/Accordion/index.html
create mode 100644 starter/06-Components/Accordion/style.css
diff --git a/starter/06-Components/Accordion/index.html b/starter/06-Components/Accordion/index.html
new file mode 100644
index 000000000..021a84bcf
--- /dev/null
+++ b/starter/06-Components/Accordion/index.html
@@ -0,0 +1,136 @@
+
+
+
+
+
+
+
+ Accordion Component
+
+
+
+
+
+
+
+
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/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
Date: Sun, 20 Nov 2022 09:23:54 -0300
Subject: [PATCH 08/34] feat: building a carousel component
---
starter/06-Components/Carousel/index.html | 71 ++++++++++++
starter/06-Components/Carousel/style.css | 130 ++++++++++++++++++++++
2 files changed, 201 insertions(+)
create mode 100644 starter/06-Components/Carousel/index.html
create mode 100644 starter/06-Components/Carousel/style.css
diff --git a/starter/06-Components/Carousel/index.html b/starter/06-Components/Carousel/index.html
new file mode 100644
index 000000000..71648295d
--- /dev/null
+++ b/starter/06-Components/Carousel/index.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+
+
+ Carousel Component
+
+
+
+
+
+
+
+
+
+ "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Saepe,
+ dignissimos itaque minima aut. Rerum odit qui nostrum officia fugit,
+ quae sit ut consequuntur."
+
+ Maria de Almeida
+ Senior Product Manager at EDP Comercial
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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
Date: Sun, 20 Nov 2022 11:32:31 -0300
Subject: [PATCH 09/34] feat: building a table component
---
starter/06-Components/Table/index.html | 55 ++++++++++++++++++++++++
starter/06-Components/Table/style.css | 58 ++++++++++++++++++++++++++
2 files changed, 113 insertions(+)
create mode 100644 starter/06-Components/Table/index.html
create mode 100644 starter/06-Components/Table/style.css
diff --git a/starter/06-Components/Table/index.html b/starter/06-Components/Table/index.html
new file mode 100644
index 000000000..6bb73eabb
--- /dev/null
+++ b/starter/06-Components/Table/index.html
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+
+ Table Component
+
+
+
+
+
+
+
+
+ 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
+
+
+
+
+
diff --git a/starter/06-Components/Table/style.css b/starter/06-Components/Table/style.css
new file mode 100644
index 000000000..e553a5d17
--- /dev/null
+++ b/starter/06-Components/Table/style.css
@@ -0,0 +1,58 @@
+/*
+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;
+}
+
+table {
+ width: 800px;
+ margin: 100px auto;
+ border-collapse: collapse;
+ font-size: 18px;
+}
+
+th,
+td {
+ /* border: 1px solid #343a40; */
+ padding: 16px 24px;
+ text-align: left;
+}
+
+thead tr {
+ background-color: #087f5b;
+ color: #fff;
+}
+
+thead th {
+ width: 25%;
+}
+
+tbody tr:nth-child(odd) {
+ background-color: #f8f9fa;
+}
+
+tbody tr:nth-child(even) {
+ background-color: #e9ecef;
+}
From 13c9110b967160bc3a9fd5384985944bf50a2486 Mon Sep 17 00:00:00 2001
From: Zangeronimo
Date: Sun, 20 Nov 2022 19:06:55 -0300
Subject: [PATCH 10/34] feat: building a paignation component
---
starter/06-Components/Table/index.html | 43 ++++++++++++++++++++
starter/06-Components/Table/style.css | 55 +++++++++++++++++++++++++-
2 files changed, 97 insertions(+), 1 deletion(-)
diff --git a/starter/06-Components/Table/index.html b/starter/06-Components/Table/index.html
index 6bb73eabb..3e650cc49 100644
--- a/starter/06-Components/Table/index.html
+++ b/starter/06-Components/Table/index.html
@@ -51,5 +51,48 @@
+
+