Topaz Blu Art

Learn more
topaz-blu-homepage-complete.html

			
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Topaz Blu Art - Original Tarot & Celestial Artwork</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Open Sans', 'Lato', sans-serif;
            line-height: 1.6;
            color: #2D1B4E;
        }
        /* Navigation */
        header {
            background: #ffffff;
            padding: 20px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        header h1 {
            font-size: 28px;
            color: #2D1B4E;
        }
        nav a {
            margin-left: 30px;
            text-decoration: none;
            color: #2D1B4E;
            font-weight: 500;
            transition: color 0.3s;
        }
        nav a:hover {
            color: #6A4C93;
        }
        .btn-primary {
            background: #2D1B4E;
            color: white;
            padding: 12px 28px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 600;
            transition: background 0.3s;
            text-decoration: none;
            display: inline-block;
        }
        .btn-primary:hover {
            background: #6A4C93;
        }
        /* Hero Section */
        .hero {
            background: linear-gradient(135deg, #ffffff 0%, #F3E5FF 100%);
            padding: 100px 40px;
            text-align: center;
            min-height: 500px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .hero h1 {
            font-size: 48px;
            color: #2D1B4E;
            margin-bottom: 20px;
            font-weight: 700;
        }
        .hero p {
            font-size: 20px;
            color: #6A4C93;
            margin-bottom: 40px;
            max-width: 600px;
        }
        .hero-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }
        .btn-secondary {
            background: #4A90E2;
            color: white;
            padding: 12px 28px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 600;
            transition: background 0.3s;
            text-decoration: none;
            display: inline-block;
        }
        .btn-secondary:hover {
            background: #1a237e;
        }
        /* Section Container */
        .section {
            padding: 80px 40px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .section h2 {
            font-size: 36px;
            color: #2D1B4E;
            margin-bottom: 15px;
            text-align: center;
        }
        .section-subtitle {
            font-size: 18px;
            color: #6A4C93;
            text-align: center;
            margin-bottom: 50px;
        }
        /* Featured Product */
        .featured {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
            background: linear-gradient(135deg, rgba(243, 229, 255, 0.5) 0%, #ffffff 100%);
        }
        .featured-image {
            width: 100%;
            border-radius: 8px;
            overflow: hidden;
        }
        .featured-image img {
            width: 100%;
            height: auto;
            display: block;
        }
        .featured-text h3 {
            font-size: 32px;
            color: #2D1B4E;
            margin-bottom: 10px;
        }
        .featured-text .subtitle {
            font-size: 18px;
            color: #6A4C93;
            margin-bottom: 30px;
            font-style: italic;
        }
        .featured-text p {
            font-size: 16px;
            line-height: 1.8;
            color: #2D1B4E;
            margin-bottom: 20px;
        }
        .featured-text ul {
            list-style: none;
            margin: 20px 0;
        }
        .featured-text li {
            padding: 8px 0;
            padding-left: 25px;
            position: relative;
            color: #2D1B4E;
        }
        .featured-text li:before {
            content: "✦";
            position: absolute;
            left: 0;
            color: #E84C8A;
        }
        .featured-buttons {
            display: flex;
            gap: 15px;
            margin-top: 30px;
        }
        /* Product Grid */
        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            padding: 80px 0;
        }
        .product-card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(106, 76, 147, 0.2);
        }
        .product-image {
            width: 100%;
            height: 250px;
            background: linear-gradient(135deg, #F3E5FF 0%, #E8D5F2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6A4C93;
            font-size: 14px;
            text-align: center;
            padding: 20px;
        }
        .product-info {
            padding: 20px;
        }
        .product-info h4 {
            font-size: 16px;
            color: #2D1B4E;
            margin-bottom: 10px;
            font-weight: 600;
        }
        .product-price {
            font-size: 18px;
            color: #E84C8A;
            font-weight: 700;
            margin-bottom: 15px;
        }
        .product-card .btn-primary {
            width: 100%;
            text-align: center;
        }
        /* About Section */
        .about {
            background: linear-gradient(135deg, #2D1B4E 0%, #1a237e 100%);
            color: white;
            padding: 80px 40px;
            text-align: center;
            border-radius: 8px;
            margin: 80px auto;
            max-width: 900px;
        }
        .about h2 {
            color: white;
            font-size: 36px;
            margin-bottom: 30px;
        }
        .about p {
            font-size: 16px;
            line-height: 1.8;
            color: #E8D5F2;
            margin-bottom: 20px;
        }
        /* Energy Statement */
        .energy-statement {
            background: #F3E5FF;
            padding: 60px 40px;
            text-align: center;
            margin: 60px 0;
            border-top: 3px solid #6A4C93;
            border-bottom: 3px solid #6A4C93;
        }
        .energy-statement p {
            font-size: 20px;
            font-style: italic;
            color: #2D1B4E;
            line-height: 1.8;
            max-width: 800px;
            margin: 0 auto;
        }
        /* Category Grid */
        .category-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            padding: 60px 0;
        }
        .category-card {
            background: white;
            border-radius: 8px;
            padding: 40px 20px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            cursor: pointer;
            transition: all 0.3s;
            border-top: 4px solid #6A4C93;
        }
        .category-card:nth-child(1) {
            border-top-color: #6A4C93;
        }
        .category-card:nth-child(2) {
            border-top-color: #4A90E2;
        }
        .category-card:nth-child(3) {
            border-top-color: #E84C8A;
        }
        .category-card:nth-child(4) {
            border-top-color: #20B2AA;
        }
        .category-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(106, 76, 147, 0.2);
        }
        .category-card h4 {
            font-size: 18px;
            color: #2D1B4E;
            margin-bottom: 10px;
            font-weight: 600;
        }
        .category-card p {
            color: #6A4C93;
            font-size: 14px;
            margin-bottom: 15px;
        }
        /* Newsletter */
        .newsletter {
            background: linear-gradient(135deg, #6A4C93 0%, #4A90E2 100%);
            padding: 60px 40px;
            text-align: center;
            color: white;
            border-radius: 8px;
            margin: 80px auto;
            max-width: 600px;
        }
        .newsletter h3 {
            font-size: 24px;
            margin-bottom: 15px;
        }
        .newsletter p {
            font-size: 14px;
            margin-bottom: 25px;
            color: #E8D5F2;
        }
        .newsletter-form {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .newsletter-form input {
            flex: 1;
            min-width: 200px;
            padding: 12px 15px;
            border: none;
            border-radius: 4px;
            font-size: 14px;
        }
        .newsletter-form button {
            background: white;
            color: #6A4C93;
            padding: 12px 28px;
            border: none;
            border-radius: 4px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s;
        }
        .newsletter-form button:hover {
            background: #F3E5FF;
        }
        /* Footer */
        footer {
            background: #2D1B4E;
            color: white;
            padding: 60px 40px;
        }
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            max-width: 1200px;
            margin: 0 auto 40px;
        }
        .footer-column h4 {
            margin-bottom: 15px;
            font-size: 16px;
        }
        .footer-column ul {
            list-style: none;
        }
        .footer-column li {
            margin-bottom: 10px;
        }
        .footer-column a {
            color: #E8D5F2;
            text-decoration: none;
            transition: color 0.3s;
        }
        .footer-column a:hover {
            color: #FFD700;
        }
        .footer-bottom {
            text-align: center;
            padding-top: 40px;
            border-top: 1px solid #6A4C93;
            color: #E8D5F2;
            font-size: 14px;
        }
        /* Responsive */
        @media (max-width: 768px) {
            header {
                flex-direction: column;
                gap: 20px;
                padding: 20px;
            }
            nav {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 15px;
            }
            nav a {
                margin-left: 0;
            }
            .hero {
                padding: 60px 20px;
            }
            .hero h1 {
                font-size: 32px;
            }
            .featured {
                grid-template-columns: 1fr;
                gap: 30px;
            }
            .section {
                padding: 60px 20px;
            }
            .product-grid {
                grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
                gap: 20px;
            }
            .featured-buttons {
                flex-direction: column;
            }
            .featured-buttons .btn-primary {
                width: 100%;
            }
            .newsletter-form {
                flex-direction: column;
            }
            .newsletter-form input,
            .newsletter-form button {
                width: 100%;
            }
        }
    </style>
</head>
<body>
<!-- HEADER / NAVIGATION -->
<header>
    <h1>Topaz Blu Art</h1>
    <nav>
        <a href="#about">About</a>
        <a href="#shop">Shop</a>
        <a href="#cart">Cart</a>
        <a href="#checkout">Checkout</a>
        <a href="#account">My Account</a>
        <button class="btn-primary">Learn More</button>
    </nav>
</header>
<!-- HERO SECTION -->
<section class="hero">
    <h1>Topaz Blu Art</h1>
    <p>Original Tarot & Celestial Artwork<br>Where Intention Meets Luminous Design</p>
    <div class="hero-buttons">
        <button class="btn-primary">Shop All Products</button>
        <button class="btn-secondary">View Tarot Deck</button>
    </div>
</section>
<!-- FEATURED PRODUCT -->
<section class="section">
    <div class="featured">
        <div class="featured-image">
            <img src="placeholder-tarot-deck.jpg" alt="Luminate Impressions Tarot Deck">
        </div>
        <div class="featured-text">
            <h3>Luminate Impressions Tarot</h3>
            <p class="subtitle">A 79-card luminous journey into intuition and insight</p>
            <p>Each card is a meditation rendered in immersive dot-art. Deep blues, molten gold, and electric magenta pulse across every card, with imagery that speaks to life's great cycles of wonder, mystery, and meaning.</p>
            <ul>
                <li>79 Cards (78 traditional + 1 bonus)</li>
                <li>Guidebook with detailed meanings and spreads</li>
                <li>Intelligent Card Reader Guide</li>
                <li>Beautiful custom tin storage</li>
                <li>QR Code Access to the Intelligent Tarot Reader</li>
            </ul>
            <div class="featured-buttons">
                <button class="btn-primary">Explore the Deck</button>
                <button class="btn-secondary">Learn More</button>
            </div>
        </div>
    </div>
</section>
<!-- PRODUCT GRID -->
<section class="section">
    <h2>Featured Collections</h2>
    <p class="section-subtitle">Tarot decks, celestial art, and spiritual jewellery for your sacred practice</p>
    <div class="product-grid">
        <div class="product-card">
            <div class="product-image">The Fool T-Shirt Product Image</div>
            <div class="product-info">
                <h4>The Fool Tarot T-Shirt</h4>
                <div class="product-price">AU$35.09</div>
                <button class="btn-primary">View</button>
            </div>
        </div>
        <div class="product-card">
            <div class="product-image">Wheel of Fortune Neon Product Image</div>
            <div class="product-info">
                <h4>Wheel of Fortune Neon</h4>
                <div class="product-price">AU$44.25</div>
                <button class="btn-primary">View</button>
            </div>
        </div>
        <div class="product-card">
            <div class="product-image">Moon Goddess Notebook Product Image</div>
            <div class="product-info">
                <h4>Moon Goddess Notebook</h4>
                <div class="product-price">AU$24.24</div>
                <button class="btn-primary">View</button>
            </div>
        </div>
        <div class="product-card">
            <div class="product-image">Gaia Earth Goddess Product Image</div>
            <div class="product-info">
                <h4>Gaia Earth Goddess Canvas</h4>
                <div class="product-price">AU$43.99</div>
                <button class="btn-primary">View</button>
            </div>
        </div>
    </div>
</section>
<!-- ABOUT SECTION -->
<section class="about">
    <h2>About Topaz Blu</h2>
    <p>TopazBlu is based in Australia, designing custom tarot and oracle decks with intention and artistry. Every deck is created to blend original artwork with the timeless symbolism of tarot, producing something that feels genuinely different in your hands.</p>
    <p>The Luminate Impressions Tarot is our debut deck—79 cards rendered in a luminous, immersive art style that draws you in and holds your attention. We believe tarot is a tool for intuition, reflection, and personal power. Each card is a conversation between you and the infinite.</p>
    <p><em>All products are for entertainment and spiritual purposes.</em></p>
</section>
<!-- ENERGY STATEMENT -->
<section class="energy-statement">
    <p>"Luminous. Intuitive. Immersive."</p>
    <p style="font-size: 16px; margin-top: 20px; font-style: normal;">Each design carries intention. Each card holds space for your reflection. Whether you're a seasoned reader or just beginning, Topaz Blu art invites you to connect with the sacred, the mystical, and the divine feminine within.</p>
</section>
<!-- CATEGORY BROWSING -->
<section class="section">
    <h2>Browse by Category</h2>
    <div class="category-grid">
        <div class="category-card">
            <h4>Tarot Decks</h4>
            <p>2 Products</p>
            <button class="btn-primary">Browse</button>
        </div>
        <div class="category-card">
            <h4>T-Shirts</h4>
            <p>2 Products</p>
            <button class="btn-primary">Browse</button>
        </div>
        <div class="category-card">
            <h4>Notebooks</h4>
            <p>2 Products</p>
            <button class="btn-primary">Browse</button>
        </div>
        <div class="category-card">
            <h4>Art Prints</h4>
            <p>5 Products</p>
            <button class="btn-primary">Browse</button>
        </div>
    </div>
</section>
<!-- NEWSLETTER SIGNUP -->
<section class="newsletter">
    <h3>Stay Connected</h3>
    <p>Receive updates on new designs, celestial wisdom, and special offerings.</p>
    <form class="newsletter-form">
        <input type="email" placeholder="Enter your email" required>
        <button type="submit">Subscribe</button>
    </form>
</section>
<!-- FOOTER -->
<footer>
    <div class="footer-content">
        <div class="footer-column">
            <h4>About</h4>
            <ul>
                <li><a href="#">About Topaz Blu</a></li>
                <li><a href="#">Our Process</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>
        <div class="footer-column">
            <h4>Shop</h4>
            <ul>
                <li><a href="#">All Products</a></li>
                <li><a href="#">Tarot Decks</a></li>
                <li><a href="#">Art Prints</a></li>
                <li><a href="#">T-Shirts & Notebooks</a></li>
            </ul>
        </div>
        <div class="footer-column">
            <h4>Customer Care</h4>
            <ul>
                <li><a href="#">Shipping Policy</a></li>
                <li><a href="#">Returns & Exchanges</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
        <div class="footer-column">
            <h4>Connect</h4>
            <ul>
                <li><a href="#">Instagram</a></li>
                <li><a href="#">Facebook</a></li>
                <li><a href="#">Email Newsletter</a></li>
            </ul>
        </div>
    </div>
    <div class="footer-bottom">
        <p>Copyright © 2026 Topaz Blu Art. All rights reserved.</p>
    </div>
</footer>
</body>
</html>

		
topaz-blu-homepage-complete.html
Tarot Reader

Hello World!
