guillaumebdx/menus.php

## menus.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Carte et menus</title>
    <link href="styles.css" rel="stylesheet">
</head>
<body>

<?php
    require 'header.php';
    require 'menusData.php';
?>

  <div class="pic-ctn">
    <img src="assets_menus/steak.webp" alt="steak" class="pic" width= 700px >
    <img src="assets_menus/crepe.webp" alt="crepe" class="pic" width= 700px>
    <img src="assets_menus/icecream.webp" alt="icecream" class="pic" width= 700px>
    <img src="assets_menus/beef.webp" alt="beef" class="pic" width= 700px>
    <img src="assets_menus/burger.webp" alt="burger" class="pic" width= 700px>
    <img src="assets_menus/pizza.webp" alt="pizza" class="pic" width= 700px>
    <img src="assets_menus/tiramisu.jpg" alt="tiramisu" class="pic" width= 700px>
  </div>

  <div class="menu">
<h1>Menus</h1>

<ul id="navMenus">
  <li><a href="#Entrées">Entrées</a></li>
  <li><a href="#Plats">Plats</a></li>
  <li><a href="#Desserts">Desserts</a></li>
  <li><a href="#Boissons">Boissons</a></li>

</ul>

  </div>

  <div class="container">
    <div class="menu">
        <?php foreach ($menus as $menuType => $meals): ?>
            <h2 class="menu-group-heading">
                <?= $menuType ?>
            </h2>
            <?php foreach ($meals as $key => $mealDetails): ?>
                <div class="menu-item">
                    <img class="menu-item-image" src="https://picsum.photos/50/50?random=<?= $key ?>" alt="<?= $mealDetails['img'] ?>">
                    <div class="menu-item-text">
                        <h3 class="menu-item-heading">
                            <span class="menu-item-name"><?= $mealDetails['name'] ?></span>
                            <span class="menu-item-price"><?= $mealDetails['price'] ?> €</span>
                        </h3>
                        <p class="menu-item-description">
                            <?= $mealDetails['description'] ?>
                        </p>
                    </div>
                </div>
            <?php endforeach ?>
        <?php endforeach; ?>
    </div>
  </div>

  <?php
        require 'footer.php';
    ?>
<script src = "script.js"></script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=, initial-scale=1.0">
	<title>Carte et menus</title>
	<link href="styles.css" rel="stylesheet">
	</head>
	<body>

	<?php
	require 'header.php';
	require 'menusData.php';
	?>

	<div class="pic-ctn">
	<img src="assets_menus/steak.webp" alt="steak" class="pic" width= 700px >
	<img src="assets_menus/crepe.webp" alt="crepe" class="pic" width= 700px>
	<img src="assets_menus/icecream.webp" alt="icecream" class="pic" width= 700px>
	<img src="assets_menus/beef.webp" alt="beef" class="pic" width= 700px>
	<img src="assets_menus/burger.webp" alt="burger" class="pic" width= 700px>
	<img src="assets_menus/pizza.webp" alt="pizza" class="pic" width= 700px>
	<img src="assets_menus/tiramisu.jpg" alt="tiramisu" class="pic" width= 700px>
	</div>

	<div class="menu">
	<h1>Menus</h1>

	<ul id="navMenus">
	<li><a href="#Entrées">Entrées</a></li>
	<li><a href="#Plats">Plats</a></li>
	<li><a href="#Desserts">Desserts</a></li>
	<li><a href="#Boissons">Boissons</a></li>

	</ul>

	</div>

	<div class="container">
	<div class="menu">
	<?php foreach ($menus as $menuType => $meals): ?>
	<h2 class="menu-group-heading">
	<?= $menuType ?>
	</h2>
	<?php foreach ($meals as $key => $mealDetails): ?>
	<div class="menu-item">
	<img class="menu-item-image" src="https://picsum.photos/50/50?random=<?= $key ?>" alt="<?= $mealDetails['img'] ?>">
	<div class="menu-item-text">
	<h3 class="menu-item-heading">
	<span class="menu-item-name"><?= $mealDetails['name'] ?></span>
	<span class="menu-item-price"><?= $mealDetails['price'] ?> €</span>
	</h3>
	<p class="menu-item-description">
	<?= $mealDetails['description'] ?>
	</p>
	</div>
	</div>
	<?php endforeach ?>
	<?php endforeach; ?>
	</div>
	</div>

	<?php
	require 'footer.php';
	?>
	<script src = "script.js"></script>
	</body>
	</html>