added menu section

This commit is contained in:
JSriwongsa 2023-05-30 18:42:00 -05:00
parent 124d14e7f9
commit 4c65fefeba
2 changed files with 730 additions and 0 deletions

View file

@ -0,0 +1,70 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
:root{
--bg-color:snow;
--main-color:rgb(177, 126, 5);
--minor-color:rgb(49, 48, 48);
--other-color:dimgray;
--text-color:black;
--box-shadow:10px 10px 5px rgba(0, 0, 0, 0.5);
}
html{
font-size: 100%;
}
.container{
max-width: 1500px;
margin: auto;
padding: 0 100px;
}
#menu-container{
padding: 13rem 0;
margin-left: 10rem;
margin-right: 10rem;
}
.menu{
font-size: 1rem;
}
.menu-group-heading{
margin: 0;
padding-bottom: 0.5rem;
font-family: 'Vujahday Script';
color: var(--main-color);
font-size: 2rem;
border-bottom: 2px solid #ccc;
}
.menu-group{
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 1.5rem 0;
}
.menu-item{
display: flex;
}
.menu-item-text {
flex-grow: 1;
}
.menu-item-heading{
display: flex;
justify-content: space-between;
margin: 0;
}
.menu-item-name{
margin-right: 1.5em;
}
.menu-item-desc{
line-height: 1.6;
}

View file

