add nav & grayscale transition

author: Kévin Le Gouguec <kevin.legouguec@gmail.com> 2020-10-18 00:03:19 +0200
committer: Kévin Le Gouguec <kevin.legouguec@gmail.com> 2020-10-21 23:19:09 +0200
commit: 71c87cac822918c823f4e1ee06ad252ceef6bc28 (patch)
tree: 3ffd3ff7ae07295fa8c5f5a1a4a436d0438736f8
parent: d2c0f070807fab9247479825a530e829ec1657d1 (diff)
download: quatuorbellefeuille.com-71c87cac822918c823f4e1ee06ad252ceef6bc28.tar.xz
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 @@
   <link rel="stylesheet" href="artistes.css">
 </head>
 <body>
-  <div id="photos">
-    <div id="photos-inner">
-      <img id="vlad" src="https://v3.goldensun-world.com/img/artwork/vlad_b.jpg">
-      <img id="garet" src="https://v3.goldensun-world.com/img/artwork/garet_b.jpg">
-      <img id="ivan" src="https://v3.goldensun-world.com/img/artwork/ivan_b.jpg">
-      <img id="sofia" src="https://v3.goldensun-world.com/img/artwork/sofia_b.jpg">
+  <nav>
+    <ol>
+      <li>accueil</li>
+      <li>artistes</li>
+      <li>calendrier</li>
+      <li>contact</li>
+    </ol>
+  </nav>
+
+  <div class="main">
+    <div id="photos">
+      <div id="photos-inner">
+        <img id="vlad" src="https://v3.goldensun-world.com/img/artwork/vlad_b.jpg">
+        <img id="garet" src="https://v3.goldensun-world.com/img/artwork/garet_b.jpg">
+        <img id="ivan" src="https://v3.goldensun-world.com/img/artwork/ivan_b.jpg">
+        <img id="sofia" src="https://v3.goldensun-world.com/img/artwork/sofia_b.jpg">
+      </div>
     </div>
-  </div>
 
-  <div id="bio">
-    <h1>Un premier titre</h1>
-    <p>
-      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.
-    </p>
-    <p>
-      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.
-    </p>
+    <div id="bio">
+      <h1>Un premier titre</h1>
+      <p>
+        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.
+      </p>
+      <p>
+        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.
+      </p>
+
+      <h1>Un second titre</h1>
+      <p>
+        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.
+      </p>  
+    </div>
 
-    <h1>Un second titre</h1>
-    <p>
-      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.
-    </p>  
   </div>
 </body>
author	Kévin Le Gouguec <kevin.legouguec@gmail.com>	2020-10-18 00:03:19 +0200
committer	Kévin Le Gouguec <kevin.legouguec@gmail.com>	2020-10-21 23:19:09 +0200
commit	71c87cac822918c823f4e1ee06ad252ceef6bc28 (patch)
tree	3ffd3ff7ae07295fa8c5f5a1a4a436d0438736f8
parent	d2c0f070807fab9247479825a530e829ec1657d1 (diff)
download	quatuorbellefeuille.com-71c87cac822918c823f4e1ee06ad252ceef6bc28.tar.xz