Payment Failed - Page Design Html Codepen

/* micro-interactions */ button:active transform: translateY(1px);

/* content area */ .fail-content padding: 2.2rem 2rem 2.5rem;

.btn-secondary:hover background: #f8fafc; border-color: #94a3b8; transform: translateY(-2px);

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <title>Payment Failed | Secure Checkout</title>  <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet"> <style> * margin: 0; padding: 0; box-sizing: border-box; payment failed page design html codepen

.error-icon svg width: 48px; height: 48px; stroke: #dc2626; stroke-width: 1.7; fill: none;

.suggestion-list list-style: none; display: flex; flex-direction: column; gap: 10px;

/* responsive */ @media (max-width: 500px) .fail-content padding: 1.5rem; h1 font-size: 1.6rem; .action-buttons flex-direction: column; .btn width: 100%; .error-detail flex-direction: column; align-items: flex-start; </style> </head> <body> <div class="fail-card"> <div class="status-bar"></div> <div class="fail-content">  <div class="icon-circle"> <div class="error-icon"> <svg viewBox="0 0 24 24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10" stroke="currentColor" fill="white" stroke-width="1.7"/> <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="1.8"/> <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="1.8"/> </svg> </div> </div> .btn-secondary:hover background: #f8fafc

.message text-align: center; color: #475569; font-weight: 500; font-size: 1rem; line-height: 1.5; margin: 1rem 0 0.6rem; background: #f8fafc; padding: 0.9rem 1rem; border-radius: 1.2rem; border: 1px solid #e9eef3;

/* main card container */ .fail-card max-width: 520px; width: 100%; background: #ffffff; border-radius: 2rem; box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.25), 0 8px 18px rgba(0, 0, 0, 0.05); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease;

/* suggestion box */ .suggestion-box background: #f9f9fc; border-radius: 1.2rem; padding: 1rem 1.2rem; margin: 1.5rem 0 1.8rem; border: 1px solid #eef2f8; meta name="viewport" content="width=device-width

.support-link a color: #dc2626; text-decoration: none; font-weight: 600; border-bottom: 1px dashed #dc2626;

/* decorative top bar (error accent) */ .status-bar height: 8px; background: linear-gradient(90deg, #ef4444, #f97316, #ef4444); width: 100%;

.fail-card:hover transform: translateY(-3px); box-shadow: 0 30px 50px -14px rgba(0, 0, 0, 0.3);