diff --git a/SiteDeRecettes/accueil.html b/SiteDeRecettes/accueil.html
new file mode 100644
index 0000000..0e662bd
--- /dev/null
+++ b/SiteDeRecettes/accueil.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <title>Accueil | KooK</title>
+    <style>
+        body{
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            /* background-color: grey; */
+        }
+        div.navbar{
+            padding: 0 25px;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            border-bottom: 1px solid black;
+        }
+        div.menu{
+            width: 25px;
+            height: 25px;
+            background-color: red;
+        }
+        h1.titre{
+            text-align: center;
+        }
+        div.contenu{
+            /* padding: 0 50px 0 50px; */
+            width: 80vw;
+            margin: 70px auto;
+        }
+        div.LayoutRecettes{
+            display: flex;
+            flex-direction: row;
+            align-items: start;
+            justify-content: stretch;
+        }
+        div.LayoutRecettes div{
+            padding: 0 40px;
+        }
+        div.RecetteDuJour{
+            flex: 600px 2 1;
+        }
+        div.AutresRecettes{
+            flex: 300px 1 1;
+        }
+    </style>
+</head>
+<body>
+    <div class="navbar">
+        <a href="ARemplacer">KooK</a>
+        <h1>Accueil</h1>
+        <div class="menu"></div>
+    </div>
+    <div class="contenu">
+        <h1 class="titre">Prêt à cuisiner ?</h1>
+        <div class="LayoutRecettes">
+            <div class="RecetteDuJour">
+                <img src="ARemplacer" alt="Photo de la recette du jour">
+                <h2>Recette du jour : Blabla</h2>
+                <p class="descriptionRecetteJour">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cum ipsa, necessitatibus et eligendi enim deleniti, accusamus laudantium dignissimos, excepturi rerum eveniet consequuntur harum obcaecati delectus blanditiis reprehenderit tempore veritatis perspiciatis!</p>
+            </div>
+            <div class="AutresRecettes">
+                <h2>Autres recettes</h2>
+                <div class="recette"><img src="ARemplacer" alt="Photo de recettes alternatives">
+                    <a href="Aremplacer">
+                        <h3>Oeoe la recette</h3>
+                    </a>
+                </div>
+                <div class="recette"><img src="ARemplacer" alt="Photo de recettes alternatives">
+                    <a href="Aremplacer">
+                        <h3>Oeoe la recette</h3>
+                    </a>
+                </div>
+                <div class="recette"><img src="ARemplacer" alt="Photo de recettes alternatives">
+                    <a href="Aremplacer">
+                        <h3>Oeoe la recette</h3>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
