made changes
This commit is contained in:
JSriwongsa
parent
1733aff426
commit
46daa4ae97
4 changed files with 80 additions and 39 deletions
|
|
@ -27,7 +27,7 @@
|
||||||
<i class="close-btn fas fa-times-circle"></i>
|
<i class="close-btn fas fa-times-circle"></i>
|
||||||
</div>
|
</div>
|
||||||
<li><a href="">HOME</a></li>
|
<li><a href="">HOME</a></li>
|
||||||
<li><a href="">MENU</a></li>
|
<li><a href="menu.html">MENU</a></li>
|
||||||
<li><a href="">ORDER</a></li>
|
<li><a href="">ORDER</a></li>
|
||||||
<li><a href="#reservation">RESERVATION</a></li>
|
<li><a href="#reservation">RESERVATION</a></li>
|
||||||
<li><a href="">ABOUT</a></li>
|
<li><a href="">ABOUT</a></li>
|
||||||
|
|
@ -162,7 +162,7 @@
|
||||||
<div class="special-imgs">
|
<div class="special-imgs">
|
||||||
<img src="images/chef2.jpg">
|
<img src="images/chef2.jpg">
|
||||||
<div class="special-img-text">
|
<div class="special-img-text">
|
||||||
<h4>Shrimp Okonomiyaki</h4>
|
<h4>Ebi Okonomiyaki</h4>
|
||||||
<p>Tempura fried shrimp, corn, Creole butter, arare.</p>
|
<p>Tempura fried shrimp, corn, Creole butter, arare.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -180,7 +180,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="price">
|
<div class="price">
|
||||||
<p>$16.99</p>
|
<p>$12.99</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--chef4-->
|
<!--chef4-->
|
||||||
|
|
@ -188,12 +188,12 @@
|
||||||
<div class="special-imgs">
|
<div class="special-imgs">
|
||||||
<img src="images/chef4.jpg">
|
<img src="images/chef4.jpg">
|
||||||
<div class="special-img-text">
|
<div class="special-img-text">
|
||||||
<h4>Zaru Soba</h4>
|
<h4>Tekka Maki</h4>
|
||||||
<p>Cold soba noodles dipped in Tsuyu sauce. </p>
|
<p>8 pcs fresh tuna.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="price">
|
<div class="price">
|
||||||
<p>$7.99</p>
|
<p>$9.99</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -321,11 +321,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script src="main.js"></script>
|
<script src="main.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,7 @@ html{
|
||||||
}
|
}
|
||||||
.menu-group{
|
.menu-group{
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: repeat(2, 1fr);
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
padding: 1.5rem 0;
|
padding: 1.5rem 0;
|
||||||
}
|
}
|
||||||
|
|
@ -63,6 +63,31 @@ html{
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media(max-width:1100px){
|
||||||
|
html{
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media(max-width:800px){
|
||||||
|
html{
|
||||||
|
font-size: 70%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media(max-width:650px){
|
||||||
|
html{
|
||||||
|
font-size: 60%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media(max-width:500px){
|
||||||
|
html{
|
||||||
|
font-size: 60%;
|
||||||
|
}
|
||||||
|
.menu-group{
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Document</title>
|
<title>Menu</title>
|
||||||
<link rel="shortcut icon" href="images/logo.png">
|
<link rel="shortcut icon" href="images/logo.png">
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
<link rel="stylesheet" href="menu.css">
|
<link rel="stylesheet" href="menu.css">
|
||||||
|
|
@ -17,33 +17,32 @@
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script id="replace_with_navbar" src="nav.js"></script>
|
<header>
|
||||||
|
<div class="container">
|
||||||
<section class="container" id="menu-container">
|
<div class="navbar">
|
||||||
<div class="menu">
|
<div class="logo">
|
||||||
<h2 class="menu-group-heading">Soup</h2>
|
<a href=""><img src="images/logo.png"></a>
|
||||||
<div class="menu-group">
|
<span>FUJISAN</span>
|
||||||
<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>
|
<nav>
|
||||||
<div class="menu-item">
|
<div class="heading-btn">
|
||||||
<div class="menu-item-text">
|
<i class="close-btn fas fa-times-circle"></i>
|
||||||
<h3 class="menu-item-heading">
|
</div>
|
||||||
<span class="menu-item-name">Spicy Miso Soup</span>
|
<li><a href="index.html">HOME</a></li>
|
||||||
<span class="menu-item-price">$3.99</span>
|
<li><a href="menu.html">MENU</a></li>
|
||||||
</h3>
|
<li><a href="">ORDER</a></li>
|
||||||
<p class="menu-item-desc">Soybean based soup with tofu, seaweed, scallion, jalapeno, and spicy sauce.</p>
|
<li><a href="">RESERVATION</a></li>
|
||||||
|
<li><a href="">ABOUT</a></li>
|
||||||
|
<li><a href="">CONTACT</a></li>
|
||||||
|
</nav>
|
||||||
|
<div class="heading-btn">
|
||||||
|
<i class="menu-btn fas fa-bars"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="container" id="menu-container">
|
||||||
<div class="menu">
|
<div class="menu">
|
||||||
<h2 class="menu-group-heading">Appetizers</h2>
|
<h2 class="menu-group-heading">Appetizers</h2>
|
||||||
<div class="menu-group">
|
<div class="menu-group">
|
||||||
|
|
@ -134,6 +133,29 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<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">
|
<div class="menu">
|
||||||
<h2 class="menu-group-heading">Sunomono Salad</h2>
|
<h2 class="menu-group-heading">Sunomono Salad</h2>
|
||||||
<div class="menu-group">
|
<div class="menu-group">
|
||||||
|
|
@ -653,7 +675,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<script src="main.js"></script>
|
<script src="main.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -497,9 +497,7 @@ label{
|
||||||
.contact .call, .email, .address{
|
.contact .call, .email, .address{
|
||||||
color: var(--main-color);
|
color: var(--main-color);
|
||||||
}
|
}
|
||||||
/*--------------------------------------------------------------------------------------------------------------------------*/
|
/*-------------------------------------------------end of index page-------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
|
||||||
@media(max-width:1100px){
|
@media(max-width:1100px){
|
||||||
html{
|
html{
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue