Merge pull request #12 from fuzue/4-change-colors-to-match-the-icon

4 change colors to match the icon
fuzue · Sep 6, 2023 · f675e52 · f675e52
2 parents 49528fd + 3292cf8
commit f675e52
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -23,9 +23,12 @@
     <title>Seasonal Food App</title>
   </head>
 
-  <body class="bg-[#f3ecf1] font-sans m-0 flex flex-col text-[#393232]">
+  <body class="bg-[#f9f3e3] font-sans m-0 flex flex-col text-[#782a33]">
     <header
-      class="bg-[#5a175d] z-50 sticky top-0 flex items-start md:justify-center w-screen flex-wrap text-white "
+
+      class="bg-[#ce3045] z-50 sticky top-0 flex items-start md:justify-center w-screen flex-wrap text-[#f9f3e3]"
+
+
     >
       <h3 class="p-4 md:p-3 font-display text-2xl md:text-4xl">Seasonal Food App</h3>
       <input
@@ -52,15 +55,15 @@ <h3 class="p-4 md:p-3 font-display text-2xl md:text-4xl">Seasonal Food App</h3>
       class="w-full flex flex-col items-center gap-6 md:flex-row md:flex-grow"
     >
       <div
-        class="py-20 text-[#074e67] h-full text-center flex items-center md:flex-1 md:order-2 md:text-left"
+        class="py-20 text-[#782a33] h-full text-center flex items-center md:flex-1 md:order-2 md:text-left"
       >
         <div>
           <p class="mx-7 text-4xl md:text-6xl justify-start">
             Find out when <br />
             it's best to buy <br />
             <strong>your local produce </strong>
           </p>
-          <div class="flex mt-4  items-center">
+          <div class="flex mt-4 pl-2">
             <a href="#">
               <img
                 src="/assets/google-play-badge.png"
@@ -88,7 +91,7 @@ <h3 class="p-4 md:p-3 font-display text-2xl md:text-4xl">Seasonal Food App</h3>
             </button>
             </a>
           </div>
-          <p class="mx-7 -mb-10 text-fuchsia-950">Currently only italian data available 🇮🇹</p>
+          <p class="mx-7 -mb-10 pl-3 text-[#782a33] text-lg">Currently only italian data available 🇮🇹</p>
         </div>
       </div>
       <div
@@ -115,7 +118,9 @@ <h3 class="p-4 md:p-3 font-display text-2xl md:text-4xl">Seasonal Food App</h3>
     </main>
     <!-- FEATURES -->
     <div
-      class=" z-10 md:flex gap-6 md:gap-24 w-full bg-[#05878a] text-slate-50 text-center px-6 xl:px-56 py-5 pt-6 pb-8"
+
+      class="md:flex gap-6 md:gap-24 w-full bg-[#6fa128] text-slate-50 text-center px-6 xl:px-56 py-5 pt-6 pb-8"
+
     >
       <div class="flex flex-col md:basis-1/3 md:justify-center items-center">
         <img src="./assets/icon-month.svg" class="w-10 pt-8 md:pt-2 mb-1" />
@@ -150,7 +155,7 @@ <h3 id="about-the-project" class="text-xl font-display">The idea</h3>
       </div>
     </div>
     <!-- ABOUT US AND CONTACT -->
-    <div class="text-center w-full bg-[#dd9933] text-slate-950 gap-6 px-6 py-2">
+    <div class="text-center w-full bg-[#b3d46a] text-slate-950 gap-6 px-6 py-2">
       <div class="py-5">
         <div class="flex justify-center gap-2 items-center">
           <img src="./assets/github-mark-white.svg" class="w-6" />
@@ -170,12 +175,14 @@ <h3 class="font-display">
             <span class="font-sans text-slate-950">
               <a href="mailto:[email protected]">[email protected]</a>
             </span>
+
           </h3>
+
         </div>
+        <footer class="text-sm font-bold text-center w-full pt-5 bg-[#b3d46a]">
+          MADE BY <a class="text-slate-950 font-bold" href="https://fuzue.tech">FUZUE.TECH</a>
+        </footer> 
       </div>
     </div>
-    <footer class="text-sm text-center w-full py-2">
-      made by <a class="text-slate-950" href="https://fuzue.tech">fuzue.tech</a>
-    </footer>
   </body>
 </html>
diff --git a/style.css b/style.css
@@ -134,7 +134,7 @@ button:focus-visible {
   height: 4px;
   width: 35px;
   border-radius: 2px;
-  background-color: white;
+  background-color: #f9f3e3;
   position: relative;
   display: block;
   transition: all 0.2s ease-in-out;
@@ -150,13 +150,13 @@ button:focus-visible {
   height: 4px;
   width: 35px;
   border-radius: 2px;
-  background-color: white;
+  background-color: #f9f3e3;
   position: absolute;
   content: "";
   transition: all 0.2s ease-in-out;
 }
 #overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
-  background: white;
+  background: #ffefc0;
 }
 input[type=checkbox] {
   display: none;
@@ -176,7 +176,7 @@ input[type=checkbox]:checked ~ #overlay-button span:after {
 }
 #overlay {
   width: 100vw;
-  background: #5a175d;
+  background: #ce3045;
   max-height: 0;
   overflow: hidden;
   transition: all ease-in-out .5s;
@@ -197,7 +197,7 @@ input[type=checkbox]:checked ~ #overlay-button span:after {
   padding: 1em;
 }
 #overlay ul li a {
-  color: white;
+  color: #f9f3e3;
   text-decoration: none;
 }
 
@@ -254,4 +254,4 @@ input[type=checkbox]:checked ~ #overlay-button span:after {
   display: block;
   border-radius: 999px;
   box-shadow: inset 0px -2px 2px rgba(0, 0, 0, 0.5);
-}
+}