initialisation du site
+08/09/2022: création de la page d'acceuil, des 3 premiers articles, + et de la table.
+diff --git a/proto/css/pr-header.css b/proto/css/pr-header.css new file mode 100644 index 0000000..8c18f40 --- /dev/null +++ b/proto/css/pr-header.css @@ -0,0 +1,92 @@ +* { + box-sizing: border-box; +} + +body { + font-family: Arial; + margin: 0; +} + + +a { + background-color: #555; + text-decoration: none; + padding-left: 10px; + padding-right: 10px; +} + +a:link, a:visited { + color: white; + border: 1px solid #555; + border-radius: 0 14px; +} + +a:hover { + color: #555; + background-color: #ebebeb; + border: 1px solid #ebebeb; + border-radius: 25px; +} + +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; + background-color: #555; +} + +.header nav a { + padding: 5px 20px; + margin: 0 10px 0 10px; + text-align: center; +} + +.nav-left { + display: flex; + justify-content: flex-start; +} + +.nav-right { + display: flex; + justify-content: flex-end; +} + +/* MAIN CONTENT --------------------------------------------*/ + +.main-content { + display: flex; + flex-wrap: wrap; +} + +.side { + flex: 30%; + background-color: #f1f1f1; + padding: 20px; +} + +.main { + flex: 70%; + background-color: #ebebeb; + padding: 20px; +} + +/* RESPONSIVE -----------------------------------------------------*/ + +@media screen and (max-width: 700px) { + .main-content, .nav-bar { + flex-direction: column; + } +} diff --git a/proto/pr-header.html b/proto/pr-header.html new file mode 100644 index 0000000..a097257 --- /dev/null +++ b/proto/pr-header.html @@ -0,0 +1,126 @@ + + + +
+Main page
+08/09/2022: création de la page d'acceuil, des 3 premiers articles, + et de la table.
+15/09/2022: ajouts de styles.css.
+29/09/2022: création de multiple fichiers de styles adaptive, + arrangement du code pour une meilleur lisibilité.
+05/10/2022: mise à niveau du style: style pour les pages d'article, + de donnée, création de la page de gallerie avec des photos et des + vidéos, nouvelles bordures, overflow, position (stiky).
+Voici quelques données sur les différants languages de + programmation.
+ Voir les données... +C est un langage de programmation impératif + généraliste, 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.
+ Lire la suite... +C++ est un langage de programmation compilé + permettant la programmation sous de multiples paradigmes, + dont la programmation procédurale, la programmation orientée + objet et la programmation générique. 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.
+ Lire la suite... +C# est un langage de programmation orientée objet, + fortement typé, dérivé de C et de C++, ressemblant au langage Java. + Il est utilisé pour développer des applications + web, ainsi que des applications de bureau, des + services web, des commandes, des widgets ou des bibliothèques de + classes.
+ Lire la suite... +