ENSEEIHT/projet-application-web
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: ca avance doucement sur le front

Browse source
This commit is contained in:
gdamms 2022-04-23 13:37:12 +02:00
parent 641a879fac
commit b26762a4e4
3 changed files with 158 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

144
src/front/index.html
View file

@ -81,23 +81,133 @@
</div> </div>
</div> </div>
<table> <div class="pixel-container">
<tr> <table>
<td class="pixel"></td> <tr>
<td class="pixel"></td> <td class="pixel"></td>
<td class="pixel"></td> <td class="pixel"></td>
</tr> <td class="pixel"></td>
<tr> <td class="pixel"></td>
<td class="pixel"></td> <td class="pixel"></td>
<td class="pixel"></td> <td class="pixel"></td>
<td class="pixel"></td> <td class="pixel"></td>
</tr> <td class="pixel"></td>
<tr> <td class="pixel"></td>
<td class="pixel"></td> <td class="pixel"></td>
<td class="pixel"></td> </tr>
<td class="pixel"></td> <tr>
</tr> <td class="pixel"></td>
</table> <td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
</tr>
<tr>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
</tr>
<tr>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
</tr>
<tr>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
</tr>
<tr>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
</tr>
<tr>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
</tr>
<tr>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
</tr>
<tr>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
</tr>
<tr>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
</tr>
</table>
<div class="pixel-description">
Description
</div>
</div>
</body> </body>
</html> </html>

8
src/front/login-signup.css
View file

@ -10,14 +10,17 @@
position: absolute; position: absolute;
left: calc(50% - var(--width) / 2); left: calc(50% - var(--width) / 2);
top: 30%; top: 30%;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 5px #000;
} }
#show-login:checked~.login-container { #show-login:checked~.login-container {
display: flex; display: block;
} }
#show-signup:checked~.signup-container { #show-signup:checked~.signup-container {
display: flex; display: block;
} }
.login-container .close-btn, .login-container .close-btn,
@ -89,6 +92,7 @@ form .btn {
width: 100%; width: 100%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border-radius: 45px;
} }
form .btn button { form .btn button {

29
src/front/pixels.css
View file

@ -1,6 +1,27 @@
.pixel .pixel-container {
{ display: flex;
justify-content: space-evenly;
align-items: center;
width: 100%;
height: 1000px;
}
.pixel {
background: #0f0; background: #0f0;
width: 10px; width: 80px;
height: 10px; height: 80px;
}
.pixel:hover {
box-shadow: 0px 0px 0px 3px #333;
z-index: 5;
}
table {
border-spacing: 0;
}
.pixel-description {
position: absolute;
} }