Github html template news feed

Here is a basic HTML template for a news feed on GitHub Pages:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>News Feed</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>News Feed</h1>
  </header>
  <main>
    <section id="news-feed">
      <h2>Latest News</h2>
      <ul>
        <!-- News items will be inserted here -->
      </ul>
    </section>
  </main>
  <footer>
    <p>&copy; 2023 News Feed</p>
  </footer>
  <script src="script.js"></script>
</body>
</html>

styles.css

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: #fff;
  padding: 1em;
  text-align: center;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2em;
}

#news-feed {
  margin-top: 2em;
}

#news-feed h2 {
  margin-top: 0;
}

#news-feed ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

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

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

footer {
  background-color: #333;
  color: #fff;
  padding: 1em;
  text-align: center;
  clear: both;
}

script.js

// This script will be used to fetch and render the news feed data
// For demonstration purposes, we'll use a simple array of news items
const newsItems = [
  {
    title: "News Item 1",
    description: "This is the description of news item 1",
    date: "2023-02-20"
  },
  {
    title: "News Item 2",
    description: "This is the description of news item 2",
    date: "2023-02-22"
  },
  {
    title: "News Item 3",
    description: "This is the description of news item 3",
    date: "2023-02-25"
  }
];

// Function to render the news feed
function renderNewsFeed() {
  const newsFeedElement = document.getElementById("news-feed");
  newsFeedElement.innerHTML = "";

  newsItems.forEach((item) => {
    const liElement = document.createElement("li");
    liElement.innerHTML = `
      <h3>${item.title}</h3>
      <p>${item.description}</p>
      <p>${item.date}</p>
    `;
    newsFeedElement.appendChild(liElement);
  });
}

// Call the renderNewsFeed function to render the news feed
renderNewsFeed();

This template uses HTML, CSS, and JavaScript to create a basic news feed layout. The script.js file uses a simple array of news items to demonstrate how to render the news feed data. In a real-world scenario, you would replace this array with a data source, such as a JSON file or an API.

To use this template on GitHub Pages, create a new repository and add the index.html, styles.css, and script.js files to it. Then, configure your GitHub Pages settings to use the repository as the source for your site. Finally, update the script.js file to fetch and render your actual news feed data.

NewsBreakers

Github html template news feed