added order section
This commit is contained in:
JSriwongsa
parent
fbc6737cb5
commit
1ecbfe33a3
2 changed files with 347 additions and 0 deletions
161
restaurant_website/order.css
Normal file
161
restaurant_website/order.css
Normal file
|
|
@ -0,0 +1,161 @@
|
||||||
|
*{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
|
}
|
||||||
|
:root{
|
||||||
|
--bg-color:snow;
|
||||||
|
--main-color:rgb(177, 126, 5);
|
||||||
|
--minor-color:rgb(49, 48, 48);
|
||||||
|
--other-color:rgb(232, 229, 229);
|
||||||
|
--text-color:black;
|
||||||
|
}
|
||||||
|
html{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.container{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 250px 1fr 300px;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
background: var(--bg-color);
|
||||||
|
}
|
||||||
|
.menu-logo{
|
||||||
|
padding: 0 30px;
|
||||||
|
}
|
||||||
|
.menu-logo img{
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
.menu-items a{
|
||||||
|
display: block;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 1rem;
|
||||||
|
padding: 10px 30px;
|
||||||
|
margin: 12px 0;
|
||||||
|
color: var(--main-color);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.menu-items a:hover{
|
||||||
|
background: var(--other-color);
|
||||||
|
}
|
||||||
|
#food-container{
|
||||||
|
background: var(--bg-color);
|
||||||
|
overflow: scroll;
|
||||||
|
overflow-x: hidden;
|
||||||
|
box-sizing: content-box;
|
||||||
|
}
|
||||||
|
#menu-header{
|
||||||
|
align-items: center;
|
||||||
|
background: var(--bg-color);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-top: 3rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
#food-container{
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
#menu-header .address{
|
||||||
|
font-size: 0.8rem;
|
||||||
|
border: 1px solid var(--main-color);
|
||||||
|
color: var(--main-color);
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
width: 100px;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.utility i{
|
||||||
|
font-size: 0.8rem;
|
||||||
|
border: 1px solid var(--main-color);
|
||||||
|
color: var(--main-color);
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 50px;
|
||||||
|
width: 100px;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 1rem;
|
||||||
|
}
|
||||||
|
.utility i:active{
|
||||||
|
background: var(--main-color);
|
||||||
|
color: var(--bg-color);
|
||||||
|
}
|
||||||
|
#appetizer, #soup, #salad, #nigiri, #sushi, #maki, #don, #drink, #dessert{
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
#appetizer #item-box, #soup #item-box, #salad #item-box, #nigiri #item-box, #sushi #item-box, #maki #item-box, #don #item-box, #drink #item-box, #dessert #item-box{
|
||||||
|
background-color: var(--other-color);
|
||||||
|
}
|
||||||
|
#category-name, .menu-items{
|
||||||
|
margin: 1rem;
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--main-color);
|
||||||
|
font-family: 'Vujahday Script';
|
||||||
|
}
|
||||||
|
#box-top{
|
||||||
|
display: flex;
|
||||||
|
margin: 5px 0;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
#rating{
|
||||||
|
font-size: 0.6rem;
|
||||||
|
color: var(--main-color);
|
||||||
|
padding: 5px;
|
||||||
|
background: var(--minor-color);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.fa-heart{
|
||||||
|
font-size: 1rem;
|
||||||
|
color: var(--main-color);
|
||||||
|
}
|
||||||
|
.toggle-heart{
|
||||||
|
background: red;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
#item-box{
|
||||||
|
width: 180px;
|
||||||
|
height: 220px;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 10px;
|
||||||
|
display: inline-block;
|
||||||
|
background: var(--main-color);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.5s all ease-in-out;
|
||||||
|
}
|
||||||
|
#item-box img{
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
display: block;
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
#order-name{
|
||||||
|
margin: 5px 0;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#cart{
|
||||||
|
background: var(--bg-color);
|
||||||
|
}
|
||||||
186
restaurant_website/order.html
Normal file
186
restaurant_website/order.html
Normal file
|
|
@ -0,0 +1,186 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Order Online</title>
|
||||||
|
<link rel="shortcut icon" href="images/logo.png">
|
||||||
|
<link rel="stylesheet" href="order.css">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
|
||||||
|
<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=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=Permanent+Marker&family=Vujahday+Script&display=swap" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container" id="container">
|
||||||
|
<div id="menu">
|
||||||
|
<div class="menu-logo">
|
||||||
|
<img src="images/logo.png">
|
||||||
|
</div>
|
||||||
|
<div class="menu-items">
|
||||||
|
<a href="index.html">Home</a>
|
||||||
|
<a href="">Services</a>
|
||||||
|
<a href="">Your orders</a>
|
||||||
|
<a href="">Favorite</a>
|
||||||
|
<a href="">Cart</a>
|
||||||
|
<a href="">Address</a>
|
||||||
|
<a href="">Help</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="food-container">
|
||||||
|
<div id="menu-header">
|
||||||
|
<div class="header-box">
|
||||||
|
<i class="fa-solid fa-location-dot address" id="add-address">Address</i>
|
||||||
|
</div>
|
||||||
|
<div class="utility">
|
||||||
|
<i class="fas fa-search"> Search</i>
|
||||||
|
<i class="fas fa-tags"> Offers</i>
|
||||||
|
<i class="fas fa-shopping-cart" id="shopping-cart"> 0 items</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="food-items">
|
||||||
|
<div id="appetizer">
|
||||||
|
<p id="category-name">Appetizers</p>
|
||||||
|
<div id="item-box">
|
||||||
|
<div id="box-top">
|
||||||
|
<i class="fa fa-star" id="rating"> 4.3</i>
|
||||||
|
<i class="fa-solid fa-heart add-to-cart"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img src="images/order/1.jpg" alt="">
|
||||||
|
<p id="order-name">Edamame</p>
|
||||||
|
<p id="order-price">$6.00</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="soup">
|
||||||
|
<p id="category-name">Soup</p>
|
||||||
|
<div id="item-box">
|
||||||
|
<div id="box-top">
|
||||||
|
<i class="fa fa-star" id="rating"> 4.3</i>
|
||||||
|
<i class="fa-solid fa-heart add-to-cart"></i>
|
||||||
|
</div>
|
||||||
|
<img src="images/order/2.jpg" alt="">
|
||||||
|
<p id="order-name">Edamame</p>
|
||||||
|
<p id="order-price">$6.00</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="salad">
|
||||||
|
<p id="category-name">Sunomono Salad</p>
|
||||||
|
<div id="item-box">
|
||||||
|
<div id="box-top">
|
||||||
|
<i class="fa fa-star" id="rating"> 4.3</i>
|
||||||
|
<i class="fa-solid fa-heart add-to-cart"></i>
|
||||||
|
</div>
|
||||||
|
<img src="images/order/3.jpg" alt="">
|
||||||
|
<p id="order-name">Edamame</p>
|
||||||
|
<p id="order-price">$6.00</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="nigiri">
|
||||||
|
<p id="category-name">Nigiri/Sashimi</p>
|
||||||
|
<div id="item-box">
|
||||||
|
<div id="box-top">
|
||||||
|
<i class="fa fa-star" id="rating"> 4.3</i>
|
||||||
|
<i class="fa-solid fa-heart add-to-cart"></i>
|
||||||
|
</div>
|
||||||
|
<img src="images/order/4.jpg" alt="">
|
||||||
|
<p id="order-name">Edamame</p>
|
||||||
|
<p id="order-price">$6.00</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="sushi">
|
||||||
|
<p id="category-name">Sushi/Sashimi Platters</p>
|
||||||
|
<div id="item-box">
|
||||||
|
<div id="box-top">
|
||||||
|
<i class="fa fa-star" id="rating"> 4.3</i>
|
||||||
|
<i class="fa-solid fa-heart add-to-cart"></i>
|
||||||
|
</div>
|
||||||
|
<img src="images/order/4.jpg" alt="">
|
||||||
|
<p id="order-name">Edamame</p>
|
||||||
|
<p id="order-price">$6.00</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="maki">
|
||||||
|
<p id="category-name">Maki (Rolls)</p>
|
||||||
|
<div id="item-box">
|
||||||
|
<div id="box-top">
|
||||||
|
<i class="fa fa-star" id="rating"> 4.3</i>
|
||||||
|
<i class="fa-solid fa-heart add-to-cart"></i>
|
||||||
|
</div>
|
||||||
|
<img src="images/order/4.jpg" alt="">
|
||||||
|
<p id="order-name">Edamame</p>
|
||||||
|
<p id="order-price">$6.00</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="don">
|
||||||
|
<p id="category-name">Donburi</p>
|
||||||
|
<div id="item-box">
|
||||||
|
<div id="box-top">
|
||||||
|
<i class="fa fa-star" id="rating"> 4.3</i>
|
||||||
|
<i class="fa-solid fa-heart add-to-cart"></i>
|
||||||
|
</div>
|
||||||
|
<img src="images/order/4.jpg" alt="">
|
||||||
|
<p id="order-name">Edamame</p>
|
||||||
|
<p id="order-price">$6.00</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="drink">
|
||||||
|
<p id="category-name">Beverages</p>
|
||||||
|
<div id="item-box">
|
||||||
|
<div id="box-top">
|
||||||
|
<i class="fa fa-star" id="rating"> 4.3</i>
|
||||||
|
<i class="fa-solid fa-heart add-to-cart"></i>
|
||||||
|
</div>
|
||||||
|
<img src="images/order/4.jpg" alt="">
|
||||||
|
<p id="order-name">Edamame</p>
|
||||||
|
<p id="order-price">$6.00</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="dessert">
|
||||||
|
<p id="category-name">Desserts</p>
|
||||||
|
<div id="item-box">
|
||||||
|
<div id="box-top">
|
||||||
|
<i class="fa fa-star" id="rating"> 4.3</i>
|
||||||
|
<i class="fa-solid fa-heart add-to-cart"></i>
|
||||||
|
</div>
|
||||||
|
<img src="images/order/4.jpg" alt="">
|
||||||
|
<p id="order-name">Edamame</p>
|
||||||
|
<p id="order-price">$6.00</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div id="cart">
|
||||||
|
<h1></h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script src="main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Reference in a new issue