Update

2025-09-24 15:30:55 +02:00
parent 12ad274048
commit 46abca0795
5 changed files with 101 additions and 8 deletions
--- a/Assets/Côtelettes/CoteletteDAgneau1.jpg
+++ b/Assets/Côtelettes/CoteletteDAgneau1.jpg
--- a/Assets/Côtelettes/CotelettesDAgneau2.jpg
+++ b/Assets/Côtelettes/CotelettesDAgneau2.jpg
--- a/Assets/style.css
+++ b/Assets/style.css
@@ -45,7 +45,7 @@ main {
 }

 .recette-du-jour img {
-  width: 100%;
+  width: 30%;
  border-radius: 5px;
 }

@@ -63,7 +63,7 @@ main {
 }

 .autres-recettes img {
-  width: 100%;
+  width: 50%;
  border-radius: 5px;
 }

--- a/Assets/style.css~
+++ b/Assets/style.css~
@@ -0,0 +1,93 @@
+/* --- RESET SIMPLE --- */
+body {
+  margin: 0;
+  font-family: Arial, sans-serif;
+  background: #f8f8f8;
+  color: #333;
+}
+
+/* --- HEADER --- */
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #ffcc66;
+  padding: 10px 20px;
+}
+
+
+header .menu a {
+  text-decoration: none;
+  color: #333;
+  font-weight: bold;
+}
+
+header .burger {
+  font-size: 1.5em;
+  cursor: pointer;
+}
+
+/* --- SECTION PRINCIPALE --- */
+main {
+  padding: 20px;
+}
+
+.content {
+  display: flex;
+  gap: 20px;
+}
+
+.recette-du-jour {
+  flex: 2;
+  background: white;
+  padding: 10px;
+  border-radius: 8px;
+}
+
+.recette-du-jour img {
+  width: 100%;
+  border-radius: 5px;
+}
+
+.autres-recettes {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.autres-recettes .mini-recette {
+  background: white;
+  padding: 10px;
+  border-radius: 8px;
+}
+
+.autres-recettes img {
+  width: 100%;
+  border-radius: 5px;
+}
+
+/* --- RESPONSIVE --- */
+@media (max-width: 768px) {
+  .content {
+    flex-direction: column;
+  }
+  .autres-recettes {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+  .autres-recettes .mini-recette {
+    flex: 1 1 45%;
+  }
+}
+
+@media (max-width: 480px) {
+  header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .burger {
+    align-self: flex-end;
+  }
+}
--- a/SiteDeRecettes/index.html
+++ b/SiteDeRecettes/index.html
@@ -3,13 +3,13 @@
 <head>
  <meta charset="UTF-8">
  <title>Recettes de Cuisine</title>
-  <link rel="stylesheet" href="assets/style.css">
+  <link rel="stylesheet" href="../Assets/style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
  <!-- HEADER -->
  <header>
-    <div class="logo"><img src="assets/logo.png" alt="Logo du site"></div>
+    <div class="logo"><img src="../Assets/logo.png" alt="Logo du site"></div>
    <nav class="menu">
      <a href="index.html">Accueil</a>
    </nav>
@@ -23,7 +23,7 @@
      <!-- Recette du jour -->
      <article class="recette-du-jour">
        <a href="CotelettesDAgneau.html">
-        <img src="assets/recette-jour.jpg" alt="Recette du jour">
+        <img src="../Assets/Côtelettes/CotelettesDAgneau2.jpg" alt="Recette du jour">
       </a>
        <h3>Recette du jour</h3>
        <p> Les côtelettes d’agneau sont des morceaux tendres et savoureux provenant des côtes de l’agneau. Leur chair fine et légèrement rosée se distingue par un goût délicat et légèrement sucré, caractéristique de l’agneau jeune. Elles peuvent être préparées de multiples façons : grillées, rôties au four, ou poêlées, souvent accompagnées d’herbes aromatiques comme le romarin, le thym ou la menthe, qui rehaussent subtilement leur saveur naturelle.
@@ -35,19 +35,19 @@ Idéales pour un repas raffiné ou un barbecue, les côtelettes d’agneau se d
        <h3>Autres recettes</h3>
        <div class="mini-recette">
          <a href="FishAndChips.html">
-          <img src="Assets/AutresRecettes/FishAndChips.jpg." alt="Recette 1">
+          <img src="../Assets/AutresRecettes /FishAndChips.jpg" alt="Recette 1">
          </a>
          <p>Fish And Chips</p>
        </div>
        <div class="mini-recette">
         <a href="SaladeCesare.html">
-          <img src="Assets/AutresRecettes/SaladeCesareAccompagneDeSaSauceALaCreme.jpg" alt="Recette 2">
+          <img src="../Assets/AutresRecettes /SaladeCesareAccompagneDeSaSauceALaCreme.jpg" alt="Recette 2">
         </a>
          <p>Salade Cesare Accompagne De Sa Sauce A La Creme</p>
        </div>
        <div class="mini-recette">
         <a href="SpaghettiAuxCrevettes.html">
-          <img src="Assets/AutresRecettes/SpaghettiAuxCrevettes.jpg" alt="Recette 3">
+          <img src="../Assets/AutresRecettes /SpaghettiAuxCrevettes.jpg" alt="Recette 3">
         </a>
          <p>Spaghetti Aux Crevettes</p>
        </div>