diff --git a/CSS/accueil.css b/CSS/accueil.css
new file mode 100644
index 0000000..a3e9b5e
--- /dev/null
+++ b/CSS/accueil.css
@@ -0,0 +1,128 @@
+main{
+	display: flex;
+	flex-direction: column;
+}
+
+header{
+	margin-bottom: 0;
+}
+#presentation{
+	position: relative;
+	height: 100vh;
+
+}
+#background-video{
+	filter: blur(3px);
+	height: 100vh;
+	width: 100vw;
+	object-fit: cover;
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	z-index: -5;
+}
+
+
+
+
+#img_gauche_txt_droite{
+
+	display: flex;
+	flex-direction: row-reverse;
+	justify-content: space-around;
+	align-items: center;
+	padding-bottom: 20vh;
+
+}
+
+
+
+#img_gauche_txt_droite p{
+	background-color: rgba(250,250,250,0.2);
+	backdrop-filter: blur(10px);
+	border-radius: 30px;
+	width: 40%;
+	padding: 1%;
+}
+
+
+#img_droite_txt_gauche{
+	display: inline-flex;
+	flex-direction: row;
+	justify-content: space-around;
+	align-items: center;
+	padding-bottom: 20vh;
+}
+
+
+#img_droite_txt_gauche p{
+	background-color: rgba(250,250,250,0.2);
+	backdrop-filter: blur(10px);
+	border-radius: 30px;
+	padding: 1%;
+	width: 40%;
+}
+
+
+
+.img_main{
+	backdrop-filter: blur(10px);
+	height: 20rem;
+	width: 25rem;
+	border-radius: 15px;
+	transition: transform ease 0.4s;
+	filter: saturate(0.2);
+}
+
+.img_txt:hover .img_main{
+	box-shadow: 0 40px 60px rgba(150,0,0,0.7);
+	transform: scale(1.2,1.2);
+	transition: transform ease 0.8s;
+	filter: saturate(1);
+}
+
+#img_gauche_txt_droite:not(:hover) p{
+	background-color: rgba(150,150,150,0.4);
+}
+
+#img_droite_txt_gauche:not(:hover) p{
+	background-color: rgba(150,150,150,0.4);
+}
+
+
+
+#fond_2{
+	z-index: 10;
+	backdrop-filter: blur(10px);
+	text-align: center;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	background-color: rgba(0, 0, 0, 0.5);
+	color: white;
+	padding-bottom:20%;
+}
+
+
+#fond_2 video{
+	margin: 1%;
+}
+@media only screen and (max-width: 800px){
+
+	body{
+		width: 100vw;
+	}
+	#img_droite_txt_gauche{
+		width: 100vw;
+	}
+
+	#menu-ordi{
+		display: none;
+	}
+
+	#menu-mobile{
+		position: fixed;
+		display: block;
+	}
+}
\ No newline at end of file
diff --git a/CSS/contact.css b/CSS/contact.css
new file mode 100644
index 0000000..79ea2b4
--- /dev/null
+++ b/CSS/contact.css
@@ -0,0 +1,29 @@
+main{
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: flex-start;
+}
+
+
+
+h1{
+	margin-bottom: 10px;
+}
+form{
+	backdrop-filter: blur(10px);
+	background-color: rgba(255, 255, 255, 0.2);
+	width: 50%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	size: 10px;
+	box-shadow: 0 40px 60px rgba(0,0,0,0.7);
+	border-radius: 20px;
+	margin: 10vh;
+}
+
+form div {
+	margin: 2%;
+}
+
diff --git a/CSS/styles.css b/CSS/styles.css
index e21f6a0..da121ba 100644
--- a/CSS/styles.css
+++ b/CSS/styles.css
@@ -4,6 +4,9 @@ body{
 
 }
 
+header{
+		margin-bottom: 10vh;
+}
 
 
 .txt_rouge{color: red;font-weight: bold;}
