saulnier.j
/
MSJS_clochard_saulnier
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

update html css

master
leandre.clochard 3 years ago
parent
6dbabe3a57
commit
177973cec7
4 changed files with 338 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 54
      Index.html
  2. 4
      lien.txt
  3. 271
      styles.css
  4. 27
      tests.html

54
Index.html
View File

@ -6,17 +6,18 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title></title> <title>casino 77</title>
<link rel="stylesheet" type="text/css" href="styles.css"> <link rel="stylesheet" type="text/css" href="styles.css">
</head> </head>
<body> <body>
<<<<<<< HEAD
<img src="logo.jpeg">
=======
<img class=logo src="image/logo.png"> <img class=logo src="image/logo.png">
>>>>>>> 3383835b05463931dd62f7429baf70f24d275ae5
<div class="cards-fan-container"> <div class="cards-fan-container">
@ -24,9 +25,8 @@
<img src="image/King.png" class="card-fan" id="king-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/Queen.png" class="card-fan" id="queen-fan"/>
<img src="image/Jack.png" class="card-fan" id="jack-fan"/> <img src="image/Jack.png" class="card-fan" id="jack-fan"/>
<img src="image/Ten.png" <img src="image/Ten.png" class="card-fan" id="ten-fan"/>
class="card-fan" id="ten-fan"/> </div>
</div>
<div class="loader"> <div class="loader">
@ -37,11 +37,43 @@
<span class="lettre">7</span> <span class="lettre">7</span>
</div> </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="loading.js"></script>
<script src="main.js"></script> <script src="main.js"></script>

4
lien.txt
View File

@ -1,3 +1,5 @@
https://gpatuwo.github.io/css-casino/ https://gpatuwo.github.io/css-casino/
https://fontmeme.com/polices/police-casino-queen/ 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

271
styles.css
View File

@ -7,12 +7,14 @@
.loader { .loader {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: white; background: white;
@ -98,7 +100,9 @@
opacity: 0; opacity: 0;
transition: opacity 0.4s ease-out; transition: 0.4s ease-out;
display: ;
} }
@ -120,9 +124,9 @@
.card-fan { .card-fan {
position: absolute; 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{ .cards-fan-container:hover #ten-fan{
@ -138,7 +142,262 @@
transform: rotate(-10deg) 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;
}

27
tests.html
View File

@ -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>
Write Preview
Loading…
Cancel
Save