Finish my card presentation

e36b1a1c · DIALLO ABDOUL-AZIZ · efa709d7 · e36b1a1c · e36b1a1c · e36b1a1c
Commit e36b1a1c authored 2 years ago by DIALLO ABDOUL-AZIZ
--- a/assets/css/contact.css
+++ b/assets/css/contact.css
+header {
+  position: static;
+}
--- a/assets/css/shared.css
+++ b/assets/css/shared.css
@@ -61,3 +61,26 @@ header li a:hover {
  color: #000000;
  background-color: #ffffffb3;
 }
+
+/* Pour le pied de la page */
+/* le footer qui suit le main */
+main + footer {
+  background: linear-gradient(70deg, rgb(24, 24, 24), rgb(25, 29, 29));
+  padding: 36px;
+}
+
+main + footer ul {
+  display: flex;
+  justify-content: center;
+}
+
+main + footer li {
+  width: 80px;
+  height: 80px;
+  margin: 0 50px;
+}
+
+main + footer img {
+  width: 100%;
+  height: 100%;
+}
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -51,3 +51,57 @@ section:first-child a:hover {
  background-color: #141304;
  color: white;
 }
+
+section:last-child {
+  background: linear-gradient(60deg, rgb(77, 77, 77), rgb(58, 58, 58));
+}
+
+main section ul {
+  padding: 15px;
+  width: 70%;
+  margin: 0 auto; /* To center the element*/
+  /* display: grid; */
+}
+
+main li {
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  justify-content: center;
+  align-items: center;
+  width: 410px;
+  border-radius: 6px;
+  box-shadow: 1px 1px 4px rgb(0, 0, 0, 0.2);
+  overflow: hidden; /* Pour cacher le depassement de l'image sur les coins*/
+}
+
+main section li img {
+  width: 100%;
+  height: 280px;
+  object-fit: cover;
+}
+
+article {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 24px;
+}
+
+/* On selectionne le button "explore"*/
+footer:last-child {
+  text-align: right;
+}
+
+footer:last-child a {
+  color: rgb(121, 121, 36);
+  font-weight: bold;
+  text-decoration: none;
+  padding: 6px;
+  border-radius: 6px;
+}
+
+footer:last-child a:hover {
+  color: white;
+  background-color: black;
+}
--- a/assets/images/icons/facebook.png
+++ b/assets/images/icons/facebook.png
--- a/assets/images/icons/insta.png
+++ b/assets/images/icons/insta.png
--- a/contact.html
+++ b/contact.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=device-width, initial-scale=1.0" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Raleway:wght@700&family=Oleo+Script:wght@700&family=Quicksand:wght@300;500;700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="assets/css/shared.css" />
+    <link rel="stylesheet" href="assets/css/contact.css" />
+    <title>fellah's portfolio</title>
+  </head>
+  <body>
+    <header>
+      <!--I added this.-->
+      <a href="/index.html">Fellah</a>
+      <nav>
+        <ul>
+          <li><a href="/presentation.html">Presentation</a></li>
+          <li><a href="/formation.html">Education</a></li>
+          <li><a href="/contact.html">Contact</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main></main>
+    <footer>
+      <ul>
+        <li>
+          <a href="https://www.instagram.com">
+            <img src="/assets/images/icons/insta.png" alt="instagram logo" />
+          </a>
+        </li>
+        <li>
+          <a href="https://www.facebook"
+            ><img src="/assets/images/icons/facebook.png" alt="facebook logo"
+          /></a>
+        </li>
+      </ul>
+    </footer>
+  </body>
+</html>
--- a/index.html
+++ b/index.html
@@ -32,8 +32,73 @@
          <a href="/portfolio.html">Discover projects</a>
        </div>
      </section>
-      <section></section>
+      <!-- <section>
+        <h2>Favorites</h2>
+        <ul id="favorites-projects">
+          <li>
+            <img
+              src="/assets/images/projects/web1.jpg"
+              alt="angela yu web 3 project"
+            />
+            <p>dbang app <strong>WEB 3</strong></p>
+          </li>
+          <li>
+            <img
+              src="/assets/images/projects/web2.jpg"
+              alt="dkeeper-app image"
+            />
+            <p>dkeeper app <strong>WEB 3</strong></p>
+          </li>
+          <li>
+            <img
+              src="/assets/images/projects/web3.jpg"
+              alt="sokoban Tec Dev project"
+            />
+            <p>Sokoban puzzle<strong>C programming</strong></p>
+          </li>
+        </ul>
+      </section> -->
+      <section>
+        <ul>
+          <li>
+            <img
+              src="/assets/images/projects/alejandro-escamilla-xII7efH1G6o-unsplash.jpg"
+              alt=""
+            />
+            <article>
+              <div>
+                <h2>Dang app</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>
-    <footer></footer>
+    <footer>
+      <ul>
+        <li>
+          <a href="https://www.instagram.com">
+            <img src="/assets/images/icons/insta.png" alt="instagram logo" />
+          </a>
+        </li>
+        <li>
+          <a href="https://www.facebook"
+            ><img src="/assets/images/icons/facebook.png" alt="facebook logo"
+          /></a>
+        </li>
+      </ul>
+    </footer>
  </body>
 </html>