Actualités - Quatuor Camelot

From 6f79c3f6dd4b2db347547b22bf7727fadcbd4dfb Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Sun, 22 Nov 2020 00:45:33 +0100 Subject: Rename events page Also add the boilerplate. --- "actualit\303\251s.css" | 63 +++++++++++++++++++++++ "actualit\303\251s.html" | 111 ++++++++++++++++++++++++++++++++++++++++ "\303\251v\303\251nements.css" | 63 ----------------------- "\303\251v\303\251nements.html" | 79 ---------------------------- 4 files changed, 174 insertions(+), 142 deletions(-) create mode 100644 "actualit\303\251s.css" create mode 100644 "actualit\303\251s.html" delete mode 100644 "\303\251v\303\251nements.css" delete mode 100644 "\303\251v\303\251nements.html" diff --git "a/actualit\303\251s.css" "b/actualit\303\251s.css" new file mode 100644 index 0000000..6a2bd4a --- /dev/null +++ "b/actualit\303\251s.css" @@ -0,0 +1,63 @@ +.events { + display: grid; + width: 60%; + grid-auto-rows: 14vw; + grid-template-columns: repeat(auto-fit, 14vw); + grid-gap: 1em; + margin-left: auto; + margin-right: 0; + background-color: #ccc; +} + +.event { + position: relative; + background-color: #fff; + display: flex; + align-items: center; + justify-content: center; +} + +.event img { + position: absolute; + object-position: center; + object-fit: cover; + height: 100%; + width: 100%; + transition: 0.5s; +} + +.event:hover img { + filter: grayscale(0.8) brightness(0.4); +} + +.event .summary { + z-index: 1; + opacity: 0; + font-weight: bold; + color: white; + transition: 0.5s; +} + +.event:hover .summary { + opacity: 1; +} + +.event .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: 0; +} diff --git "a/actualit\303\251s.html" "b/actualit\303\251s.html" new file mode 100644 index 0000000..e1588e8 --- /dev/null +++ "b/actualit\303\251s.html" @@ -0,0 +1,111 @@ + + + + + Actualités - Quatuor Camelot + + + + + + +

+ + +

+ + + + + + diff --git "a/\303\251v\303\251nements.css" "b/\303\251v\303\251nements.css" deleted file mode 100644 index 6a2bd4a..0000000 --- "a/\303\251v\303\251nements.css" +++ /dev/null @@ -1,63 +0,0 @@ -.events { - display: grid; - width: 60%; - grid-auto-rows: 14vw; - grid-template-columns: repeat(auto-fit, 14vw); - grid-gap: 1em; - margin-left: auto; - margin-right: 0; - background-color: #ccc; -} - -.event { - position: relative; - background-color: #fff; - display: flex; - align-items: center; - justify-content: center; -} - -.event img { - position: absolute; - object-position: center; - object-fit: cover; - height: 100%; - width: 100%; - transition: 0.5s; -} - -.event:hover img { - filter: grayscale(0.8) brightness(0.4); -} - -.event .summary { - z-index: 1; - opacity: 0; - font-weight: bold; - color: white; - transition: 0.5s; -} - -.event:hover .summary { - opacity: 1; -} - -.event .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: 0; -} diff --git "a/\303\251v\303\251nements.html" "b/\303\251v\303\251nements.html" deleted file mode 100644 index 9ac88cc..0000000 --- "a/\303\251v\303\251nements.html" +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - -

- -

- -- cgit v1.2.3