<body>
  <div class="model">
    <div class="room">
      <div class="text-cover">
        <h1>Danny's House</h1>
        <p class="price"> 120.00 <span>USD</span> / Night</p>
        <hr>
        <p>Entire Home for 1 guest</p>
        <p>Tues, Oct 2, 2017 to Friday, Oct 5, 2017</p>
      </div>
    </div><div class="payment">
      <div class="receipt-box">
        <h3>Reciept Summary</h3>
        <table class="table">
          <tr>
            <td>120 x 2 nights</td>
            <td>240.00 USD</td>
          </tr>
          <tr>
            <td>Discount</td>
            <td>0 USD</td>
          </tr>
          <tr>
            <td>Subtotal</td>
            <td>240 USD</td>
          </tr>
          <tr>
            <td>Tax</td>
            <td>10 USD</td>
          </tr>
          <tfoot>
            <tr>
              <td>Sum</td>
              <td>$180</td>
            </tr>
          </tfoot>
        </table>
      </div>
      <div class="payment-info">
        <h3>Payment Info</h3>
        <form>
        <label>Name on Credit Card</label>
        <input type="text" name="firstname" value="Mickey">
        <label>Credit Card Number</label>
        <input type="text" name="lastname" value="Mouse">
        <br><br>
        <input class="btn" type="submit" value="Book Securly">
      </form>
      </div>
    </div>
  </div>
</body>
* {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
/*   border: 1px solid black; */
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 10% 0;
  position: relative;
  min-height: 100vh;
  background: #34495e;
  display: flex;
  justify-content: center;
    animation: fadein 5s;
  animation-fill-mode: forwards;
}

.fadeIn {
  animation: fadein 5s;
  animation-fill-mode: forwards;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

label {
  display: block;
}
/* Model Container */

.model {
  width: 900px;
  height: 700px;
  background: white;
/*   font-size: 0; */
  color: white;
  position: relative;
/*   animation: slideInFromLeft 1s cubic-bezier(0.68, -0.55, 0.265, 1.55); */
  animation-fill-mode: forwards;
}

.model:after {
    width: 30px;
    content: 'X';
    height: 30px;
    color: black;
    position: absolute;
    text-align: center;
    padding-top: 3px;
    top: 0;
    right: -30px;
    background-color: #bdc3c7;
}

@keyframes slideInFromLeft {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.room {
  width: 50%;
  height: 100%;
  background: url(https://images.unsplash.com/photo-1470274038469-958113db2384?auto=format&fit=crop&w=1875&q=80) no-repeat center center;
  background-size: cover;
  display: inline-block;
  vertical-align: top;
  position: relative;
}

.text-cover {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  padding: 20px
}

.text-cover > * {
  margin: 10px 0;
}

.text-cover h1 {
  font-size: 1.8rem;
}

.text-cover .price {
  color: #e67e22;
}

.text-cover .price span {
  font-size: 1.4rem;
  font-weight: 700;
}

.payment {
  width: 50%;
  height: 100%;
  color: #34495e;
  display: inline-block;
}

.receipt-box {
  padding: 20px 20px;
  border-bottom: 1px solid #34495e;
}

.receipt-box h3,
.payment-info h3 {
  margin-bottom: 2rem;
}

.payment-info {
  padding: 20px;
}


input[type=text]{
    width: 100%;
    padding: 8px 10px 10px;
    margin: 15px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.btn {
  padding: 15px 25px;
  border: none;
  color: white;
  width: 100%;
  display: block;
  background: #9b59b6;
  text-transform: uppercase;
}

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
  background-color: transparent;
}
 
.table td {
  font-size: 0.8rem;
  font-style: italic;
  padding: .25rem;
  vertical-align: top;
    
}


.table td:nth-child(2) {
  text-align: right;
}



//https://dribbble.com/shots/2291259-Credit-Card-Checkout
//https://images.unsplash.com/photo-1507038772120-7fff76f79d79?auto=format&fit=crop&w=1867&q=80

var model = document.querySelector(".model");

function fadeIn () {
  console.log('fadein')
  model.className += " fadeIn";
}

External CSS

  1. https://fonts.googleapis.com/css?family=Open+Sans:300,400,700

External JavaScript

This Pen doesn't use any external JavaScript resources.