initial commit

2024-04-26 16:14:30 +02:00
commit 30faf7aa5e
9 changed files with 264 additions and 0 deletions
--- a/img/facebook.png
+++ b/img/facebook.png
--- a/img/freelance.jpg
+++ b/img/freelance.jpg
--- a/img/header.jpg
+++ b/img/header.jpg
--- a/img/l'accessibilité.jpg
+++ b/img/l'accessibilité.jpg
--- a/img/sécurité.jpg
+++ b/img/sécurité.jpg
--- a/img/tendance
+++ b/img/tendance
--- a/img/twitter.png
+++ b/img/twitter.png
--- a/index.html
+++ b/index.html
@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Blog</title>
+</head>
+<body>
+    <header class="topbar">
+        <nav>
+            <a href="#">Accueil</a>
+            <a href="#" class="active">Articles</a>
+            <a href="#">A propos</a>
+            <a href="#">Contact</a>
+        </nav>
+        <div class="social">
+            <a href="#"><img src="img/facebook.png" alt="Facebook"></a>
+            <a href="#"><img src="img/twitter.png" alt="Twitter"></a>
+        </div>
+    </header>
+    <div class="banniere">
+    </div>
+    <main class="main">
+        <div class="container">
+            <article class="article">
+                <a href="#" class="article-img"><img src="img/Tendance 2023.jpg" alt=""></a>
+                <div class="date">Publié le 5 juilliet 2023</div>
+                <h2 class="titre-article"><a href="#">Les tendances du développement web à surveiller en 2023</a></h2>
+                <p>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...</p>
+            
+            </article>
+            <article class="article">
+                <a href="#"  class="article-img"><img src="img/freelance.jpg" alt=""></a>
+                <div class="date">Publié le 28 juin 2023</div>
+                <h2 class="titre-article"><a href="#">Le statut de Freelance</a></h2>
+                <p>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...</p>
+            
+            </article>
+            <article class="article">
+                <a href="#"  class="article-img"><img src="img/sécurité.jpg" alt=""></a>
+                <div class="date">Publié le 21 juin 2023</div>
+                <h2 class="titre-article"><a href="#">Les bonnes pratiques en matière de sécurité pour les applications web modernes</a></h2>
+                <p>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...</p>
+            
+            </article>
+            <article class="article">
+                <a href="#"  class="article-img"><img src="img/l'accessibilité.jpg" alt=""></a>
+                <div class="date">Publié le 14 juin 2023</div>
+                <h2 class="titre-article"><a href="#">Le rôle essentiel de l'accessibilité dans le développement web</a></h2>
+                <p>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...</p>
+            
+            </article>
+    </main>
+</div>
+
+    <aside class="sidebar">
+        <h4 class="side-title">Catégories</h4>
+            <ul>
+                <li><a href="#">High-Tech</a></li>
+                <li><a href="#">Concentré du web</a></li>
+                <li><a href="#">A propos</a></li>
+                <li><a href="#">Astuces pour développeurs</a></li>
+                <li><a href="#">Ressources</a></li>
+                <li><a href="#">Bonnes pratiques</a></li>
+            </ul>
+            <hr>
+        <h4 class="side-title">Auteurs</h4>
+            <ul>
+                <li><a href="#">Fabien Michel</a></li>
+            </ul>
+    </aside>
+
+    <footer class="footer">
+        &copy; Copyright 2023
+    </footer>
+</body>
+</html>
--- a/style.css
+++ 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;
+}