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 @@
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
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{