css

Author: larry-xue

starter/05-Design/style.css

@@ -34,7 +34,7 @@ body {
 
 header,
 section {
-  margin-bottom: 48px;
+  margin-bottom: 96px;
 }
 
 h2 {
@@ -58,6 +58,9 @@ h2 {
   text-transform: uppercase;
   font-weight: 500;
   display: inline-block;
+  /* gt than height will make it be a completely circle */
+  /* if its a suqare, we can use 50% */
+  border-radius: 100px; 
 }
 
 .btn:hover,
@@ -67,14 +70,18 @@ h2 {
 
 .btn--big {
   font-size: 18px;
-  padding: 16px 32px;
+  padding: 16px 32px; 
 }
 
 .btn--small {
   font-size: 14px;
   padding: 8px 12px;
 }
 
+img {
+  border-radius: 12px;
+}
+
 /* ------------------------ */
 /* COMPONENT STYLES */
 /* ------------------------ */
@@ -84,15 +91,15 @@ header {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   column-gap: 80px;
-  margin-top: 48px;
+  margin-top: 80px;
 }
 
 .header-text-box {
   align-self: center;
 }
 
 h1 {
-  margin-bottom: 24px;
+  margin-bottom: 32px;
   /* 44 / 52 / 62 */
   font-size: 44px;
   line-height: 1.1;
@@ -112,9 +119,6 @@ img {
 }
 
 /* FEATURES */
-.features-icon {
-}
-
 .features-title {
   margin-bottom: 16px;
   font-size: 20px;
@@ -129,14 +133,15 @@ img {
   stroke: #087f5b;
   width: 32px;
   height: 32px;
-  margin-bottom: 16px;
+  margin-bottom: 24px;
 }
 
 /* TESTIMONIAL */
 .testimonial-section {
   background-color: #087f5b;
   color: #fff;
   padding: 24px;
+  border-radius: 12px;
 }
 
 .testimonial-box {
@@ -155,13 +160,23 @@ 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 rgba(0, 0, 0, 0.07);
 }
 
+.chair img {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 .chair-box {
   padding: 24px;
 }
@@ -174,7 +189,7 @@ h3 {
 
 .chair-details {
   list-style: none;
-  margin-bottom: 24px;
+  margin-bottom: 48px;
 }
 
 .chair-details li {
@@ -198,6 +213,7 @@ h3 {
   display: flex;
   justify-content: space-between;
   font-size: 20px;
+  align-items: center;
 }
 
 footer {