update html

Index.html

@@ -38,43 +38,13 @@
 	</div>
 	
 	
-	<div class="img1"></div>
 	
-	<!-- <nav>
+	<img class="img1" src="image/imgnoirslot.png" onmouseover="this.src='image/bgcasino.jpg';" onmouseout="this.src='image/imgnoirslot.png'" alt="" />
+	<img class="img2" src="image/imgnoirbj.png" onmouseover="this.src='image/bgcasino.jpg';" onmouseout="this.src='image/imgnoirbj.png'" alt="" />
+	<img class="img3" src="image/imgnoirroulette.png" onmouseover="this.src='image/bgcasino.jpg';" onmouseout="this.src='image/imgnoirroulette.png'" alt="" />
+	<img class="img4" src="image/imgnoir.jpg" onmouseover="this.src='image/bgcasino.jpg';" onmouseout="this.src='image/imgnoir.jpg'" alt="" />
 	
-    <ul>
 
-    <li>
-
-      <a href="#">Accueil</a>
-
-    </li>
-
-    <li class="menu-deroulant">
-
-      <a href="#">Définition</a>
-
-      <ul class="sous-menu">
-
-		<li><a href=""></a></li>
-
-    </ul>
-
-    </li>
-
-    <li class="menu-deroulant">
-
-      <a href="#">Ŕ propos</a>
-
-      <ul class="sous-menu">
-
-        <li><a href="support.html">Support</a></li>
-
-      </ul>
-
-      </li>
-
-    </nav>-->
 	<div class="bg"></div>
 
   <script src="loading.js"></script>

styles.css

@@ -1,20 +1,90 @@
 .logo {
 	position:absolute;
-	right: 41%
+	right: 43%
+	
+	
 	
 }
 
 
-.img1 { background: url('/image/imgnoir.jpg') no-repeat 0px -50px; height:50px; width: 50px; display: block; }
-.img1:hover { background:url('cheminimage/image.jpg') no-repeat 0px 0px; }
 
 .img1 {
 	position: absolute;
-	z-index: 1;
+	z-index:1; bottom:52%; left:16%;
+	border-radius: 10px;
+	height:100px;
+	width: 200px;
+	transition: opacity linear .5s;
+
+
 }
 
+.img2 {
+	position: absolute;
+	z-index:1; bottom:52%; left:33%;
+	border-radius: 10px;
+	height:100px;
+	width: 200px;
+	transition: opacity linear .5s;
 
+}
+
+
+.img3 {
+	position: absolute;
+	z-index:1; bottom:52%; left:51%;
+	border-radius: 10px;
+	height:100px;
+	width: 200px;
+	transition: opacity linear .5s;
+
+}
 	
+.img4 {
+	position: absolute;
+	z-index:1; bottom:52%; left:69%;
+	border-radius: 10px;
+	height:100px;
+	width: 200px;
+	transition: opacity linear .5s;
+
+}
+
+.img1 {
+     -webkit-transition: all 0.2s;
+     -moz-transition: all 0.2s;
+     -ms-transition: all 0.2s;
+     -o-transition: all 0.2s;
+     transition: all 0.2s;
+}
+.img1:hover {
+     border : 2px solid rgba(147,112,219,0.5);
+     box-shadow:8px 8px 10px 0 rgba(147,112,219,0.5);
+}
+
+.img2 {
+     -webkit-transition: all 0.2s;
+     -moz-transition: all 0.2s;
+     -ms-transition: all 0.2s;
+     -o-transition: all 0.2s;
+     transition: all 0.2s;
+}
+.img2:hover {
+     border : 2px solid rgba(147,112,219,0.5);
+     box-shadow:8px 8px 10px 0 rgba(147,112,219,0.5);
+}
+
+.img3 {
+     -webkit-transition: all 0.2s;
+     -moz-transition: all 0.2s;
+     -ms-transition: all 0.2s;
+     -o-transition: all 0.2s;
+     transition: all 0.2s;
+}
+.img3:hover {
+     border : 2px solid rgba(147,112,219,0.5);
+     box-shadow:8px 8px 10px 0 rgba(147,112,219,0.5);
+}
 .loader {
 
     position: absolute;
@@ -188,222 +258,15 @@
 
 }
 
-nav {
-
-  width: 100%;
-
-  font-size: 18px;
-
-  position: sticky;
-
-  top: 0;
-
-}
-
-
-
-nav > ul {
-
-  display: flex;
-
-  text-align: center;
-
-  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.3);
-
-  height: var(--hauteur-menu);
-
-}
-
- 
-
-nav ul {
-
-  list-style-type: none;
-
-}
-
-
-
-nav > ul > li {
-
-  background-color: white;
-
-  position: relative;
-
-  height: 100%;
-
-  flex: 1;
-
-}
-
-
-
-
-
-nav > ul > li > a {
-
-  position: absolute;
-
-  top: 50%;
-
-  left: 50%;
-
-  transform: translate(-50%, -50%);
-
-}
-
-
-
-li a {
-
-  text-decoration: none;
-
-  color: black;
-
-}
-
-
-
-.menu-deroulant > a:after{
-
-  content: '❯';
-
-  font-size: 15px;
-
-  margin-left: 7px;
-
-  display: inline-block;
-
-}
-
-
-
-.sous-menu {
-
-  margin-top: var(--hauteur-menu);
-
-  width: 100%;
-
-  text-align: left;
-
-  background-color: white;
-
-  border-radius: 2px;
-
-  overflow: hidden;
-
-  max-height: 0;
-
-}
-
-
-
-.sous-menu > li > a {
-
-  height: 50px;
-
-  padding-left: 20px;
-
-  width: 100%;
-
-  align-items: center;
-
-  display: flex;
-
-}
-
-
-
-nav > ul > li:hover > a{
-
-  color: #F38B4A;
-
-}
-
-
-
-.sous-menu > li:hover {
-
-  background-color: #F38B4A;
-
-  
-
-  
-
-}
-
-
-
-.sous-menu > li:hover > a {
-
-  color: white;
-
-}
-
-
 
-@keyframes rotationFleche {
 
-  0% {
 
-    transform: rotate(0deg);
 
-  }
 
-  100%{
 
-    transform: rotate(90deg);
 
-  }
-
-
-
-}
-
-
-
-.menu-deroulant:hover > a:after{
-
-  animation: rotationFleche 0.2s linear forwards;
-
-}
 
 
 
-@keyframes apparitionSousMenu {
-
-  0% {
-
-    box-shadow: 0px 3px 3px 1px black;
-
-    border-top: 3px solid black;
-
-  }
-
-  30% {
-
-    box-shadow: 0px 3px 3px 1px #438B97;
-
-  }
-
-  100% {
-
-    max-height: 50em;
-
-    border-top: 3px solid #438B97;
-
-    box-shadow: 0px 3px 3px 1px #438B97;
-
-  }
-
-}
-
-
-
-.menu-deroulant:hover > .sous-menu {
-
-  animation: apparitionSousMenu 1s forwards;
-
-}          
 
 

tests.html

@@ -1,27 +1 @@
-<style>.card-fan {
+<img src="image/imgnoir.jpg" onmouseover="this.src='image/bgcasino.jpg';" onmouseout="this.src='image/imgnoir.jpg'" alt="" />
-  position: absolute;
-  width: 15%;
-  transform-origin: bottom;
-  transition: .3s linear;
-}
-
-.cards-fan-container:hover #ten-fan{
-  transform: rotate(20deg)
-}
-.cards-fan-container:hover #ace-fan{
-  transform: rotate(-20deg)
-}
-.cards-fan-container:hover #jack-fan{
-  transform: rotate(10deg)
-}
-.cards-fan-container:hover #king-fan{
-  transform: rotate(-10deg)
-}</style>
-<div class="cards-fan-container">
-                <img src="image/Ace.png" class="card-fan" id="ace-fan"/>
-                <img src="image/King.png" class="card-fan" id="king-fan"/>
-                <img src="image/Queen.png" class="card-fan" id="queen-fan"/>
-                <img src="image/Jack.png" class="card-fan" id="jack-fan"/>
-                <img src="image/Ten.png" class="card-fan" id="ten-fan"/>
-    </div> 
-