diff --git a/Index.html b/Index.html index 9b25164..37f9aed 100644 --- a/Index.html +++ b/Index.html @@ -38,43 +38,13 @@ -
-
diff --git a/image/777blanc.png b/image/777blanc.png new file mode 100644 index 0000000..b652513 Binary files /dev/null and b/image/777blanc.png differ diff --git a/image/Sans titre.png b/image/Sans titre.png new file mode 100644 index 0000000..74eee59 Binary files /dev/null and b/image/Sans titre.png differ diff --git a/image/bgcasino.jpg b/image/bgcasino.jpg new file mode 100644 index 0000000..7450496 Binary files /dev/null and b/image/bgcasino.jpg differ diff --git a/image/imgnoir.jpg b/image/imgnoir.jpg index 3c9a490..e7fd8f7 100644 Binary files a/image/imgnoir.jpg and b/image/imgnoir.jpg differ diff --git a/image/imgnoirbj.png b/image/imgnoirbj.png new file mode 100644 index 0000000..27108ae Binary files /dev/null and b/image/imgnoirbj.png differ diff --git a/image/imgnoirroulette.png b/image/imgnoirroulette.png new file mode 100644 index 0000000..6b3b06e Binary files /dev/null and b/image/imgnoirroulette.png differ diff --git a/image/imgnoirslot.png b/image/imgnoirslot.png new file mode 100644 index 0000000..65fdc7b Binary files /dev/null and b/image/imgnoirslot.png differ diff --git a/styles.css b/styles.css index ad18f58..499d27d 100644 --- a/styles.css +++ b/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; -} diff --git a/tests.html b/tests.html index a9aef31..71bd770 100644 --- a/tests.html +++ b/tests.html @@ -1,27 +1 @@ - -
- - - - - -
- +