https://github.com/tushar-revankar/nike-website-clone
👟 Nike Website Clone – Responsive design with HTML, CSS, and JavaScript. Features dynamic header, product showcase, and back-to-top button.
https://github.com/tushar-revankar/nike-website-clone
css ecommerce frontend html javascript nike nike-website nike-website-clone responsive-design ui-design web-development
Last synced: 2 months ago
JSON representation
👟 Nike Website Clone – Responsive design with HTML, CSS, and JavaScript. Features dynamic header, product showcase, and back-to-top button.
- Host: GitHub
- URL: https://github.com/tushar-revankar/nike-website-clone
- Owner: Tushar-revankar
- Created: 2025-03-18T19:34:44.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-04-01T19:24:18.000Z (3 months ago)
- Last Synced: 2025-04-01T20:27:24.780Z (3 months ago)
- Topics: css, ecommerce, frontend, html, javascript, nike, nike-website, nike-website-clone, responsive-design, ui-design, web-development
- Language: HTML
- Homepage:
- Size: 4.19 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Nike Website Clone
A responsive clone of the Nike official website built with HTML, CSS, and JavaScript.
## Project Overview
This project is a frontend implementation of the Nike website, featuring a responsive design that adapts to different screen sizes (desktop and mobile). The website includes various sections such as product showcases, navigation menus, and a footer with links to different Nike resources.
## Project Structure
```
nike-app-clone/
├── index.html # Main HTML file
├── README.md # Project documentation
├── assets/
│ ├── css/
│ │ ├── style.css # Main stylesheet
│ │ ├── mobile-menu.css # Mobile menu styles
│ │ ├── footer.css # Footer-specific styles
│ │ └── back-to-top.css # Back-to-top button styles
│ ├── js/
│ │ ├── script.js # Main JavaScript file
│ │ ├── mobile-menu.js # Mobile menu functionality
│ │ ├── components.js # Component initialization
│ │ ├── footer.js # Footer functionality
│ │ └── back-to-top.js # Back-to-top button functionality
│ ├── images/
│ └── favicon/ # Favicon files
└── components/
├── footer.html # Footer component
└── back-to-top.html # Back-to-top button component
```
## Features
- Responsive design that adapts to desktop and mobile views
- Dynamic header with scroll behaviors
- Product showcases with interactive elements
- Footer with Nike resources, help links, and company information
- Back-to-top functionality for easy navigation
- Component-based architecture for better code organization
## Technologies Used
- HTML5
- CSS3
- JavaScript (Vanilla)
- Boxicons for icons
- Font Awesome for additional icons
- Bootstrap Icons
## Usage
1. Clone the repository
2. Open `index.html` in your browser to view the website
## Implementation Details
### Components
The website uses a component-based approach with HTML components like:
- **Footer**: Contains links to Nike resources, help, company information, etc.
- **Back-to-Top Button**: Provides easy navigation back to the top of the page
### JavaScript Functionality
- **Header Scroll Behavior**: Changes header appearance based on scroll direction
- **Responsive Design**: Adapts layout for desktop and mobile views
- **Component Loading**: Dynamically loads HTML components
### Styling
- Organized CSS files for better maintenance
- Responsive design with appropriate breakpoints
- Custom styling to match Nike's brand identity
## Browser Compatibility
The website is designed to work on modern browsers including:
- Chrome
- Firefox
- Safari
- Edge
## Screenshots
### Homepage
### Homepage Dropdown
### Side Menu
## License
This project is created for educational purposes only. All Nike logos and branding elements belong to Nike, Inc.