A Code by alejandrokundrah

1,590 alejandrokundrah

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Futuristic Credit Card</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
  <div class="container">
    <div class="card-wrapper">
      <div class="card">
        <div class="card-front">
          <div class="chip-container">
            <div class="chip"></div>
            <div class="chip-glow"></div>
          </div>
          <span class="logo">
            <svg viewBox="0 0 256 83" xmlns="http://www.w3.org/2000/svg">
              <defs>
                <linearGradient y2="100%" y1="-2.006%" x2="54.877%" x1="45.974%" id="logosVisa0">
                  <stop stop-color="#22D3EE" offset="0%"></stop>
                  <stop stop-color="#06B6D4" offset="100%"></stop>
                </linearGradient>
              </defs>
              <path transform="matrix(1 0 0 -1 0 82.668)" d="M132.397 56.24c-.146-11.516 10.263-17.942 18.104-21.763c8.056-3.92 10.762-6.434 10.73-9.94c-.06-5.365-6.426-7.733-12.383-7.825c-10.393-.161-16.436 2.806-21.24 5.05l-3.744-17.519c4.82-2.221 13.745-4.158 23-4.243c21.725 0 35.938 10.724 36.015 27.351c.085 21.102-29.188 22.27-28.988 31.702c.069 2.86 2.798 5.912 8.778 6.688c2.96.392 11.131.692 20.395-3.574l3.636 16.95c-4.982 1.814-11.385 3.551-19.357 3.551c-20.448 0-34.83-10.87-34.946-26.428m89.241 24.968c-3.967 0-7.31-2.314-8.802-5.865L181.803 1.245h21.709l4.32 11.939h26.528l2.506-11.939H256l-16.697 79.963h-17.665m3.037-21.601l6.265-30.027h-17.158l10.893 30.027m-118.599 21.6L88.964 1.246h20.687l17.104 79.963h-20.679m-30.603 0L53.941 26.782l-8.71 46.277c-1.022 5.166-5.058 8.149-9.54 8.149H.493L0 78.886c7.226-1.568 15.436-4.097 20.41-6.803c3.044-1.653 3.912-3.098 4.912-7.026L41.819 1.245H63.68l33.516 79.963H75.473" fill="url(#logosVisa0)"></path>
            </svg>
          </span>
          <div class="card-number">
            <span id="card-num-display">•••• •••• •••• ••••</span>
          </div>
          <div class="card-details">
            <div class="holder-name">
              <label>CARD HOLDER</label>
              <span id="card-holder-display">YOUR NAME</span>
            </div>
            <div class="expiry-date">
              <label>EXPIRES</label>
              <span id="expiry-display">MM/YY</span>
            </div>
          </div>
          <div class="holographic-element"></div>
          <div class="circuit-lines"></div>
        </div>
        <div class="card-back">
          <div class="magnetic-strip"></div>
          <div class="signature-strip">
            <div class="cvv-container">
              <label>CVV</label>
              <span id="cvv-display">•••</span>
            </div>
          </div>
          <div class="back-info">
            <p>This card is property of the issuing bank. Use subject to cardholder agreement.</p>
          </div>
        </div>
      </div>
    </div>

