Add progress for section 5 and section 6

Author: jrandj

attempt/05-Design/style.css

@@ -6,9 +6,9 @@ FONT SIZE SYSTEM (px)
 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
 */
 
-/*
-MAIN COLOUR: #087f5b
-GREY COLOUR: #343a40
+/* 
+MAIN COLOR: #087f5b
+GREY COLOR: #343a40
 */
 
 * {
@@ -22,8 +22,6 @@ GREY COLOUR: #343a40
 /* ------------------------ */
 body {
   font-family: "Inter", sans-serif;
-  font-size: 18px;
-  line-height: 1.6;
   color: #343a40;
   border-bottom: 8px solid #087f5b;
 }
@@ -35,13 +33,14 @@ body {
 
 header,
 section {
-  margin-bottom: 48px;
+  margin-bottom: 96px;
 }
 
 h2 {
   margin-bottom: 48px;
   font-size: 36px;
   letter-spacing: -0.5px;
+  /* 24 / 30 / 36 */
 }
 
 .grid-3-cols {
@@ -51,14 +50,15 @@ h2 {
 }
 
 .btn:link,
-btn:visited {
+.btn:visited {
   background-color: #087f5b;
   color: #fff;
   text-decoration: none;
   text-transform: uppercase;
+  font-weight: 500;
 
   display: inline-block;
-  font-weight: 500;
+  border-radius: 100px;
 }
 
 .btn:hover,
@@ -70,11 +70,16 @@ btn:visited {
   font-size: 18px;
   padding: 16px 32px;
 }
+
 .btn--small {
   font-size: 14px;
   padding: 8px 12px;
 }
 
+img {
+  border-radius: 12px;
+}
+
 /* ------------------------ */
 /* COMPONENT STYLES */
 /* ------------------------ */
@@ -84,23 +89,27 @@ header {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   column-gap: 80px;
-  margin-top: 48px;
+  margin-top: 64px;
 }
 
 .header-text-box {
   align-self: center;
 }
 
 h1 {
-  margin-bottom: 24px;
+  margin-bottom: 32px;
   font-size: 44px;
   line-height: 1.1;
   letter-spacing: -1px;
+  /* 44 / 52 / 62 */
+
   /* text-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); */
 }
 
 .header-text {
   margin-bottom: 24px;
+  font-size: 18px;
+  line-height: 1.7;
 }
 
 img {
@@ -112,12 +121,11 @@ img {
   stroke: #087f5b;
   width: 32px;
   height: 32px;
-  margin-bottom: 16px;
+  margin-bottom: 24px;
 }
 
 .features-title {
   margin-bottom: 16px;
-  line-height: 1.7;
   font-size: 20px;
 }
 
@@ -131,6 +139,7 @@ img {
   background-color: #087f5b;
   color: #fff;
   padding: 24px;
+  border-radius: 12px;
 }
 
 .testimonial-box {
@@ -140,6 +149,7 @@ img {
 
 .testimonial-box h2 {
   margin-bottom: 24px;
+  /* 20 / 24 / 30 */
   font-size: 24px;
 }
 
@@ -148,15 +158,26 @@ img {
   margin-bottom: 24px;
   font-size: 18px;
   line-height: 1.7;
+  color: ##e6fcf5;
+}
+
+.testimonial-author {
+  color: #c3fae8;
 }
 
 /* CHAIRS */
 .chair {
-  box-shadow: 0px 20px 30px 0px rgb(0, 0, 0, 0.07);
+  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 {
@@ -166,14 +187,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 {
@@ -189,6 +210,7 @@ h3 {
 .chair-price {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   font-size: 20px;
 }