Merge branch 'master' of https://paul-constans.ac-clermont.fr/gitea/saulnier.j/MSJS_clochard_saulnier into master

3 years ago · 3abb99e134
11 changed files with 365 additions and 18 deletions
--- a/Index.html
+++ b/Index.html
@ -6,17 +6,27 @@

 		<meta charset="utf-8">

-		<title></title>
+		<title>casino 77</title>

 		<link rel="stylesheet" type="text/css" href="styles.css">
 	</head>
 	<body>
 	
-<<<<<<< HEAD
-	<img src="logo.jpeg">
-=======
+
+
 	<img class=logo src="image/logo.png">
->>>>>>> 3383835b05463931dd62f7429baf70f24d275ae5
+
+
+
+	
+
+    <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> 
 	
 	<div class="loader">

@ -27,11 +37,43 @@
        <span class="lettre">7</span>
 	</div>
 	
-<<<<<<< HEAD
-=======
+	<!-- <nav>
+
+    <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>

->>>>>>> 3383835b05463931dd62f7429baf70f24d275ae5
  <script src="loading.js"></script>
  <script src="main.js"></script>

--- a/police/casino.TTF
+++ b/police/casino.TTF
--- a/image/Ace.png
+++ b/image/Ace.png
--- a/image/Jack.png
+++ b/image/Jack.png
--- a/image/King.png
+++ b/image/King.png
--- a/image/Queen.png
+++ b/image/Queen.png
--- a/image/Ten.png
+++ b/image/Ten.png
--- a/image/Thumbs.db
+++ b/image/Thumbs.db
--- 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
+https://codepen.io/imetaxas/pen/YGQXwK
+https://alvarotrigo.com/blog/animated-backgrounds-css/
+https://codepen.io/1isten/pen/wvMdNPp
--- a/styles.css
+++ b/styles.css
@ -7,12 +7,14 @@



+
+
 .loader {

    position: absolute;

    width: 100%;
-
+	
    height: 100%;

    background: white;
@ -36,6 +38,8 @@
    margin-bottom: 150px;

    animation: flash 1.2s linear infinite;
+	
+	font-family: casino;



@ -96,15 +100,33 @@

    opacity: 0;

-    transition: opacity 0.4s ease-out;
+    transition: 0.4s ease-out;
+	
+	display: ;
+
+}
+
+
+
+@font-face {
+
+  font-family: "casino";
+
+  src: url("casino.TTF");
+
+  font-style: normal;
+
+  font-weight: normal;
+
+  

 }

 .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{
@ -120,8 +142,262 @@
  transform: rotate(-10deg)
 }

-@font-face {
- font-family: "casino";
- src: url("/police/casino.TTF") format("woff2"),
-       
+.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;
+
+}          
+
+
--- a/tests.html
+++ b/tests.html
@ -0,0 +1,27 @@
+<style>.card-fan {
+  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> 
+