<div class="form-container">
      <form id="credit-card-form">
        <h2>Payment Details</h2>
        
        <div class="wave-group">
          <input required type="text" class="input" id="card-number" maxlength="19">
          <span class="bar"></span>
          <label class="label">
            <span class="label-char" style="--index: 0">C</span>
            <span class="label-char" style="--index: 1">a</span>
            <span class="label-char" style="--index: 2">r</span>
            <span class="label-char" style="--index: 3">d</span>
            <span class="label-char" style="--index: 4"> </span>
            <span class="label-char" style="--index: 5">N</span>
            <span class="label-char" style="--index: 6">u</span>
            <span class="label-char" style="--index: 7">m</span>
            <span class="label-char" style="--index: 8">b</span>
            <span class="label-char" style="--index: 9">e</span>
            <span class="label-char" style="--index: 10">r</span>
          </label>
        </div>
        
        <div class="wave-group">
          <input required type="text" class="input" id="card-holder">
          <span class="bar"></span>
          <label class="label">
            <span class="label-char" style="--index: 0">C</span>
            <span class="label-char" style="--index: 1">a</span>
            <span class="label-char" style="--index: 2">r</span>
            <span class="label-char" style="--index: 3">d</span>
            <span class="label-char" style="--index: 4"> </span>
            <span class="label-char" style="--index: 5">H</span>
            <span class="label-char" style="--index: 6">o</span>
            <span class="label-char" style="--index: 7">l</span>
            <span class="label-char" style="--index: 8">d</span>
            <span class="label-char" style="--index: 9">e</span>
            <span class="label-char" style="--index: 10">r</span>
          </label>
        </div>
        
        <div class="form-row">
          <div class="wave-group half-width">
            <input required type="text" class="input" id="expiry-date" maxlength="5">
            <span class="bar"></span>
            <label class="label">
              <span class="label-char" style="--index: 0">E</span>
              <span class="label-char" style="--index: 1">x</span>
              <span class="label-char" style="--index: 2">p</span>
              <span class="label-char" style="--index: 3">i</span>
              <span class="label-char" style="--index: 4">r</span>
              <span class="label-char" style="--index: 5">y</span>
              <span class="label-char" style="--index: 6"> </span>
              <span class="label-char" style="--index: 7">D</span>
              <span class="label-char" style="--index: 8">a</span>
              <span class="label-char" style="--index: 9">t</span>
              <span class="label-char" style="--index: 10">e</span>
            </label>
          </div>
          
          <div class="wave-group half-width">
            <input required type="text" class="input" id="cvv" maxlength="3">
            <span class="bar"></span>
            <label class="label">
              <span class="label-char" style="--index: 0">C</span>
              <span class="label-char" style="--index: 1">V</span>
              <span class="label-char" style="--index: 2">V</span>
            </label>
          </div>
        </div>
        
        <button type="submit" class="submit-btn">
          <span>Process Payment</span>
          <div class="btn-glow"></div>
        </button>
      </form>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Rajdhani', sans-serif;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #050816 0%, #0a0a2e 100%);
  padding: 20px;
  overflow-x: hidden;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1000px;
  gap: 50px;
  padding: 20px;
}

@media (min-width: 768px) {
  .container {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* Card styles */
.card-wrapper {
  perspective: 1000px;
  width: 350px;
  height: 220px;
  position: relative;
  margin-bottom: 30px;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card.flipped {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  border-radius: 20px;
  overflow: hidden;
  padding: 25px;
}

.card-front {
  background: linear-gradient(45deg, rgba(15, 23, 42, 0.9), rgba(23, 42, 69, 0.8));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 
    0 0 10px rgba(8, 145, 178, 0.5),
    0 0 30px rgba(8, 145, 178, 0.2);
  border: 1px solid rgba(8, 145, 178, 0.3);
}

.card-back {
  background: linear-gradient(45deg, rgba(15, 23, 42, 0.9), rgba(23, 42, 69, 0.8));
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 
    0 0 10px rgba(8, 145, 178, 0.5),
    0 0 30px rgba(8, 145, 178, 0.2);
  border: 1px solid rgba(8, 145, 178, 0.3);
}

.holographic-element {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(0, 225, 255, 0.05) 25%,
    rgba(255, 0, 255, 0.05) 50%,
    rgba(0, 225, 255, 0.05) 75%,
    rgba(255, 255, 255, 0.05) 100%
  );
  opacity: 0.3;
  pointer-events: none;
  z-index: 1;
  border-radius: 20px;
}

.circuit-lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(90deg, transparent 49%, rgba(8, 145, 178, 0.2) 50%, transparent 51%),
    linear-gradient(180deg, transparent 49%, rgba(8, 145, 178, 0.2) 50%, transparent 51%);
  background-size: 40px 40px;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
  border-radius: 20px;
}

/* Logo */
.logo {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
}

.logo svg {
  height: 48px;
  width: 54px;
  filter: drop-shadow(0 0 5px rgba(8, 145, 178, 0.8));
}

/* Chip */
.chip-container {
  position: relative;
  width: 50px;
  height: 40px;
  margin-bottom: 30px;
  z-index: 2;
}

.chip {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e6b400, #ffd700);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.chip::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background: 
    linear-gradient(90deg, transparent 50%, rgba(0, 0, 0, 0.1) 50%),
    linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0.1) 50%);
  background-size: 10px 10px;
  border-radius: 4px;
}

