version 1.0

CSS/page_actus.css

@@ -0,0 +1,65 @@
+#actus img{
+	float: right;
+	max-width: 45%;
+	padding: 15px;
+}
+
+.actu_items {
+  	background-color: #02465C;
+  	padding: 50px 40px;
+  	margin-top: 400px;
+  	box-shadow:8px 8px 10px 0 rgba(0,0,0,0.9);
+  	margin-right: 10px;
+  	margin-left: 10px;
+  	color: white;
+  }
+
+.actu_items h1 {
+	margin-bottom: 40px;
+}
+
+.actu_items p {
+	margin-bottom: 10px;
+}
+
+.actu_items strong {
+	font-size: 20px;
+}
+
+@media only screen and (max-device-width: 480px) {
+
+  #actus img{
+	float: left;
+	min-width: 	100px;
+	padding: 15px;
+	}
+
+  #liens_block {
+	flex-direction: column;
+  }
+  #liens_block img {
+  	padding: 30px;
+  }
+
+  aside {
+  	max-height: none;
+  }
+
+  .actu_items {
+  	padding-right: 30px;
+  	padding-left: 30px;
+  }
+  #actus img {
+  	right: auto;
+  	left: 0;
+  	max-width: none;
+  	padding: 0;
+  	margin-bottom: 25px;
+  }
+  .actu_items img {
+  	width: 100%;
+  	margin: 0;
+  	box-shadow:8px 8px 10px 0 rgba(0,0,0,0.9);
+  }
+
+}

CSS/page_formulaire.css

@@ -0,0 +1,57 @@
+body {
+	padding-left: 30px;
+	padding-right: 30px;
+}
+
+form {
+	background: linear-gradient(#026695, #433C8B);
+	box-shadow:8px 8px 10px 0 rgba(0,0,0,0.6);
+	padding: 10px 20px;
+}
+
+div {
+	margin-top: 15px;
+}
+
+#message {
+	display: block;
+}
+
+textarea {
+	width:  50%;
+	min-height: 150px;
+	box-shadow:8px 8px 10px 0 rgba(0,0,0,0.3);
+	border-color: blueviolet;
+	border-width: 3px;
+	border-radius: 30px;
+	padding: 10px;
+	margin: 7px;
+}
+
+input {
+	text-align: center;
+	margin-left: 10px;
+}
+
+select {
+	text-align: center;
+	margin-left: 10px;
+}
+
+.button input {
+	padding: 10px;
+	border-radius: 30px;
+	border-color: white;
+	background-color: #3E0B8885;
+	color:  white;
+	box-shadow:8px 8px 10px 0 rgba(0,0,0,0.3);
+}
+
+.button {
+	display: inline-block;
+}
+
+#reset_btn {
+	position: absolute;
+	right: 60px;
+}

CSS/page_index.css

@@ -0,0 +1,264 @@
+/*########## HOME ##########*/
+@font-face {
+	font-family: 'bluetea';
+	src: url(../media/polices/Blutea.ttf);
+	src: url(../media/polices/Bluetea.otf);
+}
+
+#home{
+	background-size: 100%;
+	text-align: center;
+	vertical-align: bottom;
+	background-image: url(../media/images/sports.jpeg);
+	background-repeat: no-repeat;
+	display: list-item;
+}
+
+#home h1 {
+	font-family: "bluetea";
+	vertical-align: center;
+	text-align: center;
+	/*font-size: 100px;*/
+	font-size: 14vw;
+	color: black;
+	text-decoration: blink;
+	text-shadow: white 0.2em 0.3em 0.2em;
+	margin-top: 0px;
+	margin-bottom: 50px;
+}
+
+/*########## ACTUALITES ##########*/
+#actualites a:link {
+	color: black;
+	font-weight: bold;
+	font-size: 110%;
+}
+
+#actualites a:visited {
+	text-decoration: none;
+	color: #686868;
+	font-weight: normal;
+}
+
+#actualites {
+	background-color: #A3A3A3;
+	border-radius: 30px;
+	margin: 2px 22px;
+	padding: 10px;
+	padding-bottom: 8px;
+	text-align: center;
+	box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
+}
+
+#actualites ul {
+	list-style: none;
+	padding: 0px;
+}
+
+
+#actualites img {
+	margin-right: 10%;
+	margin-left: 10%;
+	margin-top: 2%;
+	margin-bottom: 2%;
+	width: 100%;
+	border-radius: 30px;
+	margin-top: 100px;
+	max-width: 650px;
+	box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
+}
+
+#actualites #image_1 {
+	margin-top: 20px;
+}
+
+#actualites figcaption {
+	font-size: 150%;
+	text-decoration: blink;
+}
+
+#actualites p {
+	margin-right: 4%;
+	margin-left: 4%;
+	margin-top: 5%;
+	margin-bottom: 2%;
+}
+
+#Actualité_3 {
+	margin-bottom: 50px;
+}
+/*########## BLOG ##########*/
+#blog h2{
+	font-size: 9vw;
+	font-family: "bluetea", "Arial";
+}
+
+#blog {
+	text-align: center;
+}
+
+#blog img {
+	margin-right: 10%;
+	margin-left: 10%;
+	margin-top: 2%;
+	margin-bottom: 2%;
+	width: 80%;
+	border-radius: 30px;
+	margin-top: 100px;
+	max-width: 650px;
+	box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
+}
+
+/*########## NEWS ##########*/
+#news {
+	background-size: 40%;
+	background-color: #A3A3A3;
+	border-radius: 30px;
+	padding: 10px;
+	margin-top: 60px;
+	padding: 10px;
+	padding-bottom: 8px;
+	margin-bottom: 60px;
+	box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
+	margin-left: 22px;
+	margin-right: 22px;
+}
+
+#news img {
+	margin-top: 50px;
+}
+
+#news figcaption {
+	text-align: right;
+	margin-right: 20px;
+}
+
+/*########## ASIDE ##########*/
+aside{
+	background-color: white;
+	max-height: 400px;
+	border: 1px solid white;
+	border-radius: 30px;
+	clear: right;
+	margin-bottom: 10px;
+	margin-right: 22px;
+  	margin-left: 22px;
+  	box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
+}
+
+aside ul{
+	list-style: none;
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+}
+
+aside li {
+	text-align: center;
+	margin: 0px;
+	padding: 0px;
+	align-items: center;
+}
+
+.reseaux img {
+	width: 100%;
+}
+
+.reseaux {
+	width: 3%;
+	max-width: 30px;
+	padding-top: 100px;
+	padding-right: 3px;
+	display: inline-block;
+	position: fixed;
+	right: 0px;
+	z-index: 1;
+}
+
+.lien_externe {
+	width: 25%;	
+	
+}
+
+#Actualité_1 {
+	margin-top: 85px;
+}
+
+/*************************************************/
+section{
+	background-size: 100px;
+}
+
+@media only screen and (max-device-width: 480px) {
+
+  #blog {
+  	padding: 6px;
+  }
+
+  .reseaux {
+  	display: none;
+  }
+
+  #actualites {
+  	margin: 10px;
+  	padding: 0px;
+  }
+
+  #home h1 {
+  	font-size: 15vw;
+  }
+
+  #home {
+  	padding-top: 100px;
+  }
+}
+
+@media only screen and (min-device-width: 800px) {
+	#blog {
+		padding-right: 0px;
+		z-index: -1;
+	}
+
+	section {
+		min-width: none;
+		width: 70%;
+		clear: left;
+	}
+
+	aside {
+		background-color: rgba(219, 219, 219, 0.16);
+		position: absolute;
+		right: 0;
+		top: 50vh;
+		width: 20%;
+		height: auto;
+		max-height: none;
+		z-index: 0;
+		box-shadow: none;
+		margin: 0;
+		border-right: none;
+		border-width: 2px;
+		border-color: black;
+		z-index: 0;
+		clear:right;
+		padding: 0;
+	}
+
+	aside ul {
+		flex-direction: column;
+	}
+
+	aside img {
+		width: 100%;
+		margin: 400px 0px;
+	}
+
+	aside a {
+		width: 100%;
+	}
+
+	.menu_liste {
+		z-index: 2;
+	}
+
+}

