logo

Pages vente e-Commerce

Modèles de pages de vente e-Commerce

Code :

<div class="container is-fluid">
    <section class="section">
      <div class="container">
        <div class="columns is-desktop is-vcentered">
          <div class="column is-6-desktop"><img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?
            primary=00d1b2" alt=""></div>
          <div class="column is-6-desktop">
            <div class="level is-mobile">
              <div class="level-left"><a class="level-item" href="#"><img src="../../all-css/placeholder/
                 icons/unicorn.svg"
                    alt=""></a><a class="level-item" href="#"><img src="../../all-css/placeholder/icons/
                    unicorn.svg" alt=""></a><a
                  class="level-item" href="#"><img src="../../all-css/placeholder/icons/unicorn.svg" 
                    alt=""></a><a class="level-item"
                  href="#"><img src="../../all-css/placeholder/icons/unicorn.svg" alt=""></a>
                  <a class="level-item" href="#"><img
                    src="../../all-css/placeholder/icons/unicorn.svg" alt=""></a></div>
            </div>
            <h2 class="title is-spaced">Official Pied Piper T-Shirt</h2>
            <p class="subtitle">This wonderful green shirt will make you an evangelist of Pied Pipers' 
               world-changing
              technology. It will make you stand out anywhere you go - so say yes to decentralization,
                 and say yes to
              our official Pied Piper swag.</p>
            <div class="level is-mobile">
              <div class="level-left"><a class="level-item" href="#">
                  <div class="tag is-primary">&nbsp;</div>
                </a><a class="level-item" href="#">
                  <div class="tag is-danger">&nbsp;</div>
                </a><a class="level-item" href="#">
                  <div class="tag is-dark">&nbsp;</div>
                </a><a class="level-item" href="#">
                  <div class="tag is-info">&nbsp;</div>
                </a></div>
            </div>
            <div class="columns">
              <div class="column is-half">
                <div class="field is-horizontal">
                  <div class="field-label is-normal">
                    <label class="label">$399</label>
                  </div>
                  <div class="field-body">
                    <div class="field">
                      <div class="control">
                        <input class="input" type="number" placeholder="1">
                      </div>
                    </div>
                    <div class="field">
                      <div class="control">
                        <button class="button is-primary">Buy Now!</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <hr>
            <div class="level is-mobile">
              <div class="level-left">
                <div class="level-item"><a href="#">Add to favorites</a></div>
              </div>
              <div class="level-right">
                <div class="level-item">Share</div><a class="level-item" href="#"><img
                    src="../../all-css/placeholder/icons/facebook-f.svg" alt=""></a><a class="level-item" 
                    href="#"><img
                    src="../../all-css/placeholder/icons/twitter.svg" alt=""></a><a class="level-item" 
                    href="#"><img
                    src="../../all-css/placeholder/icons/instagram.svg" alt=""></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

Code :

<div class="container is-fluid">
    <section class="section">
      <div class="container">
        <div class="columns is-desktop is-vcentered">
          <div class="column is-6-desktop">
            <h2 class="title">Official Pied Piper T-Shirt</h2>
            <p class="subtitle">$39,99 (Ex. Tax)</p>
            <div class="tabs">
              <ul>
                <li class="is-active"><a href="#">Active Tab</a></li>
                <li><a href="#">Inactive One</a></li>
                <li><a href="#">Inactive Two</a></li>
              </ul>
            </div>
            <p class="subtitle">This wonderful green shirt will make you an evangelist of Pied Pipers' 
               world-changing
              technology. It will make you stand out anywhere you go - so say yes to decentralization, 
               and say yes to
              our official Pied Piper swag.</p>
            <table class="table is-fullwidth">
              <tbody>
                <tr>
                  <td>Item one</td>
                  <td class="has-text-right">First value</td>
                </tr>
                <tr>
                  <td>Item two</td>
                  <td class="has-text-right">Secound value</td>
                </tr>
                <tr>
                  <td>Item three</td>
                  <td class="has-text-right">Third value</td>
                </tr>
              </tbody>
            </table>
            <button class="button is-primary">Buy Now!</button>
          </div>
          <div class="column is-6-desktop"><img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?
              primary=00d1b2" alt="">
            <div class="level is-mobile">
              <div class="level-item"><img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?
              primary=00d1b2" alt=""></div>
              <div class="level-item"><img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?
              primary=00d1b2"
                  alt=""></div>
              <div class="level-item"><img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?
              primary=00d1b2"
                  alt=""></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

