Create a modern, elegant, premium, responsive jewelry website using only HTML5, CSS3, and vanilla JavaScript.

Do not use PHP, databases, APIs, backend services, React, Vue, Angular, Bootstrap, jQuery, or unnecessary external dependencies.

The website should look like a real luxury jewelry brand/e-commerce store, with a sophisticated, high-end, visually appealing design.

Main Goal

Build a beautiful jewelry website where visitors can:

• Explore jewelry collections
• Browse products
• View product details
• Search for products
• Filter and sort products
• Add products to a shopping cart
• View their cart
• Learn about the jewelry brand
• View jewelry collections
• Contact the business
• Read important legal pages

The website should feel:

Luxury + Elegant + Modern + Minimal + Premium + Trustworthy + Feminine + Sophisticated

The website must be lightweight, fast-loading, mobile-friendly, SEO-friendly, accessible, and suitable for uploading directly to any static web hosting service.

Website Design

Use a premium luxury jewelry aesthetic.

Color Palette

Use an elegant color combination such as:

• White / Ivory
• Soft Cream
• Champagne
• Warm Beige
• Charcoal / Black
• Subtle Gold accents

Do not overuse gold. Use it carefully for borders, buttons, icons, highlights, and decorative elements.

Design Style

Use:

• Large premium jewelry photography
• Elegant typography
• Sophisticated serif headings
• Clean modern sans-serif body text
• Spacious layouts
• Minimalistic design
• Soft shadows
• Thin borders
• Rounded corners where appropriate
• Subtle hover animations
• Smooth transitions
• Premium product cards
• Large whitespace
• Elegant buttons
• High-quality image placeholders
• Luxury editorial-style sections

Avoid a cheap, overly colorful, cluttered, or generic e-commerce appearance.

The website should visually resemble a high-end jewelry boutique.

Website Pages

Create the following separate pages:

1. Home
2. Shop
3. Product Details
4. Collections
5. About Us
6. Jewelry Care Guide
7. FAQ
8. Contact Us
9. Shopping Cart
10. Privacy Policy
11. Disclaimer
12. Terms and Conditions
13. Shipping & Returns

Header

Create a premium sticky header.

Include:

Top Announcement Bar

Example:

“Complimentary Shipping on Orders Over $100”

Allow this text to be easily customized.

Main Header

Include:

• Jewelry brand logo/name
• Navigation menu
• Search icon
• Account icon
• Wishlist icon
• Shopping bag/cart icon
• Cart item counter

Navigation:

• Home
• Shop
• Collections
• About
• Jewelry Care
• FAQ
• Contact

Add a prominent “Shop Now” button if appropriate.

On mobile:

• Use a hamburger menu
• Display search
• Display cart icon
• Make the navigation easy to use

Make the header sticky while scrolling.

Homepage

Create a visually impressive luxury homepage.

Hero Section

Create a large premium hero section.

Include:

• Large jewelry lifestyle image
• Elegant headline
• Short description
• Primary CTA
• Secondary CTA

Example:

Timeless Jewelry, Made to Be Remembered

Description:

“Discover beautifully crafted pieces designed to celebrate your most meaningful moments.”

Buttons:

Shop Collection

Explore New Arrivals

Use a sophisticated image overlay if necessary.

The hero should immediately communicate luxury and quality.

Featured Categories

Create a “Shop by Category” section.

Display attractive image cards for:

• Rings
• Necklaces
• Earrings
• Bracelets
• Wedding Jewelry
• New Arrivals

Each category card should contain:

• Large image
• Category name
• Short description
• Explore button or clickable area

Use beautiful hover effects.

Featured Products

Create a premium product showcase.

Display products in responsive cards.

Each product card should include:

• Product image
• Product name
• Short description
• Price
• Previous price if applicable
• Sale badge if applicable
• New badge if applicable
• Wishlist heart icon
• Add to Cart button
• Quick View button

Example products:

• Classic Gold Solitaire Ring
• Pearl Drop Earrings
• Diamond Tennis Bracelet
• Minimal Gold Necklace
• Emerald Statement Ring
• Rose Gold Pendant
• Classic Pearl Necklace
• Gold Hoop Earrings

Clearly mark all product information as sample/placeholder content that can be replaced.

New Arrivals

Create a premium “New Arrivals” section.

Include:

• Product image
• Product name
• Price
• Wishlist button
• Add to Cart button
• New badge

Add a:

View All New Arrivals

button.

Best Sellers

Create a Best Sellers section.

Display popular jewelry products using premium product cards.

Each card should have:

