<html>
<head>
  <!-- Latest compiled and minified BootstrapCSS -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  
  <!--   Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Montserrat:100,300,400,500,600,700|Playfair+Display:400,700" rel="stylesheet">

  <title>
  </title>
</head>

<body>
  <div class="wrapper">
    <h1>Squarespace Sample Checkout</h1>

    <div class="left col col-md-6">
      <div class="customer-info">
        <h2><span>1</span> Customer</h2>


        <p>your@email.com</p>
      </div>


      <div class="customer-pay">
        <h2><span>2</span> Payment</h2>


        <p id="accept">Accepted</p>
        <i aria-hidden="true" class="fa fa-cc-mastercard"></i> <i aria-hidden="true" class="fa fa-cc-discover"></i> <i aria-hidden="true" class="fa fa-cc-visa"></i> <i aria-hidden="true" class="fa fa-cc-amex"></i>

        <div class="form-group">
          <label for="usr">Cardholder:</label> <input class="form-control" id="usr" type="text">
        </div>


        <div class="form-group">
          <label for="num">Card Number:</label> <input class="form-control" id="num" type="number">
        </div>


        <div class="form-group">
          <label for="usr">Expires:</label> <input class="form-control" id="usr" type="text">
        </div>
        <button class="btn btn-default" type="submit">Submit</button>
      </div>


      <div class="customer-info">
        <h2><span>3</span> Review</h2>
      </div>
    </div>


    <div class="right col col-md-6">
      <div class="customer-order">
        <h2><span>4</span> Order</h2>


        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <br>


        <p><span>Sample Item 1</span>
        </p>


        <p>$99.99</p>
        <br>


        <p><span>Sample Item</span>
        </p>


        <p>$20.00</p>

        <hr>


        <p><b>TOTAL:</b> $119.99</p>
      </div>
    </div>
 
  </div>
  

  
</body>
</html>
html {
  background-color: #fcfbfa;
  margin: 20px 100px 30px 100px;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #fcfbfa;

}

.col h2 {
  font-family: 'Montserrat', sans-serif;
  text-align: left;
  font-weight: 100;
  margin-bottom: 30px;
}

p {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  text-align: left;
  font-weight: 300;
  color: grey;
  line-height: 2em;
  letter-spacing: .1em;
}

.customer-order, .customer-pay, .customer-info {
  padding: 20px;
  margin-top: 30px;
  background-color: #ffffff;
  border: .5px solid #cccccc;
}

.btn {
  background-color: #000;
  text-transform: uppercase;
  font-weight: 300;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: .1em;
  font-size: 8px;
}

.btn:hover {
  background-color: #ffffff;
  text-transform: uppercase;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: .1em;
  border: 1px solid #555555;
}

span {
  color: #cccccc;
}

.customer-order {
  position: fixed;
  margin-right: 100px;
}

.fa {
  padding: 5px;
  margin: 0px 0px 30px 0px;
  text-align: left;
  color: #555555;
}

#accept, label {
  text-transform: uppercase;
  font-size: 11px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: #555555;
  letter-spacing: .1em;
}

.wrapper h1, .wrapper {
  background-color: #fcfbfa;
  font-family: 'Montserrat', sans-serif;
  font-weight: 100;
  margin-bottom: 20px;
}

.wrapper h1 {
  text-align: center;
}


// Not a functional design. Created for the Daily UI Challenge at dailyui.co //

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://use.fontawesome.com/83fc84333f.js