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
| Color | Hex | Usage |
|---|---|---|
| Dark Background | #0a0a0f |
Main background |
| Card Background | #111118 |
Card surfaces |
| Primary Blue | #0d6efd |
Primary CTA, accents |
| Accent Blue | #3b82f6 |
Alt accent color |
| Text White | #f0f0f5 |
Primary text |
| Muted Text | rgba(240,240,245,0.5) |
Secondary text |
- 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 gradientgradient-2: Card gradientgradient-blue: Blue accent gradient
- Modern web browser (Chrome, Firefox, Safari, Edge)
- No build tools required (vanilla HTML/CSS/JS)
-
Clone or download the project
git clone https://github.com/ahmershahdev/auctions-table-onepage-frontend.git cd auctions-table-onepage-frontend -
Open in browser
- Simply open
index.htmlin your browser - Or use a local server:
python -m http.server 8000 # Visit http://localhost:8000 - Simply open
-
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://auctionstable.ahmershah.dev/"
/>sitemap.xml: XML sitemap for search enginesrobots.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
| Browser | Version | Support |
|---|---|---|
| Chrome | Latest | ✅ Full |
| Firefox | Latest | ✅ Full |
| Safari | Latest | ✅ Full |
| Edge | Latest | ✅ Full |
| Mobile Chrome | Latest | ✅ Full |
| Mobile Safari | Latest | ✅ Full |
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
| Version | Date | Changes |
|---|---|---|
| 1.1.0 | Feb 10, 2026 | Added password visibility toggle with smooth animations |
| 1.0.0 | Feb 8, 2026 | Initial release |
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