CSS/page_news.css

@@ -0,0 +1,54 @@
+#news_page {
+	background-color: #00085F;
+	top: 0;
+	padding: 30px 40px;
+	margin: 0px 10px;
+	display: flex;
+	overflow-x: scroll;
+	scroll-snap-type:  x mandatory;
+	scroll-paddind: 100px;
+	gap: 12px;
+	box-shadow:8px 8px 10px 0 rgba(0,0,0,0.6);
+	margin-bottom: 50px;
+}
+
+.news_items {
+	flex:  0 0 100%;
+	padding: 24px;
+	border-radius: 8px;
+	scroll-snap-align: start;
+}
+
+video{
+	margin-left: 10px;
+	width: 100%;
+	border-radius: 20px;
+	box-shadow:8px 8px 10px 0 rgba(255,255,255,0.4);
+}
+
+#news_page figcaption {
+	text-align: right;
+	padding-top: 8px;
+	padding-right: 10px;
+	color: #CCCCCC;
+}
+
+#news_page h1 {
+	text-align: center;
+	color: #CCCCCC;
+	padding-bottom: 10px;
+	font-weight: bold;
+	font-size: 250%;
+}
+
+@media only screen and (max-device-width: 480px) {
+
+  #news_page {
+  	height: 100vh;
+  }
+
+  #news_page h1 {
+  	padding: 25% 0;
+  }
+
+}

CSS/page_php.css

@@ -0,0 +1,58 @@
+.infos {
+	margin: 30px 20px;
+}
+
+#grp_infos {
+	background: linear-gradient(#026695, #433C8B);
+	box-shadow:8px 8px 10px 0 rgba(0,0,0,0.6);
+	padding: 10px 20px;
+	margin: 20px;
+	border: solid 1px blueviolet;
+
+}
+
+b {
+	color: red;
+}
+
+em {
+	text-decoration: none;
+	font-style: normal;
+	font-weight: bold;
+	color: white;
+}
+
+.notif {
+	position: fixed;
+	display: block;
+	bottom:  20px;
+	width: 94%;
+	margin-right: 3%;
+	margin-left: 3%;
+	text-align: center;
+	padding: 30px 0px;
+	background-color: #8A8888;
+	border-width: 3px;
+	border-color: black;
+	border-style: solid;
+}
+
+p {
+	text-align: center;
+	font-weight: bold;
+}
+
+#valid {
+	color:  green;
+}
+
+#rejet {
+	color: red;
+}
+
+
+@media only screen and (max-device-width: 480px) {
+	#grp_infos {
+		margin-top: 0;
+		margin-bottom: 130px;
+	}

CSS/page_table.css

@@ -0,0 +1,60 @@
+table{
+	background-size: 100%;
+	text-align: center;
+}
+
+td{
+	max-width: 20%;
+}
+
+table img{
+	max-width: 100%;
+}
+
+#galerie {
+	background-color: #6A70A5;
+}
+
+#galerie_title {
+	border: 5px solid black;
+	text-align: center;
+}
+
+#galerie_title td {
+	height: 40px;
+	font-size: 20px;
+	font-weight: bold;
+}
+
+#galerie tbody {
+	text-decoration: none;
+	color:  #CCCCCC;
+}
+
+#galerie a:link {
+	color:  white;
+	font-weight: bold;
+}
+
+#galerie a:visited {
+	color: #CCCCCC;
+}
+
+figcaption {
+	display: none;
+}
+
+
+@media only screen and (max-device-width: 480px) {
+	td img:hover {
+  		position: absolute;
+  		width: 90%;
+  		left: 10%;
+  		margin: 0;
+  }
+
+  figcaption {
+  	display: unset;
+  }
+
+}

CSS/print/print_actus.css

@@ -0,0 +1,7 @@
+header {display: none;}
+
+footer {display: none;}
+
+img {display: none;}
+
+.actu-news {box-shadow: none;}

CSS/print/print_index.css

@@ -0,0 +1,11 @@
+header {display: none;}
+
+footer {display: none;}
+
+img {display: none;}
+
+aside {display: none;}
+
+#news {display: none;}
+
+#actualites {box-shadow: none;}

CSS/print/print_table.css

@@ -0,0 +1,7 @@
+header {
+	display: none;
+}
+
+footer {
+	display: none;
+}

CSS/style.css

@@ -0,0 +1,281 @@
+* {
+	margin: 0px;
+	padding: 0px;
+}
+
+/*#################################################*/
+footer {
+	position: static;
+	color: white;
+	text-align: right;
+	height: 100%;
+	padding-right: 5%;
+	font-size: 1.5vw;
+	background-size: 100%;
+	background-color: black;
+}
+
+body{
+	background-size: 100%;
+	background-color: #d6dbdf;
+	display: block;
+	padding-top: 50px;
+}
+
+
+
+p{
+	text-align: justify;
+
+}
+
+
+.menu_liste {
+	position: fixed;
+	display: flex;
+	width: 100%;
+	top: 0;
+	left: 0;
+	background-color: #1C1C1C;
+	height: 40px;
+	width: 100%;
+	align-items: center;
+	justify-content: space-around;
+	box-shadow:8px 8px 10px 0 rgba(255,255,255,0.2);
+}
+
+.menu_liste li {
+	list-style: none;
+	color: #BCBCBC;
+}
+
+.menu_liste a{
+	text-decoration: none;
+	color: #BCBCBC;
+}
+
+.menu_liste a:hover {
+	color: white;
+}
+
+.menu_liste li:hover {
+	color: white;
+}
+
+.sous-menu {
+	display: none;
+	position: relative;
+	flex-direction: column;
+	background-color: #1C1C1C;
+	right: 0;
+	z-index: -1;
+	width: 20%;
+}
+
+.sous-menu li {
+	text-align: center;
+	padding: 10px;
+	z-index: 2;
+}
+
+#contact:hover .sous-menu{
+	display: flex;
+	position: absolute;
+}
+#contact img {
+  		width: 100%;
+  		position: inherit;
+  		display: none;
+  		padding: 0;
+  }
+
+  #contact li:hover img {
+  	display: flex;
+  }
+
+  #contact p {
+  	text-align: center;
+  	font-weight: bold;
+  }
+  #contact p:hover {
+  	color: #BCBCBC;
+  }
+
+.menu_liste a:active {
+	font-size: 110%;
+	text-decoration: underline blink;
+}
+
+.menu_liste a.active {
+	text-decoration: underline;
+}
+
+#liens_block a {
+	text-align: center;
+}
+
+.menu_button {
+	display: none;
+}
+
+.reseaux-mobile {
+	display: none;
+}
+
+
+::-webkit-scrollbar {
+	display: none;
+}
+
+
+
+
+/*#############################################*/
+/*POUR MOBILE*/
+@media only screen and (max-device-width: 480px) {
+
+	body {
+		margin-top: 80px;
+	}
+
+  .sous-menu {
+  	display: none;
+  }
+
+	.menu_button {
+		background-color: rgba(89, 89, 89, 0.2);
+		display: flex;
+		flex-direction: column;
+		position: fixed;
+		top: 0px;
+		justify-content: center;
+		width: 100%;
+		margin: 0px;
+		height: 14vw;
+		z-index: 2;
+		}
+
+	.menu_button a {
+		font-size: 8vw;
+		color: gainsboro;
+		padding-left: 7%;
+		font-weight: bold;
+	}
+
+  .menu_button img{
+  	position: absolute;
+  	width: 14vw;
+  	height: 14vw;
+  	top: &px;
+  	right: 15px;
+  	z-index: 2;
+  }
+
+  .reseaux-mobile {
+  	display: flex;
+  }
+
+  .reseaux-mobile img {
+  	width: 50%;
+  }
+
+  .reseaux-mobile a {
+  	width: 25%;
+  }
+
+  .menu_liste {
+  	text-align: center;
+  	display: flex;
+  	flex-direction: column;
+  	background-color: rgba(255, 255, 255, 0.2);
+  	backdrop-filter: blur(10px);
+  	width: 100%;
+  	height: 100%;
+  	justify-content: center;
+  	z-index: 2;
+  	left: 100%;
+  	transition: all 0.5s ease;
+  }
+
+  .menu_liste li {
+  	text-align: center;
+  	padding: 7%;
+  }
+
+  .menu_liste a {
+  	color: Black;
+  	font-size: 15vw;
+  	padding: 0;
+  }
+
+  .menu_liste a:active {
+  	font-size: 15vw;
+  }
+
+
+
+	.mobile-menu {
+		left: 0;
+  }
+  #contact {
+  	background-color: #1C1C1C;
+  	font-size: 10vw;
+  	justify-content: center;
+  	padding-top: 10px;
+  	padding-bottom: 5px;
+  	padding-left: 40px;
+  	padding-right: 40px;
+  	z-index: 2;
+  }
+
+  #contact li {
+  	width: 300%;
+  	background-color: #1C1C1C;
+  	font-size: 9vw;
+  }
+
+  #contact a {
+	list-style: none;
+	color: #BCBCBC;
+	font-size: 8vw;
+  }
+
+  #contact:hover .sous-menu{
+  	display: flex;
+  	bottom: 9%;
+  	left: 18.5%;
+  }
+
+  #contact:hover {
+  	background-color: rgba(0, 0, 0, 0.3);
+  }
+
+  footer {
+  	margin-top: 50px;
+  }
+
+  #contact img {
+  		width: 100%;
+  		position: inherit;
+  		display: none;
+  		padding: 0;
+  }
+
+  #contact li:hover img {
+  	display: flex;
+  }
+
+  .sous-menu li div .coodonnees {
+  		position: absolute;
+  		display: none;
+  		width: 100%;
+  		padding: 0;
+  		margin: 0;
+  		left: 0;
+  }
+
+  #contact p {
+  	display: none;
+  }
+
+}	

