https://github.com/pranto113015/plants-website-using-tailwindcss
Plants Website Templates Design Using Tailwind CSS | Front End Project | 2024
https://github.com/pranto113015/plants-website-using-tailwindcss
favicon html javascript mini-project nodemodules npm-package package-json plants remixicons tailwind-css tailwind-css-template tailwindcss
Last synced: 4 months ago
JSON representation
Plants Website Templates Design Using Tailwind CSS | Front End Project | 2024
- Host: GitHub
- URL: https://github.com/pranto113015/plants-website-using-tailwindcss
- Owner: pranto113015
- License: mit
- Created: 2024-08-24T13:27:00.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-29T15:15:41.000Z (almost 2 years ago)
- Last Synced: 2025-03-04T12:51:50.552Z (over 1 year ago)
- Topics: favicon, html, javascript, mini-project, nodemodules, npm-package, package-json, plants, remixicons, tailwind-css, tailwind-css-template, tailwindcss
- Language: CSS
- Homepage: https://pkdemoproject3.netlify.app/
- Size: 13.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🚀 Plants Website
## 🎯 Project Description
A plant website could feature detailed information on various plant species, including care guides, growth habits, and ideal conditions. It might offer a plant identification tool, a blog with gardening tips, an online store for seeds and tools, and a community forum for plant enthusiasts. The design would likely be lush and green, with vibrant images and user-friendly navigation to make learning about and purchasing plants easy and enjoyable.
## 🌐 Demo Preview
**You can see the live demo project please [Click Here](https://pkdemoproject3.netlify.app/)**
## ⭐ Features
- **Gardening Blog:** Regularly updated articles on topics like gardening tips, seasonal advice, and plant care.
- **Fluid Grid Layout:** Uses a flexible grid that resizes and repositions elements dynamically to fit the screen size, from desktops to mobile devices.
- **Responsive Navigation Menu:** A navigation menu that adapts to different screen sizes, often transforming into a collapsible or “hamburger” menu on smaller screens.
- **Mobile-First Design:** Designed with mobile users in mind first, ensuring that essential features and content are easily accessible on smaller screens.
## 💼 Technologies Used
### Frontend
- **HTML5/TailwindCSS v3.4.10 :** Structure and styling of the website.
- **JavaScript :** Interactive features and dynamic content.
- **Responsive Design :** Customizing Screens, Flexbox, and Grid for mobile-friendly design
- **ScrollReveal :** This is a JavaScript library that allows you to easily create and manage scroll-based animations on a website.
- **Remix Icon :** This is a set of open-source, high-quality icons designed for web development.
- **Swiper CSS v11.1.10 :** Swiper is a modern, flexible, and highly customizable touch slider that you can use for implementing sliders, carousels, and other interactive content on your website.
### Version Control
- **Git :** Distributed version control system.
### Hosting and Deployment
- **Netlify :** Hosting platforms for static websites applications.
## 👨💻 How to Run the Project Manually (Local Setup Windows)
### Prerequisites
- **Code Editor :** You can use any code editor like Visual Studio Code, Sublime Text, or others to write your code.
- **Node.js :** Tailwind CSS requires Node.js to run. You can download it from the official Node.js website.
- **npm (Node Package Manager) :** npm comes bundled with Node.js. You'll use npm to install Tailwind CSS and other dependencies.
### Steps
If you run this project locally, then follow these steps below :
1. **Open Terminal (Command Prompt, PowerShell, etc.) :**
- Navigate to the directory where you want to clone the project.
- Run the following command to clone the repository:
```sh
https://github.com/pranto113015/Plants-Website-Using-tailwindCss.git
```
2. **Navigate into the project directory :**
- Replace `Plants-Website-Using-tailwindCss` with the actual folder name of the project.
```sh
cd Plants-Website-Using-tailwindCss
```
3. **Run Tailwind CSS in Watch Mode :**
- To start watching for changes, run:
```sh
npm run watch
```
4. **Click the run option of the menu bar and again click the start debugging or open with live server**
Or you can do this way
1. Download the project
2. Unzip the file
3. Open with your IDE such as vs code and follow the command :
```sh
npm run watch
```
4. Now open with live server
## ⏳ Usage
- Collection of plant information
- Gardening Guide
- Plant identification and identification
- Research and educational materials
- Collect feedback and suggestions
## 📐 Project Structure
- Tailwind CSS uses a utility-first approach, meaning you apply classes like bg-blue-500 directly to HTML elements.
- You can customize Tailwind CSS by modifying the tailwind.config.js file.
- Tailwind CSS often works well with component-based frameworks like Vue, React, or Angular, as it provides a flexible way to style reusable UI elements.
## 📥 Contributing
Contributions are what make the open-source community such an amazing place to be, learn, inspire, and create. Any contributions you make are greatly appreciated.Here are some ways you can get started:
- **Report bugs** : If you encounter any bugs, please let us know. Open up an issue and let us know the problem.
- **Contribute code** : If you are a developer and want to contribute, follow the instructions below to get started.
- **Suggestions** : If you don't want to code but have some awesome ideas, open up an issue explaining some updates or imporvements you would like to see.
- **Documentation** : If you see the need for some additional documentation, feel free to add some.
### Instructions
1. Fork the Project
2. Create your Feature Branch
```sh
$ git checkout -b feature/AmazingFeature
```
3. Commit your Changes
```sh
git commit -m 'Add some AmazingFeature'
```
4. Push to the Branch
```sh
git push origin feature/AmazingFeature
```
5. Open a Pull Request
## 📜 License
State the license under which your project is distributed.
This project is licensed under the MIT License - see the LICENSE file for details.
## 🙌Acknowledgements
This project created for amazing features tailwind css practise.
## ☎︎ Contact
If you have any questions or need further clarification, please contact my email/ Linkedin .
- **💌 Email : pranto113015@gmail.com**
- **🕵️♂️ Linkedin : [Pranto Kumar](https://www.linkedin.com/in/pranto-kumar-a326801b3/)**
Thank you for reviewing my project 💙
**⭐ If you found this project helpful, please give it a star!**