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

made changes

Browse source
This commit is contained in:
JSriwongsa 2023-06-06 15:51:29 -05:00
parent 0e5941c03e
commit 6ea321bb23
2 changed files with 295 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

165
restaurant_website/order.css
View file

@ -116,7 +116,7 @@ body{
background: var(--minor-color);
border-radius: 10px;
}
.fa-heart{
.fa-cart-plus{
font-size: 1rem;
color: var(--main-color);
}
@ -149,16 +149,157 @@ body{
margin: 5px 0;
font-weight: 600;
}
#cart{
background: var(--bg-color);
background: var(--bg-color);
padding-right: 30px;
overflow-y: scroll;
}
.cart-header{
padding-top: 3rem;
padding-bottom: 1rem;
position: sticky;
top: 0;
background: var(--bg-color);
}
.user 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;
}
.user i:active{
background: var(--main-color);
color: var(--bg-color);
}
#category-list .item-menu{
margin: 1rem;
font-size: 1.2rem;
font-weight: 600;
color:var(--main-color);
}
.fa-hotjar{
color: rgb(255, 106, 0);
font-size: 1rem;
}
.list-menu{
display: flex;
align-items: center;
margin-top: 15px;
border-radius: 50px;
cursor: pointer;
transition: 0.5s all ease-in-out;
}
.list-menu:hover{
background: var(--other-color);
}
.list-menu img{
width: 55px;
height: 55px;
border-radius: 50%;
}
.list-name{
margin: 0 10px;
font-size: 1rem;
text-align: center;
text-decoration: none;
color: var(--main-color);
font-weight: 600;
}
/*--------------------------------------------------------------------------------------------------------------------------*/
#food-items{
display: none;
}
#category-list{
display: none;
}
/*--------------------------------------------------------------------------------------------------------------------------*/
#cart-page{
background: var(--other-color);
margin: 40px 10px;
margin-right: 50px;
padding: 20px 30px;
padding-bottom: 30px;
position: relative;
}
#cart-title{
color: var(--main-color);
font-size: 1.5rem;
font-weight: 600;
margin: 0;
}
#cart-page table{
width: 100%;
margin-top: 20px;
text-align: center;
}
#cart-total{
display: none;
}
#cart-page table thead td{
font-size: 1rem;
padding-bottom: 10px;
font-weight: 600;
}
#cart-page table tbody td{
padding: 10px 0;
font-size: 1rem;
}
#cart-page table tbody button{
outline: none;
border: none;
font-size: 1rem;
background: none;
background: var(--main-color);
color: var(--bg-color);
border-radius: 4px;
cursor: pointer;
margin: 0 5px;
padding: 3px 8px;
}
#cart-page table tbody img{
width: 60px;
height: 60px;
border-radius: 50%;
}
#checkout{
text-align: center;
margin: 40px auto;
background: var(--other-color);
padding: 10px 20px;
}
#checkout p{
margin: 1rem;
float: left;
}
#total-item, #total-price{
font-size: 1rem;
color: var(--main-color);
}
#delivery{
color: orangered;
}
.checkout-btn{
outline: none;
border: none;
font-size: 1rem;
font-weight: 600;
background: var(--main-color);
color: var(--bg-color);
padding: 10px 20px;
border-radius: 4px;
font-weight: 600;
bottom: 30px;
margin: 15px 0;
cursor: pointer;
}
.checkout-btn:active{
background: var(--minor-color);
color: var(--bg-color);
}

217
restaurant_website/order.html
View file

