commit 30faf7aa5ef458091968bf725713ba10fc9c4de0 Author: Fabienmcl Date: Fri Apr 26 16:14:30 2024 +0200 initial commit diff --git a/img/facebook.png b/img/facebook.png new file mode 100644 index 0000000..bc496d8 Binary files /dev/null and b/img/facebook.png differ diff --git a/img/freelance.jpg b/img/freelance.jpg new file mode 100644 index 0000000..23cdd6f Binary files /dev/null and b/img/freelance.jpg differ diff --git a/img/header.jpg b/img/header.jpg new file mode 100644 index 0000000..057991e Binary files /dev/null and b/img/header.jpg differ diff --git a/img/l'accessibilité.jpg b/img/l'accessibilité.jpg new file mode 100644 index 0000000..40805f8 Binary files /dev/null and b/img/l'accessibilité.jpg differ diff --git a/img/sécurité.jpg b/img/sécurité.jpg new file mode 100644 index 0000000..a424476 Binary files /dev/null and b/img/sécurité.jpg differ diff --git a/img/tendance 2023.jpg b/img/tendance 2023.jpg new file mode 100644 index 0000000..dc4c514 Binary files /dev/null and b/img/tendance 2023.jpg differ diff --git a/img/twitter.png b/img/twitter.png new file mode 100644 index 0000000..941ca75 Binary files /dev/null and b/img/twitter.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..5e92161 --- /dev/null +++ b/index.html @@ -0,0 +1,78 @@ + + + + + + + Blog + + +
+ + +
+
+
+
+
+
+ +
Publié le 5 juilliet 2023
+

Les tendances du développement web à surveiller en 2023

+

Dans cet article, nous explorerons les tendances du développement web en 2023. Les frameworks JavaScript tels que React, Angular et Vue.js continuent de s'améliorer, offrant des performances toujours plus rapides. L'intelligence artificielle s'intègre davantage dans le développement web, automatisant des tâches et personnalisant les expérien...

+ +
+
+ +
Publié le 28 juin 2023
+

Le statut de Freelance

+

Dans cet article, nous allons nous intéresser au métier de développeur web de manière générale mais aujourd'hui je voulais me focaliser sur le statut de freelance en particulier. Plutôt que de faire une longue explication sur le statut, mon expér...

+ +
+
+ +
Publié le 21 juin 2023
+

Les bonnes pratiques en matière de sécurité pour les applications web modernes

+

Dans cet article, nous examinerons les bonnes pratiques de sécurité pour les applications web modernes. La validation et l'échappement des entrées utilisateur sont essentielles pour éviter les attaques par injection. L'authentification et l'autorisation doivent être mises en œuvre correctement pour protéger les données sensibles...

+ +
+
+ +
Publié le 14 juin 2023
+

Le rôle essentiel de l'accessibilité dans le développement web

+

Dans cet article, nous mettrons en évidence l'importance de l'accessibilité dans le développement web. Assurer l'accessibilité signifie permettre à tous les utilisateurs, y compris ceux ayant des handicaps, d'accéder au contenu en ligne. Nous aborderons les raisons pour lesquelles l'accessibilité est cruciale et comment elle améliore l'expérience utilisate...

+ +
+
+ + + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..a2ba26f --- /dev/null +++ b/style.css @@ -0,0 +1,186 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Cardo:wght@700&display=swap'); +*{ + box-sizing: border-box; + +} + +body, html{ + font-size: 16px; + font-family: 'Montserrat', sans-serif; + color: rgb(0, 0, 0, .87); + line-height: 1.6; + margin: 0; + font-weight: 500; + + +} + +.topbar{ + position: fixed; + background-color: #FFF; + top: 0; + left: 0; + right: 0; + width: 100%; + padding: 30px; + z-index: 3; + box-shadow: 0 4px 10px rgb(0, 0, 0, .05); + +} + +.topbar nav{ + float: left; + +} + +.topbar nav a{ + color: #9f9f9f; + font-weight: 500; + padding: 0 53px; + line-height: 23px; +} + +.topbar nav a:hover, .topbar nav a.active{ + color: #000; +} + +.social{ + float: right; +} + +.social a{ + padding: 0 12px; + opacity: .5; +} + +.social a:hover{ + opacity: 1; +} + + +.banniere{ + height: 427px; + background: no-repeat center center / cover url(img/header.jpg) ; +} + +.main{ + float: left; + width: 60%; + background: #FFF; + box-shadow: 0 4px 30px rgb(0, 0, 0, .05); + position: relative; + z-index: 2; + + +} + +.sidebar{ + position: relative; + width: 40%; + float: right; + background: #ececee; + font-size: 17px; + padding: 40px; + z-index: 1; +} + +.side-title{ + font-size: 30px; + color: #000; + margin: 15px 0; +} + +.side-title:first-child{ + margin: 0; + margin-bottom: 30px; +} + +.sidebar a{ + color: #9F9F9F; + text-decoration: none; +} + +.sidebar a:hover{ + text-decoration: underline; +} + +.sidebar ul{ + margin: 0; + padding: 0; + list-style: none; +} + +.sidebar li{ + padding: 6px 0; +} + +.sidebar li:first-child{ + padding-top: 0; +} + +.sidebar li:last-child{ + padding-bottom: 0; +} + +.sidebar hr{ + border: none ; + background: #C4C4C4; + height: 1px; + margin: 50px 0; +} + +.container{ + margin: 0 auto;; + max-width: 940px; +} + +.article{ + margin: 50px; + position: relative; + padding-left: 333px; + min-height: 203px; + +} + +.article a{ + color: inherit; + text-decoration: none; +} + +.article a:hover{ + text-decoration: underline; +} + +.article-img{ + position: absolute; + left: 0; + top: 0; + width: 308px; + margin-right: 25px; +} + +.article-img img{ + width: 100%; + height: auto; +} + +.date{ + font-weight: 300px; + color: rgba(0, 0, 0, .6); + margin-bottom: 5px; +} + +.titre-article{ + font-size: 2.25rem; + line-height: 1.1; + font-family: 'Cardo', serif; + margin: 0 0 15px 0; + +} + + +.footer{ + clear: both; + text-align: center; +} \ No newline at end of file