A modern, professional, single-page auction platform built with HTML, CSS, Bootstrap 5, jQuery, and SEO optimization. Fully responsive, feature-rich, and production-ready.

• Overview
• Features
• Website Structure
• Tech Stack
• Design Theme
• Installation
• SEO & Metadata
• JavaScript Features
• Browser Support
• Contact & Support
• License

AuctionsTable is a modern, single-page auction platform built entirely with frontend technologies (HTML, CSS, JavaScript, jQuery, Bootstrap, and AJAX). It showcases simulated auctions with interactive bidding functionality, delivering a realistic auction experience without real-time backend integration.

The platform features a premium dark theme, smooth UI animations, an SEO-friendly structure, and a fully responsive design optimized for all devices.

• ✨ Sleek Dark Theme: Black (#0a0a0f) + Professional Blue (#0d6efd)
• 🎬 Smooth Animations: Typing text, carousel fades, hover effects
• 📱 Fully Responsive: Mobile-first design with Bootstrap breakpoints
• ⚡ Lightweight: No unnecessary libraries (jQuery + Bootstrap only)
• 🔍 SEO Optimized: Meta tags, OG tags, JSON-LD, sitemap, robots.txt
• 🎨 Custom CSS: Linear gradients, filters, keyframes, premium scrollbar

• Bootstrap carousel with fade transition
• 3 locally-hosted WebP hero images
• Overlay with gradient background
• Typing animation (infinite loop)
• Call-to-action buttons
• Live statistics counters

• 8 category cards (Electronics, Art, Jewelry, etc.)
• Hover effects with smooth transitions
• Responsive grid layout
• Icon and item count display

• Filterable auction items (All, Electronics, Art, Jewelry, Vehicles)
• Real-time countdown timers (HH:MM:SS)
• Wishlist toggle (heart icon animation)
• Bootstrap Modal for item details
• 6 live auction items with image, title, bid amount

• Bootstrap modal popup
• Dynamic data population from data attributes
• Displays: Title, Image, Description, Current Bid
• "Place Bid" call-to-action button

• Bootstrap carousel (rotates through completed items)
• Winner information
• Final bid amounts
• Item details

• Dummy bid form with validation
• Input fields for bidder info and amount
• Submit button with loading state
• Success message display

• Company description
• Statistics (25+ years experience)
• About image with experience badge
• Key features list

• Contact form with validation
• Contact information cards
• Address, phone, email display
• Social media links
• Formspree API integration for backendless email delivery
• AJAX-powered submission for instant feedback (success/error) without page reload

• Legal terms and conditions
• Platform policies
• Liability information

• Login Modal: Email and password fields for user access
• Register Modal: Full registration form with validation
  • Name, email, phone, password, confirm password fields
  • Password strength indicator with progress bar
  • Terms & Conditions checkbox
• Password Field Enhancements:
  • Eye icon toggle for password visibility on all 3 password fields
  • Smooth icon transitions (eye ↔ eye-slash)
  • Styled button with hover effects and scale animation
  • Professional styling with blue accent background
• Lost Password: Dedicated forgot password modal with email recovery
• Tab-based UI switching between Login and Register

• Sticky navbar with active section highlighting
• Offcanvas mobile menu (opens from left)
• Comprehensive footer with links
• Newsletter signup form
• Social media icons

1. 🔨 NAVBAR (Sticky)
   ├── Logo & Branding
   ├── Desktop Navigation Links
   └── Mobile Toggle (Offcanvas)

2. 🎬 HERO SECTION (#home)
   ├── Carousel Slideshow (3 images, fade transition)
   ├── Typing Animation Text
   ├── CTA Buttons (Explore / Bid Now)
   └── Live Statistics (4 counters)

3. 🎯 CATEGORIES (#categories)
   ├── Section Badge
   ├── Title & Description
   └── 8 Category Cards (Grid)

4. ⚡ ACTIVE AUCTIONS (#active-auctions)
   ├── Filter Buttons (All, Electronics, Art, etc.)
   ├── 6 Auction Items (Grid, 3-column)
   ├── Each Item Card:
   │   ├── Image with hover overlay
   │   ├── Wishlist button (heart icon)
   │   ├── Title & description
   │   ├── Current bid amount
   │   ├── Countdown timer
   │   └── "View Details" button (opens modal)
   └── Item Details Modal (Bootstrap)

5. 🎪 COMPLETED AUCTIONS (#completed)
   ├── Section Badge
   ├── Title & Description
   └── Carousel (rotates completed items)

6. 💰 BID SECTION (#bid)
   ├── Section Badge
   ├── Features List (left)
   └── Bid Form (right)
       ├── Email input
       ├── Bid amount input
       └── Submit button

7. ℹ️ ABOUT US (#about)
   ├── Image with badge (left)
   └── Content (right)
       ├── Heading & description
       ├── 4 statistics boxes
       └── "Get In Touch" button

8. 📧 CONTACT (#contact)
   ├── Contact Info Cards (left)
   │   ├── Address
   │   ├── Phone
   │   └── Email
   └── Contact Form (right)
       ├── Name, email, message fields
       └── Submit button

9. ⚖️ DISCLAIMER (#disclaimer)
   └── Legal content & policies

10. 👣 FOOTER
    ├── About & Social Links
    ├── Quick Links
    ├── Company Links
    └── Newsletter Signup

AuctionTable/
├── index.html              # Main single-page HTML
├── README.md              # This file
├── SECURITY.md            # Security policy
├── LICENSE.txt            # License information
├── robots.txt             # SEO robots instructions
├── sitemap.xml            # SEO sitemap
└── assets/
    ├── css/
    │   └── style.css      # All custom CSS
    └── js/
        └── script.js      # All JavaScript/jQuery

• HTML5: Semantic, structured markup
• CSS3: Custom styling with animations
• Bootstrap 5.3.2: Responsive grid, components, utilities
• jQuery 3.7.1: DOM manipulation, event handling

• Linear Gradients: Section backgrounds
• CSS Filters: Image brightness, saturation
• Keyframe Animations: Cursor blink, hammer bounce, shimmer
• CSS Transitions: Smooth 0.35s cubic-bezier
• Transform Effects: Scale, rotate, translate

• Meta Tags: Title, description, keywords, author
• Open Graph Tags: Social media sharing
• JSON-LD: Structured data (WebSite, Organization)
• Twitter Cards: Twitter sharing optimization
• Canonical Links: Duplicate content prevention
• sitemap.xml: Page map for search engines
• robots.txt: Crawler instructions

• Google Fonts: Inter (body) + Orbitron (display)
• Bootstrap Icons: Icon library (1100+ icons)
• CDN: Bootstrap, jQuery via jsDelivr
• Local Assets: 24 WebP images optimized for web

• Favicon: Professional SVG gavel icon representing the auction platform
• Loader Icon: Hammer emoji for the preloader animation
• Brand Colors: Blue (#0d6efd) and white on dark background

• Body Font: Inter (300-900 weights)
  • Clean, readable, professional
  • Used for all body text
• Display Font: Orbitron (400-900 weights)
  • Modern, tech-forward
  • Used for headings, titles

• Smooth Scrollbar

  • Thin (6px width)
  • Blue thumb with dark track
  • Custom webkit styling

• Selection Styling

  • Blue background (#0d6efd)
  • White text
  • Premium feel

• Box Shadows & Glow

  • Subtle shadows on cards
  • Text glow on headings
  • Focus states on inputs

• Gradients

  • gradient-1: Dark background gradient
  • gradient-2: Card gradient
  • gradient-blue: Blue accent gradient

• Modern web browser (Chrome, Firefox, Safari, Edge)
• No build tools required (vanilla HTML/CSS/JS)

1. Clone or download the project

   git clone https://github.com/ahmershahdev/auctions-table-onepage-frontend.git
   cd auctions-table-onepage-frontend

2. Open in browser

   • Simply open index.html in your browser
   • Or use a local server:

   python -m http.server 8000
   # Visit http://localhost:8000

3. View on live server (for development)

   • VS Code: Install "Live Server" extension
   • Right-click index.html → "Open with Live Server"

This is a static website - no npm packages, no build process, no database setup needed.

<title>AuctionsTable – Live Online Auctions & Bidding Platform</title>
<meta name="description" content="..." />
<meta name="keywords" content="auctions, online bidding, live auctions..." />
<meta name="robots" content="index, follow" />
<meta name="theme-color" content="#0d6efd" />

<meta property="og:type" content="website" />
<meta property="og:title" content="AuctionsTable..." />
<meta property="og:image" content="..." />

• WebSite schema
• Organization schema
• SearchAction schema

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="..." />

<link
  rel="canonical"
  href="https://ahmershahdev.github.io/auctions-table-onepage-frontend/"
/>

• sitemap.xml: XML sitemap for search engines
• robots.txt: Crawler instructions and sitemap reference

• Fade-out animation on page load
• Disables scrolling until loaded
• 2-second timeout fallback

• Infinite loop through 5 different texts
• Character-by-character typing
• Auto-delete and cycle to next text
• Smooth timing (80ms type, 40ms delete)

• Count-up from 0 to target number
• Triggers when preloader fades out
• Used for statistics display
• 30-frame animation (900ms total)

• Click filter buttons to show/hide items
• Updates button styling (active state)
• Supports: All, Electronics, Art, Jewelry, Vehicles

• Decrements hours:minutes:seconds every 1 second
• Updates data attributes
• Displays in HH:MM:SS format
• Runs continuously

• Click heart icon to add/remove
• Toggles between empty and filled heart
• Changes button background color
• Smooth transition

• Bootstrap modal opens on "View Details" click
• Populates with data from button attributes
• Displays: Title, Image, Description, Current Bid
• "Place Bid" button scrolls to bid section

• Button appears after scrolling 400px
• Smooth scroll animation (600ms)
• Fade in/out transitions

• Updates nav link active state on scroll
• Highlights current section in navigation
• Works on both desktop and mobile menu

• Previous/Next arrow buttons
• Bright white on hover with glow effect
• Animated indicators (active indicator expands)
• Auto-advance every 4 seconds

• Slides in from left
• Closes on link click
• Bootstrap offcanvas component
• Full-screen overlay

• Eye icon button in all password input fields
• Toggle between password and text visibility
• Smooth icon transitions (eye ↔ eye-slash)
• Available on:
  • Login password field
  • Register password field
  • Confirm password field
• Styled button with hover effects and scale animation
• Professional blue accent background with active states

• The contact form uses Formspree as a backendless email API.
• Form submission is handled via jQuery AJAX, sending data to Formspree and displaying real-time success or error messages to the user.
• No page reload is required; users receive instant feedback after submitting the form.

• Mobile: < 576px (single column, stacked)
• Tablet: 576px - 992px (2-column grid)
• Desktop: > 992px (3-4 column grid)

• Optimized touch targets (44px minimum)
• Offcanvas navigation menu
• Smaller carousel arrows (35px vs 50px)
• Flexible padding and margins
• Readable font sizes

• Multi-column layouts
• Hover animations
• Expanded navigation
• Larger interactive elements

See SECURITY.md for:

• Security best practices
• Data handling policies
• Vulnerability reporting
• Terms of use

This project is licensed under the MIT License. See LICENSE.txt for details.

You are free to:

• Use for personal projects
• Use for commercial projects
• Modify and distribute
• Include in larger works

Under the condition that:

• You include the original copyright notice
• You include the license text
• You do not hold the author liable

Syed Ahmer Shah

• 📧 Email: syedahmershahofficial@gmail.com
• 💼 LinkedIn: linkedin.com/in/syedahmershah
• 🐙 GitHub: github.com/ahmershahdev

Feel free to reach out for:

• Questions or feedback
• Feature requests
• Collaboration opportunities
• Bug reports

• Bootstrap: For the amazing responsive framework
• jQuery: For DOM manipulation
• Unsplash: For beautiful free images
• Google Fonts: For professional typography
• Bootstrap Icons: For extensive icon library

• Total Sections: 10
• HTML Lines: 1089+ (with password toggles)
• CSS Lines: 1200+ (enhanced eye icon styling)
• JavaScript Lines: 260+
• Animation Types: 7+ (including password toggle transitions)
• Responsive Breakpoints: 3
• Accessibility Features: Multiple
• Interactive Features: 12+

Potential features for future versions:

• Backend integration (Node.js/Python)
• Database (MongoDB/PostgreSQL)
• User authentication
• Real payment processing
• Admin dashboard
• Bid history & notifications
• User profiles
• Email notifications
• Search functionality
• Advanced filtering

If you like this project, please:

• ⭐ Star the repository
• 🐛 Report bugs
• 💬 Provide feedback
• 📢 Share with others

Made with ❤️ by Syed Ahmer Shah

Last Updated: February 10, 2026