stage3

by Ting-Yuan Chang

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="checkoutContainer">
  <div class="content">
    <div class="title">訂購資訊<span class="subTitle">Order Information</span></div>
    <div class="orderInfo">
      <div class="block">
        <div class="title">寄送方式<span class="subTitle">Shipping</span></div>
        <div class="content">7-11純取貨-新工農門市</div>
      </div>
      <div class="block">
        <div class="title">付款方式<span class="subTitle">Payment</span></div>
        <div class="content">ATM付款</div>
      </div>
      <div class="block">
        <div class="title">發票開立<span class="subTitle">Invoice</span></div>
        <div class="content">捐贈發票</div>
      </div>
      <div class="clearfix invoice"></div>
      
      <ul class="priceList">
        <li>
          <span>天然草本手工皂－薄荷活性碳</span>
          <span><span>NT$ 399</span><span>2</span></span>
          <span>NT$ 798</span>
        </li>
        <li>
          <span>葵花高效防曬乳SPF50 50mL</span>
          <span><span>NT$ 599</span><span>2</span></span>
          <span>NT$ 599</span>
        </li>
        <li>
          <span>運費</span>
          <span><span></span><span></span></span>
          <span>NT$ 65</span>
        </li>
        <li>
          <span>折抵</span>
          <span><span></span><span></span></span>
          <span>- NT$ 50</span>
        </li>
        <li>
          <span></span>
          <span><span></span><span></span></span>
          <span><span class="title">總計<span class="subTitle">Total</span></span><span class="total">NT$ 1,379</span></span>
        </li>
      </ul>
    </div>
    
    <div class="title">聯絡資訊<span class="subTitle">Contact Information</span></div>
    <div class="orderInfo">
      <div class="block">
        <div...

CSS

body {
  background: white;
}
#checkoutContainer {
  width: 830px;
  margin: auto;
  font-size: 0;
}

#checkoutContainer > .content {
  font-size: 18px;
}

#checkoutContainer .title {
  font-family: NotoSansCJKtc;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-align: left;
  color: #454245;
  margin-top: 60px;
}

#checkoutContainer .deliveryOption, #checkoutContainer .paymentOption {
  float: left;
}

#checkoutContainer .deliveryOption2 {
  float: right;
  display: none;
}

#checkoutContainer .deliveryOption2.show {
  display: block;
}

#checkoutContainer .paymentOption .dropdown-menu li.hide {
  display: none;
}

#checkoutContainer button {
  border: none;
  background: transparent;
  border-bottom: solid 2px rgba(151, 151, 151, 0.2);
  margin-top: 20px;
  padding: 13px 5px;
  width: 380px;
  text-align: left;
  position: relative;
}
#checkoutContainer button:hover {
  border-bottom: solid 2px rgba(151, 151, 151, 0.5);
}
#checkoutContainer button:active {
  box-shadow: none;
}
#checkoutContainer button:focus { 
  outline:none; 
  border-bottom: solid 2px rgba(151, 151, 151, 0.8);
}

#checkoutContainer .content .desc {
  font-family: NotoSansCJKtc, Lato;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.22;
  letter-spacing: 1.1px;
  margin-right: 10px;
  color: #353235;
}

#checkoutContainer .option {
  font-family: NotoSansCJKtc, Lato;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 1.1px;
  color: #454245;
}

#checkoutContainer .button {
  position: absolute;font-size: 18px;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  color: #665857;
}

#checkoutContainer .dropdown-menu {
  width: 100%;
}

#checkoutContainer .clearfix {
  height: 20px;
  clear: both;
  overflow: auto;
}

#checkoutContainer .cvs {
  display: none; 
  margin-bottom: 25px;
}

#checkoutContainer .cvs.show {
  display: block;
}

#checkoutContainer .cvs span {
  font-family: NotoSansCJKtc, Lato;
  font-size: 18px;
 ...