pascal.lafourcade
/
swish
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

src/

Browse Source
Golfier
frperalde 5 years ago
parent dace1fe8d7
commit 7a1727cb6b
2 changed files with 307 additions and 174 deletions
Show Stats Download Patch File Download Diff File

108
src/css/style.css
Unescape View File

@ -29,95 +29,6 @@ body{
} }
/* versions mobiles, tablette à faire*/ /* versions mobiles, tablette à faire*/
/*Version mobile V1*/
@media only screen and (min-width: 500px) {
.logo img{
position: absolute;
width: 50vw;
left: 25vw;
top: 13%;
z-index: 11;
}
.mounts img {
object-fit: cover;
position: absolute;
height: 100%;
width: 100%;
pointer-events: none;
margin-left: -10px;
}
#contourbuttonvalider{
position: absolute;
border-radius: 45px;
left: -12vw;
top: 6vw;
height: 13vw;
width: 55vw;
background-color: var(--lightsedonca);
z-index: 15;
}
.bouttonvalider{
position: absolute;
height: 11vw;
width: 53vw;
top: 1vw;
left: 1vw;
border-radius: 40px;
background-color: #B130DE;
}
#textjouer{
font-family: Montserrat, impact, Arial Black;
position: absolute;
font-size: 10vw;
margin-top: -0.7vw;
margin-left: 13.5vw;
color: var(--lightsedonca);
}
#ContainBottom {
position: absolute;
margin-left: 18vw;
height: 25vw;
width: auto;
bottom: 0;
z-index: 20;
}
#clic{
visibility: hidden;
}
#card-conteneur{
z-index: 20;
position: absolute;
left: 0vw;
height: 100%;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
height: 100%;
-webkit-flex-flow: row wrap;
justify-content: space-around;
margin-top: -3vw;
}
}
/*Grande version*/
@media only screen and (min-width: 1280px) {
.logo img{ .logo img{
position: absolute; position: absolute;
width: 12vw; width: 12vw;
@ -125,7 +36,6 @@ body{
top: 13%; top: 13%;
z-index: 11; z-index: 11;
} }
.mounts img { .mounts img {
position: absolute; position: absolute;
height: 100%; height: 100%;
@ -133,7 +43,6 @@ body{
pointer-events: none; pointer-events: none;
margin-left: -10px; margin-left: -10px;
} }
#contourbuttonvalider{ #contourbuttonvalider{
position: absolute; position: absolute;
border-radius: 45px; border-radius: 45px;
@ -154,7 +63,6 @@ body{
border-radius: 30px; border-radius: 30px;
background-color: #B130DE; background-color: #B130DE;
} }
#textjouer{ #textjouer{
font-family: Montserrat, impact, Arial Black; font-family: Montserrat, impact, Arial Black;
position: absolute; position: absolute;
@ -163,7 +71,6 @@ body{
margin-left: 2.7vw; margin-left: 2.7vw;
color: var(--lightsedonca); color: var(--lightsedonca);
} }
#ContainBottom { #ContainBottom {
position: absolute; position: absolute;
margin-left: 25vw; margin-left: 25vw;
@ -172,7 +79,6 @@ body{
bottom: 0; bottom: 0;
z-index: 20; z-index: 20;
} }
#clic{ #clic{
position: absolute; position: absolute;
left: 55vw; left: 55vw;
@ -180,13 +86,11 @@ body{
height: auto; height: auto;
width: 15vw; width: 15vw;
} }
#card-conteneur{ #card-conteneur{
z-index: 20; z-index: 20;
position: absolute; position: absolute;
left: 0vw; left: 0vw;
} }
.flex-container { .flex-container {
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -202,7 +106,7 @@ body{
justify-content: space-around; justify-content: space-around;
margin-top: -7vw; margin-top: -7vw;
} }
}
#pageGame{ #pageGame{
@ -229,9 +133,9 @@ body{
.flex-item { .flex-item {
background: var(--lightsedonca); background: var(--lightsedonca);
width: auto; width: 10vw;
height: auto; height: 15vw;
border-radius: 25px; border-radius: 2vw;
padding-right: 0.4vw; padding-right: 0.4vw;
padding-left: 0.4vw; padding-left: 0.4vw;
padding-bottom: 0.8vw; padding-bottom: 0.8vw;
@ -472,6 +376,10 @@ body{
.containcards{ .containcards{
height: 87vh; height: 87vh;
overflow-x:auto; overflow-x:auto;
display: flex;
flex-wrap: wrap;
padding-left: 3vw;
padding-top: 2.5vw;
} }

229
src/index.html
Unescape View File

@ -117,7 +117,6 @@
</div> </div>
<div class="mounts"> <div class="mounts">
<img src="imgs/clicjour.png" id="clic">
<img src="imgs/lightcloud.png" id="cloud"> <img src="imgs/lightcloud.png" id="cloud">
<img src="imgs/mount1.png" id="mount1"> <img src="imgs/mount1.png" id="mount1">
<img src="imgs/mount2.png" id="mount2"> <img src="imgs/mount2.png" id="mount2">
@ -141,6 +140,232 @@
<div class="containcards"> <div class="containcards">
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<div class="flex-item">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
<!--
<table> <table>
<tr> <tr>
<td> <td>
@ -402,7 +627,7 @@
</div> </div>
</td> </td>
</tr> </tr>
</table> </table>-->
</div> </div>

Write Preview
Loading…
Cancel
Save