css playlist bientot fini
This commit is contained in:
parent
ecc49c8c7e
commit
43921099be
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>SpotiFly</title>
|
||||
<link rel="stylesheet" href="<?= base_url('assets/style.css') ?>">
|
||||
<link rel="stylesheet" href="<?= base_url('assets/CSS/style.css') ?>">
|
||||
<link rel="stylesheet" href="<?= base_url('assets/CSS/connexion.css') ?>">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
</div>
|
||||
</header>
|
||||
</main>
|
||||
<script src="../assets/JS/bouton.js"></script>
|
||||
<script src=<?= base_url('/assets/JS/bouton.js') ?>></script>
|
||||
<button id="scrollTopBtn" onclick="scrollToTop()">
|
||||
<span>↑</span>
|
||||
</button>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
|
||||
<div class="content">
|
||||
<div id="Page">
|
||||
<div class="content">
|
||||
<section id="about" class="box">
|
||||
<div class="box-content">
|
||||
<img src=<?= base_url('assets/img/musique.png') ?> alt="Description de l'image 2">
|
||||
<img src=<?= base_url('assets/img/alo.png') ?> alt="Description de l'image 2">
|
||||
<div class="text-content">
|
||||
<h2>Créer une nouvelle Playlist</h2>
|
||||
<form action="<?= base_url('index.php/playlist/createPlaylistController') ?>" method="post" class="playlist-form">
|
||||
@ -14,7 +14,7 @@
|
||||
</section>
|
||||
<section id="product" class="box">
|
||||
<div class="box-img">
|
||||
<img src=<?= base_url('assets/img/musique1.png') ?> alt="Description de l'image 2">
|
||||
<img src=<?= base_url('assets/img/musique2.png') ?> alt="Description de l'image 2">
|
||||
<div class="text-content">
|
||||
<h2>Créer une playlist aléatoire</h2>
|
||||
<form action="<?= base_url('index.php/playlist/createPlaylistController') ?>" method="post" class="playlist-form">
|
||||
@ -25,6 +25,8 @@
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="header"> </div>
|
||||
</form>
|
||||
@ -43,4 +45,4 @@ foreach($playlists as $playlist){
|
||||
echo "</div>";
|
||||
}
|
||||
echo "</div>";
|
||||
?>
|
||||
?>
|
||||
|
||||
@ -2,13 +2,13 @@
|
||||
<section class="list">
|
||||
<?php
|
||||
$i = 0;
|
||||
foreach($songs as $song){
|
||||
/*foreach($songs as $song){
|
||||
echo "<div><article>";
|
||||
echo "<header class='short-text'>";
|
||||
$i = $i+1;
|
||||
$minutes = floor($song->duration/60);
|
||||
$secondes = $song->duration %60;
|
||||
echo "{$i} - {$song->name} : {$minutes} min {$secondes} sec";
|
||||
echo "{$i} - {$song->name} : {$minutes} min {$secondes} sec"; */
|
||||
foreach($songPlaylists as $songPlaylist){
|
||||
echo "<div><article>";
|
||||
echo "<header class='short-text'>";
|
||||
@ -20,7 +20,7 @@ foreach($songPlaylists as $songPlaylist){
|
||||
echo "</header>";
|
||||
echo "</article></div>";
|
||||
}
|
||||
}
|
||||
|
||||
?>
|
||||
</section>
|
||||
|
||||
|
||||
@ -23,22 +23,21 @@ button.upload-image-button {
|
||||
}
|
||||
|
||||
button.upload-image-button:hover {
|
||||
background-color: green;
|
||||
background-color: rgb(0, 255, 0);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Style pour le conteneur de la playlist */
|
||||
div.playlist-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
padding-top: 20px; /* Ajouter un padding pour éviter que le contenu ne soit caché par la barre de navigation */
|
||||
justify-content: center; /* Centrer les éléments */
|
||||
}
|
||||
|
||||
/* Style pour chaque élément de la playlist */
|
||||
div.playlist-item {
|
||||
width: 200px;
|
||||
margin: 10px;
|
||||
padding: 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
@ -47,20 +46,10 @@ div.playlist-item {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
|
||||
div.playlist-item img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Style pour le nom de la playlist */
|
||||
div.playlist-item h3 {
|
||||
margin-top: 10px;
|
||||
font-size: 20px;
|
||||
color: #333; /* changer la couleur du texte */
|
||||
}
|
||||
|
||||
div.playlist-item:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ body {
|
||||
.content {
|
||||
max-width: 1200px;
|
||||
margin: 80px auto 0;
|
||||
padding: 20px;
|
||||
padding: 0px
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
@ -81,13 +81,9 @@ body {
|
||||
#Page {
|
||||
text-align: center;
|
||||
padding: 50px 0;
|
||||
background: url(img/fond.jpeg);
|
||||
background: url(../img/fond.jpeg);
|
||||
}
|
||||
|
||||
#Page img {
|
||||
width: 1000px;
|
||||
height: 500PX;
|
||||
}
|
||||
|
||||
.text-page {
|
||||
border-top: 2px solid #1ed860;
|
||||
@ -124,6 +120,8 @@ body {
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
.box .box-img img{
|
||||
width: 250px;
|
||||
BIN
ci/assets/img/alo.png
Normal file
BIN
ci/assets/img/alo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
ci/assets/img/musique2.png
Normal file
BIN
ci/assets/img/musique2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Loading…
Reference in New Issue
Block a user