contact et partenaires

CSS/accueil.css

@@ -1,3 +1,7 @@
+body{
+	background-image:url("../img/background.svg");
+}
+
 main{
 	display: flex;
 	flex-direction: column;
@@ -11,18 +15,6 @@ header{
 	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;
-}
-
 
 
 

CSS/contact.css

@@ -1,3 +1,7 @@
+body{
+	background-image:url("../img/background.svg");
+}
+
 main{
 	display: flex;
 	flex-direction: column;
@@ -27,3 +31,8 @@ form div {
 	margin: 2%;
 }
 
+input[type=text]:focus{
+	border: 2px solid red;
+	border-radius: 4px;
+}
+

CSS/partenaire.css

@@ -0,0 +1,97 @@
+#txt-list{
+	display: flex;
+	flex-direction: row-reverse;
+	justify-content: space-around;
+	align-items: center;
+}
+
+#ligne-partenaires {
+	backdrop-filter: blur(10px);
+	background-color: rgba(0, 0, 0, 0.2);
+}
+
+
+
+
+#hov-partenaire{
+	position: absolute;
+	color: white;
+	font-size: 1.5rem;
+	backdrop-filter: blur(10px);
+	background-color: rgba(0, 0, 0, 0.8);
+	border-radius: 5px;
+	top: 0;
+	width: 50%;
+	height: 100%;
+	display: none;
+}
+
+#ligne-partenaires li:hover div{
+	transition: all ease 0.4s;
+	display: block;
+}
+
+#ligne-partenaires a{
+	text-decoration: none;
+}
+
+#colonne-partenaires {
+	backdrop-filter: blur(10px);
+	background-color: rgba(0, 0, 0, 0.2);
+}
+
+
+
+#colonne-partenaires li:hover div{
+	display: block;
+}
+
+#colonne-partenaires a{
+	text-decoration: none;
+}
+
+#ligne-colonne{
+	display: flex;
+	flex-direction: column;
+}
+
+#ligne-colonne img{
+	width: 20vw;
+	height: 30vh;
+}
+#ligne-colonne ul{
+	color: black;
+	list-style: none;
+	display: flex;
+}
+
+aside{
+	width: 50vw;
+}
+
+#btn-contact{
+	margin: 1%;
+	padding: 22px 75px;
+	left:50%;
+	border: 2px solid darkred;
+	border-radius: 10px;
+	transition: all ease 0.4s;
+}
+
+#btn-contact p{
+	padding: 0;
+	color: black;
+	text-align: center;
+	font-size: 20px;
+}
+
+#btn-contact:hover{
+	border: 2px solid none;
+	background-color: darkred;
+	
+}
+
+#btn-contact:hover p{
+	color: white;
+}
+

CSS/styles.css

