Merge pull request 'Ajout d'un tampon sur la barre de progression' (#57) from fin-inscriptions into main
All checks were successful
/ build (push) Successful in 3m7s
All checks were successful
/ build (push) Successful in 3m7s
Reviewed-on: #57
This commit is contained in:
commit
09e2f9b30f
2 changed files with 42 additions and 8 deletions
36
css/home.css
36
css/home.css
|
|
@ -121,3 +121,39 @@ font-size : 1.5em;
|
|||
text-align : end;
|
||||
background: linear-gradient(90deg,rgba(136, 0, 255, 1) 0%, rgba(255, 78, 0, 1) 42%, rgba(255, 191, 62, 1) 100%);
|
||||
}
|
||||
|
||||
.stamp {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
right: 300px;
|
||||
padding: 10px 20px;
|
||||
background-color: rgba(255, 0, 0, 0.4);
|
||||
border: 2px dashed rgba(255, 0, 0, 0.8);
|
||||
border-radius: 2px;
|
||||
transform: rotate(10deg);
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
color: rgba(255, 0, 0, 0.9);
|
||||
text-transform: uppercase;
|
||||
z-index: 10;
|
||||
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.8);
|
||||
opacity: 1;
|
||||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
|
||||
background-image: linear-gradient(
|
||||
135deg,
|
||||
rgba(128, 0, 0, 0.1) 25%,
|
||||
rgba(128, 0, 0, 0.4) 50%,
|
||||
rgba(128, 0, 0, 0.1) 75%
|
||||
);
|
||||
background-size: 200% 200%;
|
||||
animation: scan 3s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes scan {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
|
|
|||
12
index.html
12
index.html
|
|
@ -99,25 +99,23 @@
|
|||
<section id="progress">
|
||||
<h3>
|
||||
<span>Où en est-on ?</span>
|
||||
<div class="stamp" id="myStamp">COMPLET</div>
|
||||
</h3>
|
||||
<!--<p>Il y a</p>
|
||||
<p>Il y a</p>
|
||||
|
||||
<div class="places">
|
||||
<div class="places" >
|
||||
<span class="bar">
|
||||
<span id="gauge-bar" style="width:0" class="progression lessthanhalf">
|
||||
<span id="gauge-text">?/200</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>places déjà réservées.</div>
|
||||
|
||||
<p>places déjà réservées.</p>-->
|
||||
<h3>200 places réservées = jauge complète !</h3>
|
||||
<p>
|
||||
Si des places se libèrent, tu peux faire une demande sur
|
||||
<a class="btn-nice" href="https://grist.interhacker.space/o/camp/forms/eJxwFtkGFCYUQBq4kPLWUg/4">la liste d'attente</a>
|
||||
</p>
|
||||
<h3>
|
||||
<a class="btn-nice" href="https://grist.interhacker.space/o/camp/forms/eJxwFtkGFCYUQBq4kPLWUg/4">liste d'attente</a>
|
||||
</h3>
|
||||
<br>
|
||||
<p>Et nous avons reçu</p>
|
||||
<div class="places">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue