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>
<table>
<tr>
<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>
</tr>
<tr>
<td class="pixel"></td>
<td class="pixel"></td>
<td class="pixel"></td>
</tr>
</table>
<div class="pixel-container">
<table>
<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>
<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>
</html>

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

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

31
src/front/pixels.css
View file

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