@@ -1,7 +1,5 @@
 body{
 	margin: 0;
-	background-image:url("../img/background.svg");
-
 }
 
 header{
@@ -106,6 +104,7 @@ nav{
 }
 
 #btn_up{
+	z-index: 100;
 	background-color: white;
 	border-radius: 50px;
 	position: fixed;

HTML/contact.html

@@ -29,6 +29,7 @@
 		</header>
 
 		<main>
+			<a href="#"><img id="btn_up" src="img/icone/arrow-up.svg" alt="icone de fleche"></a>
 			<h1> Contactez nous !</h1>
 			<form method="POST" action="https://dwarves.iut-fbleau.fr/requete.php">
 

HTML/page_3.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/partenaire.css">
 		<meta name="keywords" content="casino">
 		<link rel = "icon" type = "/image/png" href = "../img/icon.png">
 	</head> 
@@ -14,7 +15,7 @@
 			<div id="menu-ordi">
 
 				<nav> 
-				<a href="#"><img id="icone" src="img/logo.svg" alt="icone du site"></a>
+				<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> 
@@ -26,4 +27,78 @@
 				</nav>
 			</div>
 		</header>
+		<main>
+
+			<a href="#"><img id="btn_up" src="../img/icone/arrow-up.svg" alt="icone de fleche">
+			<h1> Nos Partenaires</h1>
+			<div id="txt-list">
+				<div id="ligne-colonne">
+					<div id="ligne-partenaires">
+						<ul>
+							<li><a target="_blank" href ="https://www.restosducoeur.org/"> <img src="../img/Restoducoeur.png" alt="logo du resto du coeur"><div id="hov-partenaire">Nous travaillons avec Les restaurants du coeur.</div></img></a></li>
+							<li><a href ="resto.fr" target="_blank"> <img src="../img/Croixrouge.png"  alt="logo de la croix rouge "><div id="hov-partenaire">Nous travaillons avec la croix rouge.</div></img></a></li>
+						</ul>
+					</div>
+					<div id="colonne-partenaires">
+						<ul>
+							<li><a target="_blank" href ="https://www.actioncontrelafaim.org/"> <img src="../img/ActionContreFaim.png" alt="logo du resto d'action contre la faim"><div id="hov-partenaire">Nous travaillons avec Action contre la faim.</div></img></a></li>
+							<li><a href ="resto.fr" target="_blank"> <img src="../img/Croixrouge.png"  alt="logo de la croix rouge "><div id="hov-partenaire">Nous travaillons avec la croix rouge.</div></img></a></li>
+						</ul>
+					</div>
+				</div>
+				<aside>
+					<p> ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+					quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+					consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+					cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+					proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+					
+				</aside>
+			</div>
+			<h2> Nous Cherchons de nouveaux Partenaires !</h2>
+			<button onclick="window.location.href='contact.html';" id="btn-contact"> <p>Contactez nous !</p></button>
+
+		</main>
+		<footer>
+
+
+			<div id="reseaux">
+
+				<ul>
+
+					<li><a href="https://twitter.com" target="_blank" alt= "logo twitter"> <img src="../img/icone/twitter.svg"></a></li>
+					<li><a href="https://instagram.com" target="_blank" alt= "logo instagram"> <img src="../img/icone/instagram.svg"></a></li>
+					<li><a href="https://tiktok.com" target="_blank" alt= "logo tiktok"> <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>

HTML/page_4.html

@@ -4,7 +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">
+		<link rel = "stylesheet" type = "text/css" href = "../CSS/print.css" media="print">
 		<meta name="keywords" content="casino">
 		<link rel = "icon" type = "/image/png" href = "../img/icon.png">
 	</head> 

credits.txt

@@ -1 +1,5 @@
-icone : https://icones8.fr/     https://fontawesome.com
+icones : https://icones8.fr/     https://fontawesome.com
+
+image d'accueil main carte : akspic  https://wallspic.com/fr/image/163662-poker-roulette-carte_a_jouer-poker_en_ligne-jeu_de_cartes
+
+image fond cercle : https://app.haikei.app/

index.html

@@ -6,8 +6,8 @@
 		<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/styles.css" media="all">
-		<link rel = "stylesheet" type = "text/css" href = "CSS/accueil.css">
+		<link rel = "stylesheet" type = "text/css" href = "CSS/accueil.css" media="all">
 		<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">
@@ -58,7 +58,7 @@
 			<div id="img_gauche_txt_droite" class="img_txt">
 
 				<p>
-					ipsum <span class="txt_rouge">dolor</span> sit amet, consectetur adipisicing elit, sed do eiusmod
+					ipsum <a href="HTML/page_4.html"><span class="txt_rouge"> dolor</span></a> sit amet, consectetur adipisicing elit, sed do eiusmod
 					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 					quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 				</p>
@@ -72,7 +72,7 @@
 			</h2>
 			<div id="img_droite_txt_gauche" class="img_txt">
 				<p>
-					ipsum dolor sit amet, <span class="txt_rouge">consectetur</span> adipisicing elit, sed do eiusmod
+					ipsum dolor sit amet,<a href="HTML/page_3.html"><span class="txt_rouge"> dolor </span></a>adipisicing elit, sed do eiusmod
 					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 					quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 
@@ -100,9 +100,9 @@
 
 				<ul>
 
-					<li><a href="https://twitter.com" target="_blank"> <img src="img/icone/twitter.svg"></a></li>
+					<li><a href="https://twitter.com" target="_blank" alt= "logo twitter"> <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://instagram.com" target="_blank" alt= "logo instagram"> <img src="img/icone/instagram.svg"></a></li>
-					<li><a href="https://tiktok.com" target="_blank"> <img src="img/icone/tiktok.svg"></a></li>
+					<li><a href="https://tiktok.com" target="_blank" alt= "logo tiktok"> <img src="img/icone/tiktok.svg"></a></li>
 				</ul>
 				<p> Suivez nos actualités !</p>
 			</div>