diff --git a/assets/css/contact.css b/assets/css/contact.css
new file mode 100644
index 0000000000000000000000000000000000000000..93a49770471e8067e7912f65ce2d77cef67def2e
--- /dev/null
+++ b/assets/css/contact.css
@@ -0,0 +1,3 @@
+header {
+ position: static;
+}
diff --git a/assets/css/shared.css b/assets/css/shared.css
index d4d097eb1d8ba3538f5b5a06f4bbb3da95da2547..48528ff2b3c55d5b1c76246aba6a714b870f9b1b 100644
--- 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%;
+}
diff --git a/assets/css/styles.css b/assets/css/styles.css
index c2b9ea9312fc92825137603f7ed11aaf8574c99d..77ce130c282afbcb70f67301e4a6d5cad697e44d 100644
--- 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;
+}
diff --git a/assets/images/icons/facebook.png b/assets/images/icons/facebook.png
new file mode 100755
index 0000000000000000000000000000000000000000..c75f3dab4e57395b45bf921346e72a3c71a3471c
Binary files /dev/null and b/assets/images/icons/facebook.png differ
diff --git a/assets/images/icons/insta.png b/assets/images/icons/insta.png
new file mode 100755
index 0000000000000000000000000000000000000000..55606f5716ce020c62ae6fbaf1450a4e500e8707
Binary files /dev/null and b/assets/images/icons/insta.png differ
diff --git a/contact.html b/contact.html
new file mode 100644
index 0000000000000000000000000000000000000000..a42cd825370f6be8398c4b67f81adfd10843bc48
--- /dev/null
+++ b/contact.html
@@ -0,0 +1,43 @@
+<!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>
diff --git a/index.html b/index.html
index d6d6742029ea98a6bbe1d43f8a17d1a6115f5db7..8a05848e2ea3894ec43df4be90e8c99a8e371102 100644
--- 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>