<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Education Blog Layout with CSS Grid</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f4f4f4;
}
.container {
display: grid;
grid-template-areas:
'header header'
'sidebar content'
'footer footer';
grid-template-columns: 1fr 3fr;
grid-template-rows: auto 1fr auto;
gap: 10px;
min-height: 100vh;
padding: 10px;
}
header, footer {
background: #e14db2;
color: white;
text-align: center;
padding: 1em;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
background: #efde80;
padding: 1em;
}
.content {
grid-area: content;
background: #D4D5D9;
padding: 1em;
}
.footer {
grid-area: footer;
}
.post {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
margin-bottom: 20px;
background: white;
padding: 10px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.post img {
width: 100%;
height: auto;
border-radius: 8px;
}
@media (max-width: 768px) {
.container {
grid-template-areas:
'header'
'content'
'sidebar'
'footer';
grid-template-columns: 1fr;
}
.post {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header class="header">
<h1>Education Blog</h1>
</header>
<aside class="sidebar">
<h2>About Me</h2>
<p>Welcome to my education blog where I share insights and tips on various educational topics. Join me on this learning journey!</p>
</aside>
<main class="content">
<article class="post">
<img src="https://picsum.photos/300/200" alt="Random Image">
<div>
<h2>Understanding the Basics of HTML</h2>
<p>HTML is the building block of web development. It structures content and defines elements like headings, paragraphs, links, images, and more...</p>
</div>
</article>
<article class="post">
<img src="https://picsum.photos/300/201" alt="Random Image">
<div>
<h2>Getting Started with CSS Grid</h2>
<p>CSS Grid Layout is a powerful tool for creating two-dimensional layouts. It allows you to design complex web pages with ease...</p>
</div>
</article>
<article class="post">
<img src="https://picsum.photos/300/202" alt="Random Image">
<div>
<h2>JavaScript for Beginners</h2>
<p>JavaScript is a versatile programming language used for web development. It allows you to add interactivity and dynamic content to your websites...</p>
</div>
</article>
</main>
<footer class="footer">
<p>© 2024 Education Blog. All rights reserved.</p>
</footer>
</div>
</body>
</html>