• Product image
• Product name
• Price
• Rating
• Wishlist
• Add to Cart

Use sample/demo ratings and clearly indicate they are placeholder data.

Promotional Banner

Create an elegant promotional section.

Example:

A Little Luxury, Just for You

“Discover timeless pieces crafted to make every moment sparkle.”

Button:

Shop Jewelry

Use a beautiful jewelry background image.

Why Choose Us

Create a luxury brand trust section.

Include 4–5 feature cards:

Premium Craftsmanship

“Every piece is thoughtfully designed with attention to detail.”

Quality Materials

“Made using carefully selected materials and finishes.”

Timeless Design

“Elegant pieces designed to complement every occasion.”

Secure Shopping

“Enjoy a safe and convenient shopping experience.”

Thoughtful Packaging

“Every order is beautifully prepared for gifting or keeping.”

Use elegant icons created using inline SVG or CSS.

Do not depend on external icon libraries unless absolutely necessary.

Brand Story Preview

Create an elegant About section.

Include:

• Jewelry lifestyle image
• Short brand story
• Brand philosophy
• “Discover Our Story” button

Example headline:

Jewelry With Meaning

Example text:

“We believe jewelry is more than an accessory. It carries memories, celebrates milestones, and becomes part of the stories we treasure.”

Customer Testimonials

Create a premium testimonials section.

Include 3–6 sample testimonials.

Each testimonial should contain:

• Customer name
• Short review
• Star rating
• Optional avatar

Clearly indicate that testimonials are demo/placeholder content and can be replaced with genuine customer reviews.

Newsletter Section

Create a sophisticated newsletter signup design.

Include:

Join Our World of Sparkle

“Be the first to discover new collections, exclusive offers, and jewelry inspiration.”

Include:

• Email input
• Subscribe button

Because this is a static website, do not create a backend newsletter system.

Use a placeholder/demo form action and clearly indicate that it needs to be connected to a real email marketing service later.

Shop Page

Create a complete jewelry shopping page.

Include:

• Page title
• Breadcrumb navigation
• Product count
• Search
• Category filtering
• Price filtering
• Sorting
• Product grid

Categories:

• Rings
• Necklaces
• Earrings
• Bracelets
• Pendants
• Wedding Jewelry
• Men’s Jewelry
• Gifts
• New Arrivals

Sorting options:

• Featured
• Newest
• Price: Low to High
• Price: High to Low
• Best Selling

Product Filtering

Use vanilla JavaScript to implement client-side filtering.

Users should be able to filter products by:

• Category
• Price range
• Availability
• Featured/New

Add a “Clear Filters” button.

Filtering should work without any API or backend.

Product Search

Add a lightweight JavaScript-powered product search.

Users should be able to search by:

• Product name
• Category
• Keywords

Display a friendly message when no products are found.

Example:

No jewelry found

“Try searching for another product or category.”

Product Details Page

Create a premium product detail layout.

Include:

• Large product image
• Thumbnail gallery
• Product name
• Price
• Sale price if applicable
• Product rating
• Product description
• Material information
• Jewelry dimensions
• Availability
• Quantity selector
• Add to Cart button
• Buy Now button
• Wishlist button

Add product information sections:

Product Details

Materials

Size & Dimensions

Shipping Information

Returns

Use expandable accordion sections.

Product Image Gallery

Implement a lightweight JavaScript image gallery.

Features:

• Thumbnail images
• Main product image
• Previous/next buttons
• Click thumbnail to change image
• Optional lightbox
• Close button
• Keyboard accessibility

Do not use an external gallery library.

Shopping Cart

Create a functional client-side shopping cart using vanilla JavaScript.

Users should be able to:

• Add products
• Remove products
• Increase quantity
• Decrease quantity
• View subtotal
• View estimated shipping
• View total
• Clear cart

Store cart information using localStorage.

Display a cart counter in the header.

Show an attractive empty-cart state.

Example:

Your jewelry bag is waiting

“Discover a piece you’ll love.”

Button:

Continue Shopping

Checkout

Create a beautiful static checkout page/interface.

Include placeholder sections for:

• Customer information
• Shipping address
• Order summary
• Payment method

Important:

Do not implement real payment processing.

Clearly label the checkout as a demo/static interface that must be connected to a secure payment gateway and backend before accepting real orders.

Do not collect or store real payment card information.

Wishlist

Implement a simple client-side wishlist.

Users should be able to:

• Add products to wishlist
• Remove products
• View wishlist
• Save wishlist using localStorage

Use a heart icon for wishlist actions.

Collections Page

Create an elegant collections page.

Show collections such as:

Everyday Elegance

Minimal jewelry designed for everyday wear.

Bridal Collection

Elegant pieces for weddings and special occasions.

Statement Collection

Bold designs created to make an impression.

Pearl Collection

Timeless pearl jewelry with a modern touch.

Gold Collection

Classic gold-inspired designs.

Gift Collection

Beautiful jewelry ideas for meaningful occasions.

Each collection should have:

• Large image
• Collection name
• Description
• Explore Collection button

About Us Page

Create a professional luxury jewelry brand story.

Include:

Our Story

Explain how the jewelry brand started.

Our Philosophy

Focus on:

• Craftsmanship
• Quality
• Timeless design
• Attention to detail
• Customer experience

Our Mission

Explain the brand’s mission.

Our Values

Include:

• Quality
• Elegance
• Trust
• Creativity
• Customer Satisfaction

Craftsmanship

Show how each piece is designed and crafted.

Use premium jewelry imagery.

Jewelry Care Guide

Create a helpful jewelry-care page.

Include sections for:

• How to clean jewelry
• How to store jewelry
• How to protect jewelry
• Gold jewelry care
• Silver jewelry care
• Pearl care
• Gemstone care

Use simple cards or accordion sections.

Do not make unsupported claims about specific materials.

FAQ Page

Create a professional FAQ section.

Include questions such as:

• How do I choose the right ring size?
• How should I care for my jewelry?
• What materials are used?
• How long does shipping take?
• Do you offer returns?
• Can I exchange an item?
• Is gift packaging available?
• How can I track my order?
• Are the products suitable for gifting?

Use JavaScript accordion functionality.

Contact Us Page

Do not create a backend contact form.

Instead, create a professional contact information page.

Include:

Get in Touch

“We’d love to hear from you. Contact us with questions about our jewelry, orders, or collections.”

Phone:

+1 234 567 890

Email:

[email protected]

Address:

123 Jewelry Avenue, Your City, Country

Use clearly marked placeholder information.

Include:

Business Hours

Monday – Friday: 10:00 AM – 7:00 PM

Saturday: 10:00 AM – 5:00 PM

Sunday: Closed

Create buttons for:

• Call Us
• Email Us
• Get Directions

Use tel: and mailto: links.

Do not embed Google Maps or use an external API.

Shipping & Returns Page

Create a professional informational page covering:

• Shipping options
• Estimated delivery
• Processing times
• International shipping
• Return period
• Exchange policy
• Damaged products
• Refund information

Use placeholders where business-specific information is required.

Do not make unsupported guarantees.

Footer

Create a premium footer consistent across every page.

Include:

Brand

Jewelry brand name and short description.

Shop

• All Jewelry
• Rings
• Necklaces
• Earrings
• Bracelets
• New Arrivals

Information

• About Us
• Jewelry Care
• FAQ
• Shipping & Returns
• Contact

Legal

• Privacy Policy
• Disclaimer
• Terms and Conditions

Contact

• Phone
• Email
• Address

Social Media

Add placeholder links for:

• Instagram
• Facebook
• Pinterest
• YouTube
• TikTok

Use # placeholders that can be replaced later.

Do not create fake social profiles.

Add:

© 2026 [Jewelry Brand Name]. All rights reserved.

Privacy Policy

Create a professional Privacy Policy explaining:

• Information collected
• Contact information
• Cookies
• Analytics
• Local storage
• Third-party services
• Website security
• User rights
• Children’s privacy
• Policy updates
• Contact information

Use placeholders where website-specific information is required.

Do not make false claims.

Disclaimer

Create a professional Disclaimer covering:

• General informational purposes
• Product descriptions
• Product images
• Pricing
• Availability
• Jewelry care information
• Third-party links
• Placeholder/demo information

Do not make unsupported guarantees.

Terms and Conditions

Create professional Terms and Conditions covering:

• Acceptance of terms
• Website usage
• Acceptable use
• Product information
• Pricing
• Orders
• Shopping cart
• Payments
• Shipping
• Returns
• Intellectual property
• User responsibility
• Third-party links
• Service availability
• Limitation of liability
• Changes to website
• Changes to terms
• Contact information

SEO Requirements

Make every page SEO-friendly.

Each page must include:

• Unique <title>
• Unique meta description
• Appropriate robots meta tag
• Semantic HTML5
• Proper heading hierarchy
• One <h1> per page
• Descriptive image alt attributes
• Clean internal links
• SEO-friendly filenames
• Mobile responsiveness
• Canonical URL placeholder where appropriate
• Open Graph meta tags
• Basic social sharing metadata

Suggested titles:

Home:

[Brand Name] | Luxury Jewelry & Timeless Designs

Shop:

Shop Jewelry | [Brand Name]

Collections:

Jewelry Collections | [Brand Name]

About:

About Us | [Brand Name]

Jewelry Care:

Jewelry Care Guide | [Brand Name]

FAQ:

Frequently Asked Questions | [Brand Name]

Contact:

Contact Us | [Brand Name]

Shipping:

Shipping & Returns | [Brand Name]

Privacy:

Privacy Policy | [Brand Name]

Disclaimer:

Disclaimer | [Brand Name]

Terms:

Terms & Conditions | [Brand Name]

Structured Data

Where appropriate, add valid JSON-LD structured data for:

• Jewelry business/brand
• Products
• Breadcrumbs
• Website

Use placeholder values where necessary.

Do not add fake reviews or fake business information to structured data.

Technical Requirements

Use only:

• HTML5
• CSS3
• Vanilla JavaScript

Do NOT use:

• PHP
• MySQL
• Databases
• Backend services
• APIs
• API keys
• React
• Vue
• Angular
• Bootstrap
• jQuery
• Unnecessary libraries

The website must work as a completely static website.

File Structure

Organize the project cleanly:

index.html
shop.html
product.html
collections.html
about.html
jewelry-care.html
faq.html
contact.html
cart.html
checkout.html
shipping-returns.html
privacy-policy.html
disclaimer.html
terms.html
style.css
script.js

images/
logo/
products/
collections/
banners/
gallery/

JavaScript Features

Use lightweight vanilla JavaScript for:

• Mobile navigation
• Sticky header
• Product search
• Product filtering
• Product sorting
• Product image gallery
• Product lightbox
• Add to cart
• Remove from cart
• Quantity controls
• Cart calculations
• localStorage cart
• Wishlist
• localStorage wishlist
• FAQ accordion
• Smooth scrolling
• Scroll animations
• Quick view
• UI interactions

Keep JavaScript lightweight and organized.

Do not add unnecessary functionality.

Responsive Design

The website must work perfectly on:

• Desktop
• Laptop
• Tablet
• Mobile phones

Use CSS media queries.

Ensure:

• Navigation works on mobile
• Product grids adapt correctly
• Images scale correctly
• Product details stack properly
• Buttons are touch-friendly
• Text remains readable
• No horizontal scrolling
• Cart works on mobile
• Filters work properly on mobile

Accessibility

Follow basic accessibility best practices.

Include:

• Semantic HTML
• Descriptive alt text
• Keyboard-accessible navigation
• Visible focus states
• Accessible buttons
• Accessible form controls
• Sufficient color contrast
• ARIA attributes where appropriate
• Proper heading hierarchy
• Keyboard-accessible modal/lightbox
• Escape key support for overlays

Performance

Keep the website lightweight and fast.

Avoid:

• Large unnecessary JavaScript files
• Unnecessary libraries
• Autoplay videos
• Excessive animations
• Blocking resources
• Heavy third-party scripts

Use:

• Lazy loading for product/gallery images
• Optimized image dimensions
• CSS-based effects where possible
• Minimal JavaScript
• Efficient DOM manipulation

Visual Details

Pay special attention to the visual design.

The website should have:

• Luxury editorial-style layouts
• Large premium jewelry images
• Elegant typography
• Sophisticated spacing
• Subtle gold accents
• Smooth hover effects
• Beautiful product cards
• Refined buttons
• Minimal borders
• Soft shadows
• Premium navigation
• Attractive promotional banners
• High-end product presentation

Do not make the design look like a generic template.

Create a unique luxury jewelry brand experience.

Important Placeholder Rules

Use realistic placeholder jewelry products and content.

Clearly indicate placeholder information where necessary.

The website owner should easily be able to replace:

• Brand name
• Logo
• Product names
• Product images
• Prices
• Product descriptions
• Contact details
• Address
• Social links
• Shipping policy
• Return policy
• Business hours

Do not invent real company information, fake reviews, fake addresses, or fake social profiles.

Final Goal

Build a premium, elegant, modern, responsive, SEO-friendly jewelry website that looks like a real luxury jewelry e-commerce brand.

The final website should feel:

Luxury + Elegant + Modern + Minimal + Premium + Trustworthy + Fast + Mobile-Friendly

All navigation links must work correctly.

The header, buttons, typography, product cards, colors, spacing, and footer must remain visually consistent throughout the entire website.

The final result should be visually impressive enough to present to a real jewelry business.