From 672a086e0b51002d4e91c3c8bc53e33bff30e335 Mon Sep 17 00:00:00 2001
From: JSriwongsa <sriwongsa.jtp@gmail.com>
Date: Mon, 29 May 2023 12:41:44 -0500
Subject: [PATCH] added parallax scrolling effect, sticky navbar, footer
 section

---
 restaurant_website/index.html | 58 +++++++++++++++-----------------
 restaurant_website/main.js    | 23 +++++++++++++
 restaurant_website/style.css  | 63 +++++++++++++++++++++++++++++++++++
 3 files changed, 112 insertions(+), 32 deletions(-)

diff --git a/restaurant_website/index.html b/restaurant_website/index.html
index 1e24f94..609e03d 100644
--- a/restaurant_website/index.html
+++ b/restaurant_website/index.html
@@ -293,40 +293,34 @@
                     </div>
                 </div>
             </div>
-
-    </div>
+        </div>
     </section>
 
-
-
-
-        
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+    <section id="footer">
+        <div class="container">
+            <div class="footer-container">
+                <div class="about-us">
+                    <h2><img src="images/logo.png" alt=""></h2>
+                    <p>Discovering the depth of flavors that lie within the simplicity at FUJISAN</p>
+                </div>
+                <div class="open-hours">
+                    <h2>Hours</h2>
+                    <p class="day">MON: <span>Close</span></p>
+                    <p class="day">TUE- THURS: <span>17:00 - 22:00</span></p>
+                    <p class="day">FRI- SUN: <span>17:00 - 23:00</span></p>
+                </div>
+                <div class="contact">
+                    <h2>Contact Us</h2>
+                    <p class="call"> <i class="fas fa-phone"></i>  &nbsp Call us:</p>
+                    <p>123-456-7890</p>
+                    <p class="address"><i class="fas fa-map-marker-alt"></i>  &nbsp Address:</p>
+                    <p>1234 N Lincoln Park, Chicago, IL 010203</p>
+                    <p class="email"><i class="fas fa-envelope"></i>  &nbsp Email Us:</p>
+                    <p>fujisan@email.com</p>
+                </div>
+            </div>
+        </div>
+    </section>
 
 
 
diff --git a/restaurant_website/main.js b/restaurant_website/main.js
index e4c7d04..46db3c9 100644
--- a/restaurant_website/main.js
+++ b/restaurant_website/main.js
@@ -1,3 +1,22 @@
+const nav = document.querySelector("header");
+window.addEventListener("scroll", function(){
+  if(this.document.documentElement.scrollTop>20){
+    nav.classList.add("sticky");
+  }
+  else{
+    nav.classList.remove("sticky");
+  }
+
+})
+
+const Parallax = document.querySelector("#home");
+window.addEventListener("scroll", function(){
+  let offset = window.pageYOffset;
+  Parallax.style.backgroundPositionY = offset * 0.5 +"px";
+});
+
+
+//menu 
 let menu = document.querySelector('nav')
 let menubtn = document.querySelector('.menu-btn')
 let closebtn = document.querySelector('.close-btn')
@@ -9,6 +28,7 @@ closebtn.addEventListener('click', function(){
     menu.classList.remove('active');
 });
 
+//static
 
 const staticContentE1 = document.querySelectorAll('.num');
 
@@ -32,6 +52,7 @@ staticContentE1.forEach((staticContentE1) =>{
   }
 });
 
+//countdown
 
 const openTimeStr = "We are open at 17:00"
 const openTime = parseInt(openTimeStr.substring(15, 20));
@@ -99,3 +120,5 @@ setInterval(
   },
   1000
 )
+
+
diff --git a/restaurant_website/style.css b/restaurant_website/style.css
index 1d6ebcc..6ec51df 100644
--- a/restaurant_website/style.css
+++ b/restaurant_website/style.css
@@ -32,6 +32,10 @@ header{
     background: rgba(243, 241, 241, 0.85);
     position: fixed;
     z-index: 10;
+    transition: all 0.5s ease-in-out;
+}
+header.sticky{
+    background: var(--bg-color);
 }
 .logo img{
     display: block;
@@ -448,6 +452,52 @@ label{
     font-weight: 600;
 }
 /*--------------------------------------------------------------------------------------------------------------------------*/
+#footer{
+    background: var(--minor-color);
+    padding: 3rem 0;
+    color: var(--bg-color);
+    font-size: 1rem;
+}
+.footer-container{
+    display: grid;
+    grid-template-columns: repeat(4,1fr);
+    grid-gap: 2rem;
+}
+.footer-container h2{
+    padding-bottom: 1.5rem;
+}
+.about-us img{
+    display: block;
+    object-fit: cover;
+    width: 50%;
+}
+.about-us p{
+    line-height: 1.5;
+    font-size: 0.8rem;
+}
+.open-hours h2{
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: var(--main-color);
+}
+.open-hours .day{
+    font-size: 0.8rem;
+}
+.open-hours span{
+    color: var(--main-color);
+}
+.contact h2{
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: var(--main-color);
+}
+.contact p{
+    font-size: 0.8rem;
+}
+.contact .call, .email, .address{
+    color: var(--main-color);
+}
+/*--------------------------------------------------------------------------------------------------------------------------*/
 
 
 @media(max-width:1100px){
@@ -534,11 +584,17 @@ label{
     .col{
         width: 500px; 
     }
+    .footer-container{
+        grid-template-columns: repeat(3,1fr);
+    }
 }
 @media(max-width:500px){
     .col{
         width: 400px; 
     }
+    .reservation-form  form .input1{
+        width: 100%;
+    }
 }
 @media(max-width:450px){
     html{
@@ -547,6 +603,13 @@ label{
     .static-content{
         grid-template-columns: repeat(1,1fr);
     }
+    .footer-container{
+
+        grid-template-columns: repeat(1,1fr);
+    }
+    .about-us img{
+        width: 30%;
+    }
 }
 @media(max-width:350px){
     .col{