Add internal link to my projects list

assets/css/styles.css

@@ -57,10 +57,13 @@ section:last-child {
 }
 
 main section ul {
-  padding: 15px;
-  width: 70%;
+  padding: 50px 0;
+  width: 90%;
   margin: 0 auto; /* To center the element*/
-  /* display: grid; */
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 50px 0;
+  justify-items: center;
 }
 
 main li {

index.html

@@ -18,7 +18,7 @@
       <a href="/index.html">Fellah</a>
       <nav>
         <ul>
-          <li><a href="/presentation.html">Presentation</a></li>
+          <li><a href="#projects">Presentation</a></li>
           <li><a href="/formation.html">Education</a></li>
           <li><a href="/contact.html">Contact</a></li>
         </ul>
@@ -29,7 +29,7 @@
         <div>
           <h1>Fellah's Portfolio</h1>
           <p>Let's explore my projects together!</p>
-          <a href="/portfolio.html">Discover projects</a>
+          <a href="#projects">Discover projects</a>
         </div>
       </section>
       <!-- <section>
@@ -58,7 +58,7 @@
           </li>
         </ul>
       </section> -->
-      <section>
+      <section id="projects">
         <ul>
           <li>
             <img
@@ -83,6 +83,75 @@
               </footer>
             </article>
           </li>
+          <li>
+            <img
+              src="/assets/images/projects/alejandro-escamilla-xII7efH1G6o-unsplash.jpg"
+              alt=""
+            />
+            <article>
+              <div>
+                <h2>Sokoban</h2>
+                <p>
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Officia ipsa laudantium aliquid dicta consequatur consectetur
+                  rerum Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Esse temporibus accusamus, ipsam adipisci voluptates non
+                  dolorem possimus asperiores tempore, beatae repellendus dolor
+                  maxime provident inventore totam omnis blanditiis! Nulla,
+                  placeat.
+                </p>
+              </div>
+              <footer>
+                <a href="/">explore -></a>
+              </footer>
+            </article>
+          </li>
+          <li>
+            <img
+              src="/assets/images/projects/alejandro-escamilla-xII7efH1G6o-unsplash.jpg"
+              alt=""
+            />
+            <article>
+              <div>
+                <h2>Labyrinthe MIPS</h2>
+                <p>
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Officia ipsa laudantium aliquid dicta consequatur consectetur
+                  rerum Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Esse temporibus accusamus, ipsam adipisci voluptates non
+                  dolorem possimus asperiores tempore, beatae repellendus dolor
+                  maxime provident inventore totam omnis blanditiis! Nulla,
+                  placeat.
+                </p>
+              </div>
+              <footer>
+                <a href="/">explore -></a>
+              </footer>
+            </article>
+          </li>
+          <li>
+            <img
+              src="/assets/images/projects/alejandro-escamilla-xII7efH1G6o-unsplash.jpg"
+              alt=""
+            />
+            <article>
+              <div>
+                <h2>Email Marketing</h2>
+                <p>
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Officia ipsa laudantium aliquid dicta consequatur consectetur
+                  rerum Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Esse temporibus accusamus, ipsam adipisci voluptates non
+                  dolorem possimus asperiores tempore, beatae repellendus dolor
+                  maxime provident inventore totam omnis blanditiis! Nulla,
+                  placeat.
+                </p>
+              </div>
+              <footer>
+                <a href="/">explore -></a>
+              </footer>
+            </article>
+          </li>
         </ul>
       </section>
     </main>