CC form

by Kirubel Girma

HTML

<div class="inpCont" id="inPTC">
  <input type="text" class="inpCC" id="ccNum" autocomplete="cc-number" placeholder="4242 4242 4242 4242">
  <input type="text" class="inpCC" id="ccDte" autocomplete="cc-exp" placeholder="11/2025">
  <input type="text" class="inpCC" id="ccCVC" autocomplete="cc-csc" placeholder="CVC">
</div>
<br>
<div class="inpCont" id="ccNameOn">
  <span class="textPdd">Name On Card</span>
  <input type="text" class="inpCC" autocomplete="cc-name" placeholder="Jane Doe">
  <br>
  <br>
  <span class="textPdd">Billing Address</span>
  <input type="text" class="inpCC" autocomplete="street-address" placeholder="123 John Doe ST, Atlanta GA, 12332">
</div>

CSS

body {
  background: #0C2394;
  font-family: arial;
  color: rgba(255, 255, 255, 0.38);
}

#inPTC {
  margin-top: 4em;
}

.inpCont {
  margin: auto;

  height: 2.2em;
  border-radius: 0.4em;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
  display: flex;
  width: 19em;
}

.inpCC {
  outline: none;
  border: none;
  font-size: 1em;
  background-color: transparent;
  height: 100%;
  color: white;
  width: 100%;

  max-height: 2.2em;
  border-bottom: 0.08em solid rgba(255, 255, 255, 0.14);
  margin-left: 0.5em;
  margin-right: 0.5em;
}

#ccNum {
  max-width: 11em;
  padding-left: .5em;

}

#ccDte {
  max-width: 4em;
  padding-left: .5em;

}

#ccCVC {
  max-width: 3em;
  padding-left: .5em;

}

.textPdd {
  padding-left: .5em;
  margin-top: .5em;
}

#ccNameOn {
  padding-top: .5em;
  display: block;
  height: 12em;
}

::-webkit-input-placeholder {
  /* Edge */
  color: rgba(190, 190, 190, 0.12);
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: rgba(190, 190, 190, 0.12);
}

::placeholder {
  color: rgba(190, 190, 190, 0.12);
}