Free news template html

Here is a basic HTML template for a news website:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>News Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <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="hero">
            <h1>Welcome to our news website!</h1>
            <p>Stay up-to-date with the latest news and updates.</p>
        </section>
        <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>
                    <time datetime="2022-01-01">January 1, 2022</time>
                </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>
                    <time datetime="2022-01-02">January 2, 2022</time>
                </li>
                <!-- Add more news articles here -->
            </ul>
        </section>
        <section class="categories">
            <h2>Categories</h2>
            <ul>
                <li><a rel="nofollow" target="_blank" href="#">Politics</a></li>
                <li><a rel="nofollow" target="_blank" href="#">Business</a></li>
                <li><a rel="nofollow" target="_blank" href="#">Sports</a></li>
                <!-- Add more categories here -->
            </ul>
        </section>
    </main>
    <footer>
        <p>&copy; 2022 News Website</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;
}

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;
}

.hero {
    background-image: linear-gradient(to bottom, #333, #555);
    background-size: 100% 300px;
    background-position: 0% 100%;
    padding: 2em;
    text-align: center;
}

.news-list {
    padding: 2em;
}

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

.news-list li {
    margin-bottom: 20px;
}

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

.news-list p {
    font-size: 16px;
    margin-bottom: 10px;
}

.news-list time {
    font-size: 14px;
    color: #666;
}

.categories {
    padding: 2em;
}

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

.categories li {
    margin-bottom: 10px;
}

.categories a {
    color: #333;
    text-decoration: none;
}

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

This template includes a basic layout with a header, navigation menu, main content area, and footer. The main content area is divided into three sections: a hero section, a news list section, and a categories section.

You can customize the template by adding your own content, images, and styles. You can also add more sections or modify the existing ones to fit your specific needs.

Note that this is just a basic template, and you will need to add your own content and styles to make it functional and visually appealing.

NewsBreakers

Free news template html