Scribd
Upload
13 views

html (1)

The document is an HTML template for a product page featuring the Premium Smartwatch Pro, highlighting its health monitoring, long battery life, and water resistance. It includes a secure payment section with a form for cardholder information and payment processing. The design utilizes CSS for layout and styling, ensuring a user-friendly experience.

Uploaded by

webnur46
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
13 views

html (1)

The document is an HTML template for a product page featuring the Premium Smartwatch Pro, highlighting its health monitoring, long battery life, and water resistance. It includes a secure payment section with a form for cardholder information and payment processing. The design utilizes CSS for layout and styling, ensuring a user-friendly experience.

Uploaded by

webnur46
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Premium Smartwatch Pro - Buy Now</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.0.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}

body {
background-color: #f5f5f5;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

/* Product Header Section */


.product-header {
text-align: center;
padding: 40px 0;
background: linear-gradient(135deg, #2c3e50, #3498db);
color: white;
border-radius: 15px;
margin-bottom: 30px;
}

.product-header h1 {
font-size: 2.5em;
margin-bottom: 15px;
}

/* Product Features */
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
margin-bottom: 40px;
}

.feature-card {
background: white;
padding: 25px;
border-radius: 10px;
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
text-align: center;
}

/* Payment Section */
.payment-container {
background: white;
border-radius: 15px;
padding: 30px;
box-shadow: 0 5px 25px rgba(0,0,0,0.1);
}

.payment-header {
text-align: center;
margin-bottom: 30px;
}

.card-logos {
display: flex;
gap: 15px;
justify-content: center;
margin-bottom: 20px;
}

.card-logos img {
height: 30px;
}

.payment-form {
display: grid;
gap: 20px;
max-width: 500px;
margin: 0 auto;
}

.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}

input {
padding: 12px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 16px;
}

.row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}

button {
background: #27ae60;
color: white;
padding: 15px;
border: none;
border-radius: 8px;
font-size: 18px;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #219a52;
}

.secure-note {
text-align: center;
color: #666;
margin-top: 20px;
}

.price {
font-size: 2.5em;
color: #e74c3c;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="container">
<!-- Product Header -->
<section class="product-header">
<h1>Premium Smartwatch Pro</h1>
<p>Next-generation wearable technology with health monitoring</p>
<div class="price">$299.99</div>
</section>

<!-- Product Features -->


<div class="features">
<div class="feature-card">
<i class="fas fa-heartbeat fa-3x"></i>
<h3>Health Monitoring</h3>
<p>24/7 heart rate, blood oxygen, and sleep tracking</p>
</div>
<div class="feature-card">
<i class="fas fa-battery-full fa-3x"></i>
<h3>7-Day Battery</h3>
<p>Long-lasting battery with fast charging</p>
</div>
<div class="feature-card">
<i class="fas fa-tint fa-3x"></i>
<h3>Water Resistant</h3>
<p>IP68 rating for swimming and showers</p>
</div>
</div>

<!-- Payment Section -->


<section class="payment-container">
<div class="payment-header">
<h2>Secure Payment</h2>
<div class="card-logos">
<img src="https://img.icons8.com/color/96/000000/visa.png"
alt="Visa">
<img
src="https://img.icons8.com/color/96/000000/mastercard.png" alt="Mastercard">
</div>
</div>

<form class="payment-form" id="paymentForm">


<div class="form-group">
<label>Cardholder Name</label>
<input type="text" placeholder="John Doe" required>
</div>

<div class="form-group">
<label>Card Number</label>
<input type="text" placeholder="4242 4242 4242 4242" pattern="\
d{16}" required>
</div>

<div class="row">
<div class="form-group">
<label>Expiration Date</label>
<input type="text" placeholder="MM/YY" pattern="\d{2}/\
d{2}" required>
</div>
<div class="form-group">
<label>CVV</label>
<input type="text" placeholder="123" pattern="\d{3}"
required>
</div>
</div>

<button type="submit">Pay $299.99</button>


</form>

<p class="secure-note">
<i class="fas fa-lock"></i> Your payment is securely encrypted
</p>
</section>
</div>

<script>
document.getElementById('paymentForm').addEventListener('submit',
function(e) {
e.preventDefault();

// Add your payment processing logic here


alert('Payment processing... (This is a demo)');

// Reset form
this.reset();
});

// Card number formatting


const cardNumberInput = document.querySelector('input[placeholder="4242
4242 4242 4242"]');
cardNumberInput.addEventListener('input', function(e) {
let value = e.target.value.replace(/\s/g, '');
if (value.length > 16) value = value.slice(0,16);
value = value.replace(/(\d{4})/g, '$1 ').trim();
e.target.value = value;
});

// Expiry date formatting


const expiryInput = document.querySelector('input[placeholder="MM/YY"]');
expiryInput.addEventListener('input', function(e) {
let value = e.target.value.replace(/[^0-9]/g, '');
if (value.length > 4) value = value.slice(0,4);
value = value.replace(/(\d{2})(\d{0,2})/, '$1/$2');
e.target.value = value;
});
</script>
</body>
</html>

You might also like