diff options
| -rw-r--r-- | calendar.svg | 2 | ||||
| -rw-r--r-- | index.css | 25 | ||||
| -rw-r--r-- | index.html | 61 |
3 files changed, 88 insertions, 0 deletions
diff --git a/calendar.svg b/calendar.svg new file mode 100644 index 0000000..1c2ec99 --- /dev/null +++ b/calendar.svg @@ -0,0 +1,2 @@ +<!-- Adapted from <https://feathericons.com>. --> +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#eee" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> diff --git a/index.css b/index.css new file mode 100644 index 0000000..1573745 --- /dev/null +++ b/index.css @@ -0,0 +1,25 @@ +main { + position: relative; + background: #a33; +} + +#next-concert { + position: absolute; + bottom: 4%; + height: 20ex; + width: 10em; + text-align: center; + background: no-repeat center/contain url('calendar.svg'); +} + +#next-concert a { + position: relative; + top: 48%; + color: #eee; + text-decoration: none; +} + +#next-concert a #day { + font-size: 180%; + font-weight: bold; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..f5d6dae --- /dev/null +++ b/index.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html lang="fr"> + <head> + <meta charset="utf-8"> + <title>Bienvenue - Quatuor Camelot</title> + <link rel="stylesheet" href="commun.css"> + <link rel="stylesheet" href="index.css"> + </head> + <body> + <header class="banner"> + + <div class="brand"> + <a href="index.html"> + <img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Golden_Sun_icon.png" + alt="logo"> + <h1 class="qname">Quatuor Camelot</h1> + </a> + </div> + + <nav> + <ol> + <li><a href="quatuor.html">Le quatuor</a></li> + <li><a href="actualités.html">Actualités</a></li> + <li><a href="programmes.html">Programmes</a></li> + <li><a href="médias.html">Médias</a></li> + </ol> + </nav> + + <div class="lang"> + EN + </div> + + </header> + + <main> + <div id="next-concert"> + <a href="actualités.html#concert-1"> + <span id="day">25</span> + <br> + <span id="month">décembre</span> + </a> + </div> + </main> + + <footer class="social"> + <img src="https://upload.wikimedia.org/wikipedia/en/9/9f/Twitter_bird_logo_2012.svg"> + <img src="https://upload.wikimedia.org/wikipedia/commons/c/c2/F_icon.svg"> + <p class="contact"> + <a href="contact.html">Contact</a> + </p> + </footer> + + <footer class="legal"> + <p> + Mentions légales + - Icône de calendrier adaptée de <a href="https://feathericons.com">Feather</a> + - Plan du site + </p> + </footer> + </body> +</html> |
