muayjtp/web_design
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added parallax scrolling effect, sticky navbar, footer section

Browse source
This commit is contained in:
JSriwongsa 2023-05-29 12:41:44 -05:00
parent 518d6cce15
commit 672a086e0b
3 changed files with 112 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
restaurant_website/index.html
View file

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

23
restaurant_website/main.js
View file

@ -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
)

63
restaurant_website/style.css
View file

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