Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hamzazaidix/nike-landing-page
Nike website clone using React JS and Tailwind CSS
https://github.com/hamzazaidix/nike-landing-page
Last synced: about 1 month ago
JSON representation
Nike website clone using React JS and Tailwind CSS
- Host: GitHub
- URL: https://github.com/hamzazaidix/nike-landing-page
- Owner: HamzaZaidiX
- License: mit
- Created: 2024-11-16T21:56:44.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-16T22:17:30.000Z (about 2 months ago)
- Last Synced: 2024-11-16T22:29:10.505Z (about 2 months ago)
- Language: JavaScript
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Nike Landing Page with React.js and Tailwind CSS 🏃♂️🥾
This is a simple **Nike landing page** built using **React.js and Tailwind CSS**. The project aims to demonstrate the use of these technologies to create a responsive and visually appealing website.
## Table of Contents
- [Project Overview](#project-overview)
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [Screenshots](#screenshots)
- [Materials Used](#materials-used)## Project Overview
**The Nike website clone is a simple React.js application that showcases a collection of shoes. It includes a header with a logo, navigation links, and a search bar. The main content area displays a grid of shoe cards, each with a thumbnail image and a clickable area to view a larger image. The footer contains social media icons and a copyright notice.
**
## Features
- Responsive design using Tailwind CSS
- Shoe card component with thumbnail and larger image view
- Header with logo, navigation links, and search bar
- Footer with social media icons and copyright notice## Installation
To set up the project, follow these steps:1. Clone the repository:
```
git clone https://github.com/HamzaZaidiX/Nike-Landing-Page.git
```2. Navigate to the project directory:
```
cd Nike-Landing-Page
```3. Install dependencies:
```
npm install
```4. Start the development server:
```
npm start
```## Usage
Once the project is set up and running, you can access the website at http://localhost:3000. The shoe cards will display the thumbnail images of the shoes. Clicking on a shoe card will open a larger image in a modal.## Screenshots
![image](https://github.com/user-attachments/assets/0b7b6296-7a15-4fa4-b301-ef960591f416)## Materials Used
- [React.js](https://reactjs.org/): A JavaScript library for building user interfaces
- [Tailwind CSS](https://tailwindcss.com/): A utility-first CSS framework for rapidly building custom designs
- [Font Awesome](https://fontawesome.com/): A popular icon set and toolkit## Contributing
If you'd like to contribute to this project, please feel free to submit a pull request. I'm always open to suggestions and improvements.## License
This project is licensed under the MIT License. See the [LICENSE](https://github.com/your-username/nike_landing_page/blob/main/LICENSE) file for more information.## Acknowledgments
- [Tailwind CSS](https://tailwindcss.com/)
- [React.js](https://reactjs.org/)
- [Font Awesome](https://fontawesome.com/)