diff options
| -rw-r--r-- | actualités.css | 14 | ||||
| -rw-r--r-- | actualités.html | 187 |
2 files changed, 187 insertions, 14 deletions
diff --git a/actualités.css b/actualités.css index a5f686c..3cc5ff5 100644 --- a/actualités.css +++ b/actualités.css @@ -1,10 +1,14 @@ +main { + padding-left: 5%; +} + .events { display: grid; - width: 60vw; - grid-auto-rows: 14vw; + width: 58vw; + grid-auto-rows: 12vw; grid-template-columns: repeat(auto-fit, 14vw); grid-gap: 1em; - background-color: #ccc; + background-color: #dbb; } .event { @@ -58,4 +62,8 @@ position: fixed; top: 10em; left: 60vw; + max-width: 30%; + max-height: 50vh; + overflow: auto; + background-color: #d88; } diff --git a/actualités.html b/actualités.html index 5524640..53d322a 100644 --- a/actualités.html +++ b/actualités.html @@ -38,66 +38,231 @@ <input type="radio" name="event"> <img src="https://static.wikia.nocookie.net/goldensun/images/0/05/KolimaOverworld.png"> <p class="summary">Quelque part<br>À un moment</p> - <div class="details">Des détails #0 !<br>Plein de détails.</div> + <div class="details"> + <h2>Programme</h2> + <ol> + <li>Un morceau</li> + </ol> + <h2>Salle</h2> + 42 Place de l'Endroit + 01337 La-Ville-du-Coin + <h2>Programmation</h2> + <p><a href="http://perdu.com">Site du programmateur</a></p> + <p>Réservable sous conditions.</p> + <p>1 place : 100¤</p> + </div> </div> <div class="event"> <input type="radio" name="event"> <img src="https://static.wikia.nocookie.net/goldensun/images/8/84/Bilibin.png"> <p class="summary">Quelque part<br>À un moment</p> - <div class="details">Des détails #1 !<br>Pleein de détails.</div> + <div class="details"> + <h2>Programme</h2> + <ol> + <li>Un morceau</li> + <li>Un morceau</li> + </ol> + <h2>Salle</h2> + 42 Place de l'Endroit + 01337 La-Ville-du-Coin + <h2>Programmation</h2> + <p><a href="http://perdu.com">Site du programmateur</a></p> + <p>Réservable sous conditions.</p> + <p>1 place : 101¤</p> + </div> </div> <div class="event"> <input type="radio" name="event"> <img src="https://static.wikia.nocookie.net/goldensun/images/7/70/VaultOverworld.png"> <p class="summary">Quelque part<br>À un moment</p> - <div class="details">Des détails #2 !<br>Pleeein de détails.</div> + <div class="details"> + <h2>Programme</h2> + <ol> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + </ol> + <h2>Salle</h2> + 42 Place de l'Endroit + 01337 La-Ville-du-Coin + <h2>Programmation</h2> + <p><a href="http://perdu.com">Site du programmateur</a></p> + <p>Réservable sous conditions.</p> + <p>1 place : 102¤</p> + </div> </div> <div class="event"> <input type="radio" name="event"> <img src="https://static.wikia.nocookie.net/goldensun/images/6/65/ValeOverworld.png"> <p class="summary">Quelque part<br>À un moment</p> - <div class="details">Des détails #3 !<br>Pleeeein de détails.</div> + <div class="details"> + <h2>Programme</h2> + <ol> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + </ol> + <h2>Salle</h2> + 42 Place de l'Endroit + 01337 La-Ville-du-Coin + <h2>Programmation</h2> + <p><a href="http://perdu.com">Site du programmateur</a></p> + <p>Réservable sous conditions.</p> + <p>1 place : 103¤</p> + </div> </div> </div> - <h1>Prochains concerts</h1> + <h1>Concerts passés</h1> <div class="events"> <div class="event"> <input type="radio" name="event"> <img src="https://static.wikia.nocookie.net/goldensun/images/e/ef/TolbiOverworld.png"> <p class="summary">Quelque part<br>À un moment</p> - <div class="details">Des détails #4 !<br>Pleeeeein de détails.</div> + <div class="details"> + <h2>Programme</h2> + <ol> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + </ol> + <h2>Salle</h2> + 42 Place de l'Endroit + 01337 La-Ville-du-Coin + <h2>Programmation</h2> + <p><a href="http://perdu.com">Site du programmateur</a></p> + <p>Réservable sous conditions.</p> + <p>1 place : 104¤</p> + </div> </div> <div class="event"> <input type="radio" name="event"> <img src="https://static.wikia.nocookie.net/goldensun/images/0/05/KolimaOverworld.png"> <p class="summary">Quelque part<br>À un moment</p> - <div class="details">Des détails #5 !<br>Pleeeeeein de détails.</div> + <div class="details"> + <h2>Programme</h2> + <ol> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + </ol> + <h2>Salle</h2> + 42 Place de l'Endroit + 01337 La-Ville-du-Coin + <h2>Programmation</h2> + <p><a href="http://perdu.com">Site du programmateur</a></p> + <p>Réservable sous conditions.</p> + <p>1 place : 105¤</p> + </div> </div> <div class="event"> <input type="radio" name="event"> <img src="https://static.wikia.nocookie.net/goldensun/images/8/84/Bilibin.png"> <p class="summary">Quelque part<br>À un moment</p> - <div class="details">Des détails #6 !<br>Pleeeeeeein de détails.</div> + <div class="details"> + <h2>Programme</h2> + <ol> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + </ol> + <h2>Salle</h2> + 42 Place de l'Endroit + 01337 La-Ville-du-Coin + <h2>Programmation</h2> + <p><a href="http://perdu.com">Site du programmateur</a></p> + <p>Réservable sous conditions.</p> + <p>1 place : 106¤</p> + </div> </div> <div class="event"> <input type="radio" name="event"> <img src="https://static.wikia.nocookie.net/goldensun/images/7/70/VaultOverworld.png"> <p class="summary">Quelque part<br>À un moment</p> - <div class="details">Des détails #7 !<br>Pleeeeeeeein de détails.</div> + <div class="details"> + <h2>Programme</h2> + <ol> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + </ol> + <h2>Salle</h2> + 42 Place de l'Endroit + 01337 La-Ville-du-Coin + <h2>Programmation</h2> + <p><a href="http://perdu.com">Site du programmateur</a></p> + <p>Réservable sous conditions.</p> + <p>1 place : 107¤</p> + </div> </div> <div class="event"> <input type="radio" name="event"> <img src="https://static.wikia.nocookie.net/goldensun/images/6/65/ValeOverworld.png"> <p class="summary">Quelque part<br>À un moment</p> - <div class="details">Des détails #8 !<br>Pleeeeeeeeein de détails.</div> + <div class="details"> + <h2>Programme</h2> + <ol> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + </ol> + <h2>Salle</h2> + 42 Place de l'Endroit + 01337 La-Ville-du-Coin + <h2>Programmation</h2> + <p><a href="http://perdu.com">Site du programmateur</a></p> + <p>Réservable sous conditions.</p> + <p>1 place : 108¤</p> + </div> </div> <div class="event"> <input type="radio" name="event"> <img src="https://static.wikia.nocookie.net/goldensun/images/e/ef/TolbiOverworld.png"> <p class="summary">Quelque part<br>À un moment</p> - <div class="details">Des détails #9 !<br>Pleeeeeeeeeein de détails.</div> + <div class="details"> + <h2>Programme</h2> + <ol> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + <li>Un morceau</li> + </ol> + <h2>Salle</h2> + 42 Place de l'Endroit + 01337 La-Ville-du-Coin + <h2>Programmation</h2> + <p><a href="http://perdu.com">Site du programmateur</a></p> + <p>Réservable sous conditions.</p> + <p>1 place : 109¤</p> + </div> </div> </div> |