pied de page et fond

CSS/styles.css

@@ -1,7 +1,6 @@
 body{
 	margin: 0;
-	background: linear-gradient(180deg,rgba(83, 0, 0, 0.7),#ff0000 50%);
+	background: white;
-	
 }
 
 
@@ -16,8 +15,8 @@ header{
 
 p {
 	margin: 0;
-	font-size: 25px ;
 }
+
 nav{
 	font-size: 20px ;
 	top: 0;
@@ -52,10 +51,7 @@ main{
 }
 
 #background-video{
-
+	filter: blur(2px);
-	filter: opacity(50%);
-	mix-blend-mode: screen;
-
 	height: 100vh;
 	width: 100vw;
 	object-fit: cover;
@@ -63,30 +59,59 @@ main{
 	left: 0;
 	right: 0;
 	top: 0;
-	bottom: 0;
+	z-index: -5;
-	z-index: -1;
 }
 
-#cas{
-	box-shadow: 0 40px 60px rgba(150,0,0,0.7);
-	height: 25%;
-	width: 25%;
 
 
-}
 
 #btn_up{
+	background-color: white;
+	border-radius: 50px;
 	position: fixed;
 	right: 2vw;
 	bottom: 2vh;
 	height: 4vh;
 	width: 4vh;
+
+	transition: transform ease 1s;
 }
 
+#btn_up:hover{
+	transition: transform ease 0.4s;
+	transform: scale(1.5);
+}
 nav li{
 	display: inline-block;
 }
 
+.page{
+	list-style-type: none;
+	text-decoration: none;
+	color: black;
+
+}
+.page p{margin-right: 10vh;
+	transition: transform linear 0.2s;
+}
+
+.page p:hover{
+	color: gold;
+	transform: scale(1.2,1.2);
+}
+
+
+
+
+
+
+
+
+
+
+main p{
+	font-size: 25px;
+}
 
 
 .img_gauche_txt_droite{
@@ -110,7 +135,13 @@ nav li{
 	box-shadow:  -10px -15px rgba(0,0,0,0.5);
 }
 
-.img_gauche_txt_droite img{border-radius: 10px;}
+.img_gauche_txt_droite img{
+	box-shadow: 0 40px 60px rgba(150,0,0,0.7);
+	height: 25%;
+	width: 25%;
+	border-radius: 10px;
+}
+
 .img_gauche_txt_droite img:not(:hover){
 	filter: saturate(0.2);
 	transform: scale(0.8,0.8);
@@ -135,36 +166,73 @@ nav li{
 	width: 50%;
 	box-shadow: 15px 10px rgba(0,0,0,0.5);
 }
-
+.img_droite_txt_gauche p:hover + img{
+	padding: 10%;
+	width: 10%
+}
 .img_droite_txt_gauche p:hover{
 	box-shadow:  -15px -10px rgba(0,0,0,0.5);
 }
-.img_droite_txt_gauche img{border-radius: 10px;transform: transform linear 1s;}
+.img_droite_txt_gauche img{
+	box-shadow: 0 40px 60px rgba(150,0,0,0.7);
+	height: 25%;
+	width: 25%;
+	border-radius: 10px;
+}
 .img_droite_txt_gauche img:not(:hover) {
-	transform: transform linear 1s;
 	filter: saturate(0.2);
 	transform: scale(0.9,0.9);
 }
 
-
+.img_bas_txt_haut{
-
+	display: inline-flex;
-
+	flex-direction: column-reverse;
-
+	justify-content: space-around;
-.page{
+	align-items: center;
-	list-style-type: none;
+	margin-bottom: 10vh;
-	text-decoration: none;
-	color: black;
-
-}
-.page p{margin-right: 10vh;
-	transition: transform linear 0.2s;
 }
 
-.page p:hover{
+
-	color: gold;
+.img_bas_txt_haut p{
-	transform: scale(1.2,1.2);
+	background-color: rgba(250,250,250,0.2);
+	border-radius: 15px;
+	padding: 1%;
+	width: 80%;
+	box-shadow: 15px 10px rgba(0,0,0,0.5);
 }
 
+.img_bas_txt_haut p:hover{
+	box-shadow:  -15px -10px rgba(0,0,0,0.5);
+}
+.img_bas_txt_haut img{
+	box-shadow: 0 40px 60px rgba(150,0,0,0.7);
+	height: 35%;
+	width: 35%;
+	border-radius: 10px;
+}
+.img_bas_txt_haut img:not(:hover) {
+	filter: saturate(0.2);
+	transform: scale(0.9,0.9);
+}
+
+.vide{
+	margin-top: 10vh;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -175,20 +243,18 @@ footer{
 	align-items: center;
 	flex-direction: row-reverse;
 	justify-content: space-around;
-	background-color: #581845;
+	background-color: #00010c;
-
+	color: white;
-
 }
 
 
-
 footer #reseaux li{
 	list-style-type: none;
 	text-decoration: none;
 	display: inline-block;
 }
 footer #reseaux p{
-	color: black;
+	
 	padding-left: 15px;
 	font-size: 25px;
 }
@@ -211,7 +277,13 @@ footer #autres{
 	margin-top: 2%;
 }
 
-footer #autres p{
+footer #autres a{
-	color: black;
+	color:white ;
-	font-size: 30px;
+	list-style-type: none;
+	text-decoration: none;
+}
+
+
+footer #coordonne p{
+	margin-bottom: 1rem;
 }

img/icone/envelope.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path opacity="1" fill="#1E3050" d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>

img/icone/location.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path opacity="1" fill="#1E3050" d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>

index.html

@@ -32,8 +32,9 @@
 		</header>
 
 		<main>
+			<div id="rectangle"></div>
 			<video id="background-video" autoplay loop muted>
-				<source src="img/Untitledpoker.mp4" type="video/mp4">
+				<source src="img/fond-video.mp4" type="video/mp4">
 			</video>
 
 			<a href="#"><img id="btn_up" src="img/icone/arrow-up.svg" alt="icone de fleche"></a>
@@ -50,6 +51,17 @@
 
 			</div>
 			<div class="img_droite_txt_gauche">
+				
+				<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
+
+				</p>
+				<img id="cas" src="img/casion_background.jpeg">
+			</div>
+			<div class="vide"></div>
+			<div class="img_bas_txt_haut">
 				<img id="cas" src="img/casion_background.jpeg">
 				<p>
 					ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -77,11 +89,23 @@
 
 			<div id="autres">
 				<ul>
-					<li><a href="" target="_blank"><p>Mentions légales</p></a></li>
+					<li><a href="" target="_blank">Mentions légales</a></li>
-					<li><a href="" target="_blank"><p>Conditions générales d'utilisation</p></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>
 				</ul>
 			</div>
-			<a href="#"><img id="icone" src="img/icon.png" alt="icone du site"></a>
+
+			<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>