mirror of
https://grond.iut-fbleau.fr/stiti/SAE_2.02
synced 2024-12-28 09:32:19 +01:00
Fin des test, place au travail ! Correction des bugs + amélioration du menu principal
This commit is contained in:
parent
aa82a9666d
commit
f72c867d9a
@ -11,6 +11,7 @@
|
|||||||
<div class="hero">
|
<div class="hero">
|
||||||
<h1>Bienvenue sur Onzeur !</h1>
|
<h1>Bienvenue sur Onzeur !</h1>
|
||||||
<p>Le service de streaming musical numéro 1 en France.</p>
|
<p>Le service de streaming musical numéro 1 en France.</p>
|
||||||
|
<button type="button">Accéder à la musique</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -31,7 +32,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="testimonials">
|
<div class="testimonials">
|
||||||
<h2>Commentaires</h2>
|
<h2>Avis</h2>
|
||||||
<div class="testimonial">
|
<div class="testimonial">
|
||||||
<p>"Ce site est incroyable! Depuis que j'utilise Onzeur ma vie as changé ! Je suis devenu riche et célèbre ! Je recommande 🤩"</p>
|
<p>"Ce site est incroyable! Depuis que j'utilise Onzeur ma vie as changé ! Je suis devenu riche et célèbre ! Je recommande 🤩"</p>
|
||||||
<p>- Mike</p>
|
<p>- Mike</p>
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: Arial, sans-serif;
|
font-family: Arial, sans-serif;
|
||||||
background-color: #f4f4f4;
|
background-color: #f4f4f4;
|
||||||
@ -25,6 +24,23 @@
|
|||||||
padding: 50px 20px;
|
padding: 50px 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hero button {
|
||||||
|
padding: 15px 40px;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
background-color: #640875;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero button:hover {
|
||||||
|
background-color: #9f23b5;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.features, .testimonials, .gallery, .contact {
|
.features, .testimonials, .gallery, .contact {
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
@ -39,16 +55,50 @@
|
|||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gallery {
|
||||||
|
margin-top: 40px; /* Ajoute de l'espace avant la galerie */
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery h2 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 20px; /* Espace sous le titre */
|
||||||
|
}
|
||||||
|
|
||||||
.gallery {
|
.gallery {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
align-items: center; /* Aligne les images au centre verticalement */
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery img {
|
.gallery img {
|
||||||
width: 50%;
|
width: 30%; /* Ajustez ce pourcentage pour que les images tiennent sur une ligne sur les grands écrans */
|
||||||
height: auto;
|
height: auto;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
margin: 10px; /* Espace autour des images */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Media queries pour les petits écrans */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.gallery img {
|
||||||
|
width: 45%; /* Les images prennent 45% de la largeur sur les écrans moyens */
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery {
|
||||||
|
flex-wrap: wrap; /* Permet de passer les images à la ligne sur les petits écrans */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.gallery img {
|
||||||
|
width: 90%; /* Les images prennent 90% de la largeur sur les petits écrans */
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery {
|
||||||
|
flex-wrap: wrap; /* Permet de passer les images à la ligne sur les petits écrans */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.contact form input, .contact form textarea {
|
.contact form input, .contact form textarea {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
Loading…
Reference in New Issue
Block a user