HTML/actus.html

@@ -0,0 +1,136 @@
+<!doctype html>
+<html lang="fr">
+
+<head>
+	
+	<meta charset="utf-8" />
+	<title>ACTUS</title>
+	<link rel="icon" type="image/png" href="../media/images/icon.ico">
+	<link rel="stylesheet" type="text/css" href="../CSS/style.css">
+	<link rel="stylesheet" type="text/css" href="../CSS/page_actus.css">
+	<link rel="stylesheet" type="text/css" href="../CSS/print/print_actus.css" media="print">
+
+</head>
+
+
+<!----------------------------------------------------------------->
+
+<body>
+	<header>
+		<nav class="menu">
+			<ul class="menu_liste">
+				<li><a href="index.html">Home</a></li>
+				<li><a href="table.html">Galerie</a></li>
+				<li><a href="news.html">News</a></li>
+				<li><a href="actus.html" class="active">Actus</a></li>
+				<li class="reseaux-mobile">
+					<a href="https://fr-fr.facebook.com/">
+						<img src="../media/images/logo/logo_facebook.webp">
+					</a>
+					<a href="https://twitter.com/?lang=fr">
+						<img src="../media/images/logo/logo_twitter.png">
+					</a>
+					<a href="https://www.instagram.com/?hl=fr">
+						<img src="../media/images/logo/logo_instagram.webp">
+					</a>
+					<a href="https://www.strava.com/?hl=fr">
+						<img src="../media/images/logo/logo_strava.png">
+					</a>
+				</li>
+				<li id="contact">Contact
+					<ul class="sous-menu">
+						<li><a href="formulaire.html">Nous contacter</a></li>
+						<li> <p>Nos adresses :</p>
+							<div>
+								<li class="coordonnees"><a href="tel:+33">Téléphone</a></li>
+								<li class="coordonnees"><a href="mailto:passionsport@contact.fr">Mail</a></li>
+								<li class="coordonnees"><a href="https://goo.gl/maps/1mVkDZjDFm7MkmB58">Adresse</a></li>
+							</div>
+						</li>
+						<li><a href="https://www.strava.com/?hl=fr">Strava</a></li>
+						<li>Instagram<img src="../media/images/qr_code/qr_instagram.png"></li>
+						<li>Twitter<img src="../media/images/qr_code/qr_twitter.webp"></li>
+						<li>Facebook<img src="../media/images/qr_code/qr_facebook.png"></li>
+						<li>Snapchat<img src="../media/images/qr_code/qr_snapchat.png"></li>
+					</ul>
+				</li>
+			</ul>
+		</nav>
+	</header>
+	<div class="menu_button"><a href="#">ACTUS</a>
+		<img src="../media/images/menu_button.png" class="menu_button_img">
+	</div>
+
+	<!-----Actus----->
+	<div id="actus">
+
+		<!-------ACTU 1------->
+		<div id="Actualité_1" class="actu_items">
+			<h1> L'ancien All Blacks Williams remonte sur le ring </h1>
+			<img src="../media/images/actu1" title="L'ancien All Blacks Williams remonte sur le ring" alt="L'ancien All Blacks Williams remonte sur le ring">
+			<p>
+				Sonny Bill Williams combattra en boxe anglaise face au Samoan Mark Hunt le 5 novembre prochain. Il s'agira du 10eme combat professionnel de l'ancien All Blacks.
+			</p>
+			<p>
+				Sonny Bill Williams est une véritable légende du rugby, à 13 comme à 15. Réputé pour ses plaquages destructeurs, il brillait également par ses fameux "off-loads", ces passes après contact avec les défenseurs dont lui seul avait le secret. Double champion du monde avec les All Blacks en 2011 et en 2015, il a également remporté le Super Rugby avec les Waikato Chiefs en 2012. En rugby à 13, il avait atteint la finale du Mondial 2013 à Wembley en Angleterre mais il s'était incliné avec les Kiwis contre l'Australie. Un pays qu'il connait bien pour y avoir soulevé la même année le trophée de champion de la prestigieuse NRL sous le maillot des Sydney Roosters. En France, <strong>le Néo-Zélandais avait porté la tunique de Toulon où il a laissé un souvenir impérissable</strong> en dépit d'une finale de Challenge européen perdue au Vélodrome de Marseille contre Cardiff.
+			</p>
+			<p>
+				Sportif puissant et complet, "SBW" a également connu une carrière de boxeur professionnel couronnée de succès, comptabilisant neuf victoires dont 4 par K-O, en autant de combats. Retraité des terrains de rugby depuis 2021, l'ancien trois-quarts centre âgé aujourd'hui de 37 ans va remonter sur un ring. <strong>Il défiera une légende du kickboxing, Mark Hunt</strong>, qu'il a avoué, via son compte Twitter, avoir suivi de près et supporté pendant de longues années. Le Samoan, vainqueur entre autres du K1 World GP en 2001, s'était aussi converti au MMA. Il avait d'ailleurs bénéficié du grand honneur de combattre dans la cage de l'UFC. En revanche en boxe anglaise, "The Super Samoan" n'a jamais goûté à la victoire en trois opportunités. A 48 ans, il disposera certainement d'une dernière chance de bien figurer chez les poids lourds du noble art avec un combat contre Sonny Bill Williams <strong>le 5 novembre prochain à la Ken Rosewall Arena de Sydney.</strong>
+
+			</p>
+		</div>
+
+
+		<!-------ACTU 2------->
+		<div id="Actualité_2" class="actu_items">
+			<br><br><br><br>
+			<h1> Ligue de Diamant : Fraser-Pryce, Paulino, Rojas et Allman brillent à Zurich </h1>
+			<img src="../media/images/actu2" title="Ligue de Diamant : Fraser-Pryce, Paulino, Rojas et Allman brillent à Zurich" alt="Ligue de Diamant : Fraser-Pryce, Paulino, Rojas et Allman brillent à Zurich">
+			<p>
+				Les cadors de l'athlétisme féminin ont brillé lors du dernier meeting de la Ligue de Diamant de la saison, à Zurich, à l'image de Shelly-Ann Fraser-Pryce, Marileidy Paulino ou Yulimar Rojas. Rénelle Lamote, la seule Française en lice, a terminé septième du 800m.
+			</p>
+			<p>
+				Ce jeudi marquait la fin de la saison de Ligue de Diamant, du côté de Zurich, et Shelly-Ann Fraser-Pryce, sacrée championne du monde du 100m à Eugene en juillet, a fini en beauté, en égalant le record du meeting en 10"65 pour devancer sa compatriote jamaïcaine Shericka Jackson (10"81) et l'Ivoirienne Marie-Josée Ta Lou (10"91). Cette même Shericka Jackson qui a ensuite gagné le 200m, dernière épreuve féminine de la soirée, en 21"80 devant les Américaines Gabrielle Thomas (22"38) et Tamara Clark (22"42). La Nigériane championne du monde Tobi Amusan a quant à elle confirmé sa belle saison, en remportant le 100m haies en 12"29. Doublé pour la République dominicaine sur 400m ! La vice-championne du monde Marileidy Paulino l'a emporté en 48"99, battant ainsi son record national, et elle a devancé de près d'une seconde Fiordaliza Cofil. Sur 400m haies, la vice-championne du monde néerlandaise Femke Bol a triomphé en 53"03. Le 800m a quant à lui été remporté par la médaillée de bronze mondiale, la Kenyane Mary Moraa, en 1'57"63, <strong>alors que la vice-championne d'Europe française Rénelle Lamote n'a pu faire mieux que septième en 1'59"38.</strong> Le 3000m steeple a été gagné par la vice-championne du monde éthiopienne Werkuha Getachew en 9'03"57, alors que le 1500m a été remporté par la championne du monde kenyane Faith Kipyegon en 4'00"44.
+			</p>
+			<h2>Rojas évidemment !</h2>
+			<p>
+				Quasi-imbattable depuis plusieurs saisons, la Vénézuélienne championne du monde Yulimar Rojas a signé un nouveau succès, en bondissant à 15,28m à son deuxième essai. En cette année forcément spéciale pour le sport ukrainien, le saut en hauteur féminin a apporté un peu de sourire au pays, et ce jeudi, <strong>Yaroslava Mahuchikh et Iryna Gerashchenko ont magnifiquement confirmé en réussissant un doublé à Zurich, avec des sauts à respectivement 2,03m et 1,94m.</strong> Le concours de la longueur a quant à lui été gagné par la Serbe Ivana Vuleta, avec un bond à 6,97m. Médaillée de bronze à Eugene, l'Américaine Valarie Allman a triomphé au lancer du disque à Zurich avec un jet à 67,77m. Le lancer du javelot a vu l'Américaine Kara Winger prendre sa revanche sur l'Australienne Kelsey-Lee Barber, qui l'avait battue dans l'Oregon, en l'emportant grâce à un jet à 64,98m contre 63,72m pour sa rivale. Rendez-vous l'année prochaine !
+			</p>
+		</div>
+
+<!-------ACTU 3------->
+		<div id="Actualité_3" class="actu_items">
+			<br><br><br><br>
+			<h1>ATP : Alcaraz-Nadal, c'est historique</h1>
+			<img src="../media/images/actu3.webp" title="ATP : Alcaraz-Nadal, c'est historique" alt="ATP : Alcaraz-Nadal, c'est historique">
+			<p>
+				Au dernier classement ATP, Rafael Nadal apparait juste derrière Carlos Alcaraz. De quoi conférer une dimension historique à ces deux premières positions occupées par le duo espagnol.
+			</p>
+			<p>
+				Rafael Nadal a d'autres chats à fouetter en ce moment. Qualifié pour le Maters de Turin après avoir glané deux des quatre tournois du Grand Chelem de la saison (Open d'Australie et Roland-Garros), l'Espagnol ne sait même pas s'il disputera le tournoi des Maîtres réunissant les huit meilleurs éléments. Nadal va bientôt être papa et il attend l'heureux événement au côté de sa femme dont la grossesse s'est avérée compliquée. Mais le grand bonheur approche désormais et le champion de 36 ans veut s'y consacrer pleinement. On ne verra donc peut-être plus « Rafa » en compétition cette année.
+			</p>
+			<p>
+				Son dernier match remonte à la Laver Cup. Une compétition qu'il n'aurait pas dû disputer afin de veiller sur sa femme. Mais Nadal a fait un exceptionnel détour pour son ami Roger Federer. L'homme aux 22 Grands Chelems, dont 14 Roland-Garros, a exaucé le vœu du Suisse (20 Majeurs) de disputer une ultime rencontre à ses côtés, dans un double finalement perdu à Londres contre les Américains Frances Tiafoe et Jack Sock. L'émotion était au rendez-vous , et l'Espagnol, comme le Suisse, ont fendu en larmes à la fin de la soirée.
+			</p>
+			<p>
+				Et depuis, même sans jouer, figurez-vous que Rafael Nadal a gagné une place au classement ATP . Oui, le Taureau de Manacor est numéro 2 mondial. Il a bénéficié de l'élimination surprise de Casper Ruud en quarts de finale du tournoi de Séoul, la semaine dernière. Nadal est ainsi devenu le dauphin de son compatriote Carlos Alcaraz, devenu numéro 1 de la planète tennis au lendemain de son sacre à l'US Open. Deux Espagnols aux deux premières places de la hiérarchie mondiale, c'est historique ! Ce n'était en effet jamais arrivé, ce dont s'est félicité Alcaraz. « Deux Espagnols en tête du classement ! Fier de partager ce moment historique avec Rafael Nadal, le meilleur joueur de tous les temps ! Allez ! », a tweeté le jeune prodige, lundi après-midi avec une photo au côté de son aîné. Pour retrouver la trace de deux joueurs de même nationalité tout en haut du classement ATP, il fallait remonter à plus de vingt-deux ans. Andre Agassi devançait alors son compatriote américain Pete Sampras le 7 août 2000.
+			</p>
+			<br><br><br>
+		</div>
+
+
+	</div>
+
+
+</body>
+
+<footer>Bonafos Adam G6</footer>
+
+<script>
+        const menu_mobile = document.querySelector(".menu_button_img")
+        const menu = document.querySelector(".menu_liste")
+ 
+        menu_mobile.addEventListener('click',()=>{
+        menu.classList.toggle('mobile-menu')
+        })
+</script>

