Scribd
Upload
1 views

blog

Uploaded by

lucresse212
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
1 views

blog

Uploaded by

lucresse212
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

<!

DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog</title>
<link rel="stylesheet" href="css/style.css">
<script defer src="js/blog.js"></script>
</head>
<body>
<header>
<div class="logo">JD</div>
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="apropos.html">À Propos</a></li>
<li><a href="blog.html" class="active">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>

<section class="blog-intro">
<h1>Blog</h1>
<p>Découvrez nos derniers articles</p>
<p>Explorez des sujets passionnants et enrichissants.</p>
</section>

<nav class="blog-categories">
<button onclick="filterArticles('all')">Voir tout</button>
<button onclick="filterArticles('Technologie')">Technologie</button>
<button onclick="filterArticles('Éducation')">Éducation</button>
<button onclick="filterArticles('Inspiration')">Inspiration</button>
<button onclick="filterArticles('Conseils')">Conseils pratiques</button>
</nav>

<section class="articles">
<article class="article" data-category="Éducation">
<img src="images/articles/education.jpg" alt="Éducation">
<div class="article-content">
<p class="category">Éducation • 5 min lecture</p>
<h2>Les tendances éducatives de 2023</h2>
<p>Découvrez les nouvelles méthodes d'apprentissage qui
transforment l'éducation aujourd'hui.</p>
<a href="articles/article-1.html">Lire plus</a>
</div>
</article>

<article class="article" data-category="Technologie">


<img src="images/articles/technologie.jpg" alt="Technologie">
<div class="article-content">
<p class="category">Technologie • 5 min lecture</p>
<h2>L'impact de la technologie sur l'éducation</h2>
<p>Comment la technologie redéfinit l'apprentissage dans les salles de
classe modernes.</p>
<a href="articles/article-2.html">Lire plus</a>
</div>
</article>
<article class="article" data-category="Inspiration">
<img src="images/articles/inspiration.jpg" alt="Inspiration">
<div class="article-content">
<p class="category">Inspiration • 5 min lecture</p>
<h2>Histoires de réussite d'étudiants</h2>
<p>Inspirez-vous des parcours de ceux qui ont réussi.</p>
<a href="articles/article-3.html">Lire plus</a>
</div>
</article>

<article class="article" data-category="Conseils">


<img src="images/articles/conseils.jpg" alt="Conseils">
<div class="article-content">
<p class="category">Conseils • 5 min lecture</p>
<h2>Comment gérer son temps efficacement</h2>
<p>Des stratégies pour maximiser votre productivité au
quotidien.</p>
<a href="articles/article-4.html">Lire plus</a>
</div>
</article>
</section>

<footer>
<p>Copyright 2024 - Nom et Prénom</p>
</footer>
</body>
</html>
/* ========== HEADER ========== */
header {
background: #222;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 50px;
}

.logo {
font-size: 28px;
font-weight: bold;
text-transform: uppercase;
}

nav ul {
list-style: none;
display: flex;
padding: 0;
}

nav ul li {
margin: 0 20px;
}

nav ul li a {
color: white;
text-decoration: none;
font-size: 18px;
}

nav ul li a.active {
border-bottom: 2px solid white;
}

/* ========== BLOG INTRO ========== */


.blog-intro {
text-align: center;
padding: 40px;
background: #f4f4f4;
}

.blog-intro h1 {
font-size: 32px;
}

.blog-intro p {
font-size: 18px;
color: #666;
}

/* ========== CATÉGORIES ========== */


.blog-categories {
text-align: center;
margin: 20px 0;
}
.blog-categories button {
padding: 10px 20px;
margin: 5px;
border: none;
cursor: pointer;
background: #ddd;
border-radius: 5px;
}

.blog-categories button:hover {
background: #bbb;
}

/* ========== ARTICLES ========== */


.articles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
max-width: 1200px;
margin: auto;
padding: 20px;
}

.article {
background: white;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
overflow: hidden;
transition: 0.3s;
}

.article:hover {
transform: scale(1.02);
}

.article img {
width: 100%;
height: 200px;
object-fit: cover;
}

.article-content {
padding: 20px;
}

.article-content .category {
font-size: 14px;
color: #888;
margin-bottom: 10px;
}

.article-content h2 {
font-size: 20px;
margin-bottom: 10px;
}

.article-content p {
font-size: 16px;
color: #555;
}

.article-content a {
display: inline-block;
margin-top: 10px;
color: #007BFF;
text-decoration: none;
}

.article-content a:hover {
text-decoration: underline;
}

/* ========== FOOTER ========== */


footer {
background: #222;
color: white;
text-align: center;
padding: 15px;
margin-top: 40px;
}

function filterArticles(category) {
let articles = document.querySelectorAll('.article');

articles.forEach(article => {
if (category === 'all' || article.getAttribute('data-category') === category) {
article.style.display = "block";
} else {
article.style.display = "none";
}
});
}

You might also like