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-05-31 19:13:29 -05:00
parent 1733aff426
commit 46daa4ae97
4 changed files with 80 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
restaurant_website/index.html
View file

@ -27,7 +27,7 @@
<i class="close-btn fas fa-times-circle"></i>
</div>
<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="#reservation">RESERVATION</a></li>
<li><a href="">ABOUT</a></li>
@ -162,7 +162,7 @@
<div class="special-imgs">
<img src="images/chef2.jpg">
<div class="special-img-text">
<h4>Shrimp Okonomiyaki</h4>
<h4>Ebi Okonomiyaki</h4>
<p>Tempura fried shrimp, corn, Creole butter, arare.</p>
</div>
</div>
@ -180,7 +180,7 @@
</div>
</div>
<div class="price">
<p>$16.99</p>
<p>$12.99</p>
</div>
</div>
<!--chef4-->
@ -188,12 +188,12 @@
<div class="special-imgs">
<img src="images/chef4.jpg">
<div class="special-img-text">
<h4>Zaru Soba</h4>
<p>Cold soba noodles dipped in Tsuyu sauce. </p>
<h4>Tekka Maki</h4>
<p>8 pcs fresh tuna.</p>
</div>
</div>
<div class="price">
<p>$7.99</p>
<p>$9.99</p>
</div>
</div>
</div>
@ -321,11 +321,7 @@
</div>
</div>
</section>
<script src="main.js"></script>
</body>

27
restaurant_website/menu.css
View file

@ -41,7 +41,7 @@ html{
}
.menu-group{
display: grid;
grid-template-columns: 1fr;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
padding: 1.5rem 0;
}
@ -63,6 +63,31 @@ html{
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;
}
}

70
restaurant_website/menu.html
View file

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<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="stylesheet" href="style.css">
<link rel="stylesheet" href="menu.css">
@ -17,33 +17,32 @@
</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>
<header>
<div class="container">
<div class="navbar">
<div class="logo">
<a href=""><img src="images/logo.png"></a>
<span>FUJISAN</span>
</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>
<nav>
<div class="heading-btn">
<i class="close-btn fas fa-times-circle"></i>
</div>
<li><a href="index.html">HOME</a></li>
<li><a href="menu.html">MENU</a></li>
<li><a href="">ORDER</a></li>
<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>
</header>
<section class="container" id="menu-container">
<div class="menu">
<h2 class="menu-group-heading">Appetizers</h2>
<div class="menu-group">
@ -134,6 +133,29 @@
</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">
<h2 class="menu-group-heading">Sunomono Salad</h2>
<div class="menu-group">
@ -653,7 +675,7 @@
</div>
</div>
</section>
<script src="main.js"></script>
</body>

4
restaurant_website/style.css
View file

@ -497,9 +497,7 @@ label{
.contact .call, .email, .address{
color: var(--main-color);
}
/*--------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------end of index page-------------------------------------------------------------------------*/
@media(max-width:1100px){
html{
font-size: 80%;