This repository contains the source code for a modern and stylish landing page for a fashion e-commerce store. The project showcases a clean, responsive design with smooth animations and dynamically generated content. It is built using pure HTML, CSS, and JavaScript, demonstrating a modular approach to front-end development.
- Dynamic UI Elements: The navigation bar and brand logo carousel are generated dynamically using JavaScript for easy management.
- Engaging Animations: Smooth slide-in animations are applied to sections as they enter the viewport, creating an engaging user experience.
- Component-Based Structure: The landing page is divided into logical sections, including a hero section, new arrivals, sales, teen's favourites, an app download prompt, and a newsletter subscription form.
- Modular CSS: Styles are organized into separate files for each component (
navbar,hero,footer, etc.), making the code easy to read, maintain, and scale. - Infinite Brand Carousel: A seamless, auto-scrolling carousel displays partner brand logos.
- Modern Design: A visually appealing layout that utilizes CSS Grid, Flexbox, and custom properties for a cohesive look and feel.
- HTML5
- CSS3: Custom Properties, Flexbox, Grid Layout, Keyframe Animations
- JavaScript (ES6+): DOM manipulation for dynamic content rendering.
- Remixicon: For vector icons.
The codebase is organized for clarity and maintainability:
└── aulanchik-clothing/
├── index.html # Main HTML markup
├── assets/
│ ├── images/ # All static image assets
│ └── styles/ # CSS files, organized by component
│ ├── base.css
│ ├── animations.css
│ ├── navbar.css
│ └── ...
└── js/
├── carousel.js # Logic for the brand logo carousel
└── index.js # Logic for the dynamic navigation bar
To run this project on your local machine, follow these simple steps:
-
Clone the repository:
git clone https://github.com/aulanchik/clothing.git
-
Navigate to the project directory:
cd clothing -
Open the
index.htmlfile in your web browser. No special servers or build steps are required.