HTML5, CSS, and jQuery for Interactive Card

The month input must have a custom validation with JavaScript (or Jquery) , It takes even bigger numbers like 23

You could do something like this =>

      confirmBtn = document.querySelector("form buttom");

confirmBtn.addEventListener("click", (e)=> {
    e.preventValue()
    checkMonth()
}

function checkMonth(){
     if(month.value && month.value > 0 && month.value <= 12){
      // the solution goes here, 
      }
}

your project look exactly like the design love your work <3

Hi Daniel. Nice work and i think you did a great job with the layout because it is very close to the design.

There is a little fix for the card number on the front card.

The card number is center aligned but it should be left aligned like on the design (always aligned with the card logo & the Name). It works with all 0 but since each character has a different length it is not consistent.

here is the fixed code i tested on the browser:

{
  position: absolute;
  left: 2.3rem; /* fix here */
  bottom: 3.4375rem;
  min-width: 27.9375rem;
  font-size: 1.625rem;
  color: var(--white);
  letter-spacing: 0.25rem;
  text-align: center; /* remove this line */
  text-decoration: none;
}

Again, great job and happy coding.