455 lines
23 KiB
HTML
455 lines
23 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>checkout</title>
|
||
|
|
<link rel="stylesheet" href="style.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Artisan Haven</div><ul class="nav-1-nav-links"><li><a href="home.html">Home</a></li><li><a href="about.html">Our Story</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Shop Crafts</a></li><li><a href="faq.html">FAQs</a></li><li class="nav-1-dropdown"><a href="#">More<i class="fas fa-chevron-down"><i class="fas fa-chevron-down">🔽</i></i></a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Log In</button><button class="nav-1-btn nav-1-solid">Sign Up</button></div></nav></div>
|
||
|
|
<section class="checkout-progress" aria-label="Checkout Progress Indicator">
|
||
|
|
<h2 class="sr-only">Checkout Progress</h2>
|
||
|
|
<ol class="progress-steps">
|
||
|
|
<li class="progress-step completed">
|
||
|
|
<div class="step-marker">
|
||
|
|
<span class="step-number">1</span>
|
||
|
|
<span class="step-icon" aria-hidden="true">✓</span>
|
||
|
|
</div>
|
||
|
|
<span class="step-name">Cart</span>
|
||
|
|
</li>
|
||
|
|
<li class="progress-step active">
|
||
|
|
<div class="step-marker">
|
||
|
|
<span class="step-number">2</span>
|
||
|
|
</div>
|
||
|
|
<span class="step-name">Shipping</span>
|
||
|
|
</li>
|
||
|
|
<li class="progress-step">
|
||
|
|
<div class="step-marker">
|
||
|
|
<span class="step-number">3</span>
|
||
|
|
</div>
|
||
|
|
<span class="step-name">Payment</span>
|
||
|
|
</li>
|
||
|
|
<li class="progress-step">
|
||
|
|
<div class="step-marker">
|
||
|
|
<span class="step-number">4</span>
|
||
|
|
</div>
|
||
|
|
<span class="step-name">Review & Pay</span>
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
</section>
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Shipping Address Form</title>
|
||
|
|
<link rel="stylesheet" href="style.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<section class="shipping-address-section" aria-labelledby="shipping-address-heading">
|
||
|
|
<h2 id="shipping-address-heading">Shipping Address</h2>
|
||
|
|
<form action="#" method="POST">
|
||
|
|
<div class="form-row">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="firstName">First Name</label>
|
||
|
|
<input type="text" id="firstName" name="firstName" placeholder="John" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="lastName">Last Name</label>
|
||
|
|
<input type="text" id="lastName" name="lastName" placeholder="Doe" required>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="addressLine1">Address Line 1</label>
|
||
|
|
<input type="text" id="addressLine1" name="addressLine1" placeholder="123 Main St" required>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="addressLine2">Address Line 2 (Optional)</label>
|
||
|
|
<input type="text" id="addressLine2" name="addressLine2" placeholder="Apt, Suite, Bldg (optional)">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="city">City</label>
|
||
|
|
<input type="text" id="city" name="city" placeholder="Anytown" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="state">State / Province</label>
|
||
|
|
<select id="state" name="state" required>
|
||
|
|
<option value="">Select State</option>
|
||
|
|
<option value="AL">Alabama</option>
|
||
|
|
<option value="AK">Alaska</option>
|
||
|
|
<option value="AZ">Arizona</option>
|
||
|
|
<option value="CA">California</option>
|
||
|
|
<option value="TX">Texas</option>
|
||
|
|
<option value="NY">New York</option>
|
||
|
|
<!-- Add more states/provinces as needed -->
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="zipCode">Zip / Postal Code</label>
|
||
|
|
<input type="text" id="zipCode" name="zipCode" placeholder="12345" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="country">Country</label>
|
||
|
|
<select id="country" name="country" required>
|
||
|
|
<option value="">Select Country</option>
|
||
|
|
<option value="US">United States</option>
|
||
|
|
<option value="CA">Canada</option>
|
||
|
|
<option value="GB">United Kingdom</option>
|
||
|
|
<option value="AU">Australia</option>
|
||
|
|
<option value="IN">India</option>
|
||
|
|
<!-- Add more countries as needed -->
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="phoneNumber">Phone Number</label>
|
||
|
|
<input type="tel" id="phoneNumber" name="phoneNumber" placeholder="+1 (555) 123-4567" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="email">Email Address</label>
|
||
|
|
<input type="email" id="email" name="email" placeholder="john.doe@example.com" required>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="button-group">
|
||
|
|
<button type="submit">Save Address</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Payment Method</title>
|
||
|
|
<link rel="stylesheet" href="style.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<section class="payment-section" aria-labelledby="payment-section-title">
|
||
|
|
<h2 id="payment-section-title">Choose Your Payment Method</h2>
|
||
|
|
|
||
|
|
<div class="payment-options">
|
||
|
|
<div class="payment-option-card" data-payment-method="card">
|
||
|
|
<input type="radio" id="pay-card" name="payment-method" value="card" checked aria-labelledby="label-pay-card">
|
||
|
|
<label for="pay-card" id="label-pay-card">
|
||
|
|
<strong>Credit or Debit Card</strong>
|
||
|
|
<img src="https://via.placeholder.com/100x30/f0f0f0/888888?text=Visa" alt="Visa Logo" class="payment-logo">
|
||
|
|
<img src="https://via.placeholder.com/100x30/f0f0f0/888888?text=MC" alt="MasterCard Logo" class="payment-logo">
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="payment-option-card" data-payment-method="paypal">
|
||
|
|
<input type="radio" id="pay-paypal" name="payment-method" value="paypal" aria-labelledby="label-pay-paypal">
|
||
|
|
<label for="pay-paypal" id="label-pay-paypal">
|
||
|
|
<strong>PayPal</strong>
|
||
|
|
<img src="https://via.placeholder.com/100x30/f0f0f0/888888?text=PayPal" alt="PayPal Logo" class="payment-logo">
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="payment-option-card" data-payment-method="razorpay">
|
||
|
|
<input type="radio" id="pay-razorpay" name="payment-method" value="razorpay" aria-labelledby="label-pay-razorpay">
|
||
|
|
<label for="pay-razorpay" id="label-pay-razorpay">
|
||
|
|
<strong>Razorpay</strong>
|
||
|
|
<img src="https://via.placeholder.com/100x30/f0f0f0/888888?text=Razorpay" alt="Razorpay Logo" class="payment-logo">
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="payment-option-card" data-payment-method="stripe">
|
||
|
|
<input type="radio" id="pay-stripe" name="payment-method" value="stripe" aria-labelledby="label-pay-stripe">
|
||
|
|
<label for="pay-stripe" id="label-pay-stripe">
|
||
|
|
<strong>Stripe</strong>
|
||
|
|
<img src="https://via.placeholder.com/100x30/f0f0f0/888888?text=Stripe" alt="Stripe Logo" class="payment-logo">
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="payment-details-card" class="payment-details active">
|
||
|
|
<h3>Card Details</h3>
|
||
|
|
<form>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="card-number">Card Number</label>
|
||
|
|
<input type="text" id="card-number" name="cardNumber" placeholder="•••• •••• •••• ••••" inputmode="numeric" pattern="[0-9\s]{13,19}" autocomplete="cc-number" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="card-name">Name on Card</label>
|
||
|
|
<input type="text" id="card-name" name="cardName" placeholder="John Doe" autocomplete="cc-name" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="expiry-date">Expiry Date</label>
|
||
|
|
<input type="text" id="expiry-date" name="expiryDate" placeholder="MM/YY" pattern="(0[1-9]|1[0-2])\/([0-9]{2})" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="cvv">CVV</label>
|
||
|
|
<input type="text" id="cvv" name="cvv" placeholder="123" inputmode="numeric" pattern="\d{3,4}" required>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="payment-details-paypal" class="payment-details">
|
||
|
|
<h3>PayPal Details</h3>
|
||
|
|
<p>You will be redirected to PayPal to complete your purchase securely.</p>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="paypal-email">PayPal Account Email (Optional)</label>
|
||
|
|
<input type="email" id="paypal-email" name="paypalEmail" placeholder="your.email@example.com" autocomplete="email">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="payment-details-razorpay" class="payment-details">
|
||
|
|
<h3>Razorpay Details</h3>
|
||
|
|
<p>Upon clicking "Continue to Payment", you will be prompted by Razorpay to complete your transaction.</p>
|
||
|
|
<p>Ensure your mobile number and email are up-to-date for a smooth experience.</p>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="razorpay-phone">Mobile Number (for OTP verification)</label>
|
||
|
|
<input type="tel" id="razorpay-phone" name="razorpayPhone" placeholder="+91 XXXXX XXXXX" pattern="[0-9]{10}" autocomplete="tel" required>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="payment-details-stripe" class="payment-details">
|
||
|
|
<h3>Stripe Details</h3>
|
||
|
|
<p>You will be securely redirected to Stripe's payment portal to finalize your payment.</p>
|
||
|
|
<p>Stripe supports various payment methods including cards, Apple Pay, Google Pay, etc.</p>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="stripe-promo">Promo Code (Optional)</label>
|
||
|
|
<input type="text" id="stripe-promo" name="stripePromo" placeholder="ENTERCODE">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button type="submit" class="btn-continue">Continue to Payment</button>
|
||
|
|
|
||
|
|
<p class="payment-gateway-info">
|
||
|
|
Your payment information is secured by industry-leading encryption and processed via trusted payment gateways.
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
const paymentOptionCards = document.querySelectorAll('.payment-option-card');
|
||
|
|
const paymentDetailsSections = document.querySelectorAll('.payment-details');
|
||
|
|
|
||
|
|
// Function to update active states
|
||
|
|
function updatePaymentSelection() {
|
||
|
|
paymentOptionCards.forEach(card => {
|
||
|
|
const radio = card.querySelector('input[type="radio"]');
|
||
|
|
const paymentMethod = card.dataset.paymentMethod;
|
||
|
|
const correspondingDetails = document.getElementById(`payment-details-${paymentMethod}`);
|
||
|
|
|
||
|
|
if (radio.checked) {
|
||
|
|
card.classList.add('selected');
|
||
|
|
if (correspondingDetails) {
|
||
|
|
correspondingDetails.classList.add('active');
|
||
|
|
// Focus on the first input of the active form
|
||
|
|
const firstInput = correspondingDetails.querySelector('input, select');
|
||
|
|
if (firstInput) {
|
||
|
|
firstInput.focus();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
card.classList.remove('selected');
|
||
|
|
if (correspondingDetails) {
|
||
|
|
correspondingDetails.classList.remove('active');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Add event listeners to radio buttons inside cards
|
||
|
|
paymentOptionCards.forEach(card => {
|
||
|
|
const radio = card.querySelector('input[type="radio"]');
|
||
|
|
radio.addEventListener('change', updatePaymentSelection);
|
||
|
|
|
||
|
|
// Also make the whole card clickable
|
||
|
|
card.addEventListener('click', () => {
|
||
|
|
radio.checked = true;
|
||
|
|
updatePaymentSelection();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Initial selection on page load
|
||
|
|
updatePaymentSelection();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Order Review Summary</title>
|
||
|
|
<link rel="stylesheet" href="style.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="order-review-summary" role="main" aria-labelledby="orderSummaryTitle">
|
||
|
|
<h2 id="orderSummaryTitle" class="section-title">Order Review Summary</h2>
|
||
|
|
|
||
|
|
<section class="order-items" aria-label="Items in your order">
|
||
|
|
<header>
|
||
|
|
<!-- This header could contain a title like "Your Items" if desired,
|
||
|
|
but for a clean look, we'll let the items speak for themselves. -->
|
||
|
|
</header>
|
||
|
|
<div class="order-item">
|
||
|
|
<div class="item-image">
|
||
|
|
<img src="https://via.placeholder.com/80x80/E0E0E0/888888?text=Craft+1" alt="Placeholder image of product Craft Item 1">
|
||
|
|
</div>
|
||
|
|
<div class="item-details">
|
||
|
|
<h3>Hand-Painted Ceramic Mug</h3>
|
||
|
|
<p>Qty: 1 | Color: Blue | Size: Standard</p>
|
||
|
|
</div>
|
||
|
|
<div class="item-price">$24.99</div>
|
||
|
|
</div>
|
||
|
|
<div class="order-item">
|
||
|
|
<div class="item-image">
|
||
|
|
<img src="https://via.placeholder.com/80x80/E0E0E0/888888?text=Craft+2" alt="Placeholder image of product Craft Item 2">
|
||
|
|
</div>
|
||
|
|
<div class="item-details">
|
||
|
|
<h3>Custom Engraved Leather Wallet</h3>
|
||
|
|
<p>Qty: 1 | Initials: JD | Material: Full-Grain Leather</p>
|
||
|
|
</div>
|
||
|
|
<div class="item-price">$59.99</div>
|
||
|
|
</div>
|
||
|
|
<div class="order-item">
|
||
|
|
<div class="item-image">
|
||
|
|
<img src="https://via.placeholder.com/80x80/E0E0E0/888888?text=Craft+3" alt="Placeholder image of product Craft Item 3">
|
||
|
|
</div>
|
||
|
|
<div class="item-details">
|
||
|
|
<h3>Hand-Knitted Wool Scarf</h3>
|
||
|
|
<p>Qty: 2 | Color: Grey Mix | Length: Long</p>
|
||
|
|
</div>
|
||
|
|
<div class="item-price">$39.99</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="order-summary-details" aria-label="Order cost breakdown">
|
||
|
|
<div class="summary-row">
|
||
|
|
<span>Subtotal:</span>
|
||
|
|
<span>$164.96</span>
|
||
|
|
</div>
|
||
|
|
<div class="summary-row">
|
||
|
|
<span>Shipping:</span>
|
||
|
|
<span>$7.50</span>
|
||
|
|
</div>
|
||
|
|
<div class="summary-row">
|
||
|
|
<span>Tax (8%):</span>
|
||
|
|
<span>$13.20</span>
|
||
|
|
</div>
|
||
|
|
<div class="summary-row total">
|
||
|
|
<span>Order Total:</span>
|
||
|
|
<span>$185.66</span>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="shipping-address" aria-label="Shipping address">
|
||
|
|
<h3>Shipping Address</h3>
|
||
|
|
<div class="address-details">
|
||
|
|
<p><strong>[Customer Name Placeholder]</strong></p>
|
||
|
|
<p>[Street Address Placeholder]</p>
|
||
|
|
<p>[City, State, Zip Code Placeholder]</p>
|
||
|
|
<p>[Country Placeholder]</p>
|
||
|
|
<p>[Phone Number Placeholder]</p>
|
||
|
|
</div>
|
||
|
|
<div class="action-buttons">
|
||
|
|
<a href="#" class="button secondary" aria-label="Change shipping address">Change Address</a>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="payment-method" aria-label="Payment method">
|
||
|
|
<h3>Payment Method</h3>
|
||
|
|
<div class="payment-details">
|
||
|
|
<p>Card Type: <strong>[Payment Gateway / Card Type Placeholder]</strong></p>
|
||
|
|
<p>Card Number: <strong>**** **** **** [Last 4 Digits Placeholder]</strong></p>
|
||
|
|
<p>Billing Address: Same as shipping</p>
|
||
|
|
</div>
|
||
|
|
<div class="action-buttons">
|
||
|
|
<a href="#" class="button secondary" aria-label="Change payment method">Change Payment</a>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<div class="action-buttons full-width">
|
||
|
|
<a href="#" class="button secondary" aria-label="Go back to shopping cart">Back to Cart</a>
|
||
|
|
<button type="submit" class="button primary" aria-label="Confirm and place order">Confirm & Place Order</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Place Order Section</title>
|
||
|
|
<link rel="stylesheet" href="style.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<section class="place-order-section" aria-labelledby="placeOrderTitle">
|
||
|
|
<h2 id="placeOrderTitle">Complete Your Purchase</h2>
|
||
|
|
|
||
|
|
<div class="order-summary-details">
|
||
|
|
<p><span>Subtotal:</span> <strong>$XXX.XX</strong></p>
|
||
|
|
<p><span>Shipping:</span> <strong>$YY.YY</strong></p>
|
||
|
|
<p class="total-amount"><span>Total:</span> <strong>$ZZZ.ZZ</strong></p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="payment-gateway-info">
|
||
|
|
<p>By clicking "Place Order", you will be redirected to a secure <span>Razorpay / Stripe / PayPal</span> page to complete your payment.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button type="submit" class="place-order-button">
|
||
|
|
Place Order
|
||
|
|
</button>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
<section class="security-assurance">
|
||
|
|
<div class="security-assurance__container">
|
||
|
|
<h2 class="security-assurance__heading">Your Security & Privacy: Our Top Priority</h2>
|
||
|
|
<p class="security-assurance__intro">
|
||
|
|
At [Your Store Name], we understand the importance of safeguarding your personal information and ensuring a secure shopping experience. We are committed to protecting your data every step of the way, from browsing to checkout.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="security-assurance__features">
|
||
|
|
<h3 class="security-assurance__feature-heading">How We Protect You</h3>
|
||
|
|
<ul class="security-assurance__feature-list">
|
||
|
|
<li class="security-assurance__feature-item">
|
||
|
|
<strong>Secure Data Encryption (SSL/TLS):</strong> All data transmitted between your browser and our website is encrypted using industry-standard SSL/TLS technology. This ensures your personal details, login credentials, and payment information remain private and secure.
|
||
|
|
</li>
|
||
|
|
<li class="security-assurance__feature-item">
|
||
|
|
<strong>PCI DSS Compliant Payment Gateways:</strong> Your payments are processed through trusted and secure third-party payment gateways (e.g., Razorpay, Stripe, PayPal) that are fully PCI DSS compliant. We do not store your credit card details on our servers.
|
||
|
|
</li>
|
||
|
|
<li class="security-assurance__feature-item">
|
||
|
|
<strong>Strict Privacy Policy:</strong> We adhere to a strict privacy policy that outlines how we collect, use, and protect your information. Your data is never sold or shared with unauthorized third parties.
|
||
|
|
</li>
|
||
|
|
<li class="security-assurance__feature-item">
|
||
|
|
<strong>Account Security:</strong> We implement robust security measures for your account, including secure password hashing and protection against unauthorized access. We encourage you to use strong, unique passwords.
|
||
|
|
</li>
|
||
|
|
<li class="security-assurance__feature-item">
|
||
|
|
<strong>Regular Security Audits:</strong> Our systems undergo regular security audits and updates to identify and mitigate potential vulnerabilities, ensuring a continuously secure environment.
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="security-assurance__conclusion">
|
||
|
|
Shop with confidence knowing that your security is our unwavering commitment. If you have any questions or concerns regarding your data privacy or site security, please do not hesitate to <a href="/contact" class="security-assurance__link">contact our support team</a> or review our full <a href="/privacy-policy" class="security-assurance__link">Privacy Policy</a>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<div class="footer-1-wrapper"><section class="footer-1-section"><div class="footer-1-top"><div class="footer-1-brand"><h3 class="footer-1-logo">Crafted Wonders</h3><p class="footer-1-newsletter-text">Be the first to discover new handcrafted treasures and exclusive offers!</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Your email address"></input><button class="footer-1-subscribe-btn">Sign Up</button></div><p class="footer-1-privacy-note"><span>By signing up, you agree to our </span><a href="#">Privacy Policy</a><span> and consent to receive marketing emails.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Explore</h4><ul><li><a href="#">Shop All Crafts</a></li><li><a href="#">New Arrivals</a></li><li><a href="#">Featured Collections</a></li><li><a href="#">Gift Ideas</a></li><li><a href="#">Our Artisans</a></li></ul></div><div class="footer-1-column"><h4>Customer Care</h4><ul><li><a href="#">Contact Us</a></li><li><a href="#">Shipping Information</a></li><li><a href="#">Returns & Exchanges</a></li><li><a href="#">Order Tracking</a></li><li><a href="#">FAQs</a></li></ul></div><div class="footer-1-column footer-1-social"><h4>Connect With Us</h4><ul><li><i class="fab fa-facebook"></i><span>Facebook</span></li><li><i class="fab fa-instagram"></i><span>Instagram</span></li><li><i class="fab fa-x-twitter"></i><span>X</span></li><li><i class="fab fa-linkedin"></i><span>LinkedIn</span></li><li><i class="fab fa-youtube"></i><span>Youtube</span></li></ul></div></div></div><div class="footer-1-bottom"><p>© 2024 Crafted Wonders. All rights reserved.</p><ul class="footer-1-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Cookies Settings</a></li></ul></div></section></div>
|
||
|
|
</body>
|
||
|
|
</html>
|