diff --git a/pages/contact.css b/pages/contact.css
new file mode 100644
index 0000000..977275c
--- /dev/null
+++ b/pages/contact.css
@@ -0,0 +1,117 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    width: 100%;
+    height: 100%;
+    background-color:lightblue;
+    margin: 0;
+    padding-bottom: 60px;
+
+#nav_barre {
+    display: flex;
+    width: 100%;
+    height: 100px;
+    background-color: steelblue;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+.styled {
+    border: 0;
+    height: 70px;
+    width: 130px;
+    line-height: 2.5;
+    padding: 0 20px;
+    box-shadow: 3px 5px 3px darkslategray;
+    font-size: 1rem;
+    text-align: center;
+    color: white;
+    text-shadow: 1px 1px 1px slategray;
+    border-radius: 10px;
+    background-color: royalblue;
+    background-image: linear-gradient(
+        to top left,
+        rgb(0 0 0 / 0.2),
+        rgb(0 0 0 / 0.2) 30%,
+        transparent
+    );
+}
+
+.styled:hover {
+    background-color: midnightblue;
+}
+
+.styled:active {
+    box-shadow:
+       inset -2px -2px 3px rgb(255 255 255 / 0.6),
+        inset 2px 2px 3px rgb(0 0 0 / 0.6);
+}
+
+#buttons {
+    height: 100%;
+    width: 25%;
+    display: flex;
+    justify-content: space-around;
+    flex-direction: row-reverse;
+    margin-left: auto;
+    align-items: center;
+}
+.shadow {
+    box-shadow: 0px 10px 5px gray;
+}
+h1{
+    font-size: 40px;
+}
+
+.instyled{
+    border: 0;
+    height: 70px;
+    width: 130px;
+    line-height: 2.5;
+    padding: 0 20px;
+    box-shadow:
+       inset -2px -2px 3px rgb(255 255 255 / 0.6),
+        inset 2px 2px 3px rgb(0 0 0 / 0.6);
+    font-size: 1rem;
+    text-align: center;
+    color: lightgrey;
+    text-shadow: 1px 1px 1px darkslategrey;
+    border-radius: 10px;
+    background-color: darkblue;
+    background-image: linear-gradient(
+        to top left,
+        rgb(0 0 0 / 0.2),
+        rgb(0 0 0 / 0.2) 30%,
+        transparent
+         );
+}
+
+.table{
+
+    width: 700px;
+    height: 300px;
+    border-collapse: collapse;
+    font-size: 35px;
+    table-layout: auto;
+    border: 5px solid darkblue;
+    margin-left: 600px;
+    background-color: skyblue;
+    box-shadow: 2px 5px 5px darkgray;
+}
+
+thead{
+    background-color: lightgreen;
+
+}
+th,td{
+    border: 2px solid dimgray;
+    padding: 10px;
+
+}
+#titre_tableau{
+    font-size: 25px;
+    color: seagreen;
+    margin-left: 600px;
+}
diff --git a/pages/contact.html b/pages/contact.html
index e69de29..e012418 100644
--- a/pages/contact.html
+++ b/pages/contact.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html>
+    <head>
+        <link rel="stylesheet" href="contact.css" />
+        <meta charset="utf-8"/>
+        <meta name="viewport" content="width=device-width", initial-scame="1"/>
+        <title>Contact-FleetZen</title>
+        <html lang="fr">
+    </head>
+    <body>
+        <div id="nav_barre" class="shadow">
+            <h1>FleetZen</h1>
+            <div id="buttons">
+                <button class="instyled">contact</button>
+                <a href="pages/services.html"><button class="styled">services</button></a>
+                <a href="../index.html"><button class="styled"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-corner-down-left-icon lucide-corner-down-left"><path d="M20 4v7a4 4 0 0 1-4 4H4"/><path d="m9 10-5 5 5 5"/></svg>retour</button></a>
+            </div>
+        </div>
+
+    <p id= titre_tableau>
+        <b>Les développeurs de ce  site</b>
+    </p>
+        <table border=1 class="table">
+            <thead>
+                <tr>
+                    <th>Nom</th>
+                    <th>Job</th>
+                    <th>Parties crées</th>
+                </tr>
+            </thead>
+            <tr>
+                <td>Mélissa</td>
+                <td>Stagiaire</td>
+                <td>Page contact</td>
+            </tr>
+            <tr>
+                <td>Guillaume</td>
+                <td>Stagiaire</td>
+                <td>Page services</td>
+            </tr>
+        </table>
+
+        <div>
+            <p>Nous contacter</p>
+            <form method="get" action="">
+                <p>
+                    <label for="prenom">Votre prénom :</label>
+                    <input type="text" name="prenom" id="prenom" placeholder="Ex. : Matthieu" size="30" maxlength="20">
+                </p>
+                <p>
+                    <label for="e_mail">Votre e-mail:</label>
+                    <input type="text" name="e-mail" id="e-mail" placeholder="Ex. : stage2@echoes.solutions" size="50" maxlength="40">
+                </p>
+                <p>
+                       <label for="contacter">Des questions a nous poser?</label><br>
+                       <textarea name="contacter" id="contacter"></textarea>
+                   </p>
+
+            </form>
+        </div>
+    </body>

Nom	Job	Parties crées
Mélissa	Stagiaire	Page contact
Guillaume	Stagiaire	Page services