News portal website template

Here is a basic template for a news portal website:

HTML Structure

<!DOCTYPE html>
<html>
<head>
    <title>News Portal</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>News Portal</h1>
    </header>
    <main>
        <section id="featured">
            <h2>Featured News</h2>
            <ul>
                <li>
                    <h3>News Title</h3>
                    <p>News summary</p>
                    <a rel="nofollow" target="_blank" href="#">Read more</a>
                </li>
                <li>
                    <h3>News Title</h3>
                    <p>News summary</p>
                    <a rel="nofollow" target="_blank" href="#">Read more</a>
                </li>
                <!-- Add more featured news items -->
            </ul>
        </section>
        <section id="latest">
            <h2>Latest News</h2>
            <ul>
                <li>
                    <h3>News Title</h3>
                    <p>News summary</p>
                    <a rel="nofollow" target="_blank" href="#">Read more</a>
                </li>
                <li>
                    <h3>News Title</h3>
                    <p>News summary</p>
                    <a rel="nofollow" target="_blank" href="#">Read more</a>
                </li>
                <!-- Add more latest news items -->
            </ul>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 News Portal</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;
}

section {
    background-color: #f7f7f7;
    padding: 2em;
    margin-bottom: 20px;
    border: 1px solid #ddd;
}

h2 {
    margin-top: 0;
}

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

li {
    margin-bottom: 10px;
}

a {
    text-decoration: none;
    color: #337ab7;
}

a:hover {
    color: #23527c;
}

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

JavaScript

// Add JavaScript code here to enhance the website's functionality

This template provides a basic structure for a news portal website, including a header, navigation menu, main content area, and footer. The main content area is divided into two sections: featured news and latest news. Each news item is represented by a list item with a headline, summary, and a link to read more.

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

Note: This is just a basic template, and you will need to add more content, styles, and functionality to create a fully functional news portal website.

NewsBreakers

News portal website template