Web Editor by 101Computing.net

HTML

<main class="shop-container">
  <div class="shop-header">
    <h1>Bonsai Haven</h1>
    <p>Welcome to Bonsai Haven, where tranquility meets nature's artistry. Discover our exquisite collection of bonsai trees and bring serenity to your space.</p>
  </div>

<div class="categories">
    <button class="category active" data-category="all">All Bonzai</button>
    <button class="category" data-category="pine">Pine Trees</button>
    <button class="category" data-category="deciduous">Deciduous Trees</button>
    <button class="category" data-category="evergreen">Evergreens</button>
  </div>

<div class="products-grid">
    <div class="product-card" data-categories="pine">
      <div class="product-image">
        <img src="https://www.101computing.net/wp/wp-content/uploads/bonsai-pine-tree-1.jpg" alt="" />
      </div>
      <div class="product-details">
        <h2 class="product-name">Pine Tree Bonzai</h2>
        <p class="product-description">With its delicate needles and rugged bark, this evergreen beauty exudes tranquility and timeless charm.</p>
        <div class="product-footer">
          <span class="product-price">£450</span>
          <button class="add-to-cart">Add to Cart</button>
        </div>
      </div>
    </div>

<div class="product-card" data-categories="deciduous">
      <div class="product-image">
        <img src="https://www.101computing.net/wp/wp-content/uploads/bonsai-maple.jpg" alt="" />
      </div>
      <div class="product-details">
        <h2 class="product-name">Maple Tree</h2>
        <p class="product-description">This captivating tree offers a splash of seasonal colour, bringing the beauty of autumn to your home all year-round.</p>
        <div class="product-footer">
          <span class="product-price">£590</span>
          <button class="add-to-cart">Add to Cart</button>
        </div>
      </div>
    </div>
    
    
    <div class="product-card" data-categories="pine">
      <div class="product-image">
        <img src="https://www.101computing.net/wp/wp-content/uploads/bonsai-pine-tree-4.jpg" alt="" />
      </div>
      <div class="product-details">
        <h2 class="product-name">Cypress Tree</h2>
        <p class="product-description">Perfect for both beginners and seasoned enthusiasts, it brings a touch of nature's serenity to any space.</p>
        <div class="product-footer">
          <span class="product-price">£430</span>
          <button class="add-to-cart">Add to Cart</button>
        </div>
      </div>
    </div>

<div class="product-card" data-categories="pine">
      <div class="product-image">
        <img src="https://www.101computing.net/wp/wp-content/uploads/bonsai-pine-tree-5.jpg" alt="" />
      </div>
      <div class="product-details">
        <h2 class="product-name">Ornamental Pine Tree</h2>
        <p class="product-description">With its lush green needles and sturdy trunk, it brings a sense of calm and enduring beauty to any setting.</p>
        <div class="product-footer">
          <span class="product-price">£850</span>
          <button class="add-to-cart">Add to Cart</button>
        </div>
      </div>
    </div>

<div class="product-card" data-categories="pine">
      <div class="product-image">
        <img src="https://www.101computing.net/wp/wp-content/uploads/bonsai-pine-tree-6.jpg" alt="" />
      </div>
      <div class="product-details">
        <h2 class="product-name">Pine Tree</h2>
        <p class="product-description">A hardy bonsai pine tree, known for its resilience and enduring beauty. This robust miniature tree is perfect for both beginners and experienced growers.</p>
        <div class="product-footer">
          <span class="product-price">£400</span>
          <button class="add-to-cart">Add to Cart</button>
        </div>
      </div>
    </div>

<div class="product-card" data-categories="deciduous">
      <div class="product-image">
        <img src="https://www.101computing.net/wp/wp-content/uploads/bonsai-deciduous-tree-3.jpg" alt="" />
      </div>
      <div class="product-details">
        <h2 class="product-name">Azalea Tree</h2>
        <p class="product-description">A stunning azalea bonsai adorned with vibrant pink flowers. This majestic miniature tree brings a burst of colour and tranquility to any space.</p>
        <div class="product-footer">
          <span class="product-price">£550</span>
          <button class="add-to-cart">Add to Cart</button>
        </div>
      </div>
    </div>
    
     <div class="product-card" data-categories="evergreen">
      <div class="product-image">
        <img src="https://www.101computing.net/wp/wp-content/uploads/bonsai-red-leaves.jpg" alt="" />
      </div>
      <div class="product-details">
        <h2 class="product-name">Photinia Bonsai</h2>
        <p class="product-description">A striking bonsai evergreen tree with vibrant red leaves, offering a bold splash of colour all year-round.</p>
        <div class="product-footer">
          <span class="product-price">£230</span>
          <button class="add-to-cart">Add to Cart</button>
        </div>
      </div>
    </div>
    
     <div class="product-card" data-categories="evergreen">
      <div class="product-image">
        <img src="https://www.101computing.net/wp/wp-content/uploads/bonsai-evergreen-tree-3.jpg" alt="" />
      </div>
      <div class="product-details">
        <h2 class="product-name">Pyracantha Bonsai</h2>
        <p class="product-description">A majestic bonsai with a wide, sturdy trunk and lush green foliage exuding strength and tranquility. A stunning centerpiece for any collection.</p>
        <div class="product-footer">
          <span class="product-price">£790</span>
          <button class="add-to-cart">Add to Cart</button>
        </div>
      </div>
    </div>
    
     <div class="product-card" data-categories="evergreen">
      <div class="product-image">
        <img src="https://www.101computing.net/wp/wp-content/uploads/bonsai-evergreen-2.jpg" alt="" />
      </div>
      <div class="product-details">
        <h2 class="product-name">Ficus Bonsai</h2>
        <p class="product-description">An almost indestructible plant with glossy leaves. This indoor bonsai tolerates low light conditions and irregular watering.</p>
        <div class="product-footer">
          <span class="product-price">£65</span>
          <button class="add-to-cart">Add to Cart</button>
        </div>
      </div>
    </div>
    
    
     <div class="product-card" data-categories="deciduous">
      <div class="product-image">
        <img src="https://www.101computing.net/wp/wp-content/uploads/bonsai-elm-tree.jpg" alt="" />
      </div>
      <div class="product-details">
        <h2 class="product-name">Elm Tree</h2>
        <p class="product-description">A majestic deciduous bonsai, boasting a solid trunk and striking silver bark. This elegant miniature tree brings a sense of grandeur and tranquility to any setting.</p>
        <div class="product-footer">
          <span class="product-price">£670</span>
          <button class="add-to-cart">Add to Cart</button>
        </div>
      </div>
    </div>
        
    
  <div class="product-card" data-categories="deciduous">
      <div class="product-image">
        <img src="https://www.101computing.net/wp/wp-content/uploads/bonsai-japanese-maple.jpg" alt="" />
      </div>
      <div class="product-details">
        <h2 class="product-name">Japanese Maple Tree</h2>
        <p class="product-description">With its stunning foliage and graceful branches, this enchanting tree brings a burst of seasonal color, offering a glimpse of autumn's beauty all year round. </p>
        <div class="product-footer">
          <span class="product-price">£820</span>
          <button class="add-to-cart">Add to Cart</button>
        </div>
      </div>
    </div>   
    
    
  </div>
</main>

CSS

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  padding: 30px;
}

.shop-container {
}

.shop-header {

}

.shop-header h1 {
}

.shop-header p {
}

.categories {
}

.category {
    transition: all 0.3s ease;
}

.category:hover, .category.active {
  background: #8dc26f;
  border-color: #8dc26f;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}

.product-card {
  overflow: hidden;
}

.product-image {
  height: 300px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.product-details {
  display: flex;
  flex-direction: column;
  height: 250px;
}

.product-name {

}

.product-description {
  flex-grow: 1;
}

.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.product-price {

}

.add-to-cart {
  cursor: pointer;
  transition: background 0.3s ease;
}

.add-to-cart:hover {

}

@media (max-width: 768px) {
  .shop-header h1 {
    font-size: 2.5rem;
  }

.products-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
  }

.product-image {
    height: 250px;
  }
}

.product-card[data-hidden="true"] {
  display: none;
}

JavaScript