A Code by alejandrokundrah

Open In Editor Video Publish Your Code

<!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;
}

JS

A Code by alejandrokundrah

Recommended

Brutalist Video Player

Animated Menu

Social media buttons Hovering

HTML

CSS

JS

Recommended

Brutalist Video Player

Animated Menu

Social media buttons Hovering

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS