index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>News Website</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
        <div class="main-nav flex">
            <a href="#">
                <img src="logo-no-background.png" alt="Company logo" class="logo">
            </a>
            <div class="nav-links">
                <ul class="flex">
                    <li class="hover-link nav-item" id="ipl" onclick="onNavItemClick('ipl')">IPL</li>
                    <li class="hover-link nav-item" id="finance" onclick="onNavItemClick('finance')">Finance</li>
                    <li class="hover-link nav-item" id="politics" onclick="onNavItemClick('politics')">Politics</li>
                </ul>
            </div>
            <div class="search-bar flex">
                <input type="text" id="search-text" class="news-input" placeholder="e.g. Science">
                <button id="search-btn" type="button" class="btn btn-primary btn-sm">Search</button>

            </div>
        </div>
    </nav>

    <main>
        <div class="cards-container flex" id="cards-container">
           
            
        </div>
    </main>

    <template id="template-news-card"> 
        <div class="card">
            <div class="card-header">
                <img src="https" alt="" id="news-img">
            </div>
            <div class="card-content">
                <h3 class="news-title" id="news-title">This is title</h3>
                <h6 class="news-source" id="news-source">End Gate 26/08/2023</h6>
                <p class="news-desc" id="news-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo ut, est eum culpa nostrum blanditiis corrupti fuga delectus, voluptates vitae dolore quisquam recusandae quaerat nisi. Doloribus sint eaque omnis at.</p>
            </div>
        </div>
       
       
    </template>


    <script src="app.js"></script>
</body>
</html>