HTML/formulaire.html

@@ -0,0 +1,130 @@
+<!doctype html>
+<html lang="fr">
+
+<head>
+	
+	<meta charset="utf-8" />
+	<title>Contact</title>
+	<link rel="icon" type="image/png" href="../media/images/icon.ico">
+	<link rel="stylesheet" type="text/css" href="../CSS/style.css">
+	<link rel="stylesheet" type="text/css" href="../CSS/page_formulaire.css">
+	
+</head>
+
+<body>
+	<header>
+		<nav class="menu">
+			<ul class="menu_liste">
+				<li><a href="index.html">Home</a></li>
+				<li><a href="table.html">Galerie</a></li>
+				<li><a href="news.html">News</a></li>
+				<li><a href="actus.html">Actus</a></li>
+				<li class="reseaux-mobile">
+					<a href="https://fr-fr.facebook.com/">
+						<img src="../media/images/logo/logo_facebook.webp">
+					</a>
+					<a href="https://twitter.com/?lang=fr">
+						<img src="../media/images/logo/logo_twitter.png">
+					</a>
+					<a href="https://www.instagram.com/?hl=fr">
+						<img src="../media/images/logo/logo_instagram.webp">
+					</a>
+					<a href="https://www.strava.com/?hl=fr">
+						<img src="../media/images/logo/logo_strava.png">
+					</a>
+				</li>
+				<li id="contact">Contact
+					<ul class="sous-menu">
+						<li><a href="formulaire.html" class="active">Nous contacter</a></li>
+						<li><p>Nos adresses :</p>
+							<div>
+								<li class="coordonnees"><a href="tel:+33">Téléphone</a></li>
+								<li class="coordonnees"><a href="mailto:passionsport@contact.fr">Mail</a></li>
+								<li class="coordonnees"><a href="https://goo.gl/maps/1mVkDZjDFm7MkmB58">Adresse</a></li>
+							</div>
+						</li>
+						<li><a href="https://www.strava.com/?hl=fr">Strava</a></li>
+						<li>Instagram<img src="../media/images/qr_code/qr_instagram.png"></li>
+						<li>Twitter<img src="../media/images/qr_code/qr_twitter.webp"></li>
+						<li>Facebook<img src="../media/images/qr_code/qr_facebook.png"></li>
+						<li>Snapchat<img src="../media/images/qr_code/qr_snapchat.png"></li>
+					</ul>
+				</li>
+			</ul>
+		</nav>
+	</header>
+	<div class="menu_button"><a href="#">ACCUEIL</a>
+		<img src="../media/images/menu_button.png" class="menu_button_img">
+	</div>
+
+	<form method="post" action="../PHP/formulaire.php">
+		<div>
+			<label for="nom">Nom :</label>
+			<input type="text" name="nom" id="nom" placeholder="votre nom" required>
+		</div>
+
+		<div>
+			<label for="email">Adresse email :</label>
+			<input type="email" name="email" id="email" placeholder="votre adresse email" required>
+		</div>
+
+		<div>
+			<label for="tel">Numéro de Téléphone (Facultatif) :</label>
+			<input type="tel" name="tel" id="tel" placeholder="Numéro de Téléphone">
+		</div>
+
+		<div>
+			<label for="motif">Motif :</label>
+			<select name="motif">
+				
+				<option value="suggestion">Suggestion</option>
+				<option value="don">Don</option>
+				<option value="message">Message</option>
+				<option value="reporter un bug">Reporter un bug</option>
+				<option value="suspicion de fake-news">Suspicion de Fake-news</option>
+				<option selected>Aucun</option>
+			</select>
+		</div>
+			
+		<div>
+			<label for=hor>Créneau horaire :</label>
+			<input type="datetime-local" name="hor" id="hor">
+		</div>
+		
+		<div>	
+			<p>Il s'agit de votre première demande de contact :</p>
+			<input type="radio" name="btn_demande" id="pre_dem" value="choix_oui">
+			<label for="choix_oui">Oui</label>
+			<input type="radio" name="btn_demande" id="new_dem" value="choix_non">
+			<label for="choix_non">Non</label>
+		</div>
+		
+		<div>
+			<label for="message">Entrez votre message :</label>
+			<textarea id="message" name="message" placeholder="saisissez votre message ..." required></textarea>
+		</div>
+
+
+		<!--  BOUTON POUR VALIDER  --> 
+		<div class="button">
+			<input type="submit" name="btn_valider" value="Valider">
+		</div>
+
+		<div class="button" id="reset_btn">
+			<input type="reset" name="btn_reset">
+		</div>
+
+	</form>
+
+</body>
+
+<footer>Bonafos Adam G6</footer>
+  
+<script>
+        const menu_mobile = document.querySelector(".menu_button_img")
+        const menu = document.querySelector(".menu_liste")
+ 
+        menu_mobile.addEventListener('click',()=>{
+        menu.classList.toggle('mobile-menu')
+        })
+</script>

