Scribd
Upload
5 views

blog

Uploaded by

lucresse212
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

blog

Uploaded by

lucresse212
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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