@@ -18,11 +21,7 @@ ul{
 
 
 
-#presentation{
-	position: relative;
-	height: 100vh;
 
-}
 
 h1{
 	text-align: center;
@@ -106,27 +105,6 @@ nav{
 	width: 7vw;
 }
 
-
-main{
-	display: flex;
-	flex-direction: column;
-}
-
-#background-video{
-	filter: blur(3px);
-	height: 100vh;
-	width: 100vw;
-	object-fit: cover;
-	position: fixed;
-	left: 0;
-	right: 0;
-	top: 0;
-	z-index: -5;
-}
-
-
-
-
 #btn_up{
 	background-color: white;
 	border-radius: 50px;
@@ -146,7 +124,6 @@ main{
 nav li{
 	display: inline-block;
 }
-
 .page{
 	list-style-type: none;
 	text-decoration: none;
@@ -187,88 +164,6 @@ main p{
 }
 
 
-#img_gauche_txt_droite{
-
-	display: flex;
-	flex-direction: row-reverse;
-	justify-content: space-around;
-	align-items: center;
-	padding-bottom: 20vh;
-
-}
-
-
-
-#img_gauche_txt_droite p{
-	background-color: rgba(250,250,250,0.2);
-	backdrop-filter: blur(10px);
-	border-radius: 30px;
-	width: 40%;
-	padding: 1%;
-}
-
-
-#img_droite_txt_gauche{
-	display: inline-flex;
-	flex-direction: row;
-	justify-content: space-around;
-	align-items: center;
-	padding-bottom: 20vh;
-}
-
-
-#img_droite_txt_gauche p{
-	background-color: rgba(250,250,250,0.2);
-	backdrop-filter: blur(10px);
-	border-radius: 30px;
-	padding: 1%;
-	width: 40%;
-}
-
-
-
-.img_main{
-	backdrop-filter: blur(10px);
-	height: 20rem;
-	width: 25rem;
-	border-radius: 15px;
-	transition: transform ease 0.4s;
-	filter: saturate(0.2);
-}
-
-.img_txt:hover .img_main{
-	box-shadow: 0 40px 60px rgba(150,0,0,0.7);
-	transform: scale(1.2,1.2);
-	transition: transform ease 0.8s;
-	filter: saturate(1);
-}
-
-#img_gauche_txt_droite:not(:hover) p{
-	background-color: rgba(150,150,150,0.4);
-}
-
-#img_droite_txt_gauche:not(:hover) p{
-	background-color: rgba(150,150,150,0.4);
-}
-
-
-
-#fond_2{
-	z-index: 10;
-	backdrop-filter: blur(10px);
-	text-align: center;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	background-color: rgba(0, 0, 0, 0.5);
-	color: white;
-	padding-bottom:20%;
-}
-
-
-#fond_2 video{
-	margin: 1%;
-}
 
 
 
@@ -322,7 +217,6 @@ footer #reseaux li img:hover{
 }
 
 
-
 footer #autres a{
 	color:white ;
 	list-style-type: none;
@@ -345,21 +239,4 @@ footer #autres a:hover{
 	width: 10vw;
 	display: none;
 }
-@media only screen and (max-width: 800px){
 
-	body{
-		width: 100vw;
-	}
-	#img_droite_txt_gauche{
-		width: 100vw;
-	}
-
-	#menu-ordi{
-		display: none;
-	}
-
-	#menu-mobile{
-		position: fixed;
-		display: block;
-	}
-}
diff --git a/HTML/contact.html b/HTML/contact.html
new file mode 100644
index 0000000..5ab8b7a
--- /dev/null
+++ b/HTML/contact.html
@@ -0,0 +1,116 @@
+<!doctype html> 
+<html lang="fr"> 
+	<head> 
+		<title> Casino du coeur </title> 
+		<meta charset="utf-8"> 
+		<link rel = "stylesheet" type = "text/css" href = "../CSS/styles.css">
+		<link rel = "stylesheet" type = "text/css" href = "../CSS/contact.css">
+		<meta name="keywords" content="casino">
+		<link rel = "icon" type = "/image/png" href = "../img/icon.png">
+	</head> 
+	<body>
+
+		<header>
+
+			<div id="menu-ordi">
+
+				<nav> 
+				<a href="#"><img id="icone" src="img/logo.svg" alt="icone du site"></a>
+				
+					<ul>
+						<li> <a href= "../index.html" class="page"><button class="button" type="buton"value="Accueil"> Accueil</button></a></li> 
+						<li> <a href= "page_2.html" class="page" ><button class="button" type="buton" value="Nos jeux">Nos jeux</button> </a></li> 
+						<li> <a href= "page_3.html" class="page"><button class="button" type="buton" value="Nos partenaires">Nos partenaires</button> </a> </li> 
+						<li> <a href= "page_4.html" class="page"><button  class="button" type="buton" value="A propos de nous"> A propos de nous</button> </a></li>
+						<li> <a href= "#" class="page"><button class="button" id="page_courante" type="buton" value="A propos de nous"> Contact</button> </a></li>  
+					</ul> 
+				</nav>
+			</div>
+		</header>
+
+		<main>
+			<h1> Contactez nous !</h1>
+			<form method="POST" action="https://dwarves.iut-fbleau.fr/requete.php">
+
+				<div>
+					<label for="lastname">Nom : </label>
+					<input type="text" name="lastname" id="lastname" placeholder="ex: Dupont" required>
+				</div>
+
+				<div>
+					<label for="firstname">Prénom : </label>
+					<input type="text" name="firstname" id="firstname" placeholder="ex: Jean-Paul" required>
+				</div>
+
+				<div>
+					<label for="birthdate">Date de naissance : </label>
+					<input type="date" name="birthdate" id="birthdate">
+				</div>
+
+				<div>
+					<label for="email">Adresse email : </label>
+					<input type="email" name="email" id="email" placeholder="ex: jean-paul.dupont@gmail.com" required>
+				</div>
+
+				<div>
+					<label for="phonenumber">N° Télephone portable : </label>
+					<input type="text" name="phonenumber" id="phonenumber" placeholder="ex: 0655664488" pattern="^(\+33|0)[6-7](\d\d){4}$" required>
+				</div>
+
+				<div>
+					<input type="radio" name="gender" id="femme" value="Madame" required>
+					<label for="femme">Femme </label>
+					<input type="radio" name="gender" id="homme" value="Monsieur" required>
+					<label for="homme">Homme </label>
+					<input type="radio" name="gender" id="autre" value="Autre" required>
+					<label for="autre">Autre </label>
+				</div>
+
+				<div>
+					<label for="message">Message : </label>
+					<textarea name="message" id="message" required></textarea>
+				</div>
+
+				<div>
+					<input type="submit" value="Envoyer">
+				</div>
+
+			</form>
+		</main>
+
+			<footer>
+
+				<div id="reseaux">
+
+					<ul>
+
+						<li><a href="https://twitter.com" target="_blank"> <img src="img/icone/twitter.svg"></a></li>
+						<li><a href="https://instagram.com" target="_blank"> <img src="img/icone/instagram.svg"></a></li>
+						<li><a href="https://tiktok.com" target="_blank"> <img src="img/icone/tiktok.svg"></a></li>
+					</ul>
+					<p> Suivez nos actualités !</p>
+				</div>
+
+				<div id="autres">
+					<ul>
+						<li><a href="" target="_blank">Mentions légales</a></li>
+						<li><a href="" target="_blank">Conditions générales d'utilisation</a></li>
+						<li><a href="credits.txt" target="_blank">Crédits</a></li>
+						<li><a href="charte_graphique" target="_blank">Charte graphique</a></li>
+					</ul>
+				</div>
+
+				<div id="coordonne"> 
+					
+					<img src="img/icone/envelope.svg" alt="icone d'enveloppe">
+					<p>Casinoducoeur@gmail.fr </p>
+					<img src="img/icone/location.svg">
+					<p id="adresse"> 200 Rue du kwanga</p>
+					
+				</div>
+
+
+				<a href="#"><img id="icone" src="img/roulette_coeur.png" alt="icone du site"></a>
+		</footer>
+
+	</body>
\ No newline at end of file
diff --git a/HTML/page_2.html b/HTML/page_2.html
index e5f026e..607e2ec 100644
--- a/HTML/page_2.html
+++ b/HTML/page_2.html
@@ -21,7 +21,7 @@
 						<li> <a href= "#" class="page" ><button class="button" type="buton" value="Nos jeux" id="page_courante">Nos jeux</button> </a></li> 
 						<li> <a href= "page_3.html" class="page"><button class="button" type="buton" value="Nos partenaires">Nos partenaires</button> </a> </li> 
 						<li> <a href= "page_4.html" class="page"><button class="button" type="buton" value="A propos de nous"> A propos de nous</button> </a></li>
-						<li> <a href= "page_4.html" class="page"><button class="button" type="buton" value="A propos de nous"> Contact</button> </a></li>  
+						<li> <a href= "contact.html" class="page"><button class="button" type="buton" value="A propos de nous"> Contact</button> </a></li>  
 					</ul> 
 				</nav>
 			</div>
diff --git a/HTML/page_3.html b/HTML/page_3.html
index df30941..57fbc53 100644
--- a/HTML/page_3.html
+++ b/HTML/page_3.html
@@ -21,7 +21,7 @@
 						<li> <a href= "page_2.html" class="page" ><button class="button" type="buton" value="Nos jeux">Nos jeux</button> </a></li> 
 						<li> <a href= "#" class="page"><button id="page_courante" class="button" type="buton" value="Nos partenaires">Nos partenaires</button> </a> </li> 
 						<li> <a href= "page_4.html" class="page"><button class="button" type="buton" value="A propos de nous"> A propos de nous</button> </a></li>
-						<li> <a href= "page_4.html" class="page"><button class="button" type="buton" value="A propos de nous"> Contact</button> </a></li>  
+						<li> <a href= "contact.html" class="page"><button class="button" type="buton" value="A propos de nous"> Contact</button> </a></li>  
 					</ul> 
 				</nav>
 			</div>
diff --git a/HTML/page_4.html b/HTML/page_4.html
index 6fd6e2a..5cc8e0d 100644
--- a/HTML/page_4.html
+++ b/HTML/page_4.html
@@ -4,6 +4,7 @@
 		<title> Casino du coeur </title> 
 		<meta charset="utf-8"> 
 		<link rel = "stylesheet" type = "text/css" href = "../CSS/styles.css">
+		<link rel = "stylesheet" type = "text/css" href = "../CSS/contact.css">
 		<meta name="keywords" content="casino">
 		<link rel = "icon" type = "/image/png" href = "../img/icon.png">
 	</head> 
@@ -20,7 +21,7 @@
 						<li> <a href= "page_2.html" class="page" ><button class="button" type="buton" value="Nos jeux">Nos jeux</button> </a></li> 
 						<li> <a href= "page_3.html" class="page"><button class="button" type="buton" value="Nos partenaires">Nos partenaires</button> </a> </li> 
 						<li> <a href= "#" class="page"><button id="page_courante" class="button" type="buton" value="A propos de nous"> A propos de nous</button> </a></li>
-						<li> <a href= "#" class="page"><button class="button" type="buton" value="A propos de nous"> Contact</button> </a></li>  
+						<li> <a href= "contact.html" class="page"><button class="button" type="buton" value="A propos de nous"> Contact</button> </a></li>  
 					</ul> 
 				</nav>
 			</div>
diff --git a/index.html b/index.html
index 79f59b0..87cfce5 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
 		<meta charset="utf-8"> 
 
 		<link rel = "stylesheet" type = "text/css" href = "CSS/styles.css">
+		<link rel = "stylesheet" type = "text/css" href = "CSS/accueil.css">
 		<meta name="keywords" content="casino">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<link rel = "icon" type = "image/png" href = "img/logo.svg">
@@ -36,7 +37,7 @@
 						<li> <a href= "HTML/page_2.html" class="page" ><button class="button" type="buton" value="Nos jeux">Nos jeux</button> </a></li> 
 						<li> <a href= "HTML/page_3.html" class="page"><button class="button" type="buton" value="Nos partenaires">Nos partenaires</button> </a> </li> 
 						<li> <a href= "HTML/page_4.html" class="page"><button class="button" type="buton" value="A propos de nous"> A propos de nous</button> </a></li>
-						<li> <a href= "HTML/page_4.html" class="page"><button class="button" type="buton" value="A propos de nous"> Contact</button> </a></li>  
+						<li> <a href= "HTML/contact.html" class="page"><button class="button" type="buton" value="A propos de nous"> Contact</button> </a></li>  
 					</ul> 
 				</nav>
 			</div>