@ -48,7 +48,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/1.jpg" alt="">
<p id="order-name">Edamame</p>
@ -58,7 +58,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/1.jpg" alt="">
<p id="order-name">Spicy Edamame</p>
@ -68,7 +68,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/3.jpg" alt="">
<p id="order-name">Gyoza</p>
@ -78,7 +78,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/4.jpg" alt="">
<p id="order-name">Takoyaki</p>
@ -88,7 +88,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/5.jpg" alt="">
<p id="order-name">Ebi Okonomiyaki</p>
@ -98,7 +98,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/6.jpg" alt="">
<p id="order-name">Sake Carpaccio</p>
@ -108,7 +108,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/7.jpg" alt="">
<p id="order-name">Hamachi Carpaccio</p>
@ -118,7 +118,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/8.jpg" alt="">
<p id="order-name">Soft Shell Crab</p>
@ -128,7 +128,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/9.jpg" alt="">
<p id="order-name">Shrimp Tempura</p>
@ -141,7 +141,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/10.jpg" alt="">
<p id="order-name">Miso Soup</p>
@ -151,7 +151,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/11.jpg" alt="">
<p id="order-name">Spicy Miso Soup</p>
@ -164,7 +164,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/12.jpg" alt="">
<p id="order-name">House Salad</p>
@ -174,7 +174,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/13.jpg" alt="">
<p id="order-name">Seaweed Salad</p>
@ -184,7 +184,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/14.jpg" alt="">
<p id="order-name">Cucumber Salad</p>
@ -194,7 +194,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/15.jpg" alt="">
<p id="order-name">Tako Su</p>
@ -204,7 +204,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/16.jpg" alt="">
<p id="order-name">Ebi Su</p>
@ -214,7 +214,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/17.jpg" alt="">
<p id="order-name">Mixed Sunomono</p>
@ -224,7 +224,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/18.jpg" alt="">
<p id="order-name">Spicy maguro poke Salad</p>
@ -237,7 +237,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/19.jpg" alt="">
<p id="order-name">Sake/Smoked Sake</p>
@ -247,7 +247,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/20.jpg" alt="">
<p id="order-name">Maguro/Shiro Maguro</p>
@ -257,7 +257,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/21.jpg" alt="">
<p id="order-name">Hamachi</p>
@ -267,7 +267,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/22.jpg" alt="">
<p id="order-name">Saba</p>
@ -277,7 +277,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/23.jpg" alt="">
<p id="order-name">Ebi</p>
@ -287,7 +287,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/24.jpg" alt="">
<p id="order-name">Hotate</p>
@ -297,7 +297,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/25.jpeg" alt="">
<p id="order-name">Kani Kama</p>
@ -307,7 +307,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/26.jpg" alt="">
<p id="order-name">Unagi</p>
@ -317,7 +317,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/27.jpg" alt="">
<p id="order-name">Ikura</p>
@ -327,7 +327,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/28.jpg" alt="">
<p id="order-name">Masago</p>
@ -337,7 +337,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/29.jpg" alt="">
<p id="order-name">Tamago</p>
@ -347,7 +347,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/30.jpeg" alt="">
<p id="order-name">Wagyu Nigiri</p>
@ -360,7 +360,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/31.jpg" alt="">
<p id="order-name">Sushi A (6 pcs nigiri & 1 maki)</p>
@ -370,7 +370,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/31.jpg" alt="">
<p id="order-name">Sushi B (9 pcs nigiri & 1 maki)</p>
@ -380,7 +380,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/31.jpg" alt="">
<p id="order-name">Sashimi A (14 pcs sashimi & 1 maki)</p>
@ -390,7 +390,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/31.jpg" alt="">
<p id="order-name">Sashimi B (21 pcs sashimi & 1 maki)</p>
@ -400,7 +400,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/31.jpg" alt="">
<p id="order-name">Super Sashimi (28 pcs sashimi & 1 maki)</p>
@ -413,7 +413,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/32.jpg" alt="">
<p id="order-name">Tekka (8 pcs)</p>
@ -423,7 +423,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/33.jpg" alt="">
<p id="order-name">Sake (8 pcs)</p>
@ -433,7 +433,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/34.jpg" alt="">
<p id="order-name">Negi Hamachi (8 pcs)</p>
@ -443,7 +443,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/35.jpg" alt="">
<p id="order-name">Ebi (8 pcs)</p>
@ -453,7 +453,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/36.jpg" alt="">
<p id="order-name">Sake Avocado (8 pcs)</p>
@ -463,7 +463,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/37.jpg" alt="">
<p id="order-name">Unagi Q (8 pcs)</p>
@ -473,7 +473,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/38.jpg" alt="">
<p id="order-name">Spicy Scallop (8 pcs)</p>
@ -483,7 +483,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/39.jpg" alt="">
<p id="order-name">Spicy Tako (8 pcs)</p>
@ -493,7 +493,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/40.jpg" alt="">
<p id="order-name">Spider (8 pcs)</p>
@ -503,7 +503,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/41.jpg" alt="">
<p id="order-name">Alaska (9 pcs)</p>
@ -513,7 +513,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/42.jpg" alt="">
<p id="order-name">Boston (9pcs)</p>
@ -523,7 +523,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/43.jpg" alt="">
<p id="order-name">Philadelphia (9 pcs)</p>
@ -533,7 +533,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/44.jpg" alt="">
<p id="order-name">California (9 pcs)</p>
@ -543,7 +543,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/45.jpg" alt="">
<p id="order-name">Chicago (9 pcs)</p>
@ -556,7 +556,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/46.jpg" alt="">
<p id="order-name">Sake Donburi (Miso soup)</p>
@ -566,7 +566,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/47.jpeg" alt="">
<p id="order-name">Tekka Donburi (Miso soup)</p>
@ -576,7 +576,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/48.jpg" alt="">
<p id="order-name">Hamachi Donburi (Miso soup)</p>
@ -586,7 +586,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/49.jpg" alt="">
<p id="order-name">Chirashi Donburi (Miso soup)</p>
@ -596,7 +596,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/50.jpg" alt="">
<p id="order-name">Unagi Donburi (Miso soup)</p>
@ -609,7 +609,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/51.jpg" alt="">
<p id="order-name">Hot Green Tea</p>
@ -619,7 +619,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/52.jpg" alt="">
<p id="order-name">Iced Green Tea</p>
@ -629,7 +629,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/53.png" alt="">
<p id="order-name">Coke/Diet</p>
@ -639,9 +639,9 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/54.jpg" alt="">
<img src="images/order/54.png" alt="">
<p id="order-name">Bottled Water</p>
<p id="order-price">$1.99</p>
</div>
@ -652,7 +652,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/55.jpg" alt="">
<p id="order-name">Matcha Ice Cream</p>
@ -662,7 +662,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/56.jpg" alt="">
<p id="order-name">Mochi Ice Cream</p>
@ -672,7 +672,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/57.jpg" alt="">
<p id="order-name">Matcha Cheesecake</p>
@ -682,7 +682,7 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/58.jpg" alt="">
<p id="order-name">Dango (3 sticks)</p>
@ -692,34 +692,101 @@
<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>
<i class="fa-solid fa-cart-plus add-to-cart"></i>
</div>
<img src="images/order/59.jpg" alt="">
<p id="order-name">Taiyaki (2 pcs)</p>
<p id="order-price">$6.00</p>
<p id="order-price">$6.99</p>
</div>
</div>
</div>
<div id="cart-page" class="cart-toggle">
<p id="cart-title">Cart Items</p>
<p id="cart-total">Total Amount: $100</p>
<table>
<thead>
<td>Item</td>
<td>Name</td>
<td>Quantity</td>
<td>Price</td>
</thead>
<tbody id="table-body">
<tr>
<td>
<img src="images/order/1.jpg" alt="">
</td>
<td>Edamame</td>
<td>
<button class="reduce-item">-</button>
<span>1</span>
<button class="add-item">+</button>
</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="cart">
<h1></h1>
</div>
<div class="cart-header">
<div class="user">
<i class="fa-solid fa-user"> &nbsp Login</i>
</div>
</div>
<div id="category-list">
<p class="item-menu"> <i class="fa-brands fa-hotjar"></i> Popular Dishes <i class="fa-brands fa-hotjar"></i></p>
<div class="border"></div>
<div class="list-menu">
<img src="images/chef1.jpg" alt="">
<a href="" class="list-name"> &nbsp Sake Donburi</a>
</div>
<div class="list-menu">
<img src="images/chef2.jpg" alt="">
<a href="" class="list-name"> &nbsp Ebi Okonomiyaki</a>
</div>
<div class="list-menu">
<img src="images/chef3.jpg" alt="">
<a href="" class="list-name"> &nbsp Wagyu Nigiri</a>
</div>
<div class="list-menu">
<img src="images/chef4.jpg" alt="">
<a href="" class="list-name"> &nbsp Tekka Maki</a>
</div>
<div class="list-menu">
<img src="images/order/8.jpg" alt="">
<a href="" class="list-name"> &nbsp Soft Shell Crab</a>
</div>
<div class="list-menu">
<img src="images/order/59.jpg" alt="">
<a href="" class="list-name"> &nbsp Taiyaki</a>
</div>
<div class="list-menu">
<img src="images/order/58.jpg" alt="">
<a href="" class="list-name"> &nbsp Dango</a>
</div>
</div>
<div id="checkout" class="cart-toggle">
<p id="total-item">Items : 5</p>
<p id="total-price">Total Amount: $50</p>
<p id="delivery">Free Delivery on $50</p>
<button class="checkout-btn">Checkout</button>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>