HTML Template
119 lines
4.2 KB
Thank You Page
Live Preview
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thank You Page</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', system-ui, sans-serif;
background: linear-gradient(135deg, #0a0a0f 0%, #111827 100%);
color: #e4e4e7;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.card {
background: #18181b;
border: 1px solid #27272a;
border-radius: 24px;
padding: 3rem;
max-width: 480px;
text-align: center;
}
.check-circle {
width: 80px; height: 80px;
margin: 0 auto 1.5rem;
border-radius: 50%;
background: linear-gradient(135deg, #22c55e, #16a34a);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: #fff;
animation: pop 0.5s ease-out;
}
@keyframes pop {
0% { transform: scale(0); }
70% { transform: scale(1.1); }
100% { transform: scale(1); }
}
h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.75rem; }
p { color: #71717a; line-height: 1.6; margin-bottom: 2rem; }
.order-info {
background: #09090b;
border: 1px solid #27272a;
border-radius: 12px;
padding: 1.25rem;
margin-bottom: 2rem;
text-align: left;
}
.order-info .row {
display: flex;
justify-content: space-between;
padding: 0.5rem 0;
font-size: 0.9rem;
}
.order-info .row span:first-child { color: #71717a; }
.order-info .row span:last-child { color: #e4e4e7; font-weight: 600; }
.btn {
display: inline-block;
padding: 0.875rem 2rem;
background: #6366f1;
color: #fff;
text-decoration: none;
border-radius: 10px;
font-weight: 600;
margin: 0.25rem;
transition: all 0.3s;
}
.btn:hover { background: #4f46e5; transform: translateY(-2px); }
.btn-outline {
background: transparent;
border: 1px solid #3f3f46;
color: #a1a1aa;
}
.btn-outline:hover { background: #27272a; }
.social { margin-top: 1.5rem; }
.social p { font-size: 0.8rem; color: #52525b; margin-bottom: 0.75rem; }
.social-links { display: flex; gap: 0.75rem; justify-content: center; }
.social-links a {
width: 36px; height: 36px;
border-radius: 8px;
background: #27272a;
display: flex; align-items: center; justify-content: center;
color: #71717a; text-decoration: none;
transition: all 0.3s;
}
.social-links a:hover { background: #6366f1; color: #fff; }
</style>
</head>
<body>
<div class="card">
<div class="check-circle">✓</div>
<h1>Thank You for Your Order!</h1>
<p>Your order has been confirmed and a receipt has been sent to your email address.</p>
<div class="order-info">
<div class="row"><span>Order Number</span><span>#ORD-2025-1234</span></div>
<div class="row"><span>Date</span><span>June 19, 2025</span></div>
<div class="row"><span>Total</span><span>$29.00</span></div>
<div class="row"><span>Payment</span><span>✓ Completed</span></div>
</div>
<a href="#" class="btn">Continue Shopping</a>
<a href="#" class="btn btn-outline">Download Receipt</a>
<div class="social">
<p>Follow us for updates</p>
<div class="social-links">
<a href="#">💬</a>
<a href="#">𝕏</a>
<a href="#">🌐</a>
<a href="#">📱</a>
</div>
</div>
</div>
</body>
</html>