HTML/index.html

@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="fr">
+
+<head>
+	
+	<meta charset="utf-8" />
+	<title>Passion Sport</title>
+	<link rel="icon" type="image/png" href="../media/images/icon.ico">
+	<link rel="stylesheet" type="text/css" href="../CSS/style.css">
+	<link rel="stylesheet" type="text/css" href="../CSS/page_index.css">
+	<link rel="stylesheet" type="text/css" href="../CSS/print/print_index.css" media="print">
+	
+</head>
+
+<!----------------------------------------------------------------->
+
+<body>
+	<header>
+		<nav class="menu">
+			<ul class="menu_liste">
+				<li><a href="index.html" class="active">Home</a></li>
+				<li><a href="table.html">Galerie</a></li>
+				<li><a href="news.html">News</a></li>
+				<li><a href="actus.html">Actus</a></li>
+				<li class="reseaux-mobile">
+					<a href="https://fr-fr.facebook.com/">
+						<img src="../media/images/logo/logo_facebook.webp">
+					</a>
+					<a href="https://twitter.com/?lang=fr">
+						<img src="../media/images/logo/logo_twitter.png">
+					</a>
+					<a href="https://www.instagram.com/?hl=fr">
+						<img src="../media/images/logo/logo_instagram.webp">
+					</a>
+					<a href="https://www.strava.com/?hl=fr">
+						<img src="../media/images/logo/logo_strava.png">
+					</a>
+				</li>
+				<li id="contact">Contact
+					<ul class="sous-menu">
+						<li><a href="formulaire.html">Nous contacter</a></li>
+						<li><p>Nos adresses :</p>
+							<div>
+								<li class="coordonnees"><a href="tel:+33">Téléphone</a></li>
+								<li class="coordonnees"><a href="mailto:passionsport@contact.fr">Mail</a></li>
+								<li class="coordonnees"><a href="https://goo.gl/maps/1mVkDZjDFm7MkmB58">Adresse</a></li>
+							</div>
+						</li>
+						<li><a href="https://www.strava.com/?hl=fr">Strava</a></li>
+						<li>Instagram<img src="../media/images/qr_code/qr_instagram.png"></li>
+						<li>Twitter<img src="../media/images/qr_code/qr_twitter.webp"></li>
+						<li>Facebook<img src="../media/images/qr_code/qr_facebook.png"></li>
+						<li>Snapchat<img src="../media/images/qr_code/qr_snapchat.png"></li>
+					</ul>
+				</li>
+			</ul>
+		</nav>
+	</header>
+	<div class="menu_button"><a href="#">ACCUEIL</a>
+		<img src="../media/images/menu_button.png" class="menu_button_img">
+	</div>
+
+	<div class="reseaux">
+		<a href="https://fr-fr.facebook.com/">
+			<img src="../media/images/logo/logo_facebook.webp" title="Lien Facebook" alt="Lien Facebook">
+		</a>
+		<a href="https://twitter.com/?lang=fr">
+			<img src="../media/images/logo/logo_twitter.png" title="Lien Twitter" alt="Lien Twitter">
+		</a>
+		<a href="https://www.instagram.com/?hl=fr">
+			<img src="../media/images/logo/logo_instagram.webp" title="Lien Instagram" alt="Lien Instagram">
+		</a>
+		<a href="https://www.strava.com/?hl=fr">
+			<img src="../media/images/logo/logo_strava.png" title="Lien Strava" alt="Lien Strava">
+		</a>
+	</div> 
+	
+
+
+	<!-----HAUT DE LA PAGE----->
+	<div id="home">
+		<h1>Passion Sport</h1>
+	</div>
+
+	<!-----Actus----->
+	<div id="blog">
+		<section id="actualites">
+			<em><h2>Actus :</h2></em>
+			<ul>
+				<a href="actus.html#Actualité_1"><img id="image_1" src="../media/images/actu1" title="L'ancien All Blacks Williams remonte sur le ring" alt="L'ancien All Blacks Williams remonte sur le ring"></a>
+				<figcaption>L'ancien All Blacks Williams remonte sur le ring</figcaption>
+				<article><li>
+					<p> Sonny Bill Williams combattra en boxe anglaise face au Samoan Mark Hunt le 5 novembre prochain. Il s'agira du 10eme combat professionnel de l'ancien All Blacks. Sonny Bill Williams est une véritable légende du rugby, à ...
+						<a href="actus.html">lire la suite</a></p>
+				</li></article>
+
+				<article><li>
+					<a href="actus.html#Actualité_2"><img src="../media/images/actu2" title="Ligue de Diamant : Fraser-Pryce, Paulino, Rojas et Allman brillent à Zurich" alt="Ligue de Diamant : Fraser-Pryce, Paulino, Rojas et Allman brillent à Zurich"></a>
+					<figcaption>Ligue de Diamant : Fraser-Pryce, Paulino, Rojas et Allman brillent à Zurich</figcaption>
+
+					<p>Les cadors de l'athlétisme féminin ont brillé lors du dernier meeting de la Ligue de Diamant de la saison, à Zurich, à l'image de Shelly-Ann Fraser-Pryce, Marileidy Paulino ou Yulimar Rojas. Rénelle Lamote, la seule Française en lice, a terminé ...
+						<a href="actus.html#Actualité 2">lire la suite</a></p>
+				</li></article>../
+
+				<article><li>
+					<a href="actus.html#Actualité_3"><img src="../media/images/actu3.webp" title="ATP : Alcaraz-Nadal, c'est historique" alt="ATP : Alcaraz-Nadal, c'est historique"></a>
+					<figcaption>ATP : Alcaraz-Nadal, c'est historique</figcaption>
+					
+					<p>Au dernier classement ATP, Rafael Nadal apparait juste derrière Carlos Alcaraz. De quoi conférer une dimension historique à ces deux premières positions occupées par le duo ...
+						<a href="actus.html#Actualité 3">lire la suite</a></p>
+				</li></article>
+		</section>
+
+		<section id="news">
+			<em><h2>Nouveau sur le site :</h2></em>
+			
+			<a href="news.html#news_1"><img src="../media/images/news_1_image.jpg" title="Mathilde Gros, la métamorphose" alt="Mathilde Gros, la métamorphose"></a></li>
+			<figcaption>-- il y a 8 heures</figcaption>
+
+			<a href="news.html#news_2"><img src="../media/images/news_2_image.jpg" title="Coupe du Monde - Quatar 2022" alt="Coupe du Monde - Quatar 2022"></a></li>
+			<figcaption>-- il y a 2 jours</figcaption>
+
+			<a href="news.html#news_3"><img src="../media/images/news_3_image.jpg" title="Terrible entame pour l'OM - Francfort / Marseille - Ligue des Champions (5ème journée)" alt="Terrible entame pour l'OM - Francfort / Marseille - Ligue des Champions (5ème journée)"></a></li>
+			<figcaption>-- il y a 5 jours</figcaption>
+
+			<a href="news.html#news_4"><img src="../media/images/news_4_image.jpg" title="Énorme crash entre Alonso et Stroll ! - Grand Prix des États-Unis - F1" alt="Énorme crash entre Alonso et Stroll ! - Grand Prix des États-Unis - F1"></a></li>
+			<figcaption>-- il y a un mois</figcaption>
+
+			<a href="news.html#news_5"><img src="../media/images/news_5_image.jpg" title="Résumé du coup de maître d'Evenepoel" alt="Résumé du coup de maître d'Evenepoel"></a></li>
+			<figcaption>-- il y a 2 mois</figcaption>
+			
+		</section>
+
+	</div>
+	<aside><!--liste de liens externes-->
+			<ul id="liens_block">
+				<li><a href="https://rmcsport.bfmtv.com/"><img class="lien_externe" src="../media/images/logo/logo_rmcsport.png" title="Lien RMC Sport" alt="Lien RMC Sport"></a></li>
+				<li><a href="https://www.lequipe.fr"><img class="lien_externe" src="../media/images/logo/logo_lequipe.png" title="Lien l'équipe" alt="Lien l'équipe"></a></li>
+				<li><a href="https://fr.wikipedia.org/wiki/Sport"><img class="lien_externe" src="../media/images/logo/logo_wikipedia.png" title="Lien Wikipédia" alt="Lien Wikipédia"></a></li>
+			</ul>
+		</aside>
+</body>
+<footer>Bonafos Adam G6</footer>
+  
+<script>
+        const menu_mobile = document.querySelector(".menu_button_img")
+        const menu = document.querySelector(".menu_liste")
+ 
+        menu_mobile.addEventListener('click',()=>{
+        menu.classList.toggle('mobile-menu')
+        })
+</script>

HTML/news.html

@@ -0,0 +1,112 @@
+<!doctype html>
+<html lang="fr">
+
+<head>
+	
+	<meta charset="utf-8" />
+	<title>ACTUS</title>
+	<link rel="icon" type="image/png" href="../media/images/icon.ico">
+	<link rel="stylesheet" type="text/css" href="../CSS/style.css">
+	<link rel="stylesheet" type="text/css" href="../CSS/page_news.css">
+
+</head>
+
+
+<!----------------------------------------------------------------->
+
+<body>
+	<header>
+		<nav class="menu">
+			<ul class="menu_liste">
+				<li><a href="index.html">Home</a></li>
+				<li><a href="table.html">Galerie</a></li>
+				<li><a href="news.html" class="active">News</a></li>
+				<li><a href="actus.html">Actus</a></li>
+				<li class="reseaux-mobile">
+					<a href="https://fr-fr.facebook.com/">
+						<img src="../media/images/logo/logo_facebook.webp">
+					</a>
+					<a href="https://twitter.com/?lang=fr">
+						<img src="../media/images/logo/logo_twitter.png">
+					</a>
+					<a href="https://www.instagram.com/?hl=fr">
+						<img src="../media/images/logo/logo_instagram.webp">
+					</a>
+					<a href="https://www.strava.com/?hl=fr">
+						<img src="../media/images/logo/logo_strava.png">
+					</a>
+				</li>
+				<li id="contact">Contact
+					<ul class="sous-menu">
+						<li><a href="formulaire.html">Nous contacter</a></li>
+						<li> <p>Nos Adresses :</p>
+							<div>
+								<li class="coordonnees"><a href="tel:+33">Téléphone</a></li>
+								<li class="coordonnees"><a href="mailto:passionsport@contact.fr">Mail</a></li>
+								<li class="coordonnees"><a href="https://goo.gl/maps/1mVkDZjDFm7MkmB58">Adresse</a></li>
+							</div>
+						</li>
+						<li><a href="https://www.strava.com/?hl=fr">Strava</a></li>
+						<li>Instagram<img src="../media/images/qr_code/qr_instagram.png"></li>
+						<li>Twitter<img src="../media/images/qr_code/qr_twitter.webp"></li>
+						<li>Facebook<img src="../media/images/qr_code/qr_facebook.png"></li>
+						<li>Snapchat<img src="../media/images/qr_code/qr_snapchat.png"></li>
+					</ul>
+				</li>
+			</ul>
+		</nav>
+	</header>
+
+	<div class="menu_button"><a href="#">NEWS</a>
+		<img src="../media/images/menu_button.png" class="menu_button_img">
+	</div>
+		
+
+
+	<!-----News----->
+	<div id="news_page">
+		<!-------News 1------->
+		<div id="news_1" class="news_items">
+			<h1>Mathilde Gros, la métamorphose</h1>
+			<video src="../media/videos/news1.mp4" controls></video>
+			<figcaption>mis à jour il y a 8 heures</figcaption>
+		</div>
+
+		<div id="news_2" class="news_items">
+			<h1>Coupe du Monde - Quatar 2022</h1>
+			<video src="../media/videos/news2.mp4" controls></video>
+			<figcaption>mis à jour il y a 2 jours</figcaption>
+		</div>
+
+		<div id="news_3" class="news_items">
+			<h1>Terrible entame pour l'OM - Francfort / Marseille - Ligue des Champions (5ème journée)</h1>
+			<video src="../media/videos/news3.mp4" controls></video>
+			<figcaption>mis à jour il y a 5 jours</figcaption>
+		</div>
+
+		<div id="news_4" class="news_items">
+			<h1>Énorme crash entre Alonso et Stroll ! - Grand Prix des États-Unis - F1</h1>
+			<video src="../media/videos/news4.mp4" controls></video>
+			<figcaption>mis à jour il y a un mois</figcaption>
+		</div>
+
+		<div id="news_5" class="news_items">
+			<h1>Résumé du coup de maître d'Evenepoel</h1>
+			<video src="../media/videos/news5.mp4" controls></video>
+			<figcaption>mis à jour il y a 2 mois</figcaption>
+		</div>
+	</div>
+
+
+</body>
+
+<footer>Bonafos Adam G6</footer>
+  
+<script>
+        const menu_mobile = document.querySelector(".menu_button_img")
+        const menu = document.querySelector(".menu_liste")
+ 
+        menu_mobile.addEventListener('click',()=>{
+        menu.classList.toggle('mobile-menu')
+        })
+</script>

HTML/table.html

@@ -0,0 +1,165 @@
+<!doctype html>
+<html lang="fr">
+
+<head>
+	
+	<meta charset="utf-8" />
+	<title>ACTUS</title>
+	<link rel="icon" type="image/png" href="../media/images/icon.ico">
+	<link rel="stylesheet" type="text/css" href="../CSS/style.css">
+	<link rel="stylesheet" type="text/css" href="../CSS/page_table.css">
+	<link rel="stylesheet" type="text/css" href="../CSS/print/print_table.css" media="print">
+
+</head>
+
+
+<!----------------------------------------------------------------->
+
+<body>
+
+	<header>
+		<nav class="menu">
+			<ul class="menu_liste">
+				<li><a href="index.html">Home</a></li>
+				<li><a href="table.html" class="active">Galerie</a></li>
+				<li><a href="news.html">News</a></li>
+				<li><a href="actus.html">Actus</a></li>
+				<li class="reseaux-mobile">
+					<a href="https://fr-fr.facebook.com/">
+						<img src="../media/images/logo/logo_facebook.webp">
+					</a>
+					<a href="https://twitter.com/?lang=fr">
+						<img src="../media/images/logo/logo_twitter.png">
+					</a>
+					<a href="https://www.instagram.com/?hl=fr">
+						<img src="../media/images/logo/logo_instagram.webp">
+					</a>
+					<a href="https://www.strava.com/?hl=fr">
+						<img src="../media/images/logo/logo_strava.png">
+					</a>
+				</li>
+				<li id="contact">Contact
+					<ul class="sous-menu">
+						<li><a href="formulaire.html">Nous contacter</a></li>
+						<li> <p>Nos adresses :</p>
+							<div>
+								<li class="coordonnees"><a href="tel:+33">Téléphone</a></li>
+								<li class="coordonnees"><a href="mailto:passionsport@contact.fr">Mail</a></li>
+								<li class="coordonnees"><a href="https://goo.gl/maps/1mVkDZjDFm7MkmB58">Adresse</a></li>
+							</div>
+						</li>
+						<li><a href="https://www.strava.com/?hl=fr">Strava</a></li>
+						<li>Instagram<img src="../media/images/qr_code/qr_instagram.png"></li>
+						<li>Twitter<img src="../media/images/qr_code/qr_twitter.webp"></li>
+						<li>Facebook<img src="../media/images/qr_code/qr_facebook.png"></li>
+						<li>Snapchat<img src="../media/images/qr_code/qr_snapchat.png"></li>
+					</ul>
+				</li>
+			</ul>
+		</nav>
+	</header>
+	<div class="menu_button"><a href="#">GALERIE</a>
+		<img src="../media/images/menu_button.png" class="menu_button_img">
+	</div>
+
+	<div id="galerie">
+		<table border="1"><!--Champion du monde | français | a clermont-->
+			<thead id="galerie_title">
+				<tr>
+					<td>Différents sports</td>
+					<td>Champion du monde</td>
+					<td>Equipe de France</td>
+					<td>Equipe de Clermont</td>
+				</tr>
+			</thead>
+			<tbody>
+				<tr id="foot">
+					<td>
+						<a href="https://fr.wikipedia.org/wiki/Football">FOOTBALL</a>
+					</td>
+					<td colspan="2">
+						<img src="../media/images/galerie/foot_cdm.jpg" width="1300" title="France - Coupe du monde 2018" alt="France - Coupe du monde 2018">
+						<figcaption>France - Coupe du monde 2018</figcaption>
+					</td>
+					<td>
+						<img src="../media/images/galerie/foot_clf.jpg" width="650px" title="Clermont Foot" alt="Clermont Foot">
+						<figcaption>Clermont Foot</figcaption>
+					</td>	
+				</tr>
+				<tr id="cyclisme">
+					<td>
+						<a href="https://fr.wikipedia.org/wiki/Cyclisme_sur_route">CYCLISME SUR ROUTE</a>
+					</td>
+					<td>
+						<img src="../media/images/galerie/cyclism_cdm.jpg" title="Remco Evenepoel - Champion du Monde 2022" alt="Remco Evenepoel - Champion du Monde 2022">
+						<figcaption>Remco Evenepoel - Champion du Monde 2022</figcaption>
+					</td>
+					<td>
+						<img src="../media/images/galerie/cyclism_julian.jpg" title="Julian Alaphilippe - UCI Wolrd Championships 2021" alt="Julian Alaphilippe - UCI Wolrd Championships 2021">
+						<figcaption>Julian Alaphilippe - UCI Wolrd Championships 2021</figcaption>
+					</td>
+					<td>
+						<img src="../media/images/galerie/cyclism_clf.webp" width="650px" title="Étoile cycliste de Clermont-Ferrand" alt="Étoile cycliste de Clermont-Ferrand">
+						<figcaption>Étoile cycliste de Clermont-Ferrand</figcaption>
+					</td>
+				</tr>
+				<tr id="rugby">
+					<td rowspan="2">
+						<a href="https://fr.wikipedia.org/wiki/Rugby_%C3%A0_XV">RUGBY à XV</a>
+					</td>
+					<td rowspan="2">
+						<img src="../media/images/galerie/rugby_cdm.jpg" width="650px" title="Australie - Coupe du monde 2019" alt="Australie - Coupe du monde 2019">
+						<figcaption>Australie - Coupe du monde 2019</figcaption>
+					</td>
+					<td>
+						<img src="../media/images/galerie/rugby_fr.jpeg" width="650px" title="Équipe de France masculine" alt="Équipe de France masculine">
+						<figcaption>Équipe de France masculine</figcaption>
+					</td>
+					<td rowspan="2">
+						<img src="../media/images/galerie/rugby_clf.jpg" width="650px" title="Association sportive Montferrandaise" alt="Association sportive Montferrandaise">
+						<figcaption>ASM</figcaption>
+					</td>
+				</tr>
+				<tr>
+					<td>
+						<img src="../media/images/galerie/rugby_fr_femme.webp" width="650px" title="Équipe de France féminine" alt="Équipe de France féminine">
+						<figcaption>Équipe de France féminine</figcaption>
+					</td>
+				</tr>
+				<tr id="hockey">
+					<td>
+						<a href="https://fr.wikipedia.org/wiki/Hockey">HOCKEY</a>
+					</td>
+					<td>
+						<img src="../media/images/galerie/hockey_cdm.jpg" width="650px" title="Equipe de Finlande - Champion du Monde 2022" alt="Equipe de Finlande - Champion du Monde 2022" 
+						>
+						<figcaption>Equipe de Finlande - Champion du Monde 2022</figcaption>
+					</td>
+					<td>
+						<img src="../media/images/galerie/hockey_fr.jpg" width="650px" title="Equipe de France masculine" alt="Equipe de France masculine">
+						<figcaption>Equipe de France masculine</figcaption>
+					</td>
+					<td>
+						<img src="../media/images/galerie/hockey_clf.jpeg" width="650px" title="Equipe des Sangliers Arvernes" alt="Equipe des Sangliers Arvernes">
+						<figcaption>Equipe des Sangliers Arvernes</figcaption>
+					</td>
+				</tr>
+			</tbody>
+
+		</table>
+	</div>
+
+
+
+</body>
+
+<footer>Bonafos Adam G6</footer>
+  
+<script>
+        const menu_mobile = document.querySelector(".menu_button_img")
+        const menu = document.querySelector(".menu_liste")
+ 
+        menu_mobile.addEventListener('click',()=>{
+        menu.classList.toggle('mobile-menu')
+        })
+</script>

