About the Project: Clear is a clean skincare brand website built with HTML, CSS, and JavaScript. It features a multi-slide hero, product listings, a special offer section, and a newsletter — all designed to present a polished, conversion-focused eCommerce storefront.
Key Highlights: All website content is managed through a single JSON file and rendered dynamically using vanilla JavaScript — keeping the codebase clean, organized, and easy to update.
- Header & Navigation — Fixed header with desktop navbar and mobile sidebar toggle.
- Hero Section — Auto-scroll slider with three branded hero cards and CTAs.
- Collection Section — Three category cards with hover zoom and background images.
- Shop Section — Two product grids: Bestsellers and Under $25, with badges and ratings.
- Banner Section — Two promotional banners with hover shine animation and CTA buttons.
- Feature Section — Three brand trust highlights: Pure, Cruelty-Free, and Ingredient Sourcing.
- Offer Section — Special deal highlight with a live countdown timer and pricing CTA.
- Blog Section — Three cards linking to store, blog, and brand story pages.
- Footer — Company info, useful links, information links, and newsletter subscription form.
- JSON-Driven Content — All text, products, and sections load from a single content.json file.
- Hero Slider — Horizontally scrollable hero cards with snap scrolling behavior.
- Mobile Sidebar — Animated off-canvas navigation with overlay backdrop for small screens.
- Scroll Reveal Animation — Sections fade and slide in as the user scrolls down the page.
- Hover Shine Effect — Banner and collection cards feature a CSS shine animation on hover.
- Countdown Timer — Static countdown display for the special offer section.
- Product Cards — Cards include discount badges, star ratings, review counts, and action buttons.
- Back to Top Button — Fixed button appears on scroll and returns the user to the top.
- Fully Responsive — Layout adapts across mobile, tablet, and desktop screen sizes.
- HTML5 — Semantic markup with ARIA labels for better accessibility and structure.
- CSS3 — Custom properties, animations, and a fully responsive layout system.
- JavaScript (ES6) — DOM rendering, event handling, scroll effects, and JSON content loading.
- JSON — Centralized data file managing all content, products, and section text.
- Google Fonts — Urbanist typeface for a clean, modern typographic style.
- Ionicons — Icon library used for navigation, product actions, and social links.
clear-skincare/
│
├── index.html # Main HTML with semantic sections and data attributes
│
├── assets/
│ ├── css/
│ │ └── style.css # Complete styles with animations and responsive design
│ │
│ ├── js/
│ │ └── script.js # Navigation toggle, scroll reveal, JSON content rendering
│ │
│ ├── data/
│ │ └── content.json # All website content, products, and text
│ │
│ └── images/ # Hero banners, products, collections, features, blogs
│
└── README.md # Project documentation
-
Clone the repository:
git clone https://github.com/nawazdevx/clear-skincare.git
<li>
<strong>Open the project:</strong>
<ul>
<li>Open <code>index.html</code> directly in your browser</li>
<li>Or run a local server:</li>
</ul>
<pre><code>python -m http.server 3000</code></pre>
Then visit <code>http://localhost:3000</code>
</li>
<li>
<strong>Start Customizing:</strong>
<ul>
<li>Update all site content, products, and section text in <code>content.json</code></li>
<li>Add or replace product and banner images inside <code>assets/images/</code></li>
<li>Adjust colors, spacing, and typography using CSS variables in <code>style.css</code></li>
<li>Modify section layout or add new sections directly in <code>index.html</code></li>
<li>Update or extend rendering logic for any section in <code>script.js</code></li>
</ul>
</li>
</ol>
License: This project is licensed under the MIT License.
Contact: Connect with me on LinkedIn or visit my Portfolio.
Support: Found this helpful? Give it a ⭐ on GitHub! Thank you.
