diff options
| -rw-r--r-- | actualités.css | 46 | ||||
| -rw-r--r-- | actualités.html | 394 |
2 files changed, 197 insertions, 243 deletions
diff --git a/actualités.css b/actualités.css index 3cc5ff5..d063ebd 100644 --- a/actualités.css +++ b/actualités.css @@ -1,13 +1,18 @@ main { - padding-left: 5%; + display: grid; + grid-template-columns: 60% 40%; +} + +main > div { + padding: 2%; } .events { display: grid; - width: 58vw; + width: 50vw; grid-auto-rows: 12vw; grid-template-columns: repeat(auto-fit, 14vw); - grid-gap: 1em; + grid-gap: 1vw; background-color: #dbb; } @@ -19,6 +24,13 @@ main { justify-content: center; } +.event a { + position: absolute; + height: 100%; + width: 100%; + text-decoration: none; +} + .event img { position: absolute; object-position: center; @@ -33,6 +45,12 @@ main { } .event .summary { + position: absolute; + margin: 0; + text-align: center; + vertical-align: middle; + height: 100%; + width: 100%; z-index: 1; opacity: 0; font-weight: bold; @@ -44,26 +62,6 @@ main { opacity: 1; } -.event .details { +#event-details .details { display: none; } - -.event input { - width: 100%; - height: 100%; - position: absolute; - cursor: pointer; - opacity: 0; - z-index: 2; -} - -.event input:checked ~ .details { - display: block; - 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 53d322a..ab0faa4 100644 --- a/actualités.html +++ b/actualités.html @@ -31,238 +31,194 @@ </header> <main> - <h1>Prochains concerts</h1> - - <div class="events"> - <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"> - <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 id="event-list"> + <h1>Prochains concerts</h1> + <div class="events"> + <div class="event" id="concert-1"> + <a href="#details-1"> + <img src="https://static.wikia.nocookie.net/goldensun/images/0/05/KolimaOverworld.png"> + <p class="summary">Quelque part<br>À un moment</p> + </a> </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"> - <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 class="event" id="concert-2"> + <a href="#details-2"> + <img src="https://static.wikia.nocookie.net/goldensun/images/8/84/Bilibin.png"> + <p class="summary">Quelque part<br>À un moment</p> + </a> </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"> - <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 class="event" id="concert-3"> + <a href="#details-3"> + <img src="https://static.wikia.nocookie.net/goldensun/images/7/70/VaultOverworld.png"> + <p class="summary">Quelque part<br>À un moment</p> + </a> + </div> + <div class="event" id="concert-4"> + <a href="#details-4"> + <img src="https://static.wikia.nocookie.net/goldensun/images/6/65/ValeOverworld.png"> + <p class="summary">Quelque part<br>À un moment</p> + </a> </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"> - <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> + <h1>Concerts passés</h1> + <div class="events"> + <div class="event" id="concert-5"> + <a href="#details-5"> + <img src="https://static.wikia.nocookie.net/goldensun/images/e/ef/TolbiOverworld.png"> + <p class="summary">Quelque part<br>À un moment</p> + </a> + </div> + <div class="event" id="concert-6"> + <a href="#details-6"> + <img src="https://static.wikia.nocookie.net/goldensun/images/0/05/KolimaOverworld.png"> + <p class="summary">Quelque part<br>À un moment</p> + </a> + </div> + <div class="event" id="concert-7"> + <a href="#details-7"> + <img src="https://static.wikia.nocookie.net/goldensun/images/8/84/Bilibin.png"> + <p class="summary">Quelque part<br>À un moment</p> + </div> + <div class="event" id="concert-8"> + <a href="#details-8"> + <img src="https://static.wikia.nocookie.net/goldensun/images/7/70/VaultOverworld.png"> + <p class="summary">Quelque part<br>À un moment</p> + </a> </div> </div> </div> - <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"> - <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 id="event-details"> + <div class="details" id="details-1"> + <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 : 101¤</p> </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"> - <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 class="details" id="details-2"> + <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 : 102¤</p> </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"> - <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 class="details" id="details-3"> + <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 : 103¤</p> </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"> - <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 class="details" id="details-4"> + <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 : 104¤</p> </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"> - <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 class="details" id="details-5"> + <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 : 105¤</p> </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"> - <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 class="details" id="details-6"> + <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 : 106¤</p> + </div> + <div class="details" id="details-7"> + <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 : 107¤</p> + </div> + <div class="details" id="details-8"> + <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 : 108¤</p> </div> </div> |