SAE_2.02/CodeIgniter-3.1.13/assets/css/accueil.css
2024-05-26 15:58:11 +02:00

202 lines
3.5 KiB
CSS

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
color: #640875;
}
.container {
width: 95%;
margin: 0 auto;
padding: 20px;
}
h1, h2, h3 {
color: #444;
}
.hero h1 {
color: #9f23b5;
}
.hero {
background-color: #2d1c30;
color: #fff;
padding: 50px 20px;
text-align: center;
}
.testimonials {
margin: 20px 0;
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.testimonials h2 {
margin-top: 0;
}
.testimonial {
margin: 10px 0;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
}
.testimonial p {
margin: 0;
font-style: italic;
}
.rating {
margin-top: 5px;
display: inline-block;
}
.rating input[type="radio"] {
display: none;
}
.rating .star {
color: #FFD700;
font-size: 20px;
}
.rating label {
font-size: 30px;
color: #ccc;
cursor: pointer;
}
.comment-form {
margin: 20px 0;
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.comment-form h2 {
margin-top: 0;
}
.comment-form textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
.comment-form button {
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.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 {
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;
}
.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 {
width: 30%;
height: auto;
border-radius: 8px;
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 */
}
.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;
}