.chip-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(230, 180, 0, 0.7);
  animation: pulse 2s infinite alternate;
  opacity: 0.7;
}

/* Card Number */
.card-number {
  margin-bottom: 20px;
  z-index: 2;
  position: relative;
}

#card-num-display {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 4px;
  color: #fff;
  text-shadow: 0 0 5px rgba(8, 145, 178, 0.8);
}

/* Card Details */
.card-details {
  display: flex;
  justify-content: space-between;
  z-index: 2;
  position: relative;
}

.holder-name, .expiry-date {
  display: flex;
  flex-direction: column;
}

.holder-name label, .expiry-date label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 5px;
  letter-spacing: 1px;
}

#card-holder-display, #expiry-display {
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  color: #fff;
  text-shadow: 0 0 5px rgba(8, 145, 178, 0.8);
}

/* Card Back */
.magnetic-strip {
  width: 100%;
  height: 40px;
  background: linear-gradient(to right, #111, #333, #111);
  margin: 20px 0;
}

.signature-strip {
  background: rgba(255, 255, 255, 0.1);
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 10px;
  border-radius: 4px;
}

.cvv-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.cvv-container label {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 3px;
}

#cvv-display {
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  color: #fff;
  letter-spacing: 2px;
}

.back-info {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  margin-top: 20px;
  line-height: 1.2;
}

/* Form Styles */
.form-container {
  background: rgba(15, 23, 42, 0.7);
  padding: 30px;
  border-radius: 15px;
  width: 100%;
  max-width: 400px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(8, 145, 178, 0.3);
  box-shadow: 0 0 20px rgba(8, 145, 178, 0.2);
}

h2 {
  color: #fff;
  text-align: center;
  margin-bottom: 30px;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 1px;
  text-shadow: 0 0 5px rgba(8, 145, 178, 0.8);
}

.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.half-width {
  width: calc(50% - 10px);
}

.wave-group {
  position: relative;
  margin-bottom: 30px;
  width: 100%;
}

.wave-group .input {
  font-size: 16px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid #515151;
  background: transparent;
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
}

.wave-group .input:focus {
  outline: none;
}

.wave-group .label {
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  display: flex;
}

.wave-group .label-char {
  transition: 0.2s ease all;
  transition-delay: calc(var(--index) * 0.05s);
}

.wave-group .input:focus ~ label .label-char,
.wave-group .input:valid ~ label .label-char {
  transform: translateY(-20px);
  font-size: 14px;
  color: #06B6D4;
}

.wave-group .bar {
  position: relative;
  display: block;
  width: 100%;
}

.wave-group .bar:before,
.wave-group .bar:after {
  content: "";
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #06B6D4;
  transition: 0.2s ease all;
}

.wave-group .bar:before {
  left: 50%;
}

.wave-group .bar:after {
  right: 50%;
}

.wave-group .input:focus ~ .bar:before,
.wave-group .input:focus ~ .bar:after {
  width: 50%;
}

.submit-btn {
  width: 100%;
  padding: 12px;
  background: rgba(8, 145, 178, 0.2);
  color: #fff;
  border: 1px solid rgba(8, 145, 178, 0.5);
  border-radius: 30px;
  cursor: pointer;
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  letter-spacing: 1px;
  margin-top: 10px;
}

.submit-btn:hover {
  background: rgba(8, 145, 178, 0.4);
}

.btn-glow {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(8, 145, 178, 0.3),
    transparent
  );
  transition: 0.5s;
}

.submit-btn:hover .btn-glow {
  left: 100%;
}

/* Animations */
@keyframes pulse {
  0% {
    opacity: 0.5;
    box-shadow: 0 0 5px rgba(230, 180, 0, 0.5);
  }
  100% {
    opacity: 0.8;
    box-shadow: 0 0 15px rgba(230, 180, 0, 0.8);
  }
}

::selection {
  background-color: rgba(8, 145, 178, 0.3);
  color: #fff;
}

A Code by alejandrokundrah

Recommended