From 71c87cac822918c823f4e1ee06ad252ceef6bc28 Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Sun, 18 Oct 2020 00:03:19 +0200 Subject: add nav & grayscale transition --- artistes.css | 26 ++++++++++---- artistes.html | 112 ++++++++++++++++++++++++++++++++-------------------------- 2 files changed, 82 insertions(+), 56 deletions(-) diff --git a/artistes.css b/artistes.css index c69b323..ec5a977 100644 --- a/artistes.css +++ b/artistes.css @@ -1,11 +1,23 @@ body { background: #eee; - display: flex; padding-left: 10%; padding-right: 10%; } -body div { +nav ol { + display: flex; + list-style-type: none; +} + +nav ol li { + flex: 1; +} + +.main { + display: flex; +} + +.main div { padding: 2em; } @@ -25,34 +37,36 @@ body div { border-width: 10px; border-style: solid; border-radius: 20%; + filter: grayscale(1); + transition: 1s; +} + +#photos-inner img:hover { + filter: none; } #vlad { position: absolute; left: 2em; top: 5%; - z-index: 1; } #garet { position: absolute; left: 10em; top: 10%; - z-index: 2; } #ivan { position: absolute; left: 2em; top: 30%; - z-index: 3; } #sofia { position: absolute; left: 10em; top: 35%; - z-index: 4; } #bio { diff --git a/artistes.html b/artistes.html index 434774d..0a72d1f 100644 --- a/artistes.html +++ b/artistes.html @@ -2,58 +2,70 @@ -
-
- - - - + + +
+
+
+ + + + +
-
-
-

Un premier titre

-

- Senectus et netus et malesuada fames ac turpis. Ut sem nulla - pharetra diam sit amet nisl suscipit adipiscing. Et netus et - malesuada fames ac. Turpis massa sed elementum tempus egestas - sed sed. Et netus et malesuada fames ac. Enim sit amet venenatis - urna cursus. Fermentum et sollicitudin ac orci - phasellus. Sollicitudin nibh sit amet commodo nulla facilisi - nullam vehicula. Pellentesque adipiscing commodo elit at - imperdiet. Eget nunc scelerisque viverra mauris in. Eu sem - integer vitae justo eget magna fermentum iaculis. Feugiat nisl - pretium fusce id velit. Facilisis gravida neque convallis a cras - semper. Scelerisque eu ultrices vitae auctor eu augue ut - lectus. Aliquam purus sit amet luctus venenatis. -

-

- Felis imperdiet proin fermentum leo vel orci porta. Imperdiet - massa tincidunt nunc pulvinar. Porta lorem mollis aliquam ut - porttitor leo. Morbi tincidunt augue interdum velit euismod in - pellentesque massa. In ornare quam viverra orci sagittis - eu. Elementum integer enim neque volutpat ac. Adipiscing - bibendum est ultricies integer quis. Quisque non tellus orci ac - auctor augue. Dictum fusce ut placerat orci nulla pellentesque - dignissim enim. Vitae congue eu consequat ac felis donec et - odio. Aliquam malesuada bibendum arcu vitae elementum curabitur - vitae nunc sed. -

+
+

Un premier titre

+

+ Senectus et netus et malesuada fames ac turpis. Ut sem nulla + pharetra diam sit amet nisl suscipit adipiscing. Et netus et + malesuada fames ac. Turpis massa sed elementum tempus egestas + sed sed. Et netus et malesuada fames ac. Enim sit amet venenatis + urna cursus. Fermentum et sollicitudin ac orci + phasellus. Sollicitudin nibh sit amet commodo nulla facilisi + nullam vehicula. Pellentesque adipiscing commodo elit at + imperdiet. Eget nunc scelerisque viverra mauris in. Eu sem + integer vitae justo eget magna fermentum iaculis. Feugiat nisl + pretium fusce id velit. Facilisis gravida neque convallis a cras + semper. Scelerisque eu ultrices vitae auctor eu augue ut + lectus. Aliquam purus sit amet luctus venenatis. +

+

+ Felis imperdiet proin fermentum leo vel orci porta. Imperdiet + massa tincidunt nunc pulvinar. Porta lorem mollis aliquam ut + porttitor leo. Morbi tincidunt augue interdum velit euismod in + pellentesque massa. In ornare quam viverra orci sagittis + eu. Elementum integer enim neque volutpat ac. Adipiscing + bibendum est ultricies integer quis. Quisque non tellus orci ac + auctor augue. Dictum fusce ut placerat orci nulla pellentesque + dignissim enim. Vitae congue eu consequat ac felis donec et + odio. Aliquam malesuada bibendum arcu vitae elementum curabitur + vitae nunc sed. +

+ +

Un second titre

+

+ Vitae congue eu consequat ac. Nullam ac tortor vitae + purus. Laoreet id donec ultrices tincidunt arcu non sodales + neque sodales. Ut faucibus pulvinar elementum integer enim neque + volutpat ac tincidunt. Proin sed libero enim sed faucibus turpis + in eu. Facilisis magna etiam tempor orci eu lobortis + elementum. Lobortis elementum nibh tellus molestie nunc. Vitae + tortor condimentum lacinia quis vel eros donec. Ut etiam sit + amet nisl purus in mollis nunc sed. Leo in vitae turpis + massa. Nam at lectus urna duis convallis convallis tellus id + interdum. Morbi non arcu risus quis varius quam. Ac turpis + egestas maecenas pharetra convallis posuere morbi leo. Magna + etiam tempor orci eu. +

+
-

Un second titre

-

- Vitae congue eu consequat ac. Nullam ac tortor vitae - purus. Laoreet id donec ultrices tincidunt arcu non sodales - neque sodales. Ut faucibus pulvinar elementum integer enim neque - volutpat ac tincidunt. Proin sed libero enim sed faucibus turpis - in eu. Facilisis magna etiam tempor orci eu lobortis - elementum. Lobortis elementum nibh tellus molestie nunc. Vitae - tortor condimentum lacinia quis vel eros donec. Ut etiam sit - amet nisl purus in mollis nunc sed. Leo in vitae turpis - massa. Nam at lectus urna duis convallis convallis tellus id - interdum. Morbi non arcu risus quis varius quam. Ac turpis - egestas maecenas pharetra convallis posuere morbi leo. Magna - etiam tempor orci eu. -

-- cgit v1.2.3