AESTHETIC — Fashion E-Commerce Landing Page

A modern, fully responsive fashion e-commerce landing page built with pure HTML5 and CSS3 — no JavaScript, no build tools, no dependencies. Showcasing advanced CSS techniques including 3D card flips, animated hover effects, dropdown menus, and smooth transitions.

---

What It Does

AESTHETIC is a pixel-perfect, single-page fashion storefront template featuring:

• A dual-layer navigation bar with an animated dropdown submenu and a promotional banner
• A full-screen hero section with a call-to-action
• Collection cards for Men's, Women's, and Kids' fashion with zoom-on-hover effects
• A Trending Styles product grid with 3D image-flip cards and quick-action overlays
• A Testimonials carousel layout
• A "More to Love" product section with a slide-in image swap animation
• A Style News blog section
• A feature highlights bar (shipping, checkout, returns, support) with animated icon transitions
• A fully styled footer with newsletter signup, category links, and social media icons

---

Features

Feature	Details
Zero JavaScript	All interactivity is achieved purely with CSS
CSS 3D Transforms	Product cards flip to reveal a second image on hover
Flexbox Layout	Consistent, flexible grid throughout all sections
Self-Hosted Icons	Font Awesome webfonts bundled locally — no CDN required
AVIF Images	Next-gen image format for faster load times
Google Fonts	Jost (body) + Clicker Script (decorative headings)
Modular CSS	Styles split across three files for easy maintenance
Smooth Animations	Hover micro-interactions on every interactive element

---

Project Structure

html5-css3-project/
├── index.html          # Main (and only) HTML file
├── css/
│   ├── all.css         # Font Awesome icon styles
│   ├── general.css     # CSS reset, base styles, shared components
│   └── style.css       # Section-specific styles
├── images/
│   ├── hero.avif
│   ├── logo.png
│   ├── favicon.ico
│   └── ...             # Product and editorial images (AVIF format)
└── webfonts/
    ├── fa-brands-400.woff2
    ├── fa-regular-400.woff2
    ├── fa-solid-900.woff2
    └── fa-v4compatibility.woff2

CSS Architecture

• general.css — CSS reset, typography, shared layout utilities (.container, .product-card, arrows), and full header/footer styles
• style.css — Styles scoped to each individual section (main, .section-1 through .section-6)
• all.css — Font Awesome icon library (self-hosted)

---

Getting Started

No installation, package managers, or build steps needed.

1. Clone the repository

git clone https://github.com/your-username/html5-css3-project.git
cd html5-css3-project

2. Open in a browser

Simply open index.html directly in your browser:

# macOS
open index.html

# Linux
xdg-open index.html

# Windows
start index.html

Or serve it with any static file server for a more realistic environment:

# Using Python
python3 -m http.server 8080

# Using Node.js (npx)
npx serve .

Then visit http://localhost:8080 in your browser.

3. Make it your own

What to change	Where to look
Brand name & logo	index.html — .nav-logo and .footer-logo sections
Color scheme	general.css / style.css — replace #ff4747 (accent) and #222 (dark)
Hero image	css/style.css — main { background-image: ... }
Product images	css/style.css — .trend-1 div, .loved-1 div, etc.
Product names & prices	index.html — .product-card elements in sections 2 and 4
Fonts	index.html — update the Google Fonts <link> tag

---

Design Tokens

The design uses a small, consistent set of values defined throughout the CSS:

Token	Value	Usage
Accent color	#ff4747	Links, hover states, badges, CTA
Dark	#222	Text, backgrounds, borders
Muted	#777	Secondary text, placeholders
Light background	#fafafa	Alternating section backgrounds
Transition	0.2s ease-in-out	All hover/focus animations
Max container width	94rem	.container

---

Browser Support

Works in all modern browsers that support:

• CSS Flexbox
• CSS transform / transform-style: preserve-3d
• backface-visibility
• AVIF image format (Chrome 85+, Firefox 93+, Safari 16+)

For browsers without AVIF support, consider adding <picture> elements with JPEG/WebP fallbacks.

---

Contributing

Contributions, issues, and feature requests are welcome!

1. Fork the repository
2. Create a feature branch (git checkout -b feature/my-improvement)
3. Commit your changes (git commit -m 'Add some improvement')
4. Push to the branch (git push origin feature/my-improvement)
5. Open a Pull Request

Please keep contributions focused on HTML/CSS. If adding JavaScript is necessary, open an issue for discussion first.

---

Author & Maintainer

Ziad Aboughaleb

• Web Developer
• Template designed and built from scratch

---

License

This project is open source and available under the MIT License.