checkout-3.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>六角家具工坊 ｜ 發票</title>
  <link rel="stylesheet" href="stylesheet/all.css">
  <!-- FontAwesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css"
    integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
  </link>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light">
    <div class="container">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <a class="navbar-brand" href="index.html">六角家具工坊</a>    
      <a class="nav-link d-flex align-items-center order-md-1 text-accent" href="cart.html"><i class="fas fa-shopping-cart"></i></a>
    

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="index.html">首頁 <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="product.html">家具</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="login.html">登入</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <section class="mb-md-6">
    <div class="container">
      <div class="row">
        <div class="col-md-8 px-0">
          <div class="decked-card">
            <div class="decked-body p-5">
              <div class="d-flex">
                <h1 class="mr-auto">發票</h1>
                <div class="step-line"></div>
              </div>

              <!-- List group -->
              <div class="list-group d-flex flex-row" id="myList" role="tablist">
                
                  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home"
                    role="tab">電子發票</a>
                  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile"
                    role="tab">郵寄發票</a>
                
              </div>
              <!-- Tab panes -->
              <div class="tab-content">
                <div class="tab-pane active" id="home" role="tabpanel">
                  <form class="mt-3">
                    <div class="form-group">
                      <label for="tel">電子信箱</label>
                      <input type="tel" class="form-control form-control-lg" id="tel" placeholder="0912-345-678">
                    </div>
                    <div class="form-group">
                      <label for="tel">統一編號 (選填)</label>
                      <input type="tel" class="form-control form-control-lg" id="tel" placeholder="0912-345-678">
                    </div>
                  </form>
                </div>

                <div class="tab-pane" id="profile" role="tabpanel">
                  <form class="mt-3">
                    <label for="district">地址</label>
                    <div class="form-row">
                      <div class="form-group col-6">
                        <select id="district" class="form-control form-control-lg">
                          <option selected>高雄市</option>
                        </select>
                      </div>
                      <div class="form-group col-6">
                        <select id="district" class="form-control form-control-lg">
                          <option selected>新興區</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group">
                      <input type="address" class="form-control form-control-lg" id="district" placeholder="幸福路520號">
                    </div>
                    <div class="form-group">
                      <label for="tel">統一編號 (選填)</label>
                      <input type="tel" class="form-control form-control-lg" id="tel" placeholder="0912-345-678">
                    </div>
                  </form>
                </div>
              </div>
            </div>
            <div class="decked-footer">
              <a href="success.html" class="btn btn-contrast btn-block py-3">下一步</a>
            </div>
          </div>
        </div>

        <div class="col-md-4 d-none d-md-block">

          <div class="decked-card mb-4" style="border: 1px solid #d7e8eb;">
            <div class="decked-header py-2 text-center">
              <h2>訂單摘要</h2>
            </div>
            <div class="decked-body p-2 bg-white text-accent">
              <div class="d-flex mb-1">
                <span class="mr-auto">小計</span>
                <span>NT$ 2,700</span>
              </div>
              <div class="d-flex mb-1">
                <span class="mr-auto">運費</span>
                <span>300</span>
              </div>
              <div class="d-flex mb-1 h5">
                <span class="mr-auto">總計</span>
                <span>NT$ 3,000</span>
              </div>
            </div>
          </div>


          <div class="decked-card" style="border: 1px solid #d7e8eb;">
            <div class="decked-header py-2 text-center">
              <h2>購物清單</h2>
            </div>
            <div class="decked-body p-2 bg-white">
              <div class="cart-list text-accent d-flex  align-items-center">
                <div class="bg-cover mr-2"
                  style="width:110px; height:100px; background-image: url(https://images.unsplash.com/photo-1511401139252-f158d3209c17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80)">
                </div>
                <div>
                  <span class="h5">抹茶馬卡龍(2)</span><br><span>NT$ 450</span>
                </div>
              </div>
            </div>
          </div>


        </div>

      </div>
    </div>
  </section>

  <section class="bg-accent p-4">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-5 d-flex align-items-center justify-content-center justify-content-md-start mb-4 mb-md-0">
          <span class="text-white h4 mb-0">訂閱你我的甜蜜郵件</span>
        </div>
        <div class="col-md-5">
          <div class="form-group mb-0">
            <div class="input-group input-group-lg">
              <div class="input-group-prepend">
                <span class="input-group-text"><i class="fas fa-envelope"></i></span>
              </div>
              <input type="email" class="form-control" aria-label="Text input with segmented dropdown button">
              <div class="input-group-append">
                <button class="btn btn-contrast text-accent" type="button"><i class="fas fa-arrow-right"></i></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <footer class="text-accent bg-light p-4">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-5 d-flex flex-column justify-content-between">
          <div>
            <img src="./img/footer-logo.svg" height="27" alt="">
          </div>
          <div class="my-5">
            <div>07-1234-5678</div>
            <div>sweetaste@email.com</div>
            <div>800 高雄市新興區幸福路 520 號</div>
          </div>
        </div>
        <div class="col-md-5 text-right d-none d-md-block">
          <img src="./img/footer-text.svg" width="60" alt="">
        </div>
      </div>
      <div class="row justify-content-center mt-5">
        <div class="col-md-5 mt-2">
          <a href="#"><img src="./img/ic-line@.svg" height="32" width="32" alt=""></a>
          <a href="#"><img src="./img/ic-facebook.svg" height="32" width="32" alt=""></a>
        </div>
        <div class="col-md-5 text-md-right mt-2">
          <span>© 2018 Sweetaste* All Rights Reserved</span>
        </div>
      </div>
    </div>
    </div>
  </footer>

  <script>
    $('#myList a').on('click', function (e) {
      e.preventDefault()
      $(this).tab('show')
    })
  </script>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
    integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
    integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
    crossorigin="anonymous"></script>

</body>

</html>