-
- 
-
+
+
+
+
+ Lisbon Chair Shop
+
+
+
+
diff --git a/projectfolder/Design/style.css b/projectfolder/Design/style.css
index 77dfdffa3..dc465e609 100644
--- a/projectfolder/Design/style.css
+++ b/projectfolder/Design/style.css
@@ -6,65 +6,98 @@ 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;
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
}
/* ------------------------ */
/* GENERAL STYLES */
/* ------------------------ */
body {
- font-family: sans-serif;
+ /* font-family: sans-serif; */
+ font-family: 'Poppins', sans-serif;
+ color: #343a40;
}
.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;
+ font-size: 30px;
+ letter-spacing: -1px;
}
.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;
}
+.btn:link,
+.btn:visited {
+ background-color: #087f5b;
+ color: #fff;
+ text-decoration: none;
+ text-transform: uppercase;
+
+ padding: 16px 32px;
+ display: inline-block;
+ font-weight: 500;
+ font-size: 18px;
+}
+
+.btn:hover,
+.btn:active {
+ background-color: #099268;
+}
/* ------------------------ */
/* COMPONENT STYLES */
/* ------------------------ */
/* 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;
+ font-size: 44px;
+ /* / 44 / 52 / 62 / */
+ line-height: 1.1;
+ letter-spacing: -2px;
}
.header-text {
- margin-bottom: 24px;
+ margin-bottom: 24px;
+ /* 16 / 18 / 20 */
+ font-size: 18px;
+ line-height: 1.7;
}
img {
- width: 100%;
+ width: 100%;
}
/* FEATURES */
@@ -72,10 +105,13 @@ img {
}
.features-title {
- margin-bottom: 16px;
+ margin-bottom: 16px;
+ font-size: 20px;
}
.features-text {
+ font-size: 18px;
+ line-height: 1.7;
}
/* TESTIMONIAL */
@@ -83,52 +119,59 @@ 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;
+ /* 20 / 24 / 30 */
+ font-size: 24px;
}
.testimonial-text {
- font-style: italic;
- margin-bottom: 24px;
+ font-style: italic;
+ margin-bottom: 24px;
+ font-size: 18px;
+ line-height: 1.7;
}
/* CHAIRS */
.chair-box {
- padding: 24px;
+ padding: 24px;
}
h3 {
- margin-bottom: 24px;
+ margin-bottom: 24px;
+ font-size: 20px;
}
.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;
+ font-size: 20px;
}
footer {
- margin-bottom: 48px;
+ margin-bottom: 48px;
+ font-size: 14px;
}
From ec2bde6b0b3af943fd9fc6a5cfceb2b00ba411ce Mon Sep 17 00:00:00 2001
From: Abernachy
-
- 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 -
-
+
+
+
-
-
-
-
+
+
-
-
-
-
-
+
+
+
+ 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 +
+ 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! +
+
- 
-
-
-
-
- "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! -- -
+
+
+
+
+
+ "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! ++ +
Our bestselling chairs
-
-
- 
-
+
+
+
+ 
+
+
+
-
-
- The Laid Back
--
-
- - - Leisure and relaxing - -
- - Comfortable for 4h - -
- - Vegan leather - -
- - Weighs 16 kg - -
- 250€
- Add to cart
-
- Our bestselling chairs
+
+
+
+
-
- 
-
+
+
+
-
-
-
-
-
+
+
+ The Laid Back
+-
+
- + + Leisure and relaxing + +
- + Comfortable for 4h + +
- + Vegan leather + +
- + Weighs 16 kg + +
+ 250€
+ Add to cart
+
+
-
-
- The Worker Bee
--
-
- - Work - -
- - Comfortable for 8h - -
- - Vegan leather - -
- - Weighs 22 kg - -
- 525€
- Add to cart
-
-
+
+
+ The Worker Bee
+-
+
- + Work + +
- + Comfortable for 8h + +
- + Vegan leather + +
- + Weighs 22 kg + +
+ 525€
+ Add to cart
+
+
-
-
- The Chair 4/2
--
-
- - Leisure and relaxing - -
- - Comfortable all day! - -
- - Organic cotton - -
- - Weighs 80 kg - -
- 1450€
- Add to cart
-
-
+
+
+ The Chair 4/2
+-
+
- + Leisure and relaxing + +
- + Comfortable all day! + +
- + Organic cotton + +
- + Weighs 80 kg + +
+ 1450€
+ Add to cart
+
+