diff options
| author | Martial Simon <msimon_fr@hotmail.com> | 2024-03-12 21:59:30 +0200 |
|---|---|---|
| committer | Martial Simon <msimon_fr@hotmail.com> | 2024-03-12 21:59:30 +0200 |
| commit | ddbe8d42df833a8d209b5dc737eb23ffd81e175e (patch) | |
| tree | 8feec08f2fad549fe8f956f0d19aba177713d716 | |
| parent | 5e28298ceb8d1ab41e338f1ba1b3f6a565d7550d (diff) | |
feat: events page
| -rw-r--r-- | events.html | 42 | ||||
| -rw-r--r-- | img/afficheOpenMic1903.png | bin | 0 -> 3079246 bytes | |||
| -rw-r--r-- | style.css | 52 |
3 files changed, 94 insertions, 0 deletions
diff --git a/events.html b/events.html new file mode 100644 index 0000000..38f9e9d --- /dev/null +++ b/events.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <title>🎶 RTFM - Evenements🎵</title> + <link rel="stylesheet" type="text/css" href="./style.css" /> + <meta content="text/html; charset=utf-8" http-equiv="content-type" /> + <meta name="description" content="Club musique de l'EPITA Lyon" /> + <meta name="author" content="Marcellus" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <link rel="icon" type="image/x-icon" href="img/logo.ico"> + </head> + <body style="background: url(./img/wp.jpg)"> + <a href="./index.html" style="position: fixed; top: 5px; left: 10px;"> + <img src="img/logo.png" alt="Logo" style="height: 20vh;"> + </a> + <h1>Evenements à venir</h1> + <div class="date-cont"> + <div class="date"> + <h2 class="date-desc">Open Mic Rap</h2> + <div> + <hr> + <p>19 mars 2024<br>Entrée libre</p> + </div> + </div> + <img src="img/afficheOpenMic1903.png" alt="affiche évènement" /> + </div> + <script> + dates = document.getElementsByClassName('date-cont') + images = document.querySelectorAll('.date-cont img') + for (let date of dates){ + date.addEventListener('click',() => { + if (date.classList.contains("toggle")){ + date.classList.remove('toggle'); + } + else { + date.classList.add("toggle") + } + }) + } + </script> + </body> +</html>
\ No newline at end of file diff --git a/img/afficheOpenMic1903.png b/img/afficheOpenMic1903.png Binary files differnew file mode 100644 index 0000000..7bc329b --- /dev/null +++ b/img/afficheOpenMic1903.png @@ -27,12 +27,17 @@ abbr{ padding: 20px; border-radius: 10px; background: linear-gradient(45deg, #dbc562aa, #92878dbb); +} + +.audio, +.date-cont{ box-shadow: #111 10px 20px 15px; transition-property: box-shadow, transform; transition-duration: .5s; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); } +.date-cont:hover, .audio:hover { box-shadow: #111 15px 25px 30px; transform: scale(100.5%); @@ -52,4 +57,51 @@ audio { linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); box-shadow: #111 2px 2px 10px; +} + +.date{ + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.date hr{ + transform: rotate(90deg); + width: 2em; + height: 0; + border: 1px solid white; +} + +.date div{ + display: flex; + flex-direction: row; + align-items: center; +} + +.date-cont{ + padding-left: 10px; + padding-right: 10px; + margin-bottom: 10px; + margin-left: 10%; + margin-right: 10%; + border-radius: 10px; + background: linear-gradient(45deg, #dbc562aa, #92878dbb); + color: white; + display: flex; + flex-direction: column; +} + +.date-cont img{ + display: none; + max-height: 50vh; + margin: auto; + margin-bottom: 20px; +} + +.date-cont.toggle img { + display: block; +} + +.date-desc { + text-align: left; }
\ No newline at end of file |
