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

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

master
jean-lou.saulnier 2 years ago
parent
8d93df35f1 2dbf6e25a8
commit
b2e99a664a
10 changed files with 89 additions and 273 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. 39
      Index.html
  2. BIN
      image/777blanc.png
  3. BIN
      image/Sans titre.png
  4. BIN
      image/bgcasino.jpg
  5. BIN
      image/imgnoir.jpg
  6. BIN
      image/imgnoirbj.png
  7. BIN
      image/imgnoirroulette.png
  8. BIN
      image/imgnoirslot.png
  9. 287
      styles.css
  10. 28
      tests.html

39
Index.html
View File

@ -20,13 +20,13 @@
<div class="cards-fan-container"> <!--<div class="cards-fan-container">
<img src="image/Ace.png" class="card-fan" id="ace-fan"/> <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/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" class="card-fan" id="ten-fan"/> <img src="image/Ten.png" class="card-fan" id="ten-fan"/>
</div> </div> -->
<div class="loader"> <div class="loader">
@ -37,41 +37,14 @@
<span class="lettre">7</span> <span class="lettre">7</span>
</div> </div>
<!-- <nav>
<ul>
<li> <img class="img1" src="image/imgnoirslot.png" onmouseover="this.src='image/bgcasino.jpg';" onmouseout="this.src='image/imgnoirslot.png'" alt="" />
<img class="img2" src="image/imgnoirbj.png" onmouseover="this.src='image/bgcasino.jpg';" onmouseout="this.src='image/imgnoirbj.png'" alt="" />
<img class="img3" src="image/imgnoirroulette.png" onmouseover="this.src='image/bgcasino.jpg';" onmouseout="this.src='image/imgnoirroulette.png'" alt="" />
<img class="img4" src="image/imgnoir.jpg" onmouseover="this.src='image/bgcasino.jpg';" onmouseout="this.src='image/imgnoir.jpg'" alt="" />
<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> <div class="bg"></div>
<script src="loading.js"></script> <script src="loading.js"></script>

BIN
image/777blanc.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
image/Sans titre.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

BIN
image/bgcasino.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 197 KiB

BIN
image/imgnoir.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
image/imgnoirbj.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 KiB

BIN
image/imgnoirroulette.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 88 KiB

BIN
image/imgnoirslot.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

287
styles.css
View File

@ -1,14 +1,90 @@
.logo { .logo {
position:absolute; position:absolute;
right: 41% right: 43%
} }
.img1 {
position: absolute;
z-index:1; bottom:52%; left:16%;
border-radius: 10px;
height:100px;
width: 200px;
transition: opacity linear .5s;
}
.img2 {
position: absolute;
z-index:1; bottom:52%; left:33%;
border-radius: 10px;
height:100px;
width: 200px;
transition: opacity linear .5s;
}
.img3 {
position: absolute;
z-index:1; bottom:52%; left:51%;
border-radius: 10px;
height:100px;
width: 200px;
transition: opacity linear .5s;
}
.img4 {
position: absolute;
z-index:1; bottom:52%; left:69%;
border-radius: 10px;
height:100px;
width: 200px;
transition: opacity linear .5s;
}
.img1 {
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.img1:hover {
border : 2px solid rgba(147,112,219,0.5);
box-shadow:8px 8px 10px 0 rgba(147,112,219,0.5);
}
.img2 {
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.img2:hover {
border : 2px solid rgba(147,112,219,0.5);
box-shadow:8px 8px 10px 0 rgba(147,112,219,0.5);
}
.img3 {
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.img3:hover {
border : 2px solid rgba(147,112,219,0.5);
box-shadow:8px 8px 10px 0 rgba(147,112,219,0.5);
}
.loader { .loader {
position: absolute; position: absolute;
@ -125,7 +201,7 @@
.card-fan { .card-fan {
position: absolute; position: absolute;
width: 15%; width: 15%;
/*transform-origin: bottom;*/ transform-origin: bottom;
transition: .3s linear; transition: .3s linear;
} }
@ -182,222 +258,15 @@
} }
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;
}

28
tests.html
View File

@ -1,27 +1 @@
<style>.card-fan { <img src="image/imgnoir.jpg" onmouseover="this.src='image/bgcasino.jpg';" onmouseout="this.src='image/imgnoir.jpg'" alt="" />
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