How To Build A Product Page Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ShopKing Pro | Product Page</title>
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'Segoe UI', sans-serif; background: #f8f9fa; color: #333; }

/* ---- NAV ---- */
  header { background: white; padding: 16px 40px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
  .logo { font-weight: 800; font-size: 1.4em; color: #16a34a; }
  .cart-btn { background: #16a34a; color: white; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; }

/* ---- PRODUCT LAYOUT ---- */
  .product-page { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 1100px; margin: 40px auto; padding: 0 40px; align-items: start; }

/* ---- IMAGE GALLERY ---- */
  .image-main { border-radius: 12px; background: white; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
  .image-placeholder { height: 400px; display: flex; align-items: center; justify-content: center; font-size: 8em; background: linear-gradient(135deg, #dcfce7, #bbf7d0); }
  .image-thumbnails { display: flex; gap: 8px; padding: 12px; }
  .thumb { width: 64px; height: 64px; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 2px solid transparent; cursor: pointer; background: #f0fdf4; font-size: 1.5em; }
  .thumb.active { border-color: #16a34a; }

/* ---- PRODUCT DETAILS ---- */
  .badge { display: inline-block; background: #dcfce7; color: #15803d; padding: 4px 12px; border-radius: 20px; font-size: 0.8em; font-weight: 700; margin-bottom: 12px; }
  .product-title { font-size: 2em; font-weight: 800; line-height: 1.2; margin-bottom: 12px; color: #111; }
  .rating { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; color: #facc15; font-size: 1.1em; }
  .rating span { color: #666; font-size: 0.85em; }
  .price-block { margin-bottom: 24px; }
  .price { font-size: 2.4em; font-weight: 800; color: #16a34a; }
  .price-original { font-size: 1.1em; color: #999; text-decoration: line-through; margin-left: 8px; }
  .price-saving { font-size: 0.9em; color: #dc2626; font-weight: 600; }
  .product-desc { color: #555; line-height: 1.8; margin-bottom: 28px; }
  .add-to-cart-btn { width: 100%; padding: 18px; background: #16a34a; color: white; font-size: 1.1em; font-weight: 700; border: none; border-radius: 12px; cursor: pointer; transition: background 0.2s, transform 0.2s; }
  .add-to-cart-btn:hover { background: #15803d; transform: translateY(-2px); }
  .wishlist-btn { width: 100%; padding: 14px; background: transparent; color: #333; font-size: 1em; font-weight: 600; border: 2px solid #ddd; border-radius: 12px; cursor: pointer; margin-top: 12px; transition: border-color 0.2s; }
  .wishlist-btn:hover { border-color: #16a34a; }
  .trust-badges { display: flex; gap: 16px; margin-top: 24px; }
  .trust-badge { display: flex; align-items: center; gap: 8px; font-size: 0.85em; color: #666; }

/* ---- REVIEWS ---- */
  .reviews-section { max-width: 1100px; margin: 0 auto 40px; padding: 0 40px; }
  .reviews-section h3 { font-size: 1.5em; margin-bottom: 20px; }
  .review { background: white; border-radius: 10px; padding: 20px; margin-bottom: 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
  .review-stars { color: #facc15; margin-bottom: 6px; }
  .review-author { font-weight: 700; margin-bottom: 4px; }
  .review-text { color: #666; }

/* ---- FOOTER ---- */
  .site-footer { background: #111827; color: #9ca3af; margin-top: 40px; }
  .footer-inner { max-width: 1100px; margin: 0 auto; padding: 48px 40px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
  .footer-brand .footer-logo { font-weight: 800; font-size: 1.3em; color: #16a34a; display: block; margin-bottom: 10px; }
  .footer-brand p { font-size: 0.88em; line-height: 1.7; }
  .footer-col h4 { color: white; font-size: 0.82em; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 14px; }
  .footer-col ul { list-style: none; }
  .footer-col li { margin-bottom: 8px; }
  .footer-col a { color: #9ca3af; font-size: 0.88em; text-decoration: none; }
  .footer-col a:hover { color: white; }
  .footer-bottom { border-top: 1px solid #1f2937; padding: 18px 40px; text-align: center; font-size: 0.82em; }

@media (max-width: 720px) { .product-page { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr 1fr; } }
</style>
</head>
<body>

<header>
  <div class="logo">ShopKing</div>
  <button class="cart-btn">&#128722; Cart (0)</button>
</header>

<div>
    <div class="image-main">
      <div class="image-placeholder">&#9925;</div>
      <div class="image-thumbnails">
        <div class="thumb active">&#9925;</div>
        <div class="thumb">&#128721;</div>
        <div class="thumb">&#127970;</div>
      </div>
    </div>
  </div>

<div>
    <div class="badge">In Stock</div>
    <h1 class="product-title">ProSolar Panel X9 Ultra</h1>
    <div class="rating">
      &#9733;&#9733;&#9733;&#9733;&#9733;
      <span>(128 reviews)</span>
    </div>
    <div class="price-block">
      <span class="price">$249</span>
      <span class="price-original">$399</span>
      <div class="price-saving">You save $150 (38% off)</div>
    </div>
    <p class="product-desc">The most efficient residential solar panel on the market. Features a 25-year performance warranty, 23% efficiency rating, and weatherproof aluminium frame. Easy to install with our no-drill mounting system.</p>
    <button class="add-to-cart-btn">&#43; Add to Cart</button>
    <button class="wishlist-btn">&#10084;&#65039; Add to Wishlist</button>
    <div class="trust-badges">
      <div class="trust-badge">&#128666; Free Shipping</div>
      <div class="trust-badge">&#128737; 30-Day Returns</div>
      <div class="trust-badge">&#128274; Secure Checkout</div>
    </div>
  </div>

</div>

<div class="reviews-section">
  <h3>Customer Reviews</h3>
  <div class="review">
    <div class="review-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
    <div class="review-author">Margaret T.</div>
    <p class="review-text">Cut my electricity bill by 60% in the first month. Installation was a breeze with the included guide.</p>
  </div>
  <div class="review">
    <div class="review-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
    <div class="review-author">James W.</div>
    <p class="review-text">Excellent build quality and incredibly good value. Highly recommended for anyone looking to go solar.</p>
  </div>
</div>

<footer class="site-footer">
  <div class="footer-inner">
    <div class="footer-brand">
      <span class="footer-logo">ShopKing</span>
      <p>The home of premium solar energy solutions. Free shipping on all orders. 30-day no-fuss returns.</p>
    </div>
    <div class="footer-col">
      <h4>Shop</h4>
      <ul>
        <li><a href="#">Solar Panels</a></li>
        <li><a href="#">Batteries</a></li>
        <li><a href="#">Inverters</a></li>
        <li><a href="#">Accessories</a></li>
      </ul>
    </div>
    <div class="footer-col">
      <h4>Support</h4>
      <ul>
        <li><a href="#">FAQs</a></li>
        <li><a href="#">Shipping Info</a></li>
        <li><a href="#">Returns Policy</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </div>
    <div class="footer-col">
      <h4>Company</h4>
      <ul>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Careers</a></li>
        <li><a href="#">Privacy Policy</a></li>
      </ul>
    </div>
  </div>
  <div class="footer-bottom">
    <p>&copy; 2026 ShopKing Ltd. All rights reserved.</p>
  </div>
</footer>

</body>
</html>