"Ecommerce promo page"
Bootstrap 4.1.1 Snippet by umeshblader3

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container mb-5 mt-5"> <div class="row"> <div class="col-12"> <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light"> <div class="col-md-5 p-lg-5 mx-auto my-5"> <h1 class="display-4 font-weight-normal">Ecosoftlk-Ecommerce Solutions</h1> <p class="lead font-weight-normal">Economic solutions for Ecommerce platform with modern technologies.</p> </div> <div class="product-device shadow-sm d-none d-md-block"></div> <div class="product-device product-device-2 shadow-sm d-none d-md-block"></div> </div> </div> </div> <div class="pricing card-deck flex-column flex-md-row mb-3"> <div class="card card-pricing popular text-center px-4 mb-4"> <span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Starter</span> <div class="bg-transparent card-header pt-4 border-0"> <h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="30">$<span class="price">0</span><span class="h6 text-muted ml-2">/ per month</span></h1> </div> <div class="card-body pt-0"> <ul class="list-unstyled mb-4"> <li>Upto 50 Products</li> <li>Upto 4 Images per Product</li> <li>40 MB Product Image storage credits</li> <li>Upto 5 Invoices accessible per month</li> <li>20 Emails credits per Month</li> <li>5 live chat credits per Day</li> <li>10 customer review approval per month</li> <li>And more...</li> </ul> <a href = "https://www.ecosoftlk.com" class="btn btn-outline-secondary mb-3">Contact Us</a> </div> </div> <div class="card card-pricing shadow text-center px-4 mb-4"> <span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Professional</span> <div class="bg-transparent card-header pt-4 border-0"> <h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="45">$<span class="price">15</span><span class="h6 text-muted ml-2">/ per month</span></h1> </div> <div class="card-body pt-0"> <ul class="list-unstyled mb-4"> <li>Upto 200 Products</li> <li>Upto 8 Images per Product</li> <li>100 MB Product Image storage credits</li> <li>Upto 50 Invoices accessible per month</li> <li>100 Emails credits per Month</li> <li>20 live chat credits per Day</li> <li>20 SMS credits per Month</li> <li>50 customer review approval per month</li> <li>And more...</li> </ul> <a href = "https://www.ecosoftlk.com" class="btn btn-primary mb-3">Contact Us</a> </div> </div> <div class="card card-pricing text-center px-3 mb-4"> <span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Enterprise</span> <div class="bg-transparent card-header pt-4 border-0"> <h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="60">$<span class="price">25</span><span class="h6 text-muted ml-2">/ per month</span></h1> </div> <div class="card-body pt-0"> <ul class="list-unstyled mb-4"> <li>Unlimited Products</li> <li>Upto 8 Images per Product</li> <li>Unlimited Product Image storage credits</li> <li>Unlimited Invoices accessible per month</li> <li>1000 Emails credits per Month</li> <li>50 live chat credits per Day</li> <li>50 SMS credits per Month</li> <li>Unlimited customer review approval per month</li> <li>And more...</li> </ul> <a href = "https://www.ecosoftlk.com" class="btn btn-outline-secondary mb-3">Contact Us</a> </div> </div> </div> <hr> <div class="row"> <div class="col-12"> <h3 class="text-center">Included in all plans</h3> <div class="subtitle grey text-center">Enjoy these features no matter the plan you choose.</div> <hr> </div> <hr> <div class="col-6"> <h5>Sell physical, digital products and subscriptions</h5> <p class="text-muted">You can sell anything you create whether it's a store product, a monthly subscription for your software or a t-shirt - we support it all.</p> </div> <div class="col-6"> <h5>Multiple payment options with instant payouts</h5> <p class="text-muted">You can connect PayPal and/or Stripe as the payment gateway for your store. Money for all purchases will be sent directly to your payment account without us in the middle.</p> </div> <div class="col-6"> <h5>Shopping cart & Wish list</h5> <p class="text-muted">All Products come with a shopping cart for faster checkout. Wish list helps to save products for later purchases and arrangements.</p> </div> <div class="col-6"> <h5>Mobile optimised</h5> <p class="text-muted">Ecosoft-Ecommerce offers mobile optimised stores and a flawless checkout experience for both desktop and mobile so your customers can shop at your store on any device.</p> </div> <div class="col-6"> <h5>Powerful analytics</h5> <p class="text-muted">We offer simple yet powerful tools to analyse your store, order and product performance. More analytic dashboards are supporting to enhance your digital experiences.</p> </div> <div class="col-6"> <h5>Statefull Invoice workflow</h5> <p class="text-muted">Statefull invoice workflow helps to track invoice status and boost invoice related activities. From the purchase to delivery, workflow can be easily managable.</p> </div> <div class="col-6"> <h5>Statefull Invoice workflow</h5> <p class="text-muted">Statefull invoice workflow helps to track invoice status and boost invoice related activities. From the purchase to delivery, workflow can be easily managable.</p> </div> <div class="col-6"> <h5>Managing & Tracking Customer Activities</h5> <p class="text-muted">Managing customers and tracking their activities, such as purchasing rates, reviewing rates, involvements with system, are competitive information to you.</p> </div> </div> <hr> <div class="row"> <div class="col-12"> <h3 class="text-center">Still have some questions?</h3> <div class="subtitle grey text-center">Here are some of the answers you might be looking for.</div> <hr> </div> <div class="col-12"> <strong>Does Ecosoftlk-Ecommerce charge a transaction fee?</strong> <div class="text-muted">No. we don't have any interest on transaction fee, since payment and payment methods are absolutely responsible to you.</div> <br/> </div> <div class="col-12"> <strong>Will I have any other expenses?</strong> <div class="text-muted"> May be. Some features are PAYG (Pay As You Go). But those are optional. For instance, If you're expecting SMS features, you should pay additionally, according to SMS subscription. Advanced Email Services, Voice services, Support services, On-premise Server services, Real time Chat Services, SMS Services, Advanced reportings, are some significant services reagarding customer on-demand. </div> <br/> </div> <div class="col-12"> <strong>Do I need to have a website to use Ecosoftlk-Ecommerce?</strong> <div class="text-muted"> No, you can build a store on Ecosoftlk-Ecommerce and start selling instantly on Facebook, Twitter, YouTube or any other social network. If you have a website, you can refer your Ecosoftlk-Ecommerce platform, product widgets or the full Ecosoftlk-Ecommerce store anywhere on your site. </div> <br/> </div> <div class="col-12"> <strong>How do I get paid?</strong> <div class="text-muted"> You will receive money according to your payment gateway's instruction. Payments will be sent directly to your Payment gateway depending on which gateway you choose for payment processing. </div> <br/> </div> <div class="col-12"> <strong>I have more questions about Ecosoftlk-Ecommerce!</strong> <div class="text-muted"> Great! We'll be happy to answer your questions! Please reach with <a href="https://www.ecosoftlk.com/contact-us">Contact Us page</a> or with Live chat </div> <br/> </div> </div> </div>
.product-device { position: absolute; right: 10%; bottom: -30%; width: 300px; height: 540px; background-color: #333; border-radius: 21px; -webkit-transform: rotate(30deg); transform: rotate(30deg); } .product-device::before { position: absolute; top: 10%; right: 10px; bottom: 10%; left: 10px; content: ""; background-color: rgba(255, 255, 255, .1); border-radius: 5px; } .product-device-2 { top: -25%; right: auto; bottom: 0; left: 5%; background-color: #e5e5e5; }

Related: See More


Questions / Comments: