Onzeur/SAE_2.02
Onzeur/SAE_2.02
1
2
Fork 0
mirror of https://grond.iut-fbleau.fr/stiti/SAE_2.02 synced 2024-12-28 09:32:19 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fin des test, place au travail ! Correction des bugs + amélioration du menu principal

Browse Source
This commit is contained in:
stiti 2024-05-18 16:13:51 +02:00
parent aa82a9666d
commit f72c867d9a
2 changed files with 113 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CodeIgniter-3.1.13/application/views/accueil.php
View File

@ -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>

172
CodeIgniter-3.1.13/assets/css/accueil.css
View File

@ -1,66 +1,116 @@
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;
}
body { .hero h1 {
font-family: Arial, sans-serif; color: #9f23b5;
background-color: #f4f4f4; }
margin: 0;
padding: 0;
color: #640875;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
}
h1, h2, h3 {
color: #444;
}
.hero h1 { .hero {
color: #9f23b5; background-color: #333333;
} color: #fff;
padding: 50px 20px;
text-align: center;
}
.hero { .hero button {
background-color: #333333; padding: 15px 40px;
color: #fff; font-size: 1.2rem;
padding: 50px 20px; background-color: #640875;
text-align: center; color: #fff;
} border: none;
.features, .testimonials, .gallery, .contact { border-radius: 8px;
margin: 20px 0; cursor: pointer;
padding: 20px; transition: background-color 0.3s;
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 { .hero button:hover {
display: flex; background-color: #9f23b5;
justify-content: space-around; }
}
.gallery img {
width: 50%; .features, .testimonials, .gallery, .contact {
height: auto; margin: 20px 0;
border-radius: 8px; padding: 20px;
} background: #fff;
.contact form input, .contact form textarea { border-radius: 8px;
width: 100%; box-shadow: 0 0 10px rgba(0,0,0,0.1);
padding: 10px; }
margin: 10px 0; .features h2, .testimonials h2, .gallery h2, .contact h2 {
border: 1px solid #ccc; margin-top: 0;
border-radius: 4px; }
} .features .feature, .testimonials .testimonial {
.contact form button { margin: 10px 0;
padding: 10px 20px; }
background-color: #333;
color: #fff; .gallery {
border: none; margin-top: 40px; /* Ajoute de l'espace avant la galerie */
border-radius: 4px; text-align: center;
cursor: pointer; }
}
.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%; /* Ajustez ce pourcentage pour que les images tiennent sur une ligne sur les grands écrans */
height: auto;
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 {
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;
}