NovaMart

Premium online marketplace homepage
Built with HTML5 & CSS3 only — zero JavaScript

Live Demo · GitHub · Contact

---

Overview

NovaMart is a fictional premium online marketplace offering electronics, fashion, furniture, home décor, beauty, and lifestyle products.

This project is a static homepage demonstration of advanced CSS layouts, semantic HTML, accessibility, and editorial UI craftsmanship. It is not a complete store — there is no cart, checkout, authentication, or backend.

Domain: https://css-novamart.roboticela.com

---

Features

• Semantic HTML5 structure with skip links and proper heading hierarchy
• Modern CSS3: custom properties, Grid, Flexbox, clamp(), container queries, logical properties
• Sticky header (CSS only)
• CSS-only mobile navigation and FAQ (<details> / <summary>)
• Handcrafted SVG logo, icons, brand marks, and illustrations
• Unsplash product photography
• Fully responsive from 360px to 4K
• WCAG 2.2 AA–oriented accessibility
• Production SEO: canonical, Open Graph, Twitter Cards, JSON-LD, robots.txt, sitemap.xml, web manifest
• Zero JavaScript, zero CSS frameworks
• No gradients, box shadows, or glow effects — premium look via typography, space, and borders

---

Folder Structure

NovaMart/
├── index.html
├── robots.txt
├── sitemap.xml
├── site.webmanifest
├── LICENSE
├── README.md
├── css/
│   ├── reset.css
│   ├── variables.css
│   ├── utilities.css
│   ├── layout.css
│   ├── components.css
│   ├── animations.css
│   └── style.css
├── assets/
│   ├── logo/
│   ├── icons/
│   ├── illustrations/
│   ├── images/
│   └── favicon/
├── .github/
│   └── workflows/
│       └── deploy.yml
└── docs/

---

Screenshots

Add local screenshots to docs/ after capture:

• docs/screenshot-desktop.png — desktop hero & featured grid
• docs/screenshot-tablet.png — tablet collections layout
• docs/screenshot-mobile.png — mobile navigation & product cards

Live site: https://css-novamart.roboticela.com

---

Lighthouse Goals

Category	Target
Performance	95+
Accessibility	100
Best Practices	100
SEO	100

Tips for scoring: serve over HTTPS, keep images optimized, avoid render-blocking extras, and preserve semantic landmarks.

---

Accessibility

• Skip to main content link
• Keyboard-focusable controls with visible :focus-visible rings
• ARIA labels on icon-only buttons and search
• Meaningful alt text on product imagery
• FAQ accordion via native <details> (no JS)
• Color contrast aligned with WCAG 2.2 AA against the defined palette
• prefers-reduced-motion respected for animations

---

Browser Support

Browser	Support
Chrome / Edge	Latest 2
Firefox	Latest 2
Safari	Latest 2
Mobile Safari	iOS 15+
Chrome Android	Latest

Uses modern CSS (clamp, Grid, sticky, container queries). No polyfills required for current evergreen browsers.

---

GitHub Pages Deployment

1. Push this repository to GitHub under MuhammadShahsawar.
2. Enable GitHub Pages (Settings → Pages) with source GitHub Actions.
3. The workflow at .github/workflows/deploy.yml deploys on push to main / master.
4. Map the custom domain css-novamart.roboticela.com in Pages settings and DNS (CNAME to *.github.io).
5. Visit https://css-novamart.roboticela.com.

Local preview

Open index.html in a browser, or serve the folder:

npx serve .

---

SEO Features

• Unique title and meta description
• Canonical URL: https://css-novamart.roboticela.com/
• Open Graph and Twitter Card tags
• JSON-LD Organization schema
• robots.txt and sitemap.xml
• site.webmanifest + SVG favicons
• Semantic landmarks (header, main, nav, footer, section)

---

Keywords

NovaMart, premium marketplace, luxury ecommerce, HTML CSS homepage, editorial retail UI, accessible ecommerce design, static marketplace demo, Plus Jakarta Sans, CSS Grid products, semantic HTML5

---

Design System

Token	Value
Background	#FFFFFF
Surface	#FAFAFA / #F5F5F5
Heading	#111827
Body	#4B5563
Primary	#2563EB
Border	#E5E7EB
Font	Plus Jakarta Sans, system-ui
Max width	1320px
Radius	Cards/Images 18px · Buttons 14px · Badges pill

Hard rules: no gradients, no box/text shadows, no glassmorphism — craft through type, whitespace, and borders.

---

Roadmap

• Additional static category pages
• Product detail page templates
• Dark theme via prefers-color-scheme (still shadow-free)
• Print stylesheet for guides
• More shopping guide articles in docs/
• Automated Lighthouse CI in GitHub Actions

---

Contributing

Contributions that improve accessibility, performance, or documentation are welcome.

1. Fork the repository
2. Create a feature branch
3. Keep the stack to HTML + CSS only
4. Do not introduce JS frameworks, Tailwind, Sass, or shadow/gradient effects
5. Open a pull request with a clear description

Questions: muhammad@roboticela.com

---

Credits

• Photography: Unsplash
• Font: Plus Jakarta Sans via Google Fonts
• Author: Muhammad Shahsawar

---

License

This project is licensed under the MIT License.

Copyright © 2026 Muhammad Shahsawar