index - Copy.html

<div class="header">
  <span class="brand">
    <img src="public/imgs/storefront_FILL0_wght200_GRAD-25_opsz48.svg" alt="" />
    Mi tienda <span class="powered-by">by librerias.js</span>
  </span>
  <span class="user-profile-wrapper">
    <img src="https://robohash.org/minimadoloreslaborum.png" alt="" />
  </span>
</div>

<div class="main-container">
  <h3>Productos destacados</h3>
  <swiper-container
    init="false"
    id="productsSlider"
    slides-per-view="1"
    navigation="true"
    pagination="true"
    space-between="20"
    class="products-slider"
    grab-cursor="true"
    autoplay="true"
    autoplay-delay="2000"
  >
    <swiper-slide class="product-card">
      <img class="thumbnail" src="public/imgs/furniture_1.png" />
      <div class="product-info">
        <h2 class="title">Elegant White Sofa</h2>
        <p class="description">
          Elevate your living space with our elegant white sofa.
        </p>
        <p class="price">
          <span>200€</span>
          <button class="add-to-cart">+</button>
        </p>
      </div>
    </swiper-slide>
    <swiper-slide class="product-card">
      <!-- Aquí va el contenido de otro producto como el de arriba -->
    </swiper-slide>
    <swiper-slide class="product-card">
      <!-- Aquí va el contenido de otro producto como el de arriba -->
    </swiper-slide>
  </swiper-container>
</div>

<div class="footer">LibreriasJs 2023</div>
<sl-dialog class="history-dialog">
  <swiper-container
    class="history-dialog-swiper"
    effect="cube"
    pagination="true"
    autoplay="true"
    loop="true"
    autoplay-delay="1000"
    grab-cursor="true"
  >
    <swiper-slide class="history-dialog-slide">
      <img src="public/imgs/furniture_1.png" alt="" />
    </swiper-slide>
    <swiper-slide class="history-dialog-slide">
      <img src="public/imgs/furniture_2.png" alt="" />
    </swiper-slide>
    <swiper-slide class="history-dialog-slide">
      <img src="public/imgs/furniture_3.png" alt="" />
    </swiper-slide>
    <swiper-slide class="history-dialog-slide">
      <img src="public/imgs/furniture_4.png" alt="" />
    </swiper-slide>
  </swiper-container>
</sl-dialog>