<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Read the Blog</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="blog-section">
    <h1>Read the Blog</h1>
    <div class="blog-container">
      <!-- Blog 1 -->
      <div class="blog-card">
        <img src="image1.jpg" alt="Blog Image 1">
        <h2>The Journey to Language Mastery</h2>
        <p>Explore the profound impact of language on personal and professional growth.</p>
        <a href="#" class="read-more">Read More</a>
        <p class="date">Jan 18, 2023</p>
      </div>
      
      <!-- Blog 2 -->
      <div class="blog-card">
        <img src="image2.jpg" alt="Blog Image 2">
        <h2>The Art of Language Learning: Tips for Success</h2>
        <p>Delve into the art of language learning with our in-depth tips for success.</p>
        <a href="#" class="read-more">Read More</a>
        <p class="date">Jan 18, 2023</p>
      </div>
      
      <!-- Latest Posts -->
      <div class="latest-posts">
        <h2>Latest Post</h2>
        <div class="latest-post">
          <img src="image3.jpg" alt="Latest Post 1">
          <div>
            <h3>A Harmony of Learning</h3>
            <p>Jan 18, 2023</p>
          </div>
        </div>
        <div class="latest-post">
          <img src="image4.jpg" alt="Latest Post 2">
          <div>
            <h3>Language & Career Edge</h3>
            <p>Jan 18, 2023</p>
          </div>
        </div>
        <div class="latest-post">
          <img src="image5.jpg" alt="Latest Post 3">
          <div>
            <h3>Language for All Ages</h3>
            <p>Jan 18, 2023</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
  color: #333;
}

.blog-section {
  text-align: center;
  padding: 20px;
}

.blog-section h1 {
  color: #3366ff;
  margin-bottom: 20px;
}

.blog-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
}

.blog-card {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  width: 300px;
  text-align: left;
  padding: 15px;
}

.blog-card img {
  width: 100%;
  border-radius: 8px;
}

.blog-card h2 {
  font-size: 18px;
  color: #333;
  margin: 10px 0;
}

.blog-card p {
  font-size: 14px;
  line-height: 1.5;
}

.blog-card .read-more {
  display: inline-block;
  background: #ff3366;
  color: #fff;
  padding: 5px 15px;
  border-radius: 5px;
  text-decoration: none;
  margin: 10px 0;
}

.blog-card .read-more:hover {
  background: #e62e5a;
}

.blog-card .date {
  font-size: 12px;
  color: #777;
}

.latest-posts {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 15px;
  width: 250px;
}

.latest-posts h2 {
  font-size: 20px;
  color: #ff3366;
  margin-bottom: 15px;
}

.latest-post {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.latest-post img {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  margin-right: 10px;
}

.latest-post h3 {
  font-size: 14px;
  color: #333;
  margin: 0;
}

.latest-post p {
  font-size: 12px;
  color: #777;
}
