git.roojs.org Git - bootswatch/blob - Eshopper/checkout.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4     <meta charset="utf-8">
   5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   6     <meta name="description" content="">
   7     <meta name="author" content="">
   8     <title>Checkout | E-Shopper</title>
   9     <link href="css/bootstrap.min.css" rel="stylesheet">
  10     <link href="css/font-awesome.min.css" rel="stylesheet">
  11     <link href="css/prettyPhoto.css" rel="stylesheet">
  12     <link href="css/price-range.css" rel="stylesheet">
  13     <link href="css/animate.css" rel="stylesheet">
  14         <link href="css/main.css" rel="stylesheet">
  15         <link href="css/responsive.css" rel="stylesheet">
  16     <!--[if lt IE 9]>
  17     <script src="js/html5shiv.js"></script>
  18     <script src="js/respond.min.js"></script>
  19     <![endif]-->
  20     <link rel="shortcut icon" href="images/ico/favicon.ico">
  21     <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144-precomposed.png">
  22     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114-precomposed.png">
  23     <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72-precomposed.png">
  24     <link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57-precomposed.png">
  25 </head><!--/head-->
  26
  27 <body>
  28         <header id="header"><!--header-->
  29                 <div class="header_top"><!--header_top-->
  30                         <div class="container">
  31                                 <div class="row">
  32                                         <div class="col-sm-6">
  33                                                 <div class="contactinfo">
  34                                                         <ul class="nav nav-pills">
  35                                                                 <li><a href=""><i class="fa fa-phone"></i> +2 95 01 88 821</a></li>
  36                                                                 <li><a href=""><i class="fa fa-envelope"></i> info@domain.com</a></li>
  37                                                         </ul>
  38                                                 </div>
  39                                         </div>
  40                                         <div class="col-sm-6">
  41                                                 <div class="social-icons pull-right">
  42                                                         <ul class="nav navbar-nav">
  43                                                                 <li><a href=""><i class="fa fa-facebook"></i></a></li>
  44                                                                 <li><a href=""><i class="fa fa-twitter"></i></a></li>
  45                                                                 <li><a href=""><i class="fa fa-linkedin"></i></a></li>
  46                                                                 <li><a href=""><i class="fa fa-dribbble"></i></a></li>
  47                                                                 <li><a href=""><i class="fa fa-google-plus"></i></a></li>
  48                                                         </ul>
  49                                                 </div>
  50                                         </div>
  51                                 </div>
  52                         </div>
  53                 </div><!--/header_top-->
  54
  55                 <div class="header-middle"><!--header-middle-->
  56                         <div class="container">
  57                                 <div class="row">
  58                                         <div class="col-sm-4">
  59                                                 <div class="logo pull-left">
  60                                                         <a href="index.html"><img src="images/home/logo.png" alt="" /></a>
  61                                                 </div>
  62                                                 <div class="btn-group pull-right">
  63                                                         <div class="btn-group">
  64                                                                 <button type="button" class="btn btn-default dropdown-toggle usa" data-toggle="dropdown">
  65                                                                         USA
  66                                                                         <span class="caret"></span>
  67                                                                 </button>
  68                                                                 <ul class="dropdown-menu">
  69                                                                         <li><a href="">Canada</a></li>
  70                                                                         <li><a href="">UK</a></li>
  71                                                                 </ul>
  72                                                         </div>
  73
  74                                                         <div class="btn-group">
  75                                                                 <button type="button" class="btn btn-default dropdown-toggle usa" data-toggle="dropdown">
  76                                                                         DOLLAR
  77                                                                         <span class="caret"></span>
  78                                                                 </button>
  79                                                                 <ul class="dropdown-menu">
  80                                                                         <li><a href="">Canadian Dollar</a></li>
  81                                                                         <li><a href="">Pound</a></li>
  82                                                                 </ul>
  83                                                         </div>
  84                                                 </div>
  85                                         </div>
  86                                         <div class="col-sm-8">
  87                                                 <div class="shop-menu pull-right">
  88                                                         <ul class="nav navbar-nav">
  89                                                                 <li><a href=""><i class="fa fa-user"></i> Account</a></li>
  90                                                                 <li><a href=""><i class="fa fa-star"></i> Wishlist</a></li>
  91                                                                 <li><a href="checkout.html" class="active"><i class="fa fa-crosshairs"></i> Checkout</a></li>
  92                                                                 <li><a href="cart.html"><i class="fa fa-shopping-cart"></i> Cart</a></li>
  93                                                                 <li><a href="login.html"><i class="fa fa-lock"></i> Login</a></li>
  94                                                         </ul>
  95                                                 </div>
  96                                         </div>
  97                                 </div>
  98                         </div>
  99                 </div><!--/header-middle-->
 100
 101                 <div class="header-bottom"><!--header-bottom-->
 102                         <div class="container">
 103                                 <div class="row">
 104                                         <div class="col-sm-9">
 105                                                 <div class="navbar-header">
 106                                                         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 107                                                                 <span class="sr-only">Toggle navigation</span>
 108                                                                 <span class="icon-bar"></span>
 109                                                                 <span class="icon-bar"></span>
 110                                                                 <span class="icon-bar"></span>
 111                                                         </button>
 112                                                 </div>
 113                                                 <div class="mainmenu pull-left">
 114                                                         <ul class="nav navbar-nav collapse navbar-collapse">
 115                                                                 <li><a href="index.html">Home</a></li>
 116                                                                 <li class="dropdown"><a href="#">Shop<i class="fa fa-angle-down"></i></a>
 117                                     <ul role="menu" class="sub-menu">
 118                                         <li><a href="shop.html">Products</a></li>
 119                                                                                 <li><a href="product-details.html">Product Details</a></li>
 120                                                                                 <li><a href="checkout.html" class="active">Checkout</a></li>
 121                                                                                 <li><a href="cart.html">Cart</a></li>
 122                                                                                 <li><a href="login.html">Login</a></li>
 123                                     </ul>
 124                                 </li>
 125                                                                 <li class="dropdown"><a href="#">Blog<i class="fa fa-angle-down"></i></a>
 126                                     <ul role="menu" class="sub-menu">
 127                                         <li><a href="blog.html">Blog List</a></li>
 128                                                                                 <li><a href="blog-single.html">Blog Single</a></li>
 129                                     </ul>
 130                                 </li>
 131                                                                 <li><a href="404.html">404</a></li>
 132                                                                 <li><a href="contact-us.html">Contact</a></li>
 133                                                         </ul>
 134                                                 </div>
 135                                         </div>
 136                                         <div class="col-sm-3">
 137                                                 <div class="search_box pull-right">
 138                                                         <input type="text" placeholder="Search"/>
 139                                                 </div>
 140                                         </div>
 141                                 </div>
 142                         </div>
 143                 </div><!--/header-bottom-->
 144         </header><!--/header-->
 145
 146         <section id="cart_items">
 147                 <div class="container">
 148                         <div class="breadcrumbs">
 149                                 <ol class="breadcrumb">
 150                                   <li><a href="#">Home</a></li>
 151                                   <li class="active">Check out</li>
 152                                 </ol>
 153                         </div><!--/breadcrums-->
 154
 155                         <div class="step-one">
 156                                 <h2 class="heading">Step1</h2>
 157                         </div>
 158                         <div class="checkout-options">
 159                                 <h3>New User</h3>
 160                                 <p>Checkout options</p>
 161                                 <ul class="nav">
 162                                         <li>
 163                                                 <label><input type="checkbox"> Register Account</label>
 164                                         </li>
 165                                         <li>
 166                                                 <label><input type="checkbox"> Guest Checkout</label>
 167                                         </li>
 168                                         <li>
 169                                                 <a href=""><i class="fa fa-times"></i>Cancel</a>
 170                                         </li>
 171                                 </ul>
 172                         </div><!--/checkout-options-->
 173
 174                         <div class="register-req">
 175                                 <p>Please use Register And Checkout to easily get access to your order history, or use Checkout as Guest</p>
 176                         </div><!--/register-req-->
 177
 178                         <div class="shopper-informations">
 179                                 <div class="row">
 180                                         <div class="col-sm-3">
 181                                                 <div class="shopper-info">
 182                                                         <p>Shopper Information</p>
 183                                                         <form>
 184                                                                 <input type="text" placeholder="Display Name">
 185                                                                 <input type="text" placeholder="User Name">
 186                                                                 <input type="password" placeholder="Password">
 187                                                                 <input type="password" placeholder="Confirm password">
 188                                                         </form>
 189                                                         <a class="btn btn-primary" href="">Get Quotes</a>
 190                                                         <a class="btn btn-primary" href="">Continue</a>
 191                                                 </div>
 192                                         </div>
 193                                         <div class="col-sm-5 clearfix">
 194                                                 <div class="bill-to">
 195                                                         <p>Bill To</p>
 196                                                         <div class="form-one">
 197                                                                 <form>
 198                                                                         <input type="text" placeholder="Company Name">
 199                                                                         <input type="text" placeholder="Email*">
 200                                                                         <input type="text" placeholder="Title">
 201                                                                         <input type="text" placeholder="First Name *">
 202                                                                         <input type="text" placeholder="Middle Name">
 203                                                                         <input type="text" placeholder="Last Name *">
 204                                                                         <input type="text" placeholder="Address 1 *">
 205                                                                         <input type="text" placeholder="Address 2">
 206                                                                 </form>
 207                                                         </div>
 208                                                         <div class="form-two">
 209                                                                 <form>
 210                                                                         <input type="text" placeholder="Zip / Postal Code *">
 211                                                                         <select>
 212                                                                                 <option>-- Country --</option>
 213                                                                                 <option>United States</option>
 214                                                                                 <option>Bangladesh</option>
 215                                                                                 <option>UK</option>
 216                                                                                 <option>India</option>
 217                                                                                 <option>Pakistan</option>
 218                                                                                 <option>Ucrane</option>
 219                                                                                 <option>Canada</option>
 220                                                                                 <option>Dubai</option>
 221                                                                         </select>
 222                                                                         <select>
 223                                                                                 <option>-- State / Province / Region --</option>
 224                                                                                 <option>United States</option>
 225                                                                                 <option>Bangladesh</option>
 226                                                                                 <option>UK</option>
 227                                                                                 <option>India</option>
 228                                                                                 <option>Pakistan</option>
 229                                                                                 <option>Ucrane</option>
 230                                                                                 <option>Canada</option>
 231                                                                                 <option>Dubai</option>
 232                                                                         </select>
 233                                                                         <input type="password" placeholder="Confirm password">
 234                                                                         <input type="text" placeholder="Phone *">
 235                                                                         <input type="text" placeholder="Mobile Phone">
 236                                                                         <input type="text" placeholder="Fax">
 237                                                                 </form>
 238                                                         </div>
 239                                                 </div>
 240                                         </div>
 241                                         <div class="col-sm-4">
 242                                                 <div class="order-message">
 243                                                         <p>Shipping Order</p>
 244                                                         <textarea name="message"  placeholder="Notes about your order, Special Notes for Delivery" rows="16"></textarea>
 245                                                         <label><input type="checkbox"> Shipping to bill address</label>
 246                                                 </div>
 247                                         </div>
 248                                 </div>
 249                         </div>
 250                         <div class="review-payment">
 251                                 <h2>Review & Payment</h2>
 252                         </div>
 253
 254                         <div class="table-responsive cart_info">
 255                                 <table class="table table-condensed">
 256                                         <thead>
 257                                                 <tr class="cart_menu">
 258                                                         <td class="image">Item</td>
 259                                                         <td class="description"></td>
 260                                                         <td class="price">Price</td>
 261                                                         <td class="quantity">Quantity</td>
 262                                                         <td class="total">Total</td>
 263                                                         <td></td>
 264                                                 </tr>
 265                                         </thead>
 266                                         <tbody>
 267                                                 <tr>
 268                                                         <td class="cart_product">
 269                                                                 <a href=""><img src="images/cart/one.png" alt=""></a>
 270                                                         </td>
 271                                                         <td class="cart_description">
 272                                                                 <h4><a href="">Colorblock Scuba</a></h4>
 273                                                                 <p>Web ID: 1089772</p>
 274                                                         </td>
 275                                                         <td class="cart_price">
 276                                                                 <p>$59</p>
 277                                                         </td>
 278                                                         <td class="cart_quantity">
 279                                                                 <div class="cart_quantity_button">
 280                                                                         <a class="cart_quantity_up" href=""> + </a>
 281                                                                         <input class="cart_quantity_input" type="text" name="quantity" value="1" autocomplete="off" size="2">
 282                                                                         <a class="cart_quantity_down" href=""> - </a>
 283                                                                 </div>
 284                                                         </td>
 285                                                         <td class="cart_total">
 286                                                                 <p class="cart_total_price">$59</p>
 287                                                         </td>
 288                                                         <td class="cart_delete">
 289                                                                 <a class="cart_quantity_delete" href=""><i class="fa fa-times"></i></a>
 290                                                         </td>
 291                                                 </tr>
 292
 293                                                 <tr>
 294                                                         <td class="cart_product">
 295                                                                 <a href=""><img src="images/cart/two.png" alt=""></a>
 296                                                         </td>
 297                                                         <td class="cart_description">
 298                                                                 <h4><a href="">Colorblock Scuba</a></h4>
 299                                                                 <p>Web ID: 1089772</p>
 300                                                         </td>
 301                                                         <td class="cart_price">
 302                                                                 <p>$59</p>
 303                                                         </td>
 304                                                         <td class="cart_quantity">
 305                                                                 <div class="cart_quantity_button">
 306                                                                         <a class="cart_quantity_up" href=""> + </a>
 307                                                                         <input class="cart_quantity_input" type="text" name="quantity" value="1" autocomplete="off" size="2">
 308                                                                         <a class="cart_quantity_down" href=""> - </a>
 309                                                                 </div>
 310                                                         </td>
 311                                                         <td class="cart_total">
 312                                                                 <p class="cart_total_price">$59</p>
 313                                                         </td>
 314                                                         <td class="cart_delete">
 315                                                                 <a class="cart_quantity_delete" href=""><i class="fa fa-times"></i></a>
 316                                                         </td>
 317                                                 </tr>
 318                                                 <tr>
 319                                                         <td class="cart_product">
 320                                                                 <a href=""><img src="images/cart/three.png" alt=""></a>
 321                                                         </td>
 322                                                         <td class="cart_description">
 323                                                                 <h4><a href="">Colorblock Scuba</a></h4>
 324                                                                 <p>Web ID: 1089772</p>
 325                                                         </td>
 326                                                         <td class="cart_price">
 327                                                                 <p>$59</p>
 328                                                         </td>
 329                                                         <td class="cart_quantity">
 330                                                                 <div class="cart_quantity_button">
 331                                                                         <a class="cart_quantity_up" href=""> + </a>
 332                                                                         <input class="cart_quantity_input" type="text" name="quantity" value="1" autocomplete="off" size="2">
 333                                                                         <a class="cart_quantity_down" href=""> - </a>
 334                                                                 </div>
 335                                                         </td>
 336                                                         <td class="cart_total">
 337                                                                 <p class="cart_total_price">$59</p>
 338                                                         </td>
 339                                                         <td class="cart_delete">
 340                                                                 <a class="cart_quantity_delete" href=""><i class="fa fa-times"></i></a>
 341                                                         </td>
 342                                                 </tr>
 343                                                 <tr>
 344                                                         <td colspan="4">&nbsp;</td>
 345                                                         <td colspan="2">
 346                                                                 <table class="table table-condensed total-result">
 347                                                                         <tr>
 348                                                                                 <td>Cart Sub Total</td>
 349                                                                                 <td>$59</td>
 350                                                                         </tr>
 351                                                                         <tr>
 352                                                                                 <td>Exo Tax</td>
 353                                                                                 <td>$2</td>
 354                                                                         </tr>
 355                                                                         <tr class="shipping-cost">
 356                                                                                 <td>Shipping Cost</td>
 357                                                                                 <td>Free</td>
 358                                                                         </tr>
 359                                                                         <tr>
 360                                                                                 <td>Total</td>
 361                                                                                 <td><span>$61</span></td>
 362                                                                         </tr>
 363                                                                 </table>
 364                                                         </td>
 365                                                 </tr>
 366                                         </tbody>
 367                                 </table>
 368                         </div>
 369                         <div class="payment-options">
 370                                         <span>
 371                                                 <label><input type="checkbox"> Direct Bank Transfer</label>
 372                                         </span>
 373                                         <span>
 374                                                 <label><input type="checkbox"> Check Payment</label>
 375                                         </span>
 376                                         <span>
 377                                                 <label><input type="checkbox"> Paypal</label>
 378                                         </span>
 379                                 </div>
 380                 </div>
 381         </section> <!--/#cart_items-->
 382
 383
 384
 385         <footer id="footer"><!--Footer-->
 386                 <div class="footer-top">
 387                         <div class="container">
 388                                 <div class="row">
 389                                         <div class="col-sm-2">
 390                                                 <div class="companyinfo">
 391                                                         <h2><span>e</span>-shopper</h2>
 392                                                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor</p>
 393                                                 </div>
 394                                         </div>
 395                                         <div class="col-sm-7">
 396                                                 <div class="col-sm-3">
 397                                                         <div class="video-gallery text-center">
 398                                                                 <a href="#">
 399                                                                         <div class="iframe-img">
 400                                                                                 <img src="images/home/iframe1.png" alt="" />
 401                                                                         </div>
 402                                                                         <div class="overlay-icon">
 403                                                                                 <i class="fa fa-play-circle-o"></i>
 404                                                                         </div>
 405                                                                 </a>
 406                                                                 <p>Circle of Hands</p>
 407                                                                 <h2>24 DEC 2014</h2>
 408                                                         </div>
 409                                                 </div>
 410
 411                                                 <div class="col-sm-3">
 412                                                         <div class="video-gallery text-center">
 413                                                                 <a href="#">
 414                                                                         <div class="iframe-img">
 415                                                                                 <img src="images/home/iframe2.png" alt="" />
 416                                                                         </div>
 417                                                                         <div class="overlay-icon">
 418                                                                                 <i class="fa fa-play-circle-o"></i>
 419                                                                         </div>
 420                                                                 </a>
 421                                                                 <p>Circle of Hands</p>
 422                                                                 <h2>24 DEC 2014</h2>
 423                                                         </div>
 424                                                 </div>
 425
 426                                                 <div class="col-sm-3">
 427                                                         <div class="video-gallery text-center">
 428                                                                 <a href="#">
 429                                                                         <div class="iframe-img">
 430                                                                                 <img src="images/home/iframe3.png" alt="" />
 431                                                                         </div>
 432                                                                         <div class="overlay-icon">
 433                                                                                 <i class="fa fa-play-circle-o"></i>
 434                                                                         </div>
 435                                                                 </a>
 436                                                                 <p>Circle of Hands</p>
 437                                                                 <h2>24 DEC 2014</h2>
 438                                                         </div>
 439                                                 </div>
 440
 441                                                 <div class="col-sm-3">
 442                                                         <div class="video-gallery text-center">
 443                                                                 <a href="#">
 444                                                                         <div class="iframe-img">
 445                                                                                 <img src="images/home/iframe4.png" alt="" />
 446                                                                         </div>
 447                                                                         <div class="overlay-icon">
 448                                                                                 <i class="fa fa-play-circle-o"></i>
 449                                                                         </div>
 450                                                                 </a>
 451                                                                 <p>Circle of Hands</p>
 452                                                                 <h2>24 DEC 2014</h2>
 453                                                         </div>
 454                                                 </div>
 455                                         </div>
 456                                         <div class="col-sm-3">
 457                                                 <div class="address">
 458                                                         <img src="images/home/map.png" alt="" />
 459                                                         <p>505 S Atlantic Ave Virginia Beach, VA(Virginia)</p>
 460                                                 </div>
 461                                         </div>
 462                                 </div>
 463                         </div>
 464                 </div>
 465
 466                 <div class="footer-widget">
 467                         <div class="container">
 468                                 <div class="row">
 469                                         <div class="col-sm-2">
 470                                                 <div class="single-widget">
 471                                                         <h2>Service</h2>
 472                                                         <ul class="nav nav-pills nav-stacked">
 473                                                                 <li><a href="">Online Help</a></li>
 474                                                                 <li><a href="">Contact Us</a></li>
 475                                                                 <li><a href="">Order Status</a></li>
 476                                                                 <li><a href="">Change Location</a></li>
 477                                                                 <li><a href="">FAQ’s</a></li>
 478                                                         </ul>
 479                                                 </div>
 480                                         </div>
 481                                         <div class="col-sm-2">
 482                                                 <div class="single-widget">
 483                                                         <h2>Quock Shop</h2>
 484                                                         <ul class="nav nav-pills nav-stacked">
 485                                                                 <li><a href="">T-Shirt</a></li>
 486                                                                 <li><a href="">Mens</a></li>
 487                                                                 <li><a href="">Womens</a></li>
 488                                                                 <li><a href="">Gift Cards</a></li>
 489                                                                 <li><a href="">Shoes</a></li>
 490                                                         </ul>
 491                                                 </div>
 492                                         </div>
 493                                         <div class="col-sm-2">
 494                                                 <div class="single-widget">
 495                                                         <h2>Policies</h2>
 496                                                         <ul class="nav nav-pills nav-stacked">
 497                                                                 <li><a href="">Terms of Use</a></li>
 498                                                                 <li><a href="">Privecy Policy</a></li>
 499                                                                 <li><a href="">Refund Policy</a></li>
 500                                                                 <li><a href="">Billing System</a></li>
 501                                                                 <li><a href="">Ticket System</a></li>
 502                                                         </ul>
 503                                                 </div>
 504                                         </div>
 505                                         <div class="col-sm-2">
 506                                                 <div class="single-widget">
 507                                                         <h2>About Shopper</h2>
 508                                                         <ul class="nav nav-pills nav-stacked">
 509                                                                 <li><a href="">Company Information</a></li>
 510                                                                 <li><a href="">Careers</a></li>
 511                                                                 <li><a href="">Store Location</a></li>
 512                                                                 <li><a href="">Affillate Program</a></li>
 513                                                                 <li><a href="">Copyright</a></li>
 514                                                         </ul>
 515                                                 </div>
 516                                         </div>
 517                                         <div class="col-sm-3 col-sm-offset-1">
 518                                                 <div class="single-widget">
 519                                                         <h2>About Shopper</h2>
 520                                                         <form action="#" class="searchform">
 521                                                                 <input type="text" placeholder="Your email address" />
 522                                                                 <button type="submit" class="btn btn-default"><i class="fa fa-arrow-circle-o-right"></i></button>
 523                                                                 <p>Get the most recent updates from <br />our site and be updated your self...</p>
 524                                                         </form>
 525                                                 </div>
 526                                         </div>
 527
 528                                 </div>
 529                         </div>
 530                 </div>
 531
 532                 <div class="footer-bottom">
 533                         <div class="container">
 534                                 <div class="row">
 535                                         <p class="pull-left">Copyright © 2013 E-SHOPPER Inc. All rights reserved.</p>
 536                                         <p class="pull-right">Designed by <span><a target="_blank" href="http://www.themeum.com">Themeum</a></span></p>
 537                                 </div>
 538                         </div>
 539                 </div>
 540
 541         </footer><!--/Footer-->
 542
 543
 544
 545     <script src="js/jquery.js"></script>
 546         <script src="js/bootstrap.min.js"></script>
 547     <script src="js/jquery.scrollUp.min.js"></script>
 548     <script src="js/jquery.prettyPhoto.js"></script>
 549     <script src="js/main.js"></script>
 550 </body>
 551 </html>