Finished Foodie Landing Page project.

carla-ng · Apr 25, 2024 · 85f86c2 · 85f86c2
1 parent 9649f67
commit 85f86c2
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 60 deletions.
diff --git a/index.html b/index.html
@@ -41,6 +41,13 @@ <h4>Meme Generator</h4>
                 </div>
                 <h4>Tenzies Game</h4>
             </a>
+
+            <a href="https://carla-ng-react.netlify.app/foodielandingpage" target="_blank">
+                <div class="projects__list-image">
+                    <img src="react-practice/main-project/public/foodielandingpage/foodie-preview.jpg" alt="Foodie Landing Page preview">
+                </div>
+                <h4>Foodie Landing Page</h4>
+            </a>
         </div>
 
     </div>

diff --git a/react-practice/main-project/README.md b/react-practice/main-project/README.md
@@ -25,6 +25,20 @@ AirbnbExperiences
 ### :globe_with_meridians: Demo
 [https://carla-ng-react.netlify.app/airbnbexperiences](https://carla-ng-react.netlify.app/airbnbexperiences)
 
+
+<br>
+
+### :hammer_and_pick: Built with
+* React
+* Vite
+* JavaScript
+* CSS
+
+<br>
+
+### :clap: Acknowledgments
+* Project ideas by [Scrimba](https://scrimba.com/)
+
 <br>
 <hr>
 <br>
@@ -49,6 +63,19 @@ MemeGenerator
 ### :globe_with_meridians: Demo
 [https://carla-ng-react.netlify.app/memegenerator](https://carla-ng-react.netlify.app/memegenerator)
 
+<br>
+
+### :hammer_and_pick: Built with
+* React
+* Vite
+* JavaScript
+* CSS
+
+<br>
+
+### :clap: Acknowledgments
+* Project ideas by [Scrimba](https://scrimba.com/)
+
 <br>
 <hr>
 <br>
@@ -73,18 +100,56 @@ Tenzies
 ### :globe_with_meridians: Demo
 [https://carla-ng-react.netlify.app/tenzies](https://carla-ng-react.netlify.app/tenzies)
 
+<br>
+
+### :hammer_and_pick: Built with
+* React
+* Vite
+* JavaScript
+* CSS
+* [React Confetti](https://github.com/alampros/react-confetti)
+
+<br>
+
+### :clap: Acknowledgments
+* Project ideas by [Scrimba](https://scrimba.com/)
+
 <br>
 <hr>
 <br>
 
-## :hammer_and_pick: Built with
+## Foodie Landing Page
+
+<p align="center">
+    <img src="https://raw.githubusercontent.com/carla-ng/web-development-practice/main/react-practice/main-project/public/foodielandingpage/foodie-preview.jpg" alt="Foodie Landing Page preview">
+</p>
+
+<br>
+
+A landing page for a food delivery service.
+
+<br>
+
+### Project folder
+FoodielandingPage
+
+<br>
+
+### :globe_with_meridians: Demo
+[https://carla-ng-react.netlify.app/foodielandingpage](https://carla-ng-react.netlify.app/foodielandingpage)
+
+<br>
+
+### :hammer_and_pick: Built with
 * React
 * Vite
 * JavaScript
 * CSS
+* Material UI
+* React Icons
 
 <br>
 
 ## :clap: Acknowledgments
-* Project ideas by [Scrimba](https://scrimba.com/) (Airbnb Experiences Clone, Meme Generator, Tenzies)
-* [React Conffeti](https://github.com/alampros/react-confetti) (Tenzies)
+* Project idea and design by [TheHyperArt](https://www.thehyperart.com/)
+
diff --git a/react-practice/main-project/public/foodielandingpage/foodie-preview.jpg b/react-practice/main-project/public/foodielandingpage/foodie-preview.jpg
diff --git a/react-practice/main-project/src/App.css b/react-practice/main-project/src/App.css
@@ -349,10 +349,10 @@ body {
 #foodie-container {
     background-color: #f6f6f6;
     font-family: "Reem Kufi", sans-serif;
-    height: 100vh;
+    height: 100%;
     margin: 0 auto;
-    max-width: 1900px;
-    overflow-x: hidden;
+    max-width: 1540px;
+    overflow: hidden;
     padding: 0 2rem;
     position: relative;
     z-index: 0;
@@ -368,7 +368,7 @@ body {
     }
 
     .primary-button {
-        background-color: white;
+        background-color: #fff;
         border-radius: 5rem;
         border: none;
         cursor: pointer;
@@ -378,9 +378,7 @@ body {
         padding: 0.9rem 1.75rem;
         transition: 0.2s;
 
-        @media (max-width: 1000px) {
-            font-size: 1rem;
-        }
+        @media (max-width: 1000px) { font-size: 1rem; }
     }
 
     .primary-button:hover {
@@ -392,17 +390,15 @@ body {
         color: #4c4c4c;
         max-width: 600px;
 
-        @media (max-width: 800px) { text-align: center;}
+        @media (max-width: 800px) { text-align: center; }
     }
 
     .primary-subheading {
         color: #fe9e0d;
         font-size: 1.15rem;
         font-weight: 700;
 
-        @media (max-width: 800px) {
-            text-align: center;
-        }
+        @media (max-width: 800px) { text-align: center; }
     }
 
     .primary-text {
@@ -440,9 +436,7 @@ body {
         }
     }
 
-    .secondary-button:hover {
-        background-color: #e48f0f;
-    }
+    .secondary-button:hover { background-color: #e48f0f; }
 
     .watch-video-button {
         background-color: transparent;
@@ -470,9 +464,7 @@ body {
             font-size: 3rem;
             margin-right: 1rem;
 
-            @media (max-width: 800px) {
-                margin-right: 0.5rem;
-            }
+            @media (max-width: 800px) { margin-right: 0.5rem; }
         }
     }
 
@@ -512,24 +504,20 @@ body {
                     margin-right: 3rem;
                     text-decoration: none;
 
-                    .navbar-cart-icon {
-                        font-size: 1.15rem;
-                    }
-
                     @media (max-width: 1000px) {
                         font-size: 1rem;
                         margin-right: 1rem;
                     }
+
+                    .navbar-cart-icon { font-size: 1.15rem; }
                 }
             }
         }
 
         .navbar-menu-container {
             display: none;
 
-            @media (max-width: 800px) {
-                display: flex;
-            }
+            @media (max-width: 800px) { display: flex; }
 
             svg {
                 cursor: pointer;
@@ -556,17 +544,11 @@ body {
             top: -100px;
             z-index: -2;
 
-            @media (max-width: 1000px) {
-                max-width: 600px;
-            }
+            @media (max-width: 1000px) { max-width: 600px; }
 
-            @media (max-width: 800px) {
-                max-width: 450px;
-            }
+            @media (max-width: 800px) { max-width: 450px; }
 
-            @media (max-width: 600px) {
-                display: none;
-            }
+            @media (max-width: 600px) { display: none; }
         }
 
         .main-text-section {
@@ -616,9 +598,7 @@ body {
             left: -150px;
             z-index: -2;
 
-            @media (max-width: 600px) {
-                display: none;
-            }
+            @media (max-width: 600px) { display: none; }
         }
 
         .about-section-image-container {
@@ -659,19 +639,15 @@ body {
     .work-section-container {
         margin-top: 15rem;
 
-        @media (max-width: 800px) {
-            margin-top: 5rem;
-        }
+        @media (max-width: 800px) { margin-top: 5rem; }
 
         .work-section-top {
             display: flex;
             align-items: center;
             flex-direction: column;
             justify-content: center;
 
-            h1 {
-                max-width: 700px;
-            } 
+            h1 { max-width: 700px; } 
 
             p {
                 max-width: 600px;
@@ -687,9 +663,7 @@ body {
             flex-wrap: wrap;
             justify-content: center;
 
-            @media (max-width: 800px) {
-                margin-top: 1rem;
-            }
+            @media (max-width: 800px) { margin-top: 1rem; }
 
             .work-section-info {
                 display: flex;
@@ -706,9 +680,7 @@ body {
                 text-align: center;
                 width: 290px;
 
-                h2 {
-                    margin: 1rem 0rem;
-                }
+                h2 { margin: 1rem 0rem; }
 
                 p {
                     display: flex;
@@ -724,9 +696,7 @@ body {
     .testimonials-section-container {
         margin-top: 15rem;
 
-        @media (max-width: 800px) {
-            margin-top: 5rem;
-        }
+        @media (max-width: 800px) { margin-top: 5rem; }
 
         .testimonials-section-top {
             display: flex;
@@ -758,9 +728,7 @@ body {
             padding: 1.5rem 2rem;
             text-align: center;
 
-            h2 {
-                margin-top: 1.5rem;
-            }
+            h2 { margin-top: 1.5rem; }
 
             p {
                 color: #515151;
@@ -836,6 +804,7 @@ body {
         display: flex;
         margin: 10rem 0 6rem 0;
         max-width: 950px;
+        padding-bottom: 5rem;
         width: 100%;
 
         @media (max-width: 800px) {
@@ -878,9 +847,7 @@ body {
                 min-width: 190px;
                 padding: 0;
 
-                @media (max-width: 800px) {
-                    margin: 1rem 0rem;
-                }
+                @media (max-width: 800px) { margin: 1rem 0rem; }
 
                 li {
                     color: #4c4c4c;