@ -0,0 +1,660 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="shortcut icon" href="images/logo.png">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="menu.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>
<script id="replace_with_navbar" src="nav.js"></script>
<section class="container" id="menu-container">
<div class="menu">
<h2 class="menu-group-heading">Soup</h2>
<div class="menu-group">
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Miso Soup</span>
<span class="menu-item-price">$3.99</span>
</h3>
<p class="menu-item-desc">Soybean based soup with tofu, seaweed, scallion.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Spicy Miso Soup</span>
<span class="menu-item-price">$3.99</span>
</h3>
<p class="menu-item-desc">Soybean based soup with tofu, seaweed, scallion, jalapeno, and spicy sauce.</p>
</div>
</div>
</div>
<div class="menu">
<h2 class="menu-group-heading">Appetizers</h2>
<div class="menu-group">
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Edamame</span>
<span class="menu-item-price">$6.00</span>
</h3>
<p class="menu-item-desc">Steamed soybean with salt</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Spicy Edamame</span>
<span class="menu-item-price">$6.00</span>
</h3>
<p class="menu-item-desc">Steamed soybean with salt & togarashi.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Gyoza</span>
<span class="menu-item-price">$7.99</span>
</h3>
<p class="menu-item-desc">Steamed Japanese chicken dumpling.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Takoyaki</span>
<span class="menu-item-price">$6.99</span>
</h3>
<p class="menu-item-desc">Crispy ball batter stuffed w/ dice octopus, spicy mayo,
special sauce, bonito.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Ebi Okonomiyaki</span>
<span class="menu-item-price">$13.99</span>
</h3>
<p class="menu-item-desc">Tempura fried shrimp, corn, Creole butter, arare..</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Sake Carpaccio</span>
<span class="menu-item-price">$12.99</span>
</h3>
<p class="menu-item-desc">6 pcs salmon sashimi in ponzu sauce, jalapeno,
masago, scallion.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Hamachi Carpaccio</span>
<span class="menu-item-price">$13.99</span>
</h3>
<p class="menu-item-desc">6 pcs yellowtail sashimi in ponzu sauce, jalapeno,
masago, scallion.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Soft Shell Crab</span>
<span class="menu-item-price">$12.99</span>
</h3>
<p class="menu-item-desc">Crispy fried soft shell crab. Served with ponzu sauce.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Shrimp Tempura Appetizer</span>
<span class="menu-item-price">$13.99</span>
</h3>
<p class="menu-item-desc">Fried breaded crumb shrimp. Serving 4 pcs.</p>
</div>
</div>
</div>
</div>
<div class="menu">
<h2 class="menu-group-heading">Sunomono Salad</h2>
<div class="menu-group">
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">House Salad</span>
<span class="menu-item-price">$6.99</span>
</h3>
<p class="menu-item-desc">Tossed salad, avocado with housemade ginger dressing.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Seaweed Salad</span>
<span class="menu-item-price">$7.99</span>
</h3>
<p class="menu-item-desc">Marinated mixed seaweed.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Cucumber Salad</span>
<span class="menu-item-price">$5.99</span>
</h3>
<p class="menu-item-desc">Sliced cucumber with homemade vinegar dressing.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Tako Su</span>
<span class="menu-item-price">$8.99</span>
</h3>
<p class="menu-item-desc">Sliced octopus on top of cucumber salad.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Ebi Su</span>
<span class="menu-item-price">$7.99</span>
</h3>
<p class="menu-item-desc">Cooked shrimp on top of cucumber salad.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Mixed Sunomono</span>
<span class="menu-item-price">$11.99</span>
</h3>
<p class="menu-item-desc">Assorted raw seafood on top of cucumber salad.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Spicy maguro poke Salad</span>
<span class="menu-item-price">$12.99</span>
</h3>
<p class="menu-item-desc">Diced tuna tossed in spicy teriyaki sauce, togarashi,
chili oil, avocado.</p>
</div>
</div>
</div>
</div>
<div class="menu">
<h2 class="menu-group-heading">Nigiri/Sashimi</h2>
<div class="menu-group">
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Sake/Smoked Sake</span>
<span class="menu-item-price">$7.99</span>
</h3>
<p class="menu-item-desc">4 pcs fresh salmon/smoked salmon</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Maguro/Shiro Maguro</span>
<span class="menu-item-price">$8.99</span>
</h3>
<p class="menu-item-desc">4 pcs fresh tuna/fresh white tuna.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Hamachi</span>
<span class="menu-item-price">$7.99</span>
</h3>
<p class="menu-item-desc">4 pcs fresh yellowtail.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Saba</span>
<span class="menu-item-price">$8.99</span>
</h3>
<p class="menu-item-desc">4 pcs makerel.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Ebi</span>
<span class="menu-item-price">$7.99</span>
</h3>
<p class="menu-item-desc">4 pcs cooked shrimp.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Hotate</span>
<span class="menu-item-price">$8.99</span>
</h3>
<p class="menu-item-desc">4 pcs scallop.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Kani Kama</span>
<span class="menu-item-price">$7.99</span>
</h3>
<p class="menu-item-desc">4 pcs crab stick.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Unagi</span>
<span class="menu-item-price">$8.99</span>
</h3>
<p class="menu-item-desc">4 pcs fresh water eel. </p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Ikura</span>
<span class="menu-item-price">$9.99</span>
</h3>
<p class="menu-item-desc">4 pcs salmon roe.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Masago</span>
<span class="menu-item-price">$8.99</span>
</h3>
<p class="menu-item-desc">4 pcs Smelt roe.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Tamago</span>
<span class="menu-item-price">$7.99</span>
</h3>
<p class="menu-item-desc">4 pcs Japanese omelet</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Wagyu Nigiri</span>
<span class="menu-item-price">$12.99</span>
</h3>
<p class="menu-item-desc">4 pcs thinly sliced savory wagyu steak.</p>
</div>
</div>
</div>
</div>
<div class="menu">
<h2 class="menu-group-heading">Sushi / Sashimi Platters</h2>
<div class="menu-group">
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Sushi A</span>
<span class="menu-item-price">$19.99</span>
</h3>
<p class="menu-item-desc">6 pcs nigiri (chef's selection) with spicy tuna maki.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Sashimi A</span>
<span class="menu-item-price">$35.99</span>
</h3>
<p class="menu-item-desc">14 pcs assorted sashimi. (chef's selection)</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Sushi B</span>
<span class="menu-item-price">$23.99</span>
</h3>
<p class="menu-item-desc">7 pcs nigiri (chef's selection) with spicy tuna maki.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Sashimi B</span>
<span class="menu-item-price">$39.99</span>
</h3>
<p class="menu-item-desc">21 pcs assorted sashimi. (chef's selection)</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Super Sashimi</span>
<span class="menu-item-price">$45.99</span>
</h3>
<p class="menu-item-desc">28 pcs assorted sashimi. (chef's selection)</p>
</div>
</div>
</div>
</div>
<div class="menu">
<h2 class="menu-group-heading">Maki (Rolls)</h2>
<div class="menu-group">
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Tekka</span>
<span class="menu-item-price">$9.99</span>
</h3>
<p class="menu-item-desc">8 pcs fresh tuna.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Sake</span>
<span class="menu-item-price">$8.99</span>
</h3>
<p class="menu-item-desc">8 pcs fresh salmon.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Negi Hamachi</span>
<span class="menu-item-price">$9.99</span>
</h3>
<p class="menu-item-desc">8 pcs yellowtail, scallion.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Ebi Kyo</span>
<span class="menu-item-price">$8.99</span>
</h3>
<p class="menu-item-desc">8 pcs cooked shrimp, cucumber, avocado.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Sake Avocado</span>
<span class="menu-item-price">$9.99</span>
</h3>
<p class="menu-item-desc">8 pcs fresh salmon, avocado.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">unagi Q</span>
<span class="menu-item-price">$8.99</span>
</h3>
<p class="menu-item-desc">8 pcs grilled fresh water eel, cucumber.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Spicy Scallop</span>
<span class="menu-item-price">$9.99</span>
</h3>
<p class="menu-item-desc">8 pcs scallop, masago, scallion, spicy mayo, cucumber. </p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Spicy Tago</span>
<span class="menu-item-price">$9.99</span>
</h3>
<p class="menu-item-desc">8 pcs marinated octopus, masago, spicy mayo,
scallion.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Spider</span>
<span class="menu-item-price">$12.99</span>
</h3>
<p class="menu-item-desc">7 pcs fried soft shell crab, avocado, cucumber,
masago, scallion, spicy mayo.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Alaska</span>
<span class="menu-item-price">$13.99</span>
</h3>
<p class="menu-item-desc">9 pcs fresh salmon, avocado, masago.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Boston</span>
<span class="menu-item-price">$13.99</span>
</h3>
<p class="menu-item-desc">9 pcs fresh salmon, Boston lettuce, cucumber,
avocado, masago, scallion, spicy mayo.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Philadelphia</span>
<span class="menu-item-price">$13.99</span>
</h3>
<p class="menu-item-desc">9 pcs smoked salmon, cream cheese,
cucumber, avocado.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">California</span>
<span class="menu-item-price">$13.99</span>
</h3>
<p class="menu-item-desc">9 pcs snow crab, mayo, avocado.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Chicago</span>
<span class="menu-item-price">$13.99</span>
</h3>
<p class="menu-item-desc">9 pcs Super white tuna, jalapeno.</p>
</div>
</div>
</div>
</div>
<div class="menu">
<h2 class="menu-group-heading">Donburi</h2>
<div class="menu-group">
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Sake Donburi</span>
<span class="menu-item-price">$16.99</span>
</h3>
<p class="menu-item-desc">Fresh salmon over a bed of sushi rice </p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Tekka Donburi</span>
<span class="menu-item-price">$17.99</span>
</h3>
<p class="menu-item-desc">Fresh tuna over a bed of sushi rice.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Hamachi donburi</span>
<span class="menu-item-price">$17.99</span>
</h3>
<p class="menu-item-desc">Yellowtail over a bed of sushi rice.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Chirashi </span>
<span class="menu-item-price">$19.99</span>
</h3>
<p class="menu-item-desc">Assorted raw seafood over a bed of sushi rice.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Unagi Donburi</span>
<span class="menu-item-price">$19.99</span>
</h3>
<p class="menu-item-desc">Grilled fresh water eel glazed with teriyaki sauce
over a bed of rice.</p>
</div>
</div>
</div>
</div>
<div class="menu">
<h2 class="menu-group-heading">Beverages</h2>
<div class="menu-group">
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Hot Green Tea</span>
<span class="menu-item-price">$2.99</span>
</h3>
<p class="menu-item-desc"></p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Iced Green Tea</span>
<span class="menu-item-price">$3.99</span>
</h3>
<p class="menu-item-desc"></p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Coke / Diet / Sprite</span>
<span class="menu-item-price">$2.59</span>
</h3>
<p class="menu-item-desc"></p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Bottled Water</span>
<span class="menu-item-price">$1.99</span>
</h3>
<p class="menu-item-desc"></p>
</div>
</div>
</div>
</div>
<div class="menu">
<h2 class="menu-group-heading">Desserts</h2>
<div class="menu-group">
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Matcha Ice Cream</span>
<span class="menu-item-price">$5.99</span>
</h3>
<p class="menu-item-desc"></p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Mochi Ice Cream</span>
<span class="menu-item-price">$4.99</span>
</h3>
<p class="menu-item-desc">Choices of Green tea, Red Bean, Vanilla, Strawberry, Chocolate.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Matcha Cheesecake</span>
<span class="menu-item-price">$8.99</span>
</h3>
<p class="menu-item-desc">Served with 2 scoops of matcha ice cream.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Dango</span>
<span class="menu-item-price">$3.99</span>
</h3>
<p class="menu-item-desc">Sweet rice dumplings on a skewe</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-text">
<h3 class="menu-item-heading">
<span class="menu-item-name">Taiyaki</span>
<span class="menu-item-price">$6.99</span>
</h3>
<p class="menu-item-desc">A Japanese fish-shaped cake filled with red bean paste.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="main.js"></script>
</body>
</html>