diff --git a/Index.html b/Index.html
index d4879b7..ba7e2b9 100644
--- a/Index.html
+++ b/Index.html
@@ -6,17 +6,18 @@
-
+ casino 77
-<<<<<<< HEAD
- 
-=======
+
+
->>>>>>> 3383835b05463931dd62f7429baf70f24d275ae5
+
+
+
+ 
+
@@ -37,11 +37,43 @@
7
-<<<<<<< HEAD
-=======
+
+
->>>>>>> 3383835b05463931dd62f7429baf70f24d275ae5
diff --git a/lien.txt b/lien.txt
index 5c17178..842fff2 100644
--- a/lien.txt
+++ b/lien.txt
@@ -1,3 +1,5 @@
https://gpatuwo.github.io/css-casino/
https://fontmeme.com/polices/police-casino-queen/
-https://codepen.io/imetaxas/pen/YGQXwK
\ No newline at end of file
+https://codepen.io/imetaxas/pen/YGQXwK
+https://alvarotrigo.com/blog/animated-backgrounds-css/
+https://codepen.io/1isten/pen/wvMdNPp
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 56cd2c8..a6c6149 100644
--- a/styles.css
+++ b/styles.css
@@ -7,12 +7,14 @@
+
+
.loader {
position: absolute;
width: 100%;
-
+
height: 100%;
background: white;
@@ -98,7 +100,9 @@
opacity: 0;
- transition: opacity 0.4s ease-out;
+ transition: 0.4s ease-out;
+
+ display: ;
}
@@ -120,9 +124,9 @@
.card-fan {
position: absolute;
- width: 200px;
- transform-origin: bottom;
- transition: all .3s linear;
+ width: 15%;
+ /*transform-origin: bottom;*/
+ transition: .3s linear;
}
.cards-fan-container:hover #ten-fan{
@@ -138,7 +142,262 @@
transform: rotate(-10deg)
}
+.bg {
+ width: 100%;
+ opacity; 50%;
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-size: 300% 300%;
+ background-image: linear-gradient(
+ -45deg,
+ rgba(0,0,0,1) 0%,
+ rgba(137,46,255,1) 25%,
+ rgba(38,34,133,1) 51%,
+ rgba(23,21,79,1) 100%
+ );
+ animation: AnimateBG 20s ease infinite;
+}
+
+@keyframes AnimateBG {
+ 0%{background-position:0% 50%}
+ 50%{background-position:100% 50%}
+ 100%{background-position:0% 50%}
+}
+
+:root{
+
+ --hauteur-menu: 60px;
+
+}
+
+* {
+
+ margin: 0px;
+
+ padding: 0px;
+
+ font-family: Montserrat, sans-serif;
+
+}
+
+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
new file mode 100644
index 0000000..a9aef31
--- /dev/null
+++ b/tests.html
@@ -0,0 +1,27 @@
+
+
+
- 
+