Free responsive html news div

Here is an example of a free responsive HTML news div:

<div class="news-container">
  <div class="news-header">
    <h2>Latest News</h2>
  </div>
  <div class="news-grid">
    <div class="news-item">
      <img src="image1.jpg" alt="News Image 1">
      <h3>News Title 1</h3>
      <p>News summary 1</p>
      <a rel="nofollow" target="_blank" href="#" class="read-more">Read More</a>
    </div>
    <div class="news-item">
      <img src="image2.jpg" alt="News Image 2">
      <h3>News Title 2</h3>
      <p>News summary 2</p>
      <a rel="nofollow" target="_blank" href="#" class="read-more">Read More</a>
    </div>
    <div class="news-item">
      <img src="image3.jpg" alt="News Image 3">
      <h3>News Title 3</h3>
      <p>News summary 3</p>
      <a rel="nofollow" target="_blank" href="#" class="read-more">Read More</a>
    </div>
  </div>
</div>

And here is the CSS to make it responsive:

.news-container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.news-header {
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
}

.news-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.news-item {
  margin: 20px;
  width: calc(33.33% - 20px);
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ddd;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.news-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}

.news-item h3 {
  font-size: 18px;
  margin-top: 10px;
}

.news-item p {
  font-size: 14px;
  color: #666;
}

.read-more {
  font-size: 14px;
  color: #337ab7;
  text-decoration: none;
}

.read-more:hover {
  color: #23527c;
}

@media only screen and (max-width: 768px) {
 .news-grid {
    flex-direction: column;
  }
 .news-item {
    width: 100%;
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 480px) {
 .news-item {
    width: 100%;
  }
}

This code creates a responsive news div with a grid layout that adapts to different screen sizes. The news items are displayed in a 3-column layout on larger screens, and a single-column layout on smaller screens. You can customize the styles to fit your needs.

Note: You'll need to replace the image1.jpg, image2.jpg, and image3.jpg placeholders with your own images.