Free news display template

Here is a free news display template that you can use:

HTML and CSS Code:

<!DOCTYPE html>
<html>
<head>
    <title>News Display Template</title>
    <style>
        /* Global Styles */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* Header Styles */
        .header {
            background-color: #333;
            color: #fff;
            padding: 1em;
            text-align: center;
        }

        /* Article Styles */
        .article {
            margin-bottom: 2em;
            padding: 1em;
            border-bottom: 1px solid #ccc;
        }

        .article h2 {
            margin-top: 0;
        }

        /* Image Styles */
        .image {
            margin: 1em;
            border: 1px solid #ccc;
            padding: 1em;
        }

        /* Link Styles */
        a {
            text-decoration: none;
            color: #337ab7;
        }

        a:hover {
            color: #23527c;
        }
    </style>
</head>
<body>
    <!-- Header -->
    <div class="header">
        <h1>News Display Template</h1>
    </div>

    <!-- Article List -->
    <div class="article-list">
        <!-- Article 1 -->
        <div class="article">
            <h2>Article 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
            <p><a rel="nofollow" target="_blank" href="#">Read More</a></p>
        </div>

        <!-- Article 2 -->
        <div class="article">
            <h2>Article 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
            <p><a rel="nofollow" target="_blank" href="#">Read More</a></p>
        </div>

        <!-- Article 3 -->
        <div class="article">
            <h2>Article 3</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
            <p><a rel="nofollow" target="_blank" href="#">Read More</a></p>
        </div>
    </div>

    <!-- Image -->
    <div class="image">
        <img src="image.jpg" alt="Image">
    </div>
</body>
</html>

How to Use:

  1. Copy the HTML and CSS code above and paste it into a text editor or an HTML editor.
  2. Replace the image.jpg file with your own image file.
  3. Add your own article content to the .article divs.
  4. Customize the styles as needed by modifying the CSS code.
  5. Save the file with a .html extension (e.g., news-template.html) and open it in a web browser to view the template.

Features:

Note: