feat: ca avance doucement sur le front
This commit is contained in:
parent
641a879fac
commit
b26762a4e4
|
@ -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>
|
|
@ -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 {
|
||||
|
|
|
@ -1,6 +1,27 @@
|
|||
.pixel
|
||||
{
|
||||
.pixel-container {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 1000px;
|
||||
}
|
||||
|
||||
|
||||
.pixel {
|
||||
background: #0f0;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.pixel:hover {
|
||||
box-shadow: 0px 0px 0px 3px #333;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.pixel-description {
|
||||
position: absolute;
|
||||
}
|
Loading…
Reference in a new issue