NEHC' XAM
Welcome to Max's website!
Exercise 3
Coding:
index:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Max Programming class - Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1><Max's Class></h1>
<nav class="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="sushi.html">sushi</a></li>
<li><a href="bbq.html">BBQ</a></li>
<li><a href="steak.html">steak</a></li>
<li><a href="css.html">ramen</a></li>
</ul>
</nav>
</main>
</body>
</html>
<main>
<h3>Welcome to the Max's website</h3>
<p>
Welcome to a place where bold flavors and culinary traditions come together in one unforgettable experience. Our website showcases a vibrant collection of dishes inspired by some of the most beloved cuisines around the world. From the delicate craftsmanship of fresh sushi and the comforting richness of steaming ramen, to the deep, smoky flavor of perfectly grilled steaks and the irresistible aroma of authentic Chinese BBQ skewers, every dish tells a story of passion, skill, and flavor.<br><br>
Here, food is more than just a meal—it is an experience. Each dish is prepared with carefully selected ingredients and traditional cooking techniques that bring out the best in every bite. The freshness of the seafood, the slow-simmered depth of ramen broth, the satisfying sizzle of steak on the grill, and the bold spices of skewered barbecue all come together to create a menu that is both diverse and exciting.
Whether you are a fan of Japanese classics, hearty grilled favorites, or the lively street-food culture of Chinese barbecue, there is always something new and delicious to discover. Explore our collection and let the colors, aromas, and flavors take you on a journey through some of the most exciting tastes in the world of food.
</p>
<img src="lake.jpg" alt="ramen" width="600" height="800" border="10" >
</main>
</body>
</html>
steak
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="style.css">
<head>
<nav class="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="sushi.html">sushi</a></li>
<li><a href="bbq.html">BBQ</a></li>
<li><a href="steak.html">steak</a></li>
<li><a href="css.html">ramen</a></li>
</ul>
</nav>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foods</title>
<style>
body {
margin: 0;
font-family: Georgia, serif;
background-color: #d1d1d1;
color: #000;
}
.container {
width: 90%;
max-width: 1000px;
margin: auto;
padding: 20px;
}
header h1 {
color: rgb(95, 106, 139);
font-size: 50px;
margin-bottom: 0;
}
header p {
color: #6b698b;
font-style: italic;
margin-top: 5px;
}
h2 {
margin-top: 25px;
font-size: 15px;
}
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 10px;
margin-bottom: 30px;
}
.gallery img {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.ingredients {
margin-top: 20px;
}
.ingredients h3 {
margin-bottom: 10px;
}
.ingredients ul {
padding-left: 20px;
line-height: 1.6;
}
@media (max-width: 768px) {
.gallery {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>steak</h1>
<p>steak comparison </p>
</header>
<div class="gallery">
<img src="steak1.jpg" alt="steak1">
<img src="steak2.jpg" alt="steak2">
<img src="steak3.jpg" alt="steak3">
</div>
<div class="gallery">
<img src="steak4.jpg" alt="steak4">
<img src="steak5.jpg" alt="steak5">
</div>
<div class="ingredients">
<h3>Ingredients for steak:</h3>
<ul>
<li>boneless ribeye or scotch fillet( recommend 2.5cm thick)</li>
<li>1 tea spoon vegetable oil</li>
<li>salt and pepper</li>
<li>75g / 5 tbsp unsalted butter </li>
<li>6 sprigs fresh thyme or 3 sprigs rosemary</li>
<li>5 garlic cloves</li>
</ul>
</div>
</div>
</body>
</html>
</main>
</body>
</html>
BBQ
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="style.css">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foods</title>
<nav class="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="sushi.html">sushi</a></li>
<li><a href="bbq.html">BBQ</a></li>
<li><a href="steak.html">steak</a></li>
<li><a href="css.html">ramen</a></li>
</ul>
</nav>
<style>
body {
margin: 0;
font-family: Georgia, serif;
background-color: #ffffff;
color: #000;
}
.container {
width: 90%;
max-width: 1000px;
margin: auto;
padding: 20px;
}
header h1 {
color: rgb(36, 74, 190);
font-size: 50px;
margin-bottom: 0;
}
header p {
color: #7b75e5;
font-style: italic;
margin-top: 5px;
}
h2 {
margin-top: 25px;
font-size: 15px;
}
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 10px;
margin-bottom: 30px;
}
.gallery img {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.ingredients {
margin-top: 20px;
}
.ingredients h3 {
margin-bottom: 10px;
}
.ingredients ul {
padding-left: 20px;
line-height: 1.6;
}
@media (max-width: 768px) {
.gallery {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>BBQ</h1>
<p>BBQ comparison </p>
</header>
<div class="gallery">
<img src="bbq1.jpg" alt="FC1">
<img src="bbq2.jpg" alt="FC2">
<img src="bbq3.jpg" alt="FC3">
</div>
<div class="gallery">
<img src="bbq4.jpg" alt="FC4">
<img src="bbq5.jpg" alt="FC5">
</div>
<div class="ingredients">
<h3>Ingredients for BBQs:</h3>
<ul>
<li>pork shoulder/butt/neck end/orrk belly/squid/chicken</li>
<li>Hoisin sause</li>
<li>oyster sause</li>
<li>light soy sause</li>
<li>red fermented bean curd</li>
<li>hooney or maltose</li>
<li>brown sugar</li>
<li>toasted sesame oil</li>
<li>garlic</li>
<li>Cinese 5 spiece powder</li>
<li>white pepper</li>
<li>red yeast rice powder</li>
<li>shaoxing wine</li>
</ul>
</div>
</div>
</body>
</html>
</main>
</body>
</html>
Ramen
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="style.css">
<head>
<nav class="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="sushi.html">sushi</a></li>
<li><a href="bbq.html">BBQ</a></li>
<li><a href="steak.html">steak</a></li>
<li><a href="css.html">ramen</a></li>
</ul>
</nav>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foods</title>
<style>
body {
margin: 0;
font-family: Georgia, serif;
background-color: #dcdcdc;
color: #000;
}
.container {
width: 90%;
max-width: 1000px;
margin: auto;
padding: 20px;
}
header h1 {
color: purple;
font-size: 29px;
margin-bottom: 0;
}
header p {
color: #807cc9;
font-style: italic;
margin-top: 5px;
}
h2 {
margin-top: 25px;
font-size: 15px;
}
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 10px;
margin-bottom: 30px;
}
.gallery img {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.ingredients {
margin-top: 20px;
}
.ingredients h3 {
margin-bottom: 10px;
}
.ingredients ul {
padding-left: 20px;
line-height: 1.6;
}
@media (max-width: 768px) {
.gallery {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Good ramen vs ramen</h1>
<p>Ramen comparison </p>
</header>
<h2>Shio Ramen </h2>
<div class="gallery">
<img src="ramen1.jpg" alt="ramen1">
<img src="ramen2.jpg" alt="Ramen2">
<img src="ramen3.jpg" alt="Ramen3">
</div>
<h2>Ramen but not ramen</h2>
<div class="gallery">
<img src="ramen4.jpg" alt="Whistler">
<img src="ramen5.jpg" alt="Miso ramen">
<img src="ramen6.jpg" alt="Ramen">
</div>
<div class="ingredients">
<h3>Ingredients for ramen:</h3>
<ul>
<li>Chicken Stock</li>
<li>Sesame oil</li>
<li>Soy sauce</li>
<li>Noodles</li>
<li>Ginger</li>
<li>Minced garlic</li>
<li>Egg</li>
<li>Scallions</li>
<li>Shiitake mushroom</li>
<li>Water</li>
<li>Mirin</li>
<li>Miso</li>
<li>Corn & onion</li>
</ul>
</div>
</div>
</body>
</html>
sushi
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="style.css">
<head>
<nav class="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="sushi.html">sushi</a></li>
<li><a href="bbq.html">BBQ</a></li>
<li><a href="steak.html">steak</a></li>
<li><a href="css.html">ramen</a></li>
</ul>
</nav>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sushi</title>
<style>
body {
margin: 0;
font-family: Georgia, serif;
background-color: #dbd7d7;
color: #000;
}
.container {
width: 90%;
max-width: 1000px;
margin: auto;
padding: 20px;
}
header h1 {
color: rgb(239, 123, 233);
font-size: 50px;
margin-bottom: 0;
}
header p {
color: #a465a4;
font-style: italic;
margin-top: 5px;
}
h2 {
margin-top: 25px;
font-size: 15px;
}
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 10px;
margin-bottom: 30px;
}
.gallery img {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.ingredients {
margin-top: 20px;
}
.ingredients h3 {
margin-bottom: 10px;
}
.ingredients ul {
padding-left: 20px;
line-height: 1.6;
}
@media (max-width: 768px) {
.gallery {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>sushi</h1>
<p>sushi comparison </p>
</header>
<div class="gallery">
<img src="sushi1.jpg" alt="ss1">
<img src="sushi2.jpg" alt="ss2">
</div>
<div class="gallery">
<img src="sushi4.jpg" alt="ss3">
<img src="sushi3.jpg" alt="ss4">
</div>
<div class="ingredients">
<h3>Ingredients for sushi:</h3>
<ul>
<li>sushi Rice</li>
<li>Nori</li>
<li>salmon</li>
<li>tuna</li>
<li>yellowtail</li>
<li>eel</li>
<li>shrimp</li>
<li>tamago</li>
<li>cucumber</li>
<li>avocado</li>
<li>carrots</li>
<li>wasabi</li>
<li>soy sause</li>
</ul>
</div>
</div>
</body>
</html>
</main>
</body>
</html>
CSS
main {
width: 800px;
margin: 30px auto;
}
.navbar ul {
list-style-type: none;
background-color: rgb(48, 122, 234);
padding: 0;
margin: 0;
text-align: center; /* centers all <li> inline-block items */
}
.navbar li {
display: inline-block; /* makes list items sit next to each other */
}
.navbar a {
color: white;
text-decoration: none;
padding: 15px;
display: inline-block; /* keeps padding clickable */
}