Free news blog html template

Here is a basic HTML template for a free news blog:

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 Blog</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="featured">
            <h1>Featured Article</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
            <a rel="nofollow" target="_blank" href="#" class="read-more">Read More</a>
        </section>
        <section class="articles">
            <h2>Latest Articles</h2>
            <ul>
                <li>
                    <h3><a rel="nofollow" target="_blank" href="#">Article Title</a></h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
                </li>
                <li>
                    <h3><a rel="nofollow" target="_blank" href="#">Article Title</a></h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
                </li>
                <li>
                    <h3><a rel="nofollow" target="_blank" href="#">Article Title</a></h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
                </li>
            </ul>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 News Blog</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;
}

featured {
    background-color: #f7f7f7;
    padding: 2em;
    margin-bottom: 2em;
}

featured h1 {
    font-size: 24px;
    margin-bottom: 10px;
}

featured p {
    font-size: 16px;
    margin-bottom: 20px;
}

featured.read-more {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

articles {
    padding: 2em;
}

articles h2 {
    font-size: 18px;
    margin-bottom: 10px;
}

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

articles li {
    margin-bottom: 20px;
}

articles h3 {
    font-size: 16px;
    margin-bottom: 5px;
}

articles p {
    font-size: 14px;
    margin-bottom: 20px;
}

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 two sections: a featured article section and a list of latest articles.

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 look and feel like a real news blog.

NewsBreakers

Free news blog html template