SAE_2.02/CodeIgniter-3.1.13/assets/css/accueil.css

128 lines
2.4 KiB
CSS
Raw Normal View History

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
color: #640875;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
}
h1, h2, h3 {
color: #444;
}
2024-05-18 15:17:40 +02:00
.hero h1 {
color: #9f23b5;
}
2024-05-18 15:34:32 +02:00
.hero {
2024-05-20 20:46:09 +02:00
background-color: #2d1c30;
color: #fff;
padding: 50px 20px;
text-align: center;
}
2024-05-18 15:34:32 +02:00
.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;
}
2024-05-18 15:34:32 +02:00
.hero button:hover {
background-color: #9f23b5;
}
2024-05-18 15:34:32 +02:00
.features, .testimonials, .gallery, .contact {
margin: 20px 0;
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.features h2, .testimonials h2, .gallery h2, .contact h2 {
margin-top: 0;
}
.features .feature, .testimonials .testimonial {
margin: 10px 0;
}
.gallery {
margin-top: 40px; /* Ajoute de l'espace avant la galerie */
text-align: center;
}
2024-05-19 15:27:13 +02:00
.feature img {
max-width: 600px;
height: auto;
display: block;
margin: 0 auto;
}
.gallery h2 {
text-align: center;
margin-bottom: 20px; /* Espace sous le titre */
}
.gallery {
display: flex;
justify-content: space-around;
align-items: center; /* Aligne les images au centre verticalement */
}
.gallery img {
2024-05-19 15:27:13 +02:00
width: 30%;
height: auto;
border-radius: 8px;
2024-05-19 15:27:13 +02:00
margin: 10px;
}
/* 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 */
}
2024-05-19 15:27:13 +02:00
.feature img {
width: 100%; /* Les images prennent 100% 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 {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
.contact form button {
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}