Code :

<div class="container is-fluid">
    <section class="section">
      <div class="container">
        <div class="level">
          <div class="level-item">
            <figure class="image is-64x64"><img
                src="https://bulma.dev/placeholder/pictures/bg_square.svg?primary=00d1b2" alt="">
            </figure>
          </div>
        </div>
        <h2 class="title has-text-centered">Checkout form</h2>
        <div class="columns">
          <div class="column is-8">
            <h4 class="title is-4">Billing address</h4>
            <form novalidate>
              <div class="field is-grouped">
                <div class="control is-expanded">
                  <div class="field">
                    <label class="label">First name</label>
                    <div class="control">
                      <input class="input" type="text" placeholder="" value="" required>
                    </div>
                  </div>
                </div>
                <div class="control is-expanded">
                  <div class="field">
                    <label class="label">Last name</label>
                    <div class="control">
                      <input class="input" type="text" placeholder="" value="" required>
                    </div>
                  </div>
                </div>
              </div>
              <div class="field has-addons">
                <div class="control"><a class="button is-static">@</a></div>
                <div class="control is-expanded">
                  <input class="input" type="text" placeholder="Username" required>
                </div>
              </div>
              <div class="field">
                <label class="label">Email (optional)</label>
                <div class="control">
                  <input class="input" type="email" placeholder="you@example.com">
                </div>
              </div>
              <div class="field">
                <label class="label">Address</label>
                <div class="control">
                  <input class="input" type="text" placeholder="1234 Main St" required>
                </div>
              </div>
              <div class="field">
                <label class="label">Address 2</label>
                <div class="control">
                  <input class="input" type="text" placeholder="Apartment or suite">
                </div>
              </div>
              <div class="field is-grouped">
                <div class="control">
                  <div class="field">
                    <label class="label">Country</label>
                    <div class="select">
                      <select required>
                        <option value="" selected disabled>Choose...</option>
                        <option value="">United States</option>
                      </select>
                    </div>
                  </div>
                </div>
                <div class="control">
                  <div class="field">
                    <label class="label">State</label>
                    <div class="select">
                      <select required>
                        <option value="" selected disabled>Choose...</option>
                        <option value="">California</option>
                      </select>
                    </div>
                  </div>
                </div>
                <div class="control is-expanded">
                  <div class="field">
                    <div class="label label">Zip</div>
                    <div class="control">
                      <input class="input" type="text" placeholder="" required>
                    </div>
                  </div>
                </div>
              </div>
              <hr>
              <div class="field">
                <div class="control">
                  <label class="checkbox">
                    <input type="checkbox">&nbsp; Shipping address is the same as my billing address
                  </label>
                </div>
              </div>
              <div class="field">
                <div class="control">
                  <label class="checkbox">
                    <input type="checkbox">&nbsp; Save this information for next time
                  </label>
                </div>
              </div>
              <hr>
              <h4 class="title is-4">Payment</h4>
              <div class="field">
                <div class="control">
                  <label class="radio">
                    <input name="paymentMethod" type="radio" checked required>&nbsp; Credit card
                  </label>
                </div>
                <div class="control">
                  <label class="radio">
                    <input name="paymentMethod" type="radio" required>&nbsp; Debit card
                  </label>
                </div>
                <div class="control">
                  <label class="radio">
                    <input name="paymentMethod" type="radio" required>&nbsp; Paypal
                  </label>
                </div>
              </div>
              <div class="field is-grouped">
                <div class="control is-expanded">
                  <div class="field">
                    <label class="label">Name on card</label>
                    <div class="control">
                      <input class="input" type="text" placeholder="" value="" required>
                      <p class="help">Full name as displayed on card</p>
                    </div>
                  </div>
                </div>
                <div class="control is-expanded">
                  <div class="field">
                    <label class="label">Credit card number</label>
                    <div class="control">
                      <input class="input" type="text" placeholder="" value="" required>
                    </div>
                  </div>
                </div>
              </div>
              <div class="field is-grouped">
                <div class="control">
                  <div class="field">
                    <label class="label">Expiration</label>
                    <div class="control">
                      <input class="input" type="text" placeholder="" value="" required>
                    </div>
                  </div>
                </div>
                <div class="control">
                  <div class="field">
                    <label class="label">CVV</label>
                    <div class="control">
                      <input class="input" type="text" placeholder="" value="" required>
                    </div>
                  </div>
                </div>
              </div>
              <hr>
              <button class="button is-primary is-fullwidth" type="submit">Continue to checkout</button>
            </form>
          </div>
          <div class="column is-4">
            <h4 class="title is-4"><span>Your cart</span><span class="tag is-info is-pulled-right">3
             </span></h4>
            <div class="list is-hoverable"><a class="list-item">
                <div class="level is-mobile">
                  <div class="level-left">
                    <div class="level-item">
                      <div>
                        <h6 class="title is-6">Product name</h6><small>Brief description</small>
                      </div>
                    </div>
                  </div>
                  <div class="level-right"><span>$12</span></div>
                </div>
              </a><a class="list-item">
                <div class="level is-mobile">
                  <div class="level-left">
                    <div class="level-item">
                      <div>
                        <h6 class="title is-6">Product name</h6><small>Brief description</small>
                      </div>
                    </div>
                  </div>
                  <div class="level-right"><span>$12</span></div>
                </div>
              </a><a class="list-item">
                <div class="level is-mobile">
                  <div class="level-left">
                    <div class="level-item">
                      <div>
                        <h6 class="title is-6">Product name</h6><small>Brief description</small>
                      </div>
                    </div>
                  </div>
                  <div class="level-right"><span>$12</span></div>
                </div>
              </a><a class="list-item">
                <div class="level is-mobile">
                  <div class="level-left">
                    <div class="level-item">
                      <div>
                        <h6 class="title is-6">Product name</h6><small>Brief description</small>
                      </div>
                    </div>
                  </div>
                  <div class="level-right"><span>$12</span></div>
                </div>
              </a>
              <div class="list-item">
                <div class="level is-mobile">
                  <div class="level-left">
                    <div class="level-item">Total (USD)</div>
                  </div>
                  <div class="level-right">
                    <div class="level-item"> <strong>$20</strong></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="card">
              <div class="card-content">
                <form>
                  <div class="field is-grouped">
                    <div class="control is-expanded">
                      <input class="input" type="text" placeholder="Promo code">
                    </div>
                    <div class="control">
                      <button class="button is-info" type="submit">Redeem</button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

Code :

 <div class="container is-fluid">
    <section class="section">
      <div class="container has-text-centered">
        <h2 class="title">Products</h2>
        <div class="columns">
          <div class="column"><a href="#">
              <div class="card">
                <div class="card-image"><img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?
                    primary=00d1b2"  alt=""></div>
                <div class="card-content">
                  <h3 class="title is-4">Official Pied Piper T-Shirt</h3>
                  <p class="subtitle is-3">$499</p>
                </div>
              </div>
            </a></div>
          <div class="column"><a href="#">
              <div class="card">
                <div class="card-image"><img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?
                   primary=00d1b2" alt=""></div>
                <div class="card-content">
                  <h3 class="title is-4">Official Pied Piper T-Shirt</h3>
                  <p class="subtitle is-3">$499</p>
                </div>
              </div>
            </a></div>
        </div>
      </div>
    </section>
  </div>

Code :

<div class="container is-fluid">
    <section class="section">
      <div class="container has-text-centered">
        <h2 class="title">Products</h2>
        <div class="columns">
          <div class="column"><a href="#">
              <div class="card">
                <div class="card-image"><img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?
                 primary=00d1b2" alt=""></div>
                <div class="card-content">
                  <h3 class="title is-4">Official Pied Piper T-Shirt</h3>
                  <p class="subtitle is-3">$499</p>
                </div>
              </div>
            </a></div>
          <div class="column"><a href="#">
              <div class="card">
                <div class="card-image"><img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?
                  primary=00d1b2" alt=""></div>
                <div class="card-content">
                  <h3 class="title is-4">Official Pied Piper T-Shirt</h3>
                  <p class="subtitle is-3">$499</p>
                </div>
              </div>
            </a></div>
          <div class="column"><a href="#">
              <div class="card">
                <div class="card-image"><img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?
                 primary=00d1b2" alt=""></div>
                <div class="card-content">
                  <h3 class="title is-4">Official Pied Piper T-Shirt</h3>
                  <p class="subtitle is-3">$499</p>
                </div>
              </div>
            </a></div>
        </div>
      </div>
    </section>
  </div>