PHP/formulaire.php

@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Retour formulaire</title>
+    <link rel="icon" type="image/png" href="../media/images/icon.ico">
+    <link rel="stylesheet" type="text/css" href="../CSS/style.css">
+    <link rel="stylesheet" type="text/css" href="../CSS/page_php.css">
+
+</head>
+<body>
+    <header>
+        <nav class="menu">
+            <ul class="menu_liste">
+                <li><a href="../HTML/index.html">Home</a></li>
+                <li><a href="../HTML/table.html">Galerie</a></li>
+                <li><a href="../HTML/news.html">News</a></li>
+                <li><a href="../HTML/actus.html">Actus</a></li>
+                <li class="reseaux-mobile">
+                    <a href="https://fr-fr.facebook.com/">
+                        <img src="../media/images/logo/logo_facebook.webp">
+                    </a>
+                    <a href="https://twitter.com/?lang=fr">
+                        <img src="../media/images/logo/logo_twitter.png">
+                    </a>
+                    <a href="https://www.instagram.com/?hl=fr">
+                        <img src="../media/images/logo/logo_instagram.webp">
+                    </a>
+                    <a href="https://www.strava.com/?hl=fr">
+                        <img src="../media/images/logo/logo_strava.png">
+                    </a>
+                </li>
+                <li id="contact">Contact
+                    <ul class="sous-menu">
+                        <li><a href="../HTML/formulaire.html" class="active">Nous contacter</a></li>
+                        <li><p>Nos adresses :</p>
+                            <div>
+                                <li class="coordonnees"><a href="tel:+33">Téléphone</a></li>
+                                <li class="coordonnees"><a href="mailto:passionsport@contact.fr">Mail</a></li>
+                                <li class="coordonnees"><a href="https://goo.gl/maps/1mVkDZjDFm7MkmB58">Adresse</a></li>
+                            </div>
+                        </li>
+                        <li><a href="https://www.strava.com/?hl=fr">Strava</a></li>
+                        <li>Instagram<img src="../media/images/qr_code/qr_instagram.png"></li>
+                        <li>Twitter<img src="../media/images/qr_code/qr_twitter.webp"></li>
+                        <li>Facebook<img src="../media/images/qr_code/qr_facebook.png"></li>
+                        <li>Snapchat<img src="../media/images/qr_code/qr_snapchat.png"></li>
+                    </ul>
+                </li>
+            </ul>
+        </nav>
+    </header>
+    <div class="menu_button"><a href="#">ACCUEIL</a>
+        <img src="../media/images/menu_button.png" class="menu_button_img">
+    </div>
+
+    <?php
+    $nom = $_POST['nom'];
+    $mail = $_POST['email'];
+    $tel = $_POST['tel'];
+    $motif = $_POST['motif'];
+    $hor = $_POST['hor'];
+    $message = $_POST['message'];
+    $compt = 0;
+
+?>
+<div id="grp_infos">
+    <div id="nom" class="infos">
+    <?php
+        if (empty($nom)) {
+            echo "<b>Rentrez votre Nom</b>";
+        }
+        else {
+            if (strlen($nom) > 1) {
+                echo "Nom pris en compte : <em>$nom</em>";
+            $compt = $compt + 1;
+            }
+            else {
+                echo "<b>Nom trop court (minimum 2 caractères)</b>";
+            }
+        }
+    ?>
+    </div>
+
+    
+    <div id="mail" class="infos">
+    <?php
+        if (empty($mail)) {
+            echo "<b>Rentrez votre adresse email</b>";
+        }
+        else {
+            if (filter_var($mail)) { /*strlen($mail) >= 8 */
+                echo "Adrese email prise en compte : <em>$mail</em>";
+                $compt = $compt + 1;
+            }
+            else {
+                echo "<b>Format d'adresse email invalide</b>";
+            }
+        }
+    ?>
+    </div>
+
+    <div id="tel" class="infos">
+        <?php
+        if (! empty($tel)) {
+            echo "Numéro de téléphone pris en compte : <em>$tel</em>";
+        }
+        ?>
+    </div>
+
+    <div id="motif" class="infos">
+        <?php
+        if ($motif != 'Aucun') {
+            echo "Motif pris en compte : <em>$motif</em>";
+        }
+        ?>
+    </div>
+
+    <div id="horraire" class="infos">
+        <?php
+        if (! empty($hor)) {
+            echo "Créneau horaire pris en compte : <em>$hor</em>";
+        }
+        ?>
+    </div>
+
+    <div id="message" class="infos">
+    <?php
+        if (empty($message)) {
+            echo "<b>Rentrez votre message</b>";
+        }
+        else {
+            if (strlen($message) >= 15) {
+                echo "Message bien pris en compte : <em>$message</em>";
+                $compt = $compt + 1;
+            }
+            else {
+                echo "<b>Développé votre message (nombre de caractères minimum : 15)</b>";
+            }    
+        }
+    ?>
+    </div>
+
+</div>
+
+<div class="notif">
+    <p id="valid">
+    <?php
+        if ($compt == 3) {
+            echo "Votre message à été transmis à notre équipe";
+        }
+    ?>
+    </p>
+    <p id="rejet">
+    <?php
+        if ($compt != 3) {
+            echo "Votre message a été rejeté, complété vos informations";
+        }
+    ?>
+    </p>
+</div>
+
+
+</body>
+
+<footer>Bonafos Adam G6</footer>
+  
+<script>
+        const menu_mobile = document.querySelector(".menu_button_img")
+        const menu = document.querySelector(".menu_liste")
+ 
+        menu_mobile.addEventListener('click',()=>{
+        menu.classList.toggle('mobile-menu')
+        })
+</script>
+</html>

readme.txt

@@ -0,0 +1,5 @@
+Pour accéder aux personas ainsi qu'au compte rendu il faut aller dans le dossier "DOC", vous les trouverez au format ".docx" ou ".pdf".
+Pour les maquettes, celles-ci sont dans le dossier "Doc/Maquettes", et seront au format ".png".
+
+Lien vers UCA public_html :
+	http://londres.uca.local/~adbonafos/Passion_Sport/index.html