made some changes
This commit is contained in:
JSriwongsa
parent
a4b485e7b8
commit
9e0e463037
3 changed files with 329 additions and 23 deletions
|
|
@ -12,8 +12,7 @@
|
|||
<link href="https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Montserrat:wght@300;400;500;600;700;800;900&family=Norican&family=Poppins:ital,wght@0,100;0,300;1,100;1,300&display=swap" rel="stylesheet">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Montserrat:wght@300;400;500;600;700;800;900&family=Norican&family=Vujahday+Script&display=swap" rel="stylesheet">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Montserrat:wght@300;400;500;600;700;800;900&family=Norican&family=Permanent+Marker&family=Vujahday+Script&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
|
|
@ -29,7 +28,7 @@
|
|||
</div>
|
||||
<li><a href="">HOME</a></li>
|
||||
<li><a href="">MENU</a></li>
|
||||
<li><a href="">ORDERING</a></li>
|
||||
<li><a href="">ORDER</a></li>
|
||||
<li><a href="#reservation">RESERVATION</a></li>
|
||||
<li><a href="">ABOUT</a></li>
|
||||
<li><a href="">CONTACT</a></li>
|
||||
|
|
@ -46,6 +45,23 @@
|
|||
<div class="home-content">
|
||||
<h2>HAVE A GOOD DAY WITH A GOOD MEAL</h2>
|
||||
<h3>Fresh ingredients make great food.</h3>
|
||||
<div class="countdown">
|
||||
<div class="title" id="open-time">We are open at 17:00</div>
|
||||
<div class="col">
|
||||
<div>
|
||||
<input type="text" readonly value="0"><br>
|
||||
<label for="">Hours</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" readonly value="0"><br>
|
||||
<label for="">Minutes</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" readonly value="0"><br>
|
||||
<label for="">Seconds</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -97,18 +113,22 @@
|
|||
<div class="container">
|
||||
<div class="static-content">
|
||||
<div class="static-num">
|
||||
<i class="fa-solid fa-award"></i>
|
||||
<div class="num" data="293">293</div>
|
||||
<h2>Best Dishes</h2>
|
||||
</div>
|
||||
<div class="static-num">
|
||||
<i class="fa-solid fa-trophy"></i>
|
||||
<div class="num" data="999">999</div>
|
||||
<h2>Awards won</h2>
|
||||
</div>
|
||||
<div class="static-num">
|
||||
<i class="fa-solid fa-medal"></i>
|
||||
<div class="num" data="148">148</div>
|
||||
<h2>Our Chefs</h2>
|
||||
</div>
|
||||
<div class="static-num">
|
||||
<i class="fa-solid fa-star"></i>
|
||||
<div class="num" data="278">278</div>
|
||||
<h2>Daily Customers</h2>
|
||||
</div>
|
||||
|
|
@ -122,7 +142,7 @@
|
|||
<div class="special-content">
|
||||
<div class="special-left">
|
||||
<div class="special-left-side">
|
||||
<h3>Chef's Special</h3>
|
||||
<h3>Most Popular Dishes</h3>
|
||||
</div>
|
||||
<!--chef1-->
|
||||
<div class="img-container">
|
||||
|
|
@ -191,11 +211,11 @@
|
|||
<div class="reservation-form">
|
||||
<h3>Reservation</h3>
|
||||
<form action="">
|
||||
<input type="text" placeholder="First name">
|
||||
<input type="text" placeholder="Phone number">
|
||||
<input type="email" placeholder="Email">
|
||||
<input type="number" placeholder="Number of guests" min="1">
|
||||
<input type="date" placeholder="Date">
|
||||
<input class="input1" type="text" placeholder="First name">
|
||||
<input class="input1" type="text" placeholder="Phone number">
|
||||
<input class="input1" type="email" placeholder="Email">
|
||||
<input class="input1" type="number" placeholder="Number of guests" min="1">
|
||||
<input class="input1" type="date" placeholder="Pick Date">
|
||||
<select name="hours">
|
||||
<option value="hour-select">Select your time</option>
|
||||
<option value="10">17:00</option>
|
||||
|
|
@ -217,7 +237,102 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<script src="main.js"></script>
|
||||
<section class="our-chef" id="chef">
|
||||
<div class="container">
|
||||
<h1 class="chef-heading">Meet Our Chefs</h1>
|
||||
<div class="team-chef">
|
||||
<div class="chef-item">
|
||||
<div class="chef-img">
|
||||
<img src="images/c1.jpg">
|
||||
</div>
|
||||
<div class="chef-info">
|
||||
<div>
|
||||
<h3>John Doe</h3>
|
||||
<span>Executive Chef</span>
|
||||
<ul>
|
||||
<li><a href=""><i class="fa-brands fa-linkedin"></i></a></li>
|
||||
<li><a href=""><i class="fa-brands fa-instagram"></i></a></li>
|
||||
<li><a href=""><i class="fa-brands fa-square-google-plus"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chef-item">
|
||||
<div class="chef-img">
|
||||
<img src="images/c2.jpg">
|
||||
</div>
|
||||
<div class="chef-info">
|
||||
<div>
|
||||
<h3>John Doe</h3>
|
||||
<span>Head Chef</span>
|
||||
<ul>
|
||||
<li><a href=""><i class="fa-brands fa-linkedin"></i></a></li>
|
||||
<li><a href=""><i class="fa-brands fa-square-twitter"></i></a></li>
|
||||
<li><a href=""><i class="fa-brands fa-square-google-plus"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chef-item">
|
||||
<div class="chef-img">
|
||||
<img src="images/c3.jpg">
|
||||
</div>
|
||||
<div class="chef-info">
|
||||
<div>
|
||||
<h3>Jane Doe</h3>
|
||||
<span>Deputy Chef</span>
|
||||
<ul>
|
||||
<li><a href=""><i class="fa-brands fa-linkedin"></i></a></li>
|
||||
<li><a href=""><i class="fa-brands fa-instagram"></i></a></li>
|
||||
<li><a href=""><i class="fa-brands fa-square-twitter"></i></a></li>
|
||||
<li><a href=""><i class="fa-brands fa-square-google-plus"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -10,11 +10,6 @@ closebtn.addEventListener('click', function(){
|
|||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const staticContentE1 = document.querySelectorAll('.num');
|
||||
|
||||
staticContentE1.forEach((staticContentE1) =>{
|
||||
|
|
@ -36,3 +31,71 @@ staticContentE1.forEach((staticContentE1) =>{
|
|||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const openTimeStr = "We are open at 17:00"
|
||||
const openTime = parseInt(openTimeStr.substring(15, 20));
|
||||
document.getElementById("open-time").innerText = openTimeStr;
|
||||
const inputs = document.querySelectorAll("input")
|
||||
|
||||
function clock(){
|
||||
const closeTime = 22
|
||||
const now = new Date();
|
||||
var now_hh = now.getHours();
|
||||
|
||||
// if its after the restaraunt closed:
|
||||
if (now_hh >= closeTime) {
|
||||
tomorrow = new Date(now);
|
||||
tomorrow.setDate(tomorrow.getDate() + 1);
|
||||
tomorrow.setHours(openTime);
|
||||
tomorrow.setMinutes(00);
|
||||
tomorrow.setSeconds(00);
|
||||
var diff = tomorrow - now;
|
||||
}
|
||||
|
||||
// restaraunt is closed we are waiting for it to open
|
||||
if (now_hh < openTime) {
|
||||
todayOpen = new Date(now);
|
||||
todayOpen.setHours(openTime);
|
||||
todayOpen.setMinutes(00);
|
||||
todayOpen.setSeconds(00);
|
||||
var diff = todayOpen - now;
|
||||
}
|
||||
|
||||
// return early if restaraunt is open.
|
||||
if (now_hh > openTime && now_hh < closeTime) {
|
||||
return;
|
||||
}
|
||||
|
||||
day_to_miliseconds = 1000 * 60 * 60 * 24
|
||||
// 1 day equivalent in milliseconds
|
||||
hour_to_miliseconds = 1000 * 60 * 60
|
||||
// 1 hour equivalent in milliseconds
|
||||
minute_to_miliseconds = 1000 * 60
|
||||
// 1 minute equivalent in milliseconds
|
||||
second_to_miliseconds = 1000
|
||||
// 1 second equivalent in milliseconds
|
||||
|
||||
let days = Math.floor(diff / day_to_miliseconds );
|
||||
// number of days from the difference in dates
|
||||
let hours = Math.floor((diff % day_to_miliseconds) / hour_to_miliseconds);
|
||||
// number of hours from the remaining time after removing days
|
||||
let minutes = Math.floor((diff % hour_to_miliseconds) / minute_to_miliseconds);
|
||||
// number of minutes from the remaining time after removing hours
|
||||
let seconds = Math.floor((diff % minute_to_miliseconds) / second_to_miliseconds);
|
||||
// number of hours from the remaining time after removing seconds
|
||||
|
||||
console.log(days, hours, minutes, seconds)
|
||||
inputs[0].value = hours;
|
||||
inputs[1].value = minutes;
|
||||
inputs[2].value = seconds;
|
||||
}
|
||||
|
||||
clock()
|
||||
|
||||
setInterval(
|
||||
()=>{
|
||||
clock()
|
||||
},
|
||||
1000
|
||||
)
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ header{
|
|||
padding: 1rem 0;
|
||||
background: rgba(243, 241, 241, 0.85);
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
z-index: 10;
|
||||
}
|
||||
.logo img{
|
||||
display: block;
|
||||
|
|
@ -71,6 +71,7 @@ header{
|
|||
cursor: pointer;
|
||||
display: none;
|
||||
}
|
||||
/*--------------------------------------------------------------------------------------------------------------------------*/
|
||||
#home{
|
||||
background: url(images/header.jpg) no-repeat center center/cover;
|
||||
min-height: 100vh;
|
||||
|
|
@ -203,8 +204,12 @@ header{
|
|||
color: var(--bg-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.static-num i{
|
||||
font-size: 5rem;
|
||||
color: var(--main-color);
|
||||
}
|
||||
.num{
|
||||
font-size: 4.5rem;
|
||||
font-size: 3rem;
|
||||
}
|
||||
.static-num h2{
|
||||
font-size: 1.5rem;
|
||||
|
|
@ -274,26 +279,28 @@ header{
|
|||
padding: 6rem 0;
|
||||
}
|
||||
.reservation-form{
|
||||
background: rgb(186, 183, 176);
|
||||
background: var(--main-color);
|
||||
padding: 2rem;
|
||||
width: 50%;
|
||||
}
|
||||
.reservation-form h3{
|
||||
font-size: 3.5rem;
|
||||
font-family:'Vujahday Script';
|
||||
color: var(--main-color);
|
||||
color: var(--bg-color);
|
||||
text-align: center;
|
||||
}
|
||||
.reservation-form form{
|
||||
padding: 2rem 0;
|
||||
}
|
||||
.reservation-form form input{
|
||||
.reservation-form form .input1{
|
||||
width: 49.5%;
|
||||
padding: 0.3rem 0.4rem;
|
||||
margin-bottom: 1rem;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
font-size: 1rem;
|
||||
text-align: left;
|
||||
}
|
||||
.reservation-form form textarea{
|
||||
width: 100%;
|
||||
|
|
@ -305,11 +312,12 @@ header{
|
|||
}
|
||||
.reservation-form form select{
|
||||
width: 49.5%;
|
||||
padding: 0.3rem 0.4rem;
|
||||
padding: 0.7rem 0.4rem;
|
||||
margin-bottom: 1rem;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background: white;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.reservation-form form button{
|
||||
display: inline-block;
|
||||
|
|
@ -323,10 +331,123 @@ header{
|
|||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
.reservation-form form button:hover{
|
||||
background-color: var(--main-color);
|
||||
background-color: rgb(205, 171, 93);
|
||||
color: var(--bg-color);
|
||||
}
|
||||
/*--------------------------------------------------------------------------------------------------------------------------*/
|
||||
#chef{
|
||||
padding: 10rem 0 ;
|
||||
}
|
||||
.chef-heading{
|
||||
text-align: center;
|
||||
font-size: 3.5rem;
|
||||
font-family:'Vujahday Script';
|
||||
color: var(--main-color);
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
.team-chef{
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
|
||||
grid-gap: 1.5rem;
|
||||
}
|
||||
.team-chef .chef-item .chef-img{
|
||||
height: 35rem;
|
||||
width: 100%;
|
||||
}
|
||||
.team-chef .chef-item .chef-img img{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.team-chef .chef-item{
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.team-chef .chef-item:before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 5;
|
||||
}
|
||||
.team-chef .chef-item:hover.chef-item:before{
|
||||
display: block;
|
||||
}
|
||||
.team-chef .chef-item .chef-info{
|
||||
position: absolute;
|
||||
top: 130%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
transition: 1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.team-chef .chef-item .chef-info h3{
|
||||
font-size: 1.5rem;
|
||||
color: var(--main-color);
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
.team-chef .chef-item .chef-info span{
|
||||
font-size: 1.1rem;
|
||||
color: var(--bg-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
.team-chef .chef-item .chef-info ul{
|
||||
display: flex;
|
||||
grid-gap: 2rem;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
.team-chef .chef-item .chef-info ul li a{
|
||||
color: var(--main-color);
|
||||
font-size: 1rem;
|
||||
}
|
||||
.team-chef .chef-item:hover .chef-info{
|
||||
top: 0;
|
||||
}
|
||||
/*--------------------------------------------------------------------------------------------------------------------------*/
|
||||
.countdown .title{
|
||||
margin-top: 10px;
|
||||
font-size: 3.5rem;
|
||||
font-weight: 600;
|
||||
font-family: 'Vujahday Script';
|
||||
color: var(--main-color);
|
||||
text-align: center;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.col{
|
||||
width: 1000px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: var(--bg-color);
|
||||
}
|
||||
.col div{
|
||||
width: 250px;
|
||||
text-align: center;
|
||||
}
|
||||
input{
|
||||
width: 50%;
|
||||
height: 50px;
|
||||
border-color: transparent;
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
}
|
||||
label{
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
/*--------------------------------------------------------------------------------------------------------------------------*/
|
||||
|
||||
|
||||
@media(max-width:1100px){
|
||||
|
|
@ -392,7 +513,7 @@ header{
|
|||
.reservation-form{
|
||||
width: 100%;
|
||||
}
|
||||
.reservation-form form input{
|
||||
.reservation-form form .input1{
|
||||
width: 100%;
|
||||
}
|
||||
.post-menu .post-box{
|
||||
|
|
@ -404,6 +525,13 @@ header{
|
|||
.static-content{
|
||||
grid-template-columns: repeat(2,1fr);
|
||||
}
|
||||
.reservation-form form select{
|
||||
width: 100%;
|
||||
}
|
||||
.reservation-form form textarea{
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
}
|
||||
@media(max-width:450px){
|
||||
html{
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue