padd & marg

2 years ago · 329dbd133c
parent 1090635a03
commit 329dbd133c
4 changed files with 111 additions and 14 deletions
--- 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">
--- 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"
--- a/styles/donnees.css
+++ 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;
+
+}
--- 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 {