add 1

proto/css/pr-header.css

@@ -8,60 +8,57 @@ body {
 }
 
 
-a { 
-    background-color: #555; 
-    text-decoration: none;
-    padding-left: 10px;
-    padding-right: 10px;
-}
+/* HEADER --------------------------------------------*/
 
-a:link, a:visited {
-    color: white;
-    border: 1px solid #555;
-    border-radius: 0 14px;
+.header .title {
+    background-image: linear-gradient(to right, #ebebeb, cadetblue);
+    text-align: center;
+    padding: 60px;
+    color: #ebebeb;
 }
 
-a:hover {
+.nav-bar a:link { color: white; }
+.nav-bar a:visited { color: white; }
+.nav-bar a:hover {
     color: #555;
     background-color: #ebebeb;
-    border: 1px solid #ebebeb;
+    border: 10px solid #ebebeb;
     border-radius: 25px;
+    font-size: 20px;
 }
 
-a:active { color: cadetblue; }
-
-
-/* HEADER --------------------------------------------*/
-
-.header .title {
-    background-color: cadetblue;
-    text-align: center;
-    padding: 60px;
-    color: #ebebeb;
-}
 
 .nav-bar {
     display: flex;
     justify-content: space-between;
     padding: 5px;
-    align-items: center;
+    align-items: baseline;
     background-color: #555;
 }
 
-.header nav a {
+.nav-bar a {
     padding: 5px 20px;
     margin: 0 10px 0 10px;
     text-align: center;
+    text-decoration: none;
+    border-radius: 25%;
+    transition:
+        border 300ms,
+        font-size 300ms,
+        background-color 300ms,
+        color 300ms;
 }
 
 .nav-left {
     display: flex;
     justify-content: flex-start;
+    align-items: baseline;
 }
 
 .nav-right {
     display: flex;
     justify-content: flex-end;
+    align-items: baseline;
 }
 
 /* MAIN CONTENT --------------------------------------------*/
@@ -83,6 +80,16 @@ a:active { color: cadetblue; }
     padding: 20px;
 }
 
+article {
+    border-bottom: 1px solid #555;
+}
+
+.title-link {
+    text-decoration: none;
+    color: black;
+}
+
+
 /* RESPONSIVE -----------------------------------------------------*/
 
 @media screen and (max-width: 700px) {

proto/pr-header.html

@@ -72,29 +72,29 @@
       </div>
 
       <div class="main">
-        
         <section class="articles">
-          <h2>actualités des languages</h2>
+          <h2>Actualités des languages</h2>
 
           <div>
             <article>
-              <h3>Quelques données...</h3>
+              <a class="title-link" href="./pages/donnees.html">
+                <h4>Quelques données...</h4>
+              </a>
               <p>Voici quelques données sur les différants languages de
               programmation.</p>
-              <a href="./pages/donnees.html">Voir les données...</a>
             </article>
 
             <article>
-              <h3>Le C</h3>
+              <h4>Le C</h4>
               <p>C est un langage de programmation <strong>impératif
                 généraliste</strong>, de bas niveau. Inventé au début des années 1970
               pour réécrire Unix, C est devenu un des langages les plus utilisés,
               encore de nos jours.</p>
-              <a href="./pages/article1.html">Lire la suite...</a>
+              <a  class="title-link" href="./pages/article1.html">Lire la suite...</a>
             </article>
 
             <article>
-              <h3>Le C++</h3>
+              <h4>Le C++</h4>
               <p>C++ est un langage de programmation <strong>compilé</strong>
               permettant la programmation sous de multiples paradigmes,
               <strong>dont la programmation procédurale, la programmation orientée
@@ -102,22 +102,21 @@
               performances, et sa compatibilité avec le C en font un des langages
               de programmation les plus utilisés dans les applications où la
               performance est critique.</p>
-              <a href="./pages/article2.html">Lire la suite...</a>
+              <a  class="title-link" href="./pages/article2.html">Lire la suite...</a>
             </article>
 
             <article>
-              <h3>Le C#</h3>
+              <h4>Le C#</h4>
               <p>C# est un langage de programmation <strong>orientée objet</strong>,
               fortement typé, dérivé de C et de C++, ressemblant au langage Java.
               Il est utilisé pour développer des <strong>applications
                 web</strong>, ainsi que des <strong>applications de bureau, des
                 services web, des commandes, des widgets ou des bibliothèques de
                 classes</strong>.</p>
-              <a href="./pages/article3.html">Lire la suite...</a>
+              <a  class="title-link" href="./pages/article3.html">Lire la suite...</a>
             </article>
           </div>
         </section>
-
       </div>
 
     </div>