plus d'amélioration

main.css

@@ -1,11 +1,3 @@
-/*
-
-
-
-
-
-*/
-
 /*Tout*/
 html, body{
     height: 100%;
@@ -35,14 +27,25 @@ html, body{
 }
 
 #nav {
-    background-color: yellow;
     flex: 9;
     text-align: initial;
     letter-spacing: 2px;
     padding: 10px;
 }
 
+#nav-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    background-color: rgb(255, 217, 160);
+    display: flex;
+    border: 1px solid rgba(0,0,0,.125);
+    border-radius: 40px;
+}
+
+
 .nav-element {
+    line-height: 2.5;
     padding: 10px;
 }
 
@@ -71,20 +74,59 @@ body {
     background-clip: border-box;
 }
 
+/* content : le cadre de base du centre de notre site
+*/
 #content {
-    background-color: red;
+    background-color: #ffe4bb;
     text-align: left;
     width: 100%;
     height: 100%;
     border: 1px solid rgba(0,0,0,.125);
-    border-radius: .25rem;
+    border-radius: 6px;
     overflow: scroll;
 }
 
+/*Recettes :
+    représente le contenue centrale de la page.
+*/
+#recettes {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 10px;
+    grid-auto-rows: minmax(300px, auto);
+}
+
+/* Classe recette icone :
+    C'est la classe de chaques éléments de notre liste de recette
+*/
+.recette-icone{
+    border: 3px solid rgba(0,0,0,.125);
+    border-radius: 40px;
+    text-align: center;
+    vertical-align: middle;
+}
+
+/*Ici commence le CSS pour la page de chaques recettes */
+
+#recette-content {
+    display: flex;
+    flex-direction: row;
+}
+#recette-image {
+    background-color: red;
+    flex : 2;
+    aspect-ratio: 1/1;
+    max-height: 225px;
+}
+
+#recette-desc {
+    padding : 10px;
+}
+
 /*Footer et son contenue*/
 footer{
     padding: 25px;
-    background: darkslateblue;
+    background: rgb(11, 189, 144);
     color: white;
 }