From 177973cec79ef098ce4147267e9b0ff9e1f440e5 Mon Sep 17 00:00:00 2001 From: "leandre.clochard" Date: Thu, 31 Mar 2022 09:50:37 +0200 Subject: [PATCH] update html css --- Index.html | 54 ++++++++--- lien.txt | 4 +- styles.css | 271 +++++++++++++++++++++++++++++++++++++++++++++++++++-- tests.html | 27 ++++++ 4 files changed, 338 insertions(+), 18 deletions(-) create mode 100644 tests.html 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 + + +
@@ -24,9 +25,8 @@ - -
+ +
@@ -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 @@ + +
+ + + + + +
+