From 329dbd133c69f0bdc10d0507ae71f3079de9410b Mon Sep 17 00:00:00 2001
From: tuks <tuksiranium@gmail.com>
Date: Wed, 5 Oct 2022 10:56:44 +0200
Subject: [PATCH] padd & marg

---
 index.html         | 31 ++++++++++++++++++++++++------
 pages/donnees.html | 24 +++++++++++++++++++----
 styles/donnees.css | 23 +++++++++++++++++++++++
 styles/main.css    | 47 ++++++++++++++++++++++++++++++++++++++++++----
 4 files changed, 111 insertions(+), 14 deletions(-)
 create mode 100644 styles/donnees.css
diff --git a/index.html b/index.html
index ea87ce1..dffffd3 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,6 @@
   <body>
 
     <div class="header">
-
       <div class="title">
         <h1>LangProg - Main</h1>
         <img src="img/ProgrammingLanguage1-1.jpg" alt="ImgTitle" />
@@ -37,19 +36,33 @@
 
         <article>
           <h3>Le C</h3>
-          <p>Le C est un language de programmation.</p>
+          <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>
         </article>
 
         <article>
           <h3>Le C++</h3>
-          <p>Le C++ est un language de programmation.</p>
+          <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
+              objet et la programmation générique.</strong> Ses bonnes
+            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>
         </article>
 
         <article>
           <h3>Le C#</h3>
-          <p>Le C# est un language de programmation.</p>
+          <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>
         </article>
       </section>
@@ -58,15 +71,21 @@
         <h2>Actualités du site</h2>
 
         <article>
-          <h3>Initialisation du site</h3>
+          <h4>Initialisation du site</h4>
           <p>08/09/2022: Création de la page d'acceuil, des 3 premiers articles,
           et de la table.</p>
         </article>
 
         <article>
-          <h3>Ajouts des stylesheets</h3>
+          <h4>Ajouts des stylesheets</h4>
           <p>15/09/2022: Ajouts de styles.css.</p>
         </article>
+
+        <article>
+          <h4>MAJ complete de la structuration du site</h4>
+          <p>29/09/2022: Création de multiple fichiers de styles adaptive,
+            arrangement du code pour une meilleur lisibilité.</p>
+        </article>
       </section>
 
       <aside class="links">
diff --git a/pages/donnees.html b/pages/donnees.html
index f039b54..c74fa42 100644
--- a/pages/donnees.html
+++ b/pages/donnees.html
@@ -1,14 +1,30 @@
 <!DOCTYPE html>
 <html>
+
   <head>
     <meta charset="utf-8" \>
     <title>Quelques données</title>
+    <link href="../styles/main.css" rel="stylesheet" type="text/css" />
+    <link href="../styles/donnees.css" rel="stylesheet" type="text/css" />
   </head>
+
   <body>
-    <p><a href="../index.html">-- Menu principal</a></p>
-    <div>
-      <h2>Quelques données...</h2>
-      <table width="60%" border="1">
+
+    <div class="header">
+      <div class="title">
+        <h1>LangProg - Données</h1>
+        <img src="../img/ProgrammingLanguage1-1.jpg" alt="ImgTitle" />
+      </div>
+
+      <nav>
+        <a href="./index.html">Menu Principal</a>
+        <a href="pages/galerie.html">Galerie</a>
+        <a href="pages/donnees.html">Données</a>
+      </nav>
+    </div>
+
+    <div class="donnees">
+      <table>
         <tr>
           <th></th>
           <th><img src="../img/The_C_Programming_Language_logo.svg.png" alt="C"
diff --git a/styles/donnees.css b/styles/donnees.css
new file mode 100644
index 0000000..8363de0
--- /dev/null
+++ b/styles/donnees.css
@@ -0,0 +1,23 @@
+body {
+    background-color: #ebebeb;
+}
+
+/* TABLE */
+
+.donnees {
+    margin: 50px;
+}
+
+.donnees table {
+    table-layout: auto;
+    width: 50%;
+    border: 1px solid cadetblue;
+    border-bottom: 0;
+    border-right: 0;
+}
+
+.donnees th,tr,td {
+    border-bottom: 1px solid cadetblue;
+    border-right: 1px solid cadetblue;
+
+}
diff --git a/styles/main.css b/styles/main.css
index e9d8b3b..1e097ad 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -2,6 +2,17 @@ body {
   background-color: #ebebeb;
 }
 
+a { 
+    background-color: darkgrey; 
+    text-decoration: none;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+a:link, a:visited { color: white; }
+a:hover { color: cadetblue; background-color: white; }
+a:active { color: darkgrey; }
+
 /* HEADER */
 
 .header {
@@ -29,24 +40,32 @@ body {
 
 .header nav {
     background-color: cadetblue;
-    color: white;
 }
 
 .header nav a {
-    color: white;
+    background-color: cadetblue;
     margin-inline: 10px;
 }
 
+.header a:hover { color: darkgrey; }
+.header a:active { color: cadetblue; }
+
 /* MAIN CONTENT */
 
 .main-content {
     border-left: 6px solid cadetblue;
+    border-right: 2px solid cadetblue;
+    margin-right: 20%;
 }
 
 .main-content section {
     margin-left: 10px;
 }
 
+.main-content .articles article {
+    margin-bottom: 50px;
+}
+
 .main-content h2,h3 {
     border-bottom: 6px solid cadetblue;
     border-left: 6px solid darkgrey;
@@ -58,19 +77,39 @@ body {
     background-color: cadetblue;
 }
 
+.main-content h4 {
+    border-bottom: 2px solid cadetblue;
+    padding-bottom: 4px;
+}
+
+.main-content .actus h4 {
+    margin-bottom: 0;
+    padding-bottom: 2px;
+}
+
+.main-content .actus p {
+    margin-top: 2px;
+}
+
 /* ASIDE */
 
 .links {
     background-color: #ebebebca;
+    padding-left: 2%;
+    padding-right: 2%;
+    padding-top: 1%;
     border: 6px solid cadetblue;
     display: block;
-    float: right;
     position: fixed;
-    top: 400px;
+    top: 113px;
     right: 8px;
     height: 400px;
 }
 
+.links h3, ul {
+    text-align: justify;
+}
+
 /* FOOTER */
 
 footer {
