News blog html template

Here is a basic HTML template for a news blog:

<!DOCTYPE html>
<html>
<head>
    <title>News Blog</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>News Blog</h1>
        <nav>
            <ul>
                <li><a rel="nofollow" target="_blank" href="#">Home</a></li>
                <li><a rel="nofollow" target="_blank" href="#">About</a></li>
                <li><a rel="nofollow" target="_blank" href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="news-list">
            <h2>Latest News</h2>
            <ul>
                <li>
                    <h3><a rel="nofollow" target="_blank" href="#">News Article 1</a></h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
                    <p><a rel="nofollow" target="_blank" href="#">Read More</a></p>
                </li>
                <li>
                    <h3><a rel="nofollow" target="_blank" href="#">News Article 2</a></h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
                    <p><a rel="nofollow" target="_blank" href="#">Read More</a></p>
                </li>
                <!-- Add more news articles here -->
            </ul>
        </section>
        <section class="featured-article">
            <h2>Featured Article</h2>
            <h3><a rel="nofollow" target="_blank" href="#">Featured Article Title</a></h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
            <p><a rel="nofollow" target="_blank" href="#">Read More</a></p>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 News Blog</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

And here is an example of what the CSS file (styles.css) could look like:

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

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

header h1 {
  font-size: 2em;
  margin: 0;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

nav li {
  margin-right: 20px;
}

nav a {
  color: #fff;
  text-decoration: none;
}

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

.news-list {
  margin-bottom: 2em;
}

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

.news-list li {
  margin-bottom: 1em;
}

.news-list h3 {
  font-size: 1.5em;
  margin-top: 0;
}

.news-list p {
  font-size: 1em;
  margin-bottom: 0.5em;
}

.featured-article {
  margin-top: 2em;
}

.featured-article h3 {
  font-size: 1.5em;
  margin-top: 0;
}

.featured-article p {
  font-size: 1em;
  margin-bottom: 0.5em;
}

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

This is just a basic template, and you can customize it to fit your needs. You'll also need to add JavaScript code to make the navigation menu work, as well as any other interactive elements you want to include.

NewsBreakers

News blog html template