beau/projet-clicodrome2.0
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

le bo css

Browse source
This commit is contained in:
thaaoblues 2024-12-31 16:45:36 +01:00
parent 879f10659c
commit d61a42d24b
2 changed files with 32 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
css/alerte/a9.css
View file

@ -1,23 +1,45 @@
.modal {
background: linear-gradient(135deg, #1f1c2c, #928dab); /* Dégradé futuriste */
backdrop-filter: blur(10px); /* Flou pour un effet sophistiqué */
background: linear-gradient(135deg, #1f1c2c, #928dab); /* Futuristic gradient */
backdrop-filter: blur(10px); /* Sophisticated blur effect */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
.modal-content {
background: radial-gradient(circle, #222, #000);
margin-top: 20vh;
background: radial-gradient(circle, #222, #000); /* Dark radial gradient */
color: #fff;
border-radius: 20px;
border: none;
box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.5); /* Intense shadows */
transform: perspective(1000px) rotateX(5deg); /* 3D tilt effect */
padding: 20px;
width: 40vw;
box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.5); /* Ombres intenses */
transform: perspective(1000px) rotateX(5deg); /* Effet 3D */
margin-left: auto;
margin-right: auto;
}
.modal.button {
background: linear-gradient(45deg, #ff6f91, #ffc371); /* Dégradé dynamique */
.bouton-ok {
background: linear-gradient(45deg, #ff6f91, #ffc371); /* Dynamic gradient */
font-size: 20px;
color: white;
border: none;
border-radius: 50px;
animation: pulse 1.5s infinite; /* Animation d’impulsion */
padding: 15px 30px;
cursor: pointer;
animation: pulse 1.5s infinite; /* Pulse animation */
transition: transform 0.3s ease;
}
.bouton-ok:hover {
transform: scale(1.2) ; /* Slightly larger on hover */
background-color: rebeccapurple;
}
@keyframes pulse {

4
index.html
View file

@ -62,7 +62,7 @@
<!-- Custom Alert Modal -->
<div id="alerte_jolie" class="modal">
<div id="alerte_jolie" class="modal div-centrer-contenu">
<div class="modal-content">
<span class="close-btn" onclick="fermerAlerte()">&times;</span>
<p id="message_alerte_jolie"></p>
@ -70,7 +70,7 @@
<div class="div-centrer-contenu">
<input type="text" id="input_alerte_jolie">
<button onclick="fermerAlerte()">OK</button>
<button class="bouton-ok" onclick="fermerAlerte()">OK</button>
</div>
</div>