Create Responsive Product Page using HTML and CSS

Faraz

By Faraz -

Learn to build a fully responsive product page from scratch using just HTML and CSS. This guide helps you create a mobile-friendly layout that looks great on any device.

Join us on Telegram
create-responsive-product-page-using-html-and-css.webp
Read AlsoHow to Create a Ripple Effect Button Using HTML and CSS.jpgHow to Create a Ripple Effect Button Using HTML and CSS

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

A responsive product page is one of the most important parts of any e-commerce or business website. It helps showcase your product in a clean, attractive, and user-friendly way, no matter the device mobile, tablet, or desktop.

In this guide, we will create a professional looking responsive product page using only HTML and CSS, without any external frameworks like Bootstrap. This will give you more control over design and help you understand how responsiveness works at the core level.

We’ll be using flexbox and media queries for layout adjustments, and CSS techniques for image scaling, typography, and spacing to make it look great on any screen size.

Prerequisites

Before you start, make sure you have:

  • Basic knowledge of HTML & CSS (tags, classes, IDs, styling)
  • Code editor like VS Code or Sublime Text
  • Web browser for testing (Chrome, Edge, or Firefox)
  • Understanding of CSS Flexbox and Media Queries

Source Code

Step 1 (HTML Code):

We will start with HTML to create the basic structure of our product page. Here, we will define the product image, title, price, description, and buttons.

Copy the below HTML code and paste it into your index.html file.

Read AlsoScroll Animation Made Easy HTML, CSS, JS with GSAP ScrollTrigger.jpgScroll Animation Made Easy: HTML, CSS, JS with GSAP ScrollTrigger

Step 2 (CSS Code):

After HTML, we will move to CSS. This will make our product page modern, stylish, and responsive on all devices.

Copy the below CSS code and paste it into your styles.css file.

:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #93c5fd;
  --secondary: #7c3aed;
  --dark: #0f172a;
  --darker: #020617;
  --light: #f8fafc;
  --lighter: #ffffff;
  --gray: #64748b;
  --light-gray: #e2e8f0;
  --accent: #f59e0b;
  --success: #10b981;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --radius-sm: 4px;
  --radius: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
}

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

body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--light);
  color: var(--dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
    sans-serif;
  font-weight: 700;
  line-height: 1.2;
}

a {
  text-decoration: none;
}

.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Header */
header {
  background-color: var(--lighter);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.8);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.logo {
  font-size: 28px;
  font-weight: 800;
  color: var(--dark);
  text-decoration: none;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-icon {
  color: var(--primary);
}

.nav-links {
  display: flex;
  gap: 32px;
}

.nav-links a {
  text-decoration: none;
  color: var(--dark);
  font-weight: 600;
  font-size: 15px;
  transition: var(--transition);
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary);
  transition: var(--transition);
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-icon {
  font-size: 20px;
  color: var(--dark);
  transition: var(--transition);
  cursor: pointer;
}

.nav-icon:hover {
  color: var(--primary);
}

.cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: var(--primary);
  color: white;
  border-radius: var(--radius-full);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

/* Hero Section */
.hero {
  padding: 60px 0;
  background: linear-gradient(
    to bottom,
    var(--lighter) 0%,
    rgba(248, 250, 252, 0.8) 100%
  );
}

/* Product Section */
.product-section {
  padding: 80px 0;
}

.product-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}

.product-gallery {
  position: relative;
}

.main-image-container {
  background-color: var(--lighter);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 560px;
  position: relative;
  overflow: hidden;
}

.main-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: var(--transition);
  transform-style: preserve-3d;
}

.main-image:hover {
  transform: scale(1.05) rotateY(5deg);
}

.badge {
  position: absolute;
  top: 24px;
  left: 24px;
  background-color: var(--accent);
  color: var(--darker);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: var(--shadow-sm);
  z-index: 2;
}

.thumbnail-container {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

.thumbnail {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition);
  background-color: var(--lighter);
  padding: 8px;
  box-shadow: var(--shadow-sm);
}

.thumbnail:hover,
.thumbnail.active {
  border-color: var(--primary);
  box-shadow: var(--shadow);
}

/* Product Info */
.product-info {
  padding: 20px 0;
  position: sticky;
  top: 120px;
  align-self: start;
}

.brand {
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 14px;
  display: inline-block;
  background-color: var(--primary-light);
  padding: 4px 12px;
  border-radius: var(--radius-full);
}

.product-title {
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 16px;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.product-subtitle {
  color: var(--gray);
  font-size: 18px;
  margin-bottom: 24px;
  font-weight: 500;
}

.product-price-container {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.current-price {
  font-size: 32px;
  font-weight: 800;
  color: var(--dark);
}

.original-price {
  font-size: 20px;
  color: var(--gray);
  text-decoration: line-through;
}

.discount {
  background-color: #fee2e2;
  color: #dc2626;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 700;
}

.product-description {
  color: var(--gray);
  margin-bottom: 32px;
  font-size: 16px;
  line-height: 1.7;
}

.divider {
  height: 1px;
  background-color: var(--light-gray);
  margin: 32px 0;
}

.features {
  margin-bottom: 32px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.feature-icon {
  color: var(--success);
  font-size: 18px;
}

.feature-text {
  font-weight: 500;
}

/* Color Options */
.option-section {
  margin-bottom: 32px;
}

.option-title {
  font-weight: 700;
  margin-bottom: 16px;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.option-title i {
  color: var(--primary);
}

.colors {
  display: flex;
  gap: 12px;
}

.color {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition);
  position: relative;
}

.color::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 1px solid var(--light-gray);
  border-radius: var(--radius-full);
  opacity: 0;
  transition: var(--transition);
}

.color:hover::after,
.color.active::after {
  opacity: 1;
}

.color:hover,
.color.active {
  transform: translateY(-2px);
}

.color.active {
  border-color: var(--lighter);
  box-shadow: var(--shadow);
}

.color-1 {
  background-color: #0f172a;
}
.color-2 {
  background-color: #2563eb;
}
.color-3 {
  background-color: #dc2626;
}
.color-4 {
  background-color: #64748b;
}

/* Quantity */
.quantity-selector {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.quantity {
  display: flex;
  align-items: center;
  border: 1px solid var(--light-gray);
  border-radius: var(--radius);
  overflow: hidden;
}

.quantity button {
  background: none;
  border: none;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 16px;
  color: var(--gray);
  background-color: var(--light);
  transition: var(--transition);
}

.quantity button:hover {
  background-color: var(--light-gray);
  color: var(--dark);
}

.quantity input {
  width: 60px;
  text-align: center;
  border: none;
  font-size: 16px;
  font-weight: 600;
  background-color: var(--lighter);
}

/* Buttons */
.action-buttons {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.btn {
  padding: 18px 32px;
  border-radius: var(--radius);
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-primary {
  font-family: inherit;
  background-color: var(--primary);
  color: var(--lighter);
  border: none;
  flex: 1;
  box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
}

.btn-primary:hover {
  background-color: var(--primary-dark);
  box-shadow: 0 10px 15px rgba(37, 99, 235, 0.3);
}

.btn-secondary {
  font-family: inherit;
  background-color: var(--lighter);
  color: var(--primary);
  border: 1px solid var(--light-gray);
  flex: 1;
}

.btn-secondary:hover {
  background-color: var(--light);
  box-shadow: var(--shadow-sm);
}

.wishlist-btn {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--lighter);
  border: 1px solid var(--light-gray);
  color: var(--gray);
  cursor: pointer;
  transition: var(--transition);
}

.wishlist-btn:hover {
  color: #dc2626;
  border-color: #fee2e2;
  background-color: #fef2f2;
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.delivery-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background-color: var(--light);
  border-radius: var(--radius);
  margin-bottom: 32px;
}

.delivery-icon {
  font-size: 20px;
  color: var(--success);
}

.delivery-text {
  font-size: 14px;
}

.delivery-text strong {
  color: var(--dark);
  font-weight: 600;
}

/* Product Details */
.product-details {
  margin-top: 80px;
  background-color: var(--lighter);
  border-radius: var(--radius-xl);
  padding: 60px;
  box-shadow: var(--shadow-sm);
}

.details-tabs {
  display: flex;
  border-bottom: 1px solid var(--light-gray);
  margin-bottom: 40px;
}

.tab {
  padding: 16px 32px;
  cursor: pointer;
  font-weight: 700;
  position: relative;
  color: var(--gray);
  transition: var(--transition);
}

.tab:hover {
  color: var(--dark);
}

.tab.active {
  color: var(--primary);
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--primary);
}

.tab-content {
  display: none;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-content.active {
  display: block;
}

.specs-table {
  width: 100%;
  border-collapse: collapse;
}

.specs-table tr:nth-child(even) {
  background-color: var(--light);
}

.specs-table td {
  padding: 16px;
  border-bottom: 1px solid var(--light-gray);
  font-size: 15px;
}

.specs-table td:first-child {
  font-weight: 600;
  width: 30%;
  color: var(--dark);
}

/* Reviews */
.review {
  padding: 24px 0;
  border-bottom: 1px solid var(--light-gray);
}

.review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.review-author {
  font-weight: 700;
  color: var(--dark);
}

.review-date {
  color: var(--gray);
  font-size: 14px;
}

.rating {
  color: #f59e0b;
  margin-bottom: 8px;
  font-size: 16px;
}

.review-content {
  color: var(--gray);
  line-height: 1.7;
}

/* Related Products */
.related-products {
  margin-top: 80px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
}

.section-title {
  font-size: 32px;
  font-weight: 800;
  position: relative;
  padding-bottom: 16px;
  letter-spacing: -0.5px;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 4px;
  background: linear-gradient(to right, var(--primary), var(--secondary));
  border-radius: 2px;
}

.view-all {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
}

.view-all:hover {
  gap: 12px;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.product-card {
  background-color: var(--lighter);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  position: relative;
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.product-card-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background-color: var(--primary);
  color: var(--lighter);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  z-index: 2;
}

.product-card-image-container {
  height: 240px;
  background-color: var(--light);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  position: relative;
  overflow: hidden;
}

.product-card-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: var(--transition);
}

.product-card:hover .product-card-image {
  transform: scale(1.05);
}

.product-card-body {
  padding: 24px;
}

.product-card-title {
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 16px;
  color: var(--dark);
}

.product-card-price {
  font-weight: 800;
  color: var(--primary);
  font-size: 18px;
}

/* Newsletter */
.newsletter {
  margin-top: 80px;
  background: linear-gradient(to right, var(--primary), var(--secondary));
  border-radius: var(--radius-xl);
  padding: 60px;
  color: var(--lighter);
  position: relative;
  overflow: hidden;
}

.newsletter::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  border-radius: var(--radius-full);
}

.newsletter-content {
  max-width: 600px;
  position: relative;
  z-index: 2;
}

.newsletter-title {
  font-size: 32px;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.newsletter-text {
  margin-bottom: 32px;
  opacity: 0.9;
}

.newsletter-form {
  display: flex;
  gap: 16px;
}

.newsletter-input {
  font-family: inherit;
  flex: 1;
  padding: 16px 24px;
  border-radius: var(--radius);
  border: none;
  font-size: 16px;
  background-color: rgba(255, 255, 255, 0.9);
  transition: var(--transition);
}

.newsletter-input:focus {
  outline: none;
  background-color: var(--lighter);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.newsletter-btn {
  font-family: inherit;
  background-color: var(--darker);
  color: var(--lighter);
  border: none;
  padding: 16px 32px;
  border-radius: var(--radius);
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.newsletter-btn:hover {
  background-color: black;
  transform: translateY(-2px);
}

/* Footer */
footer {
  background-color: var(--darker);
  color: var(--light);
  padding: 80px 0 40px;
  margin-top: 120px;
  position: relative;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 60px;
  margin-bottom: 80px;
}

.footer-column h3 {
  font-size: 18px;
  margin-bottom: 24px;
  position: relative;
  padding-bottom: 12px;
  color: var(--lighter);
}

.footer-column h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(to right, var(--primary), var(--secondary));
}

.footer-logo {
  font-size: 24px;
  font-weight: 800;
  color: var(--lighter);
  margin-bottom: 24px;
  display: inline-block;
}

.footer-text {
  color: var(--gray);
  margin-bottom: 24px;
  line-height: 1.7;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: var(--gray);
  text-decoration: none;
  transition: var(--transition);
  display: inline-block;
}

.footer-links a:hover {
  color: var(--lighter);
  transform: translateX(4px);
}

.social-links {
  display: flex;
  gap: 16px;
}

.social-links a {
  color: var(--lighter);
  background-color: rgba(255, 255, 255, 0.05);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.social-links a:hover {
  background-color: var(--primary);
  transform: translateY(-3px);
}

.copyright {
  text-align: center;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--gray);
  font-size: 14px;
}

/* Responsive */
@media (max-width: 1200px) {
  .container {
    padding: 0 32px;
  }

  .product-container {
    gap: 60px;
  }

  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .product-container {
    grid-template-columns: 1fr;
  }

  .main-image-container {
    height: 480px;
  }

  .product-info {
    position: static;
  }

  .footer-content {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 24px;
  }

  .nav-links {
    display: none;
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-btn {
    width: 100%;
  }

  .action-buttons {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }
}

@media (max-width: 576px) {
  .container {
    padding: 0 16px;
  }

  .main-image-container {
    height: 360px;
    padding: 40px;
  }

  .product-title {
    font-size: 32px;
  }

  .products-grid {
    grid-template-columns: 1fr;
  }

  .product-details {
    padding: 40px 24px;
  }

  .details-tabs {
    flex-direction: column;
  }

  .tab {
    border-bottom: 1px solid var(--light-gray);
  }

  .newsletter {
    padding: 40px 24px;
  }

  .newsletter-title {
    font-size: 24px;
  }
}

Step 3 (JavaScript Code):

Finally, we use JavaScript to make our product page more interactive. We will create functions for Add to Cart, Tab Switching, and Wishlist Toggle.

Copy the below JavaScript code and paste it into your script.js file.

// Thumbnail gallery functionality
const thumbnails = document.querySelectorAll('.thumbnail');
const mainImage = document.querySelector('.main-image');

thumbnails.forEach((thumbnail) => {
  thumbnail.addEventListener('click', () => {
    // Remove active class from all thumbnails
    thumbnails.forEach((t) => t.classList.remove('active'));
    // Add active class to clicked thumbnail
    thumbnail.classList.add('active');
    // Update main image
    mainImage.src = thumbnail.src;

    // Add animation effect
    mainImage.style.opacity = 0;
    setTimeout(() => {
      mainImage.style.opacity = 1;
    }, 200);
  });
});

// Quantity selector functionality
const minusBtn = document.querySelector('.minus');
const plusBtn = document.querySelector('.plus');
const quantityInput = document.querySelector('.quantity input');

minusBtn.addEventListener('click', () => {
  let value = parseInt(quantityInput.value);
  if (value > 1) {
    quantityInput.value = value - 1;
    animateButton(minusBtn);
  }
});

plusBtn.addEventListener('click', () => {
  let value = parseInt(quantityInput.value);
  quantityInput.value = value + 1;
  animateButton(plusBtn);
});

function animateButton(btn) {
  btn.style.transform = 'scale(0.9)';
  setTimeout(() => {
    btn.style.transform = 'scale(1)';
  }, 150);
}

// Color selection functionality
const colors = document.querySelectorAll('.color');

colors.forEach((color) => {
  color.addEventListener('click', () => {
    // Remove active class from all colors
    colors.forEach((c) => c.classList.remove('active'));
    // Add active class to clicked color
    color.classList.add('active');

    // Here you would typically update the product image based on color
    // This is just a visual effect for the demo
    mainImage.style.filter = 'hue-rotate(' + (Math.random() * 60 - 30) + 'deg)';
    setTimeout(() => {
      mainImage.style.filter = 'none';
    }, 500);
  });
});

// Tab functionality
const tabs = document.querySelectorAll('.tab');
const tabContents = document.querySelectorAll('.tab-content');

tabs.forEach((tab) => {
  tab.addEventListener('click', () => {
    // Remove active class from all tabs and contents
    tabs.forEach((t) => t.classList.remove('active'));
    tabContents.forEach((c) => c.classList.remove('active'));

    // Add active class to clicked tab
    tab.classList.add('active');

    // Show corresponding content
    const tabId = tab.getAttribute('data-tab');
    document.getElementById(tabId).classList.add('active');
  });
});

// Add to cart animation
const addToCartBtn = document.querySelector('.btn-primary');
const cartCount = document.querySelector('.cart-count');

if (addToCartBtn) {
  addToCartBtn.addEventListener('click', () => {
    // Animation effect
    addToCartBtn.innerHTML = '<i class="fas fa-check"></i> Added to Cart';
    addToCartBtn.style.backgroundColor = 'var(--success)';

    // Update cart count
    let currentCount = parseInt(cartCount.textContent);
    cartCount.textContent = currentCount + 1;

    // Animate cart count
    cartCount.style.transform = 'scale(1.3)';
    setTimeout(() => {
      cartCount.style.transform = 'scale(1)';
    }, 300);

    // Reset button after 2 seconds
    setTimeout(() => {
      addToCartBtn.innerHTML =
        '<i class="fas fa-shopping-cart"></i> Add to Cart';
      addToCartBtn.style.backgroundColor = 'var(--primary)';
    }, 2000);
  });
}

// Wishlist button toggle
const wishlistBtn = document.querySelector('.wishlist-btn');
if (wishlistBtn) {
  wishlistBtn.addEventListener('click', () => {
    const icon = wishlistBtn.querySelector('i');
    if (icon.classList.contains('far')) {
      icon.classList.remove('far');
      icon.classList.add('fas');
      wishlistBtn.style.color = '#dc2626';
      wishlistBtn.style.borderColor = '#fecaca';
      wishlistBtn.style.backgroundColor = '#fef2f2';
    } else {
      icon.classList.remove('fas');
      icon.classList.add('far');
      wishlistBtn.style.color = 'var(--gray)';
      wishlistBtn.style.borderColor = 'var(--light-gray)';
      wishlistBtn.style.backgroundColor = 'var(--lighter)';
    }
  });
}

Final Output:

create-responsive-product-page-using-html-and-css.gif
Read Alsobook-publishing-website-template-using-html-css-bootstrap-5-javascript.webpBook Publishing Website Template Using HTML & Bootstrap 5

Conclusion:

By following this tutorial, you’ve created a fully responsive product page using HTML and CSS that looks professional on all devices. This is a core skill for building e-commerce websites and can be expanded with JavaScript for more interactivity.

Whether you’re building a shopping site, a landing page, or a portfolio product showcase, this method will help you achieve a clean, user-friendly, and device-compatible layout.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: create responsive product page using HTML and CSS, HTML CSS responsive product layout tutorial, step by step responsive product page design, how to design ecommerce product page responsive, product detail page HTML CSS responsive example, responsive product page, HTML CSS product page, ecommerce product page, product page design, responsive web design
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Components

Please allow ads on our site🥺