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;
+  width: 15%;
-  transform-origin: bottom;
+  /*transform-origin: bottom;*/
-  transition: all .3s linear;
+  transition: .3s linear;
 }
 .cards-fan-container:hover #ten-fan{
@ -120,8 +142,262 @@
  transform: rotate(-10deg)
 }
-@font-face {
+.bg {
- font-family: "casino";
+  width: 100%;
- src: url("/police/casino.TTF") format("woff2"),
+  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>