News html template free

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>Breaking News</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
        </section>
        <section class="news-grid">
            <h2>Latest News</h2>
            <ul>
                <li>
                    <img src="image1.jpg" alt="News Image 1">
                    <h3>News Title 1</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </li>
                <li>
                    <img src="image2.jpg" alt="News Image 2">
                    <h3>News Title 2</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </li>
                <li>
                    <img src="image3.jpg" alt="News Image 3">
                    <h3>News Title 3</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </li>
            </ul>
        </section>
        <section class="news-article">
            <h2>Featured Article</h2>
            <img src="image4.jpg" alt="News Image 4">
            <h3>Article Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 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-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

.news-grid li {
    background-color: #f7f7f7;
    padding: 1em;
    border: 1px solid #ddd;
}

.news-grid img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
}

.news-article {
    padding: 2em;
}

.news-article img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
}

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 grid section, and a featured article 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 likely need to add more functionality and features to create a fully functional news website.

NewsBreakers

News html template free