feat: implementing colors

Author: Uribouz

starter/05-Design/UsefulLinks.txt

@@ -7,8 +7,10 @@ Typeface toolbox
 
 Color toolbox
     OC- Open Color
+        https://yeun.github.io/open-color/
     tailwindcss
     FLAT UI COLORS 2
     palleton.com
     coolors
+        https://coolors.co/contrast-checker/112a46-acc8e5
     Tint & Shade Generator

starter/05-Design/style.css

@@ -6,6 +6,10 @@ FONT SIZE SYSTEM (px)
 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
 */
 
+/* MAIN COLOR: #087f5b */
+/* TINT COLOR: #20c997 #12b886 #0ca678 #099268*/
+/* GRAY COLOR: #343a40 */
+
 * {
   margin: 0;
   padding: 0;
@@ -18,6 +22,8 @@ FONT SIZE SYSTEM (px)
 body {
   /* * Use 'Inter' first, if not possible use 'sans-serif'  */
   font-family: "Inter", sans-serif;
+  color: #343a40;
+  border-bottom: 8px solid #087f5b;
 }
 
 .container {
@@ -43,6 +49,30 @@ h2 {
   column-gap: 80px;
 }
 
+.btn:link,
+.btn:visited {
+  background-color: #087f5b;
+  color: #fff;
+  text-decoration: none;
+  text-transform: uppercase;
+  display: inline-block;
+  font-weight: 500;
+}
+
+.btn:hover,
+.btn:active {
+  background-color: #0ca678;
+}
+
+.btn--big {
+  font-size: 18px;
+  padding: 16px 32px;
+}
+.btn--small {
+  font-size: 14px;
+  padding: 8px 12px;
+}
+
 /* ------------------------ */
 /* COMPONENT STYLES */
 /* ------------------------ */
@@ -153,4 +183,11 @@ footer {
   margin-bottom: 48px;
   /* 12 / 14 / 16 */
   font-size: 14px;
+  color: #495057;
+}
+
+.testimonial-section {
+  background-color: #087f5b;
+  color: #fff;
+  padding: 24px;
 }