change.ejs

<div class="guideline">
  <div class="title">
    <h2>Popular Categories</h2>
    <a href="">View all catecories<i class="fa-solid fa-arrow-right"></i></a>
  </div>
  <div class="categories">
    <nav class="slidemenu">

      <!-- Item 1 -->
      <input type="radio" name="slideItem" id="slide-item-1" class="slide-toggle" checked/>
      <label for="slide-item-1" class = "slide-item-1"><button class = "icon"><i class="fa-solid fa-globe"></i></i></button><span>All</span></label>
      
      <!-- Item 2 -->
      <input type="radio" name="slideItem" id="slide-item-2" class="slide-toggle"/>
      <label for="slide-item-2" class = "slide-item-2"><button class = "icon"><i class="fa-brands fa-java"></i></button><span>Java</span></label>
      
      <!-- Item 3 -->
      <input type="radio" name="slideItem" id="slide-item-3" class="slide-toggle"/>
      <label for="slide-item-3" class = "slide-item-3"><button class = "icon"><i class="fa-solid fa-c"></i></button><span>C</span></label>
      
      <!-- Item 4 -->
      <input type="radio" name="slideItem" id="slide-item-4" class="slide-toggle"/>
      <label for="slide-item-4" class = "slide-item-4"><button class = "icon"><i class="fa-brands fa-js"></i></button><span>JS</span></label>
      <input type="radio" name="slideItem" id="slide-item-5" class="slide-toggle"/>
      <label for="slide-item-5" class = "slide-item-5"><button class = "icon"><i class="fa-brands fa-python"></i></button><span>PY</span></label>
      
      <div class="clear"></div>
      
      <!-- Bar -->
      <div class="slider">
        <div class="bar"></div>
      </div>
      
    </nav>
  </div>
  <div class="items"class="scrollbar" id="style-7" >
    <ul>
      <li class = >
        <div class="topic">
          <a href=></a>
        </div>
        <div class="explanation">
          <p></p>
        </div>
        <div class="tags">
          <p></p>
        </div>
      </li>
    </ul>
  </div>
</div>