Modèles de pages de vente e-Commerce
1°
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"> </div>
</a><a class="level-item" href="#">
<div class="tag is-danger"> </div>
</a><a class="level-item" href="#">
<div class="tag is-dark"> </div>
</a><a class="level-item" href="#">
<div class="tag is-info"> </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>
2°
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>
3°
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"> Shipping address is the same as my billing address
</label>
</div>
</div>
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox"> 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> Credit card
</label>
</div>
<div class="control">
<label class="radio">
<input name="paymentMethod" type="radio" required> Debit card
</label>
</div>
<div class="control">
<label class="radio">
<input name="paymentMethod" type="radio" required> 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>
4°
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>
5°
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>