diff options
| -rw-r--r-- | images/calendar-gold.svg | 2 | ||||
| -rw-r--r-- | images/calendar.svg | 2 | ||||
| -rw-r--r-- | index.html | 4 | ||||
| -rw-r--r-- | stylesheets/index.css | 24 |
4 files changed, 16 insertions, 16 deletions
diff --git a/images/calendar-gold.svg b/images/calendar-gold.svg new file mode 100644 index 0000000..235b726 --- /dev/null +++ b/images/calendar-gold.svg @@ -0,0 +1,2 @@ +<!-- Adapted from <https://feathericons.com>. --> +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 18" fill="none" stroke="#E4B63A" stroke-width="0.3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="12" rx="2" ry="2"></rect><line x1="15" y1="3" x2="15" y2="5"></line><line x1="9" y1="3" x2="9" y2="5"></line><line x1="3" y1="7" x2="21" y2="7"></line></svg> diff --git a/images/calendar.svg b/images/calendar.svg index d66e52a..9789353 100644 --- a/images/calendar.svg +++ b/images/calendar.svg @@ -1,2 +1,2 @@ <!-- Adapted from <https://feathericons.com>. --> -<svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="0.3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="12" rx="2" ry="2"></rect><line x1="15" y1="3" x2="15" y2="5"></line><line x1="9" y1="3" x2="9" y2="5"></line><line x1="3" y1="7" x2="21" y2="7"></line></svg> +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 18" fill="none" stroke="#fff" stroke-width="0.3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="12" rx="2" ry="2"></rect><line x1="15" y1="3" x2="15" y2="5"></line><line x1="9" y1="3" x2="9" y2="5"></line><line x1="3" y1="7" x2="21" y2="7"></line></svg> @@ -1,11 +1,9 @@ <main> - <div id="next-concert"> - <a href="actualités.html#concert-8"> + <a id="next-concert" href="actualités.html#concert-8"> <p> <span id="day">25</span> <br> <span id="month">décembre</span> </p> </a> - </div> </main> diff --git a/stylesheets/index.css b/stylesheets/index.css index 0949e5a..01cc43d 100644 --- a/stylesheets/index.css +++ b/stylesheets/index.css @@ -24,27 +24,27 @@ main { position: relative; } -#next-concert { +a#next-concert { + display: block; position: absolute; - bottom: 2%; - height: 10em; - width: 11em; + bottom: 0; + left: -2em; + padding: 2em; + width: 6em; + height: 3em; text-align: center; + text-decoration: none; background: no-repeat center/contain url('/images/calendar.svg'); } - -#next-concert a { - display: inline-block; - width: 100%; - height: 100%; - text-decoration: none; +a#next-concert:hover { + color: var(--gold); + background-image: url('/images/calendar-gold.svg'); } #next-concert p { position: relative; - top: 32%; margin: 0; - color: #eee; + margin-top: 1em; text-transform: uppercase; } |
