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

248
src/css/style.css
Unescape View File

@ -29,182 +29,86 @@ body{
} }
/* versions mobiles, tablette à faire*/ /* versions mobiles, tablette à faire*/
/*Version mobile V1*/ .logo img{
@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; 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{
position: absolute;
width: 12vw;
left: 44vw;
top: 13%;
z-index: 11;
}
.mounts img {
position: absolute;
height: 100%;
width: 100%;
pointer-events: none;
margin-left: -10px;
}
#contourbuttonvalider{
position: absolute;
border-radius: 45px;
left: 9.2vw;
top: 5.5vw;
height: 4vw;
width: 12vw; width: 12vw;
background-color: var(--lightsedonca); left: 44vw;
z-index: 15; top: 13%;
} z-index: 11;
}
.bouttonvalider{ .mounts img {
position: absolute; position: absolute;
height: 3.4vw; height: 100%;
width: 11.4vw; width: 100%;
top: 0.3vw; pointer-events: none;
left: 0.3vw; margin-left: -10px;
border-radius: 30px; }
background-color: #B130DE; #contourbuttonvalider{
} position: absolute;
border-radius: 45px;
#textjouer{ left: 9.2vw;
font-family: Montserrat, impact, Arial Black; top: 5.5vw;
position: absolute; height: 4vw;
font-size: 2.5vw; width: 12vw;
margin-top: 0.2vw; background-color: var(--lightsedonca);
margin-left: 2.7vw; z-index: 15;
color: var(--lightsedonca); }
}
.bouttonvalider{
#ContainBottom {
position: absolute;
margin-left: 25vw;
height: 12vw;
width: auto;
bottom: 0;
z-index: 20;
}
#clic{
position: absolute; position: absolute;
left: 55vw; height: 3.4vw;
top : 7vw; width: 11.4vw;
height: auto; top: 0.3vw;
width: 15vw; left: 0.3vw;
} border-radius: 30px;
background-color: #B130DE;
#card-conteneur{ }
z-index: 20; #textjouer{
font-family: Montserrat, impact, Arial Black;
position: absolute; position: absolute;
left: 0vw; font-size: 2.5vw;
} margin-top: 0.2vw;
margin-left: 2.7vw;
.flex-container { color: var(--lightsedonca);
padding: 0; }
margin: 0; #ContainBottom {
list-style: none; position: absolute;
margin-left: 25vw;
height: 12vw;
width: auto;
bottom: 0;
z-index: 20;
}
#clic{
position: absolute;
left: 55vw;
top : 7vw;
height: auto;
width: 15vw;
}
#card-conteneur{
z-index: 20;
position: absolute;
left: 0vw;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box; display: -webkit-box;
display: -moz-box; display: -moz-box;
display: -ms-flexbox; display: -ms-flexbox;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-flex-flow: row wrap; -webkit-flex-flow: row wrap;
justify-content: space-around; justify-content: space-around;
margin-top: -7vw; margin-top: -7vw;
}
} }
#pageGame{ #pageGame{
visibility: hidden; visibility: hidden;
} }
@ -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