602 lines
31 KiB
HTML
602 lines
31 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Sweet Dreams Bakery - Artisan Cakes & Desserts</title>
|
|
<meta name="description" content="Premium handcrafted cakes and desserts for weddings, birthdays, and special celebrations. Custom designs available.">
|
|
|
|
<!-- Google Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
|
|
|
<!-- FontAwesome for icons -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
<!-- EmailJS -->
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
|
|
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<header class="header" id="header">
|
|
<nav class="nav container">
|
|
<div class="nav__logo">
|
|
<i class="fas fa-birthday-cake"></i>
|
|
<span>Sweet Dreams Bakery</span>
|
|
</div>
|
|
|
|
<div class="nav__menu" id="nav-menu">
|
|
<ul class="nav__list">
|
|
<li class="nav__item">
|
|
<a href="#home" class="nav__link active-link">Home</a>
|
|
</li>
|
|
<li class="nav__item">
|
|
<a href="#products" class="nav__link">Cakes</a>
|
|
</li>
|
|
<li class="nav__item">
|
|
<a href="#about" class="nav__link">About</a>
|
|
</li>
|
|
<li class="nav__item">
|
|
<a href="#process" class="nav__link">Process</a>
|
|
</li>
|
|
<li class="nav__item">
|
|
<a href="#gallery" class="nav__link">Gallery</a>
|
|
</li>
|
|
<li class="nav__item">
|
|
<a href="#contact" class="nav__link">Contact</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="nav__close" id="nav-close">
|
|
<i class="fas fa-times"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav__actions">
|
|
<button class="nav__cart" id="cart-btn">
|
|
<i class="fas fa-shopping-cart"></i>
|
|
<span class="cart-count" id="cart-count">0</span>
|
|
</button>
|
|
|
|
<div class="nav__toggle" id="nav-toggle">
|
|
<i class="fas fa-bars"></i>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main">
|
|
<!-- Hero Section -->
|
|
<section class="hero" id="home">
|
|
<div class="hero__container container">
|
|
<div class="hero__content">
|
|
<h1 class="hero__title">Artisan Cakes Made with Love</h1>
|
|
<p class="hero__description">
|
|
Creating unforgettable moments with handcrafted cakes and desserts.
|
|
From elegant wedding cakes to delightful birthday treats, every creation
|
|
is made with premium ingredients and artistic passion.
|
|
</p>
|
|
<div class="hero__buttons">
|
|
<a href="#products" class="btn btn--primary">Shop Cakes</a>
|
|
<a href="#contact" class="btn btn--secondary">Custom Orders</a>
|
|
</div>
|
|
</div>
|
|
<div class="hero__image">
|
|
<img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Beautiful artisan wedding cake with roses" loading="lazy">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Products Section -->
|
|
<section class="products" id="products">
|
|
<div class="container">
|
|
<div class="section__header">
|
|
<h2 class="section__title">Our Signature Cakes</h2>
|
|
<p class="section__subtitle">Discover our collection of handcrafted cakes and desserts</p>
|
|
</div>
|
|
|
|
<!-- Filters and Search -->
|
|
<div class="products__controls">
|
|
<div class="search__container">
|
|
<input type="text" class="search__input" id="search-input" placeholder="Search for cakes...">
|
|
<i class="fas fa-search search__icon"></i>
|
|
</div>
|
|
|
|
<div class="filter__container">
|
|
<select class="filter__select" id="category-filter">
|
|
<option value="all">All Categories</option>
|
|
<option value="Wedding Cakes">Wedding Cakes</option>
|
|
<option value="Birthday Cakes">Birthday Cakes</option>
|
|
<option value="Celebration Cakes">Celebration Cakes</option>
|
|
<option value="Cupcakes & Minis">Cupcakes & Minis</option>
|
|
<option value="Specialty Desserts">Specialty Desserts</option>
|
|
<option value="Seasonal Items">Seasonal Items</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="sort__container">
|
|
<select class="sort__select" id="sort-select">
|
|
<option value="featured">Featured</option>
|
|
<option value="price-low">Price: Low to High</option>
|
|
<option value="price-high">Price: High to Low</option>
|
|
<option value="name">Name: A to Z</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div class="loading" id="products-loading">
|
|
<div class="loading__spinner"></div>
|
|
<p>Loading delicious cakes...</p>
|
|
</div>
|
|
|
|
<!-- Products Grid -->
|
|
<div class="products__grid" id="products-grid">
|
|
<!-- Products will be loaded dynamically -->
|
|
</div>
|
|
|
|
<!-- No Results -->
|
|
<div class="no-results" id="no-results" style="display: none;">
|
|
<i class="fas fa-search"></i>
|
|
<h3>No cakes found</h3>
|
|
<p>Try adjusting your search or filter criteria</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Section -->
|
|
<section class="about" id="about">
|
|
<div class="container">
|
|
<div class="about__container">
|
|
<div class="about__content">
|
|
<h2 class="section__title">About Sweet Dreams Bakery</h2>
|
|
<p class="about__description">
|
|
Founded in 2018 by master baker Sarah Mitchell, Sweet Dreams Bakery has been
|
|
creating extraordinary cakes and desserts that turn special moments into
|
|
unforgettable memories. With over 15 years of experience in fine pastry arts,
|
|
our team combines traditional techniques with innovative flavors.
|
|
</p>
|
|
<div class="about__features">
|
|
<div class="feature">
|
|
<i class="fas fa-award"></i>
|
|
<h3>Award-Winning Quality</h3>
|
|
<p>Recognized for excellence in cake design and taste</p>
|
|
</div>
|
|
<div class="feature">
|
|
<i class="fas fa-leaf"></i>
|
|
<h3>Premium Ingredients</h3>
|
|
<p>Only the finest, locally-sourced ingredients</p>
|
|
</div>
|
|
<div class="feature">
|
|
<i class="fas fa-palette"></i>
|
|
<h3>Custom Designs</h3>
|
|
<p>Personalized creations for your special occasions</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="about__image">
|
|
<img src="https://images.unsplash.com/photo-1607631568010-0666f4ae9d9c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Sarah Mitchell, master baker" loading="lazy">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Process Section -->
|
|
<section class="process" id="process">
|
|
<div class="container">
|
|
<div class="section__header">
|
|
<h2 class="section__title">Our Baking Process</h2>
|
|
<p class="section__subtitle">From consultation to delivery, we ensure perfection at every step</p>
|
|
</div>
|
|
|
|
<div class="process__steps">
|
|
<div class="step">
|
|
<div class="step__number">1</div>
|
|
<div class="step__content">
|
|
<h3>Consultation</h3>
|
|
<p>We discuss your vision, dietary needs, and event details to create the perfect cake design.</p>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step__number">2</div>
|
|
<div class="step__content">
|
|
<h3>Design & Planning</h3>
|
|
<p>Our team creates detailed sketches and plans, selecting the finest ingredients for your cake.</p>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step__number">3</div>
|
|
<div class="step__content">
|
|
<h3>Handcrafted Creation</h3>
|
|
<p>Every element is carefully crafted by hand, from baking to decorating with artistic precision.</p>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step__number">4</div>
|
|
<div class="step__content">
|
|
<h3>Quality Check & Delivery</h3>
|
|
<p>Final quality inspection and professional delivery or pickup arranged at your convenience.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Gallery Section -->
|
|
<section class="gallery" id="gallery">
|
|
<div class="container">
|
|
<div class="section__header">
|
|
<h2 class="section__title">Our Portfolio</h2>
|
|
<p class="section__subtitle">A glimpse of our beautiful creations</p>
|
|
</div>
|
|
|
|
<div class="gallery__grid">
|
|
<div class="gallery__item">
|
|
<img src="https://images.unsplash.com/photo-1621303837174-89787a7d4729?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Elegant white wedding cake with cascading flowers" loading="lazy">
|
|
</div>
|
|
<div class="gallery__item">
|
|
<img src="https://images.unsplash.com/photo-1562440499-64c9a74f0cb2?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Colorful rainbow birthday cake with buttercream" loading="lazy">
|
|
</div>
|
|
<div class="gallery__item">
|
|
<img src="https://images.unsplash.com/photo-1571115764595-644a1f56a55c?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Luxury chocolate cake with gold accents" loading="lazy">
|
|
</div>
|
|
<div class="gallery__item">
|
|
<img src="https://images.unsplash.com/photo-1486427944299-d1955d23e34d?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Delicate cupcake tower arrangement" loading="lazy">
|
|
</div>
|
|
<div class="gallery__item">
|
|
<img src="https://images.unsplash.com/photo-1614707267537-b85aaf00c4b7?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Rustic naked cake with fresh berries" loading="lazy">
|
|
</div>
|
|
<div class="gallery__item">
|
|
<img src="https://images.unsplash.com/photo-1519915028121-7d3463d20b13?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Artistic fondant cake with hand-painted details" loading="lazy">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section class="contact" id="contact">
|
|
<div class="container">
|
|
<div class="contact__container">
|
|
<div class="contact__content">
|
|
<h2 class="section__title">Get In Touch</h2>
|
|
<p class="contact__description">
|
|
Ready to create something special? Contact us for consultations,
|
|
custom orders, or any questions about our cakes and services.
|
|
</p>
|
|
|
|
<div class="contact__info">
|
|
<div class="contact__item">
|
|
<i class="fas fa-map-marker-alt"></i>
|
|
<div>
|
|
<h4>Address</h4>
|
|
<p>123 Baker Street<br>Sweet Valley, CA 90210</p>
|
|
</div>
|
|
</div>
|
|
<div class="contact__item">
|
|
<i class="fas fa-phone"></i>
|
|
<div>
|
|
<h4>Phone</h4>
|
|
<p>(555) 123-CAKE</p>
|
|
</div>
|
|
</div>
|
|
<div class="contact__item">
|
|
<i class="fas fa-envelope"></i>
|
|
<div>
|
|
<h4>Email</h4>
|
|
<p>orders@sweetdreamsbakery.com</p>
|
|
</div>
|
|
</div>
|
|
<div class="contact__item">
|
|
<i class="fas fa-clock"></i>
|
|
<div>
|
|
<h4>Hours</h4>
|
|
<p>Tue-Sat: 8AM-6PM<br>Sun: 9AM-4PM<br>Closed Mondays</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form class="contact__form" id="contact-form">
|
|
<h3>Send us a message</h3>
|
|
|
|
<div class="form__group">
|
|
<input type="text" id="contact-name" name="name" class="form__input" placeholder=" " required>
|
|
<label for="contact-name" class="form__label">Full Name *</label>
|
|
</div>
|
|
|
|
<div class="form__group">
|
|
<input type="email" id="contact-email" name="email" class="form__input" placeholder=" " required>
|
|
<label for="contact-email" class="form__label">Email Address *</label>
|
|
</div>
|
|
|
|
<div class="form__group">
|
|
<input type="tel" id="contact-phone" name="phone" class="form__input" placeholder=" ">
|
|
<label for="contact-phone" class="form__label">Phone Number</label>
|
|
</div>
|
|
|
|
<div class="form__group">
|
|
<select id="contact-inquiry" name="inquiry_type" class="form__input" required>
|
|
<option value="">Select inquiry type</option>
|
|
<option value="custom_order">Custom Order</option>
|
|
<option value="wedding_consultation">Wedding Consultation</option>
|
|
<option value="general_inquiry">General Inquiry</option>
|
|
<option value="catering">Catering Services</option>
|
|
</select>
|
|
<label for="contact-inquiry" class="form__label">Inquiry Type *</label>
|
|
</div>
|
|
|
|
<div class="form__group">
|
|
<textarea id="contact-message" name="message" class="form__input form__textarea" placeholder=" " rows="5" required></textarea>
|
|
<label for="contact-message" class="form__label">Message *</label>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn--primary">
|
|
<span class="btn__text">Send Message</span>
|
|
<span class="btn__loading" style="display: none;">
|
|
<i class="fas fa-spinner fa-spin"></i> Sending...
|
|
</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer__container">
|
|
<div class="footer__content">
|
|
<div class="footer__section">
|
|
<div class="footer__logo">
|
|
<i class="fas fa-birthday-cake"></i>
|
|
<span>Sweet Dreams Bakery</span>
|
|
</div>
|
|
<p class="footer__description">
|
|
Creating magical moments with artisan cakes and desserts since 2018.
|
|
Every creation is made with love and the finest ingredients.
|
|
</p>
|
|
<div class="footer__social">
|
|
<a href="#" class="footer__social-link">
|
|
<i class="fab fa-facebook-f"></i>
|
|
</a>
|
|
<a href="#" class="footer__social-link">
|
|
<i class="fab fa-instagram"></i>
|
|
</a>
|
|
<a href="#" class="footer__social-link">
|
|
<i class="fab fa-pinterest"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer__section">
|
|
<h4 class="footer__title">Quick Links</h4>
|
|
<ul class="footer__links">
|
|
<li><a href="#home">Home</a></li>
|
|
<li><a href="#products">Our Cakes</a></li>
|
|
<li><a href="#about">About Us</a></li>
|
|
<li><a href="#process">Our Process</a></li>
|
|
<li><a href="#gallery">Gallery</a></li>
|
|
<li><a href="#contact">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="footer__section">
|
|
<h4 class="footer__title">Services</h4>
|
|
<ul class="footer__links">
|
|
<li><a href="#products">Wedding Cakes</a></li>
|
|
<li><a href="#products">Birthday Cakes</a></li>
|
|
<li><a href="#products">Custom Designs</a></li>
|
|
<li><a href="#products">Cupcakes</a></li>
|
|
<li><a href="#contact">Consultations</a></li>
|
|
<li><a href="#contact">Delivery</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="footer__section">
|
|
<h4 class="footer__title">Newsletter</h4>
|
|
<p class="newsletter__text">Subscribe for cake specials and baking tips</p>
|
|
<form class="newsletter__form" id="newsletter-form">
|
|
<input type="email" class="newsletter__input" placeholder="Your email address" required>
|
|
<button type="submit" class="newsletter__btn">
|
|
<i class="fas fa-paper-plane"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer__bottom">
|
|
<p>© 2024 Sweet Dreams Bakery. All rights reserved.</p>
|
|
<div class="footer__legal">
|
|
<a href="#privacy">Privacy Policy</a>
|
|
<a href="#terms">Terms of Service</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Modals -->
|
|
<!-- Cart Modal -->
|
|
<div class="modal" id="cart-modal">
|
|
<div class="modal__content">
|
|
<div class="modal__header">
|
|
<h3 class="modal__title">Shopping Cart</h3>
|
|
<button class="modal__close" id="cart-modal-close">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal__body">
|
|
<div class="cart__items" id="cart-items">
|
|
<!-- Cart items will be loaded dynamically -->
|
|
</div>
|
|
<div class="cart__empty" id="cart-empty" style="display: none;">
|
|
<i class="fas fa-shopping-cart"></i>
|
|
<p>Your cart is empty</p>
|
|
<a href="#products" class="btn btn--primary">Browse Cakes</a>
|
|
</div>
|
|
</div>
|
|
<div class="modal__footer" id="cart-footer">
|
|
<div class="cart__total">
|
|
<span class="total__label">Total: </span>
|
|
<span class="total__amount" id="cart-total">$0.00</span>
|
|
</div>
|
|
<button class="btn btn--primary btn--full" id="checkout-btn">
|
|
Proceed to Checkout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product Detail Modal -->
|
|
<div class="modal" id="product-modal">
|
|
<div class="modal__content modal__content--large">
|
|
<div class="modal__header">
|
|
<h3 class="modal__title" id="product-modal-title">Product Details</h3>
|
|
<button class="modal__close" id="product-modal-close">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal__body">
|
|
<div class="product__detail" id="product-detail">
|
|
<!-- Product details will be loaded dynamically -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Checkout Modal -->
|
|
<div class="modal" id="checkout-modal">
|
|
<div class="modal__content modal__content--large">
|
|
<div class="modal__header">
|
|
<h3 class="modal__title">Checkout</h3>
|
|
<button class="modal__close" id="checkout-modal-close">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal__body">
|
|
<form class="checkout__form" id="checkout-form">
|
|
<div class="checkout__section">
|
|
<h4>Customer Information</h4>
|
|
<div class="form__row">
|
|
<div class="form__group">
|
|
<input type="text" id="checkout-firstname" name="first_name" class="form__input" placeholder=" " required>
|
|
<label for="checkout-firstname" class="form__label">First Name *</label>
|
|
</div>
|
|
<div class="form__group">
|
|
<input type="text" id="checkout-lastname" name="last_name" class="form__input" placeholder=" " required>
|
|
<label for="checkout-lastname" class="form__label">Last Name *</label>
|
|
</div>
|
|
</div>
|
|
<div class="form__row">
|
|
<div class="form__group">
|
|
<input type="email" id="checkout-email" name="email" class="form__input" placeholder=" " required>
|
|
<label for="checkout-email" class="form__label">Email Address *</label>
|
|
</div>
|
|
<div class="form__group">
|
|
<input type="tel" id="checkout-phone" name="phone" class="form__input" placeholder=" " required>
|
|
<label for="checkout-phone" class="form__label">Phone Number *</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="checkout__section">
|
|
<h4>Delivery Information</h4>
|
|
<div class="form__group">
|
|
<select id="checkout-delivery" name="delivery_method" class="form__input" required>
|
|
<option value="">Select delivery method</option>
|
|
<option value="pickup">Pickup at Bakery</option>
|
|
<option value="delivery">Home Delivery (+$15)</option>
|
|
</select>
|
|
<label for="checkout-delivery" class="form__label">Delivery Method *</label>
|
|
</div>
|
|
<div class="delivery__address" id="delivery-address" style="display: none;">
|
|
<div class="form__group">
|
|
<input type="text" id="checkout-address" name="address" class="form__input" placeholder=" ">
|
|
<label for="checkout-address" class="form__label">Street Address</label>
|
|
</div>
|
|
<div class="form__row">
|
|
<div class="form__group">
|
|
<input type="text" id="checkout-city" name="city" class="form__input" placeholder=" ">
|
|
<label for="checkout-city" class="form__label">City</label>
|
|
</div>
|
|
<div class="form__group">
|
|
<input type="text" id="checkout-zip" name="zip" class="form__input" placeholder=" ">
|
|
<label for="checkout-zip" class="form__label">ZIP Code</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="checkout__section">
|
|
<h4>Event Details</h4>
|
|
<div class="form__row">
|
|
<div class="form__group">
|
|
<input type="date" id="checkout-event-date" name="event_date" class="form__input" required>
|
|
<label for="checkout-event-date" class="form__label">Event Date *</label>
|
|
</div>
|
|
<div class="form__group">
|
|
<input type="time" id="checkout-event-time" name="event_time" class="form__input">
|
|
<label for="checkout-event-time" class="form__label">Preferred Time</label>
|
|
</div>
|
|
</div>
|
|
<div class="form__group">
|
|
<textarea id="checkout-special-requests" name="special_requests" class="form__input form__textarea" placeholder=" " rows="3"></textarea>
|
|
<label for="checkout-special-requests" class="form__label">Special Requests or Dietary Requirements</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="checkout__section">
|
|
<h4>Order Summary</h4>
|
|
<div class="order__summary" id="order-summary">
|
|
<!-- Order summary will be loaded dynamically -->
|
|
</div>
|
|
<div class="order__total">
|
|
<div class="total__row">
|
|
<span>Subtotal:</span>
|
|
<span id="order-subtotal">$0.00</span>
|
|
</div>
|
|
<div class="total__row">
|
|
<span>Delivery:</span>
|
|
<span id="order-delivery">$0.00</span>
|
|
</div>
|
|
<div class="total__row total__final">
|
|
<span>Total:</span>
|
|
<span id="order-total">$0.00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="checkout__actions">
|
|
<button type="submit" class="btn btn--primary btn--full">
|
|
<span class="btn__text">Place Order</span>
|
|
<span class="btn__loading" style="display: none;">
|
|
<i class="fas fa-spinner fa-spin"></i> Processing...
|
|
</span>
|
|
</button>
|
|
<p class="checkout__note">
|
|
<i class="fas fa-info-circle"></i>
|
|
We'll contact you within 24 hours to confirm your order and arrange payment.
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notification -->
|
|
<div class="notification" id="notification">
|
|
<div class="notification__content">
|
|
<i class="notification__icon"></i>
|
|
<span class="notification__message"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |