started stuff

Author: Abernachy

projectfolder/Design/index.html

@@ -8,7 +8,6 @@
 			content="width=device-width, initial-scale=1.0"
 		/>
 
-
 		<link rel="stylesheet" href="style.css" />
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -38,6 +37,20 @@ <h1>We design and build better chairs, for a better life</h1>
 				<h2>What makes our chairs special</h2>
 				<div class="grid-3-cols">
 					<div>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="features-icon"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							stroke-width="2"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
+							/>
+						</svg>
 						<p class="features-title">
 							<strong>Science meets design</strong>
 						</p>
@@ -48,6 +61,20 @@ <h2>What makes our chairs special</h2>
 					</div>
 
 					<div>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="features-icon"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							stroke-width="2"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+							/>
+						</svg>
 						<p class="features-title">
 							<strong>Maximal comfort</strong>
 						</p>
@@ -58,6 +85,20 @@ <h2>What makes our chairs special</h2>
 					</div>
 
 					<div>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="features-icon"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							stroke-width="2"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+							/>
+						</svg>
 						<p class="features-title">
 							<strong>Ethical and sustainable</strong>
 						</p>
@@ -96,6 +137,20 @@ <h2>Our bestselling chairs</h2>
 							<h3>The Laid Back</h3>
 							<ul class="chair-details">
 								<li>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="features-icon"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+										stroke-width="2"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
+										/>
+									</svg>
 									<!-- Span is a generic INLINE text element, it doesn't have any meaning. It's like a div element, but inline -->
 									<span>Leisure and relaxing</span>
 								</li>
@@ -111,11 +166,7 @@ <h3>The Laid Back</h3>
 							</ul>
 							<div class="chair-price">
 								<strong>250€</strong>
-									<span>Weighs 22 kg</span>
-								</li>
-							</ul>
-							<div class="chair-price">
-								<strong>525€</strong>
+
 								<a href="#" class="btn btn--small">Add to cart</a>
 							</div>
 						</div>
@@ -141,7 +192,7 @@ <h3>The Worker Bee</h3>
 							</ul>
 							<div class="chair-price">
 								<strong>525€</strong>
-						
+
 								<a href="#" class="btn btn--small">Add to cart</a>
 							</div>
 						</div>

projectfolder/Design/style.css

@@ -6,7 +6,6 @@ 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
 
@@ -26,9 +25,8 @@ FONT SIZE SYSTEM (px)
 /* GENERAL STYLES */
 /* ------------------------ */
 body {
-
 	/* font-family: sans-serif; */
-	
+
 	font-family: 'Poppins' sans-serif;
 	color: var(--SecondaryColor);
 	border-bottom: 8px solid var(--MainColor);
@@ -54,7 +52,6 @@ h2 {
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);
 	column-gap: 80px;
-
 }
 
 .btn:link,
@@ -120,6 +117,10 @@ img {
 
 /* FEATURES */
 .features-icon {
+	stroke: var(--MainColor);
+	width: 32px;
+	height: 32px;
+	margin-bottom: 16px;
 }
 
 .features-title {