commit 2f291a86ae64a501033f6fb1141aa8f81b7af955 parent faecfa554e8ac349706b97e5a438052832157c51 Author: Kévin Le Gouguec <kevin.legouguec@gmail.com> Date: Wed, 21 Oct 2020 23:16:35 +0200 add event images Diffstat:
| M | événements.css | | | 15 | ++++++++++++++- |
| M | événements.html | | | 50 | ++++++++++++++++++++++++++++++++++++++++---------- |
2 files changed, 54 insertions(+), 11 deletions(-)
diff --git a/événements.css b/événements.css @@ -10,8 +10,21 @@ } .event { + position: relative; + background-color: #fff; display: flex; align-items: center; justify-content: center; - background-color: #fff; +} + +.event img { + position: absolute; + object-position: center; + object-fit: cover; + height: 100%; + width: 100%; +} + +.event p { + z-index: 1; } diff --git a/événements.html b/événements.html @@ -14,16 +14,46 @@ <div class="main"> <div class="events"> - <div class="event"><p>Quelque part<br>À un moment</p></div> - <div class="event"><p>Quelque part<br>À un moment</p></div> - <div class="event"><p>Quelque part<br>À un moment</p></div> - <div class="event"><p>Quelque part<br>À un moment</p></div> - <div class="event"><p>Quelque part<br>À un moment</p></div> - <div class="event"><p>Quelque part<br>À un moment</p></div> - <div class="event"><p>Quelque part<br>À un moment</p></div> - <div class="event"><p>Quelque part<br>À un moment</p></div> - <div class="event"><p>Quelque part<br>À un moment</p></div> - <div class="event"><p>Quelque part<br>À un moment</p></div> + <div class="event"> + <img src="https://static.wikia.nocookie.net/goldensun/images/0/05/KolimaOverworld.png"> + <p>Quelque part<br>À un moment</p> + </div> + <div class="event"> + <img src="https://static.wikia.nocookie.net/goldensun/images/8/84/Bilibin.png"> + <p>Quelque part<br>À un moment</p> + </div> + <div class="event"> + <img src="https://static.wikia.nocookie.net/goldensun/images/7/70/VaultOverworld.png"> + <p>Quelque part<br>À un moment</p> + </div> + <div class="event"> + <img src="https://static.wikia.nocookie.net/goldensun/images/6/65/ValeOverworld.png"> + <p>Quelque part<br>À un moment</p> + </div> + <div class="event"> + <img src="https://static.wikia.nocookie.net/goldensun/images/e/ef/TolbiOverworld.png"> + <p>Quelque part<br>À un moment</p> + </div> + <div class="event"> + <img src="https://static.wikia.nocookie.net/goldensun/images/0/05/KolimaOverworld.png"> + <p>Quelque part<br>À un moment</p> + </div> + <div class="event"> + <img src="https://static.wikia.nocookie.net/goldensun/images/8/84/Bilibin.png"> + <p>Quelque part<br>À un moment</p> + </div> + <div class="event"> + <img src="https://static.wikia.nocookie.net/goldensun/images/7/70/VaultOverworld.png"> + <p>Quelque part<br>À un moment</p> + </div> + <div class="event"> + <img src="https://static.wikia.nocookie.net/goldensun/images/6/65/ValeOverworld.png"> + <p>Quelque part<br>À un moment</p> + </div> + <div class="event"> + <img src="https://static.wikia.nocookie.net/goldensun/images/e/ef/TolbiOverworld.png"> + <p>Quelque part<br>À un moment</p> + </div> </div> </div> </body>