<section>
  <nav>
  <ul class="nav">
    <li class="nav-logo">
     UI # 2
    </li>
  </ul>
</nav>
  <div class="checkout">
    <div class="checkout-image">
      <img src="https://secure-images.nike.com/is/image/DotCom/848625_401_98_PREM?$SNKRS_COVER_WT$&align=0,1" alt="airmax-shoe" />
      <label class="checkout-image-title">Nike Air Max</label>
      <label class="checkout-image-price">
        £120.00
      </label>
    </div>
    <form class="checkout-form" id="checkout">
      <label for="card">Card number</label>
      <input id="card" type="text" maxlength="16 "autofocus required/>
      <label for="expiry">MM / YY</label>
      <input type="text" maxlength="4" required/>
      <label for="cvc">CVC</label>
      <input type="text" maxlength="3" required/>
      <button class="checkout-button">Pay now</button>
    </form>
  </div>
</section>
body {
  display: flex;
  justify-content: center;
  background-color: #673AB7;
  height: 100vh;
  color: white;
}

.nav {
  font-family: 'Pacifico', cursive;
  font-size: 1.5em;
  letter-spacing: 0.05em;
  text-align: center;
  list-style: none;
  padding: 20px 0;
  margin: 0;
}

.checkout {
  font-family: 'Roboto', sans-serif;
  width: 300px;
  min-height: 570px;
  background-color: white;
  position: relative;
  border-radius: 0.5em;
  
  &-image {
    max-height: 250px;
    max-width: 300px;
    overflow: hidden;
    
    img {
      height: auto;
      width: 100%;
      transform: translateY(-80px);
    }
    
    &-title {
      color: #777;
      position: absolute;
      top: 1em;
      right: 1em;
    }
    
    &-price {
      color: #444;
      position: absolute;
      top: 2.5em;
      right: 1em;
      font-weight: 600;
    }
  }
  
  &-form {
    display: flex;
    flex-direction: column;
    max-width: 90%;
    max-height: 50%;
    justify-content: center;
    align-items: center;
    padding: 1.25em 1.5em 0 1.5em;
    
    label {
      font-size: .8em;
      color: #aaa;
      display: block;
      width: 100%;
      margin-top: 1em;
    }
    
    input {
      width: 100%;
      height: 2em;
      margin-top: .65em;
      font-size: 1em;
      border: none;
      border-bottom: 1px solid #ccc;
      
      &:focus, :active {
        outline: 0;
        border-bottom: 1px solid #03A9F4;
      }
    }
  }
  
  &-button {
    width: 100%;
    background-color: #03A9F4;
    color: white;
    border: none;
    padding: 24px;
    position: absolute;
    bottom: 0;
    text-transform: uppercase;
    font-size: .75em;
    transition: .4s;
    
    &:active, &:focus, &:hover {
      outline: 0;
      background-color: darken(#03A9F4, 15%)
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.