Rozbudowany opis produktu

Poniżej znajdziesz gotowe fragmenty kodu HTML, które możesz wykorzystać do tworzenia atrakcyjnych opisów produktów.

Sekcja z ikonami cech

<div class="product-features">
  <div class="feature-item">
    <div class="feature-icon">🚚</div>
    <div class="feature-text">
      <strong>Darmowa dostawa</strong>
      <span>Od 200 zł</span>
    </div>
  </div>
  <div class="feature-item">
    <div class="feature-icon">🔒</div>
    <div class="feature-text">
      <strong>Gwarancja</strong>
      <span>24 miesiące</span>
    </div>
  </div>
  <div class="feature-item">
    <div class="feature-icon">↩️</div>
    <div class="feature-text">
      <strong>Zwroty</strong>
      <span>30 dni</span>
    </div>
  </div>
</div>

Tabela specyfikacji

<div class="spec-table">
  <h3>Specyfikacja techniczna</h3>
  <table>
    <tbody>
      <tr>
        <th>Materiał</th>
        <td>100% bawełna</td>
      </tr>
      <tr>
        <th>Wymiary</th>
        <td>120 x 80 cm</td>
      </tr>
      <tr>
        <th>Waga</th>
        <td>250g</td>
      </tr>
      <tr>
        <th>Kolor</th>
        <td>Biały, Czarny, Szary</td>
      </tr>
    </tbody>
  </table>
</div>

Sekcja z zakładkami

<div class="description-tabs">
  <div class="tab-headers">
    <button class="tab-btn active" data-tab="opis">Opis</button>
    <button class="tab-btn" data-tab="specyfikacja">Specyfikacja</button>
    <button class="tab-btn" data-tab="opinie">Opinie</button>
  </div>
  <div class="tab-content active" id="opis">
    <p>Treść opisu produktu...</p>
  </div>
  <div class="tab-content" id="specyfikacja">
    <p>Treść specyfikacji...</p>
  </div>
  <div class="tab-content" id="opinie">
    <p>Treść opinii...</p>
  </div>
</div>

Baner promocyjny

<div class="promo-banner">
  <div class="promo-content">
    <span class="promo-badge">PROMOCJA</span>
    <h4>Kup 2, trzeci GRATIS!</h4>
    <p>Oferta ważna do końca miesiąca</p>
  </div>
</div>

Galeria w opisie

<div class="description-gallery">
  <div class="gallery-item">
    <img src="zdjecie1.jpg" alt="Opis zdjęcia 1">
    <p class="gallery-caption">Podpis pod zdjęciem</p>
  </div>
  <div class="gallery-item">
    <img src="zdjecie2.jpg" alt="Opis zdjęcia 2">
    <p class="gallery-caption">Podpis pod zdjęciem</p>
  </div>
</div>