Flat news blogger template

Here is a basic template for a flat news blogger template:

HTML Structure

<!DOCTYPE html>
<html>
<head>
    <title>Flat News Blogger Template</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>
        <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>
        <h1>Flat News</h1>
    </header>
    <main>
        <section class="news">
            <h2>Latest News</h2>
            <ul>
                <li>
                    <h3>News Title</h3>
                    <p>News summary</p>
                    <a rel="nofollow" target="_blank" href="#" class="read-more">Read More</a>
                </li>
                <li>
                    <h3>News Title</h3>
                    <p>News summary</p>
                    <a rel="nofollow" target="_blank" href="#" class="read-more">Read More</a>
                </li>
                <!-- Add more news items here -->
            </ul>
        </section>
        <section class="categories">
            <h2>Categories</h2>
            <ul>
                <li><a rel="nofollow" target="_blank" href="#">Category 1</a></li>
                <li><a rel="nofollow" target="_blank" href="#">Category 2</a></li>
                <li><a rel="nofollow" target="_blank" href="#">Category 3</a></li>
                <!-- Add more categories here -->
            </ul>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 Flat News</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

CSS Styles

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

nav li {
    display: inline-block;
    margin-right: 20px;
}

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

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

.news {
    margin-top: 2em;
}

.news h2 {
    margin-top: 0;
}

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

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

.news h3 {
    margin-top: 0;
}

.news p {
    margin-bottom: 10px;
}

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

.read-more:hover {
    background-color: #444;
}

.categories {
    margin-top: 2em;
}

.categories h2 {
    margin-top: 0;
}

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

JavaScript

// Add JavaScript code here

This template includes a basic structure for a news website with a header, navigation menu, main content area, and footer. The main content area is divided into two sections: "Latest News" and "Categories". The "Latest News" section displays a list of news items with titles, summaries, and read more links. The "Categories" section displays a list of categories with links to category pages.

You can customize the template by adding your own content, images, and styles. You can also add interactivity to the template using JavaScript.

NewsBreakers

Flat news blogger template