News feed html code

Here is an example of HTML code for a basic news feed:

<!-- News Feed Container -->
<div class="news-feed-container">
  <!-- News Feed Header -->
  <h2>Latest News</h2>

  <!-- News Feed Articles -->
  <ul class="news-feed-articles">
    <!-- Article 1 -->
    <li>
      <h3><a rel="nofollow" target="_blank" href="#">Article Title 1</a></h3>
      <p>Article summary 1</p>
      <p><span class="date">March 10, 2023</span></p>
    </li>

    <!-- Article 2 -->
    <li>
      <h3><a rel="nofollow" target="_blank" href="#">Article Title 2</a></h3>
      <p>Article summary 2</p>
      <p><span class="date">March 8, 2023</span></p>
    </li>

    <!-- Article 3 -->
    <li>
      <h3><a rel="nofollow" target="_blank" href="#">Article Title 3</a></h3>
      <p>Article summary 3</p>
      <p><span class="date">March 5, 2023</span></p>
    </li>

    <!--... -->
  </ul>

  <!-- Load More Button -->
  <button class="load-more">Load More</button>
</div>

And here is an example of CSS code to style the news feed:

/* News Feed Styles */

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

.news-feed-articles {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-feed-articles li {
  padding: 20px;
  border-bottom: 1px solid #ccc;
}

.news-feed-articles li:last-child {
  border-bottom: none;
}

.news-feed-articles h3 {
  font-weight: bold;
  margin-top: 0;
}

.news-feed-articles p {
  font-size: 16px;
  color: #666;
}

.date {
  font-size: 14px;
  color: #999;
}

.load-more {
  background-color: #4CAF50;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.load-more:hover {
  background-color: #3e8e41;
}

And here is an example of JavaScript code to load more articles:

// Load More Button Click Event
document.querySelector('.load-more').addEventListener('click', function() {
  // Load more articles
  const articles = document.querySelectorAll('.news-feed-articles li');
  const loadMoreButton = document.querySelector('.load-more');

  // Check if there are more articles to load
  if (articles.length < 10) {
    // No more articles to load
    loadMoreButton.style.display = 'none';
  } else {
    // Load more articles
    const newArticles = [];
    for (let i = 0; i < 5; i++) {
      const article = document.createElement('li');
      article.innerHTML = `
        <h3><a rel="nofollow" target="_blank" href="#">Article Title</a></h3>
        <p>Article summary</p>
        <p><span class="date">March 12, 2023</span></p>
      `;
      newArticles.push(article);
    }
    articles.forEach((article) => {
      article.parentNode.appendChild(newArticles.shift());
    });
    loadMoreButton.style.display = 'block';
  }
});

This code assumes that you have a JSON file containing the news articles, and that you want to load 5 more articles at a time. You will need to modify the code to fit your specific use case.