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

Téléverser les fichiers vers "css/alerte"

Browse source
This commit is contained in:
Justine Beau 2024-12-24 15:12:34 +01:00
parent 02c0d28c54
commit 4f4d81cfd5
5 changed files with 192 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
css/alerte/a5.css Normal file
View file

@ -0,0 +1,37 @@
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.modal-content {
margin: 15% auto;
padding: 10px;
width: 40vw;
text-align: left; /* Alignement à gauche */
background-color: white;
border: 2px solid #4caf50; /* Vert plat */
box-shadow: none;
}
.close-btn {
color: black;
font-size: 18px;
}
.modal.button {
background-color: #4caf50;
color: white;
border-radius: 3px;
border: none;
}
.close-btn:hover,
.close-btn:focus {
color: red; /* Rouge pour attirer l’attention */
}

41
css/alerte/a6.css Normal file
View file

@ -0,0 +1,41 @@
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.modal-content {
margin: 15% auto;
padding: 10px;
width: 40vw;
background-color: white;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Ombres douces */
border-radius: 4px;
}
.close-btn {
color: black;
font-size: 18px;
}
.modal.button {
background-color: #4caf50;
color: white;
border-radius: 3px;
border: none;
transition: background-color 0.3s ease;
}
.modal.button:hover {
background-color: #45a049; /* Vert plus sombre au survol */
}
.close-btn:hover,
.close-btn:focus {
color: red; /* Rouge pour attirer l’attention */
}

41
css/alerte/a7.css Normal file
View file

@ -0,0 +1,41 @@
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8); /* Fond plus sombre */
}
.modal-content {
margin: 15% auto;
padding: 10px;
width: 40vw;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Ombres douces */
background-color: #1e1e1e; /* Fond sombre */
color: #ffffff;
border: 1px solid #444444;
border-radius: 4px;
}
.close-btn {
color: black;
font-size: 18px;
}
.modal.button {
border-radius: 3px;
border: none;
background-color: #bb86fc; /* Couleur violet pastel */
color: #000;
}
.close-btn:hover,
.close-btn:focus {
color: red; /* Rouge pour attirer l’attention */
}

40
css/alerte/a8.css Normal file
View file

@ -0,0 +1,40 @@
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8); /* Fond plus sombre */
}
.modal-content {
margin: 15% auto;
padding: 10px;
width: 40vw;
background-color: #ffdb00; /* Jaune vif */
color: #000;
border: 4px solid #000; /* Bordures audacieuses */
font-family: "Arial Black", sans-serif;
}
.close-btn {
color: black;
font-size: 18px;
}
.modal.button {
border-radius: 3px;
border: none;
background-color: #e63946; /* Rouge frappant */
font-size: 18px;
}
.close-btn:hover,
.close-btn:focus {
color: red; /* Rouge pour attirer l’attention */
}

33
css/alerte/a9.css Normal file
View file

@ -0,0 +1,33 @@
.modal {
background: linear-gradient(135deg, #1f1c2c, #928dab); /* Dégradé futuriste */
backdrop-filter: blur(10px); /* Flou pour un effet sophistiqué */
}
.modal-content {
background: radial-gradient(circle, #222, #000);
color: #fff;
border-radius: 20px;
border: none;
width: 40vw;
box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.5); /* Ombres intenses */
transform: perspective(1000px) rotateX(5deg); /* Effet 3D */
}
.modal.button {
background: linear-gradient(45deg, #ff6f91, #ffc371); /* Dégradé dynamique */
font-size: 20px;
border-radius: 50px;
animation: pulse 1.5s infinite; /* Animation d’impulsion */
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}