How to add responsive News Cards on this project

I have been trying to make a news website. It is just for practice and so far i was able to make a responsive navbar and custom scrollbar for it. However I am unable to make responsive news cards after that for some reason. I want to make responsive news cards under the h1 which includes a clickable link photo , A link heading , a small description and link to the author of the article to be shown on it. Can someone please explain me the issue and send me a solution ?

const selectElement = (element) => document.querySelector(element);

selectElement('.mobile-menu') .addEventListener('click',() => {
    selectElement('header').classList.toggle('active');
})
*,
*::before,
*::after{
  margin: 0;
  padding: 0;
}

html{
  font-size: 10px;
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

a{
  text-decoration: none;
  display: block;
}

.container{
  max-width: 98rem;
  margin: 0 auto;
  padding: 0 2.2rem;
}

header{
  position:fixed;
  top: 0px;
  z-index: 1400;
  height: 5rem;
  width: 100%;
  background-color: rgba(0,0,0,0.8);
  backdrop-filter: blur(2rem);
}

.nav-list{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -1rem;
}

.nav-list-mobile{
  display:none;
}

.nav-link{
  font-size: 1.4rem;
  color: #fff;
  padding: 0 1rem;
  transition: .3s;
}

.nav-link:hover{
  color: greenyellow;
}

.nav-link-logo{
  width: 1.6rem;
  height: 5rem;
  background: url("apple.svg") center no-repeat;
  background-size: 22px;
}

.nav-link-search{
  width: 1.6rem;
  height: 5rem;
  background: url("magnifying-glass.svg") center no-repeat;
}

.nav-link-bag{
  width: 1.6rem;
  height: 4.4rem;
  background: url("magnifying-glass.svg") center no-repeat;
}

@media screen and (max-width: 767px){
  header{
    height: 4.8rem;
    transition: background .36s cubic-bezier(0.32,0.08,0.24, 1),;
                height: .56s cubic-bezier(0.32,0.08,0.24, 1);
  }

  header .container{
    padding: 0;
  }

  .nav-list{
    margin-top: 0;
  }

  .nav-list-mobile{
    display: flex;
  }

  .nav-item{
    width: 4.8rem;
    height: 4.8rem;
    display: flex;
    justify-content: center;
  }

  .nav-item-hidden{
    display: none;
  }

  .mobile-menu{
    position: relative;
    z-index: 1500;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .line{
    position: absolute;
    width: 1.7rem;
    height: 1px;
    background-color: #fff;
    transition: margin-top .3192s cubic-bezier(0.04,0.04,0.12,0.96);
  }

  .line-top{
    margin-top: -1rem;
    margin-left: 10px;
  }

  .line-mid{
    margin-top: 0rem;
    margin-left: 20px;
  }
  .line-bottom{
    margin-top: 1rem;
    margin-left: 10px;
  }

  .active .line-top{
    margin-top: 0;
    transform: rotate(45deg);
    transition: transform .3192s .1s cubic-bezier(0.04,0.04,0.12,0.96) ;
  }

  .active .line-mid{
    display: none;
  }

  .active .line-bottom{
    margin-top: 0;
    transform: rotate(-45deg);
    transition: transform .3192s .1s cubic-bezier(0.04,0.04,0.12,0.96) ;
  }

  header.active{
    height: 100%;
    background-color: #000;
    transition: .3s;
  }

  .nav-link-logo{
    width: 1.8rem;
    height: 4.8rem;
    position: relative;
    z-index: 1500;
  }

  .nav-link-bag{
    width: 100%;
    height: 4.8rem;
  }

  .nav{
    position: relative;
  }

  .nav-link{
    font-size:1.7rem;
    padding: 0;
    margin: auto 0;
  }

  .nav-list-larger{
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    display: block;
    padding: 10.5rem 5rem;
    z-index: 1000;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s;
  }

  .active .nav-list-larger{
    width: 100%;
    height: 100vh;
    opacity: 1;
    visibility: visible;
  }

  .active .nav-link-bag{
    opacity: 0;
    transition: opacity .3s;
  }

  .nav-list-larger .nav-item{
    width: 100%;
    justify-content: center;
  }

  .nav-list-larger .nav-item:nth-child(9){
    border-bottom: none;
}

.active .nav-list-larger .nav-item{
  animation: fadeIn 1s ease-in;

}

@keyframes fadeIn {
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}
}

h1{
  margin-top: 5rem;
  margin-left: 20px;
  font-weight: bolder;
  font-size: 24px;
  
}
::-webkit-scrollbar{
  width: 17px;
}
::-webkit-scrollbar-track{
  border: 7px solid  rgba(0,0,0,0.8);
  box-shadow: inset 0 0 2.5px 2px rgba(0,0,0,0.8);
}
::-webkit-scrollbar-thumb{
  background: linear-gradient(45deg,#06dee1,greenyellow);
  border-radius: 15px;
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>News</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <nav class="nav">
                <ul class="nav-list nav-list-mobile">
                    <li class="nav-item">
                        <div class="mobile-menu">
                            <span class="line line-top"></span>
                            <span class="line line-mid"></span>
                            <span class="line line-bottom"></span>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a href="index.html" class="nav-link nav-link-logo"></a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link nav-link-bag"></a>
                    </li>
                </ul>
                <!-- /.nav-list nav-list-mobile -->
                <ul class="nav-list nav-list-larger">
                    <li class="nav-item nav-item-hidden">
                        <a href="index.html" class="nav-link nav-link-logo"></a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Tech</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Science</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Travel</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">How To ?</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">More</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link nav-link-search"></a>
                    </li>
                    <li class="nav-item nav-item-hidden">
                        <a href="#" class="nav-link nav-link-bag"></a>
                    </li>

                </ul>
                                <!-- /.nav-list nav-list-larger -->
            </nav>
        </div>
    </header>
      
    
<h1>Trending Now</h1>
    
<script src="main.js"></script>
</body>
</html>

2,183 thoughts on “How to add responsive News Cards on this project”

  1. Pingback: cialis 47
  2. Pingback: viagra amazon
  3. [url=http://cialisqtab.com/]how to buy cialis online usa[/url] [url=http://pharmacyrite.com/]safe canadian pharmacies[/url] [url=http://cleocinmed.com/]clindamycin cream price in india[/url]

    Reply
  4. Pingback: viagra savings
  5. [url=http://sfmeds.com/]furosemide 80 mg buy online[/url] [url=http://999tabs.com/]prednisone 1 mg tablet[/url] [url=http://sildenafiledtab.com/]sildenafil 50mg[/url] [url=http://viagraut.com/]where can i order real viagra[/url]

    Reply
  6. Pingback: cocaine and viagra
  7. [url=https://buycialismed.com/]20 cialis[/url] [url=https://sildenafilhot.com/]sildenafil 50 mg tablet price in india[/url] [url=https://cialisxorder.com/]generic tadalafil[/url] [url=https://genericcialisnorx.com/]cialis prescription online[/url] [url=https://tadalafilcost.com/]tadalafil generic cialis[/url] [url=https://cialisqtab.com/]cialis 5mg tablets australia[/url] [url=https://ivermectinmt.com/]ivermectin 3mg[/url] [url=https://ivermectinnew.com/]ivermectin 3mg tablet[/url] [url=https://icviagra.com/]buy viagra for female[/url] [url=https://chpills.com/]cost of accutane[/url]

    Reply
  8. Pingback: viagra europe
  9. [url=https://extratadalafil.com/]tadalafil 5mg cost in canada[/url] [url=https://icviagra.com/]viagra 25mg price in india[/url] [url=https://viagraif.com/]price for viagra[/url] [url=https://buyrealcialis.com/]no prescription cialis generic[/url] [url=https://sildenafilatab.com/]sildenafil daily[/url]

    Reply
  10. Pingback: levitra 10mg price
  11. Pingback: metformin and pcos
  12. Pingback: liquid cialis
  13. Pingback: amoxicillin 875 mg
  14. Pingback: lasix tablets
  15. [url=https://pharmacyzeus.com/]no prescription required pharmacy[/url] [url=https://ordertadalafilpills.com/]cialis generic online pharmacy[/url] [url=https://accmeds.com/]motilium medication[/url] [url=https://bestviagrapills.com/]viagra 100 mg for sale[/url] [url=https://oxlpharm.com/]quineprox 75mg[/url]

    Reply
  16. Pingback: xenical nz
  17. Pingback: finasteride cost
  18. Pingback: domperidone mims
  19. Pingback: nolvadex price
  20. Pingback: tizanidine hcl 2
  21. Pingback: tadalafil citrate
  22. Pingback: cialis half life
  23. Pingback: cipla tadalafil
  24. Pingback: cialis 20mg usa
  25. My brother recommended I would possibly like this website.
    He was entirely right. This submit truly made my day.
    You cann’t imagine simply how so much time I had spent for this info!

    Thank you!

    Reply
  26. Pingback: sildenafil 20mg
  27. Pingback: what dose viagra
  28. Hi, There’s no doubt that your website might be having internet browser compatibility problems.

    Whenever I look at your website in Safari, it looks fine
    however when opening in IE, it’s got some overlapping issues.
    I just wanted to give you a quick heads up! Other than that, excellent blog!

    Reply