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 App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
        <div class="main-nav container flex">
            <a href="#" class="company-logo">
                <img src="Screenshot 2023-09-21 at 09-11-02 Logo Maker Used By 2.3 Million Startups.png" alt="company's logo">
            </a>
            <div class="nav-links">
                <ul class="flex">
                    <li class="hover-link nav-items">IPL</li>
                    <li class="hover-link nav-items">Finance</li>
                    <li class="hover-link nav-items">Politics</li>

                </ul>
            </div>
            <div class="serach-bar flex">
                <input type="text" class="news-input" placeholder="e.g. Science">
                <button class="search-button">Search</button>
            </div>
        </div>
    </nav>

    <main>
        <div class="cards-container container flex" id="cards-container">
            
            
            
            
        </div>
    </main>
    <template id="template-news-card">
        <div class="card">
            <div class="card-header">
                <img src="https://via.placeholder.com/400x200" alt="news-image" id="news-img">
            </div>
            <div class="card-content">
                <h3 id="news-title">This is the title</h3>
                <h6 class="news-source" id="news-source">End Gadget 26/08/2023</h6>
                <p class="news-desc" id="news-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis dolore, laborum facere, cumque numquam atque dignissimos officia sit temporibus earum doloremque quibusdam, id veritatis? Quis exercitationem quos odio itaque vel.</p>
            </div>
        </div>
    </template>


    <script src="script.js"></script>
</body>
</html>