<div class="align-center">
  <div class="card">
    <header>
    <h3 class="card-title">Payment Details</h3>
    <img width="128" alt="Visa Inc. logo"             src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Visa_Inc._logo.svg/128px-Visa_Inc._logo.svg.png" class="logo"/>
    </header>
    
    <form action="" class="form">
      <div class="card-number">
      <label for="number">Card Number</label>
      <input id="number" type="text" size="40" placeholder="1234 1234 1234 1234" required/>
      </div>
      
      <div class="card-name">
      <label for="name">Name</label>
      <input id="name" type="text" size="40" required placeholder="Your Name"/>
      </div>
      
      <div class="input-row">
      <div class="select-date">
      <label for="date">Expiration</label>
      <select name="" id="date">
        <option value="00"></option>
        <option value="01">01</option>
        <option value="02">02</option>
        <option value="03">03</option>
        <option value="04">04</option>
        <option value="05">05</option>
        <option value="06">06</option>
        <option value="07">07</option>
        <option value="08">08</option>
        <option value="09">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
      </select>
      <select name="" id="date">
        <option value="0000"></option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
        <option value="2019">2019</option>
        <option value="2020">2020</option>
        <option value="2021">2021</option>
      </select>
      </div>
      
      <div class="card-cvc">
      <label for="cvc">CVV</label>
      <input id="cvc" type="text" size="5" placeholder="123" required/>
      </div>
        
      <button class="buy-button">Complete Purchase</button>
      </div>
    </form>
    
  </div>
</div>
body {
  margin: 0;
  color: white;
  font-family: 'Electrolize', sans-serif;
  background-image: url(http://www.newhdwallpapers.in/wp-content/uploads/2014/04/Dandelion-at-Sunset-Nature-HD-Wallpaper.jpg);
  background-size: cover;
  background-position: center;
}

.align-center {
  display: flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
}

.card {
  width: 500px;
  height: 300px;
  border-radius: 12px;
  box-shadow: 2px 2px 0 #222, 2px 2px 15px rgba(0,0,0,0.9);
  background: black;
  background: -webkit-linear-gradient(left, #000000, #282828);
  background: -o-linear-gradient(right, #000000, #282828);
  background: -moz-linear-gradient(right, #000000, #282828);
  background: linear-gradient(to right, #000000, #282828)
}

.form {
  padding-top: 110px;
}

.card-title {
  float:left;
  margin-left: 15px;
}

.logo {
  float: right;
  margin-top: 15px;
  margin-right: 15px;
}

label {
  display: block;
}

.card-number {
  float: left;
  margin-left: 15px;
  margin-bottom: 10px;
  color: white;
}
.card-number input {
  height: 30px;
  background-color: transparent;
  border: none;
  font-family: 'Electrolize', sans-serif;
  color: #fff;
}

.card-name {
  clear: both;
  float: left;
  margin-left: 15px;
  margin-bottom: 15px;
  color: #fff;
}

.card-name input {
  height: 30px;
  background-color: transparent;
  border: none;
  color: white;
  font-family: 'Electrolize', sans-serif;
}

input:focus {
  color: #fff;
  outline: none;
  border-bottom: 1px solid white;
}

.select-date {
  clear: both;
  float: left;
  margin-left: 15px;
}

.card-cvc {
  float: right;
  margin-right: 15px;
}

.card-cvc input {
  background-color: transparent;
  border: none;
  color: #fff;
  font-family: 'Electrolize', sans-serif;
}

select {
  border: none;
  background-color: rgba(255,255,255, 0.2);
  color: #fff;
}

option {
  color: #000000;
}

.buy-button {
  font-family: 'Electrolize', sans-serif;
  cursor: pointer;
  position: relative;
  margin-top: auto;
  margin-left: 64px;
  margin-right: -100px;
  padding: 10px 10px;
  border-radius: 6px;
  box-shadow: -2px 0px 6px 1px #000000;
  background-color: #FFAB40;
  border:none;
  color: #fff;
}

.buy-button:hover {
  background-color: #66BB6A;
  transition: linear 0.2s;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.