✨Beautiify✨

Table of Contents🧾

• Introduction📌
• Technology Used🚀
• Overview⭐
• Getting Started💥
• Contributing Guidelines📑
• Code Of Conduct📑
• Project Admin⚡
• Contributing is fun🧡
  

Introduction📌

Beautiify is a comprehensive collection of meticulously crafted components and animations designed to enhance the aesthetic appeal and user experience of any website. Whether you are building a simple landing page or a complex web application, Beautiify provides you with the tools to create visually stunning and highly interactive user interfaces.

Features💡

Beautiify offers a diverse range of components and animations designed to enhance the user interface of any website. Each component is available in multiple designs, providing ample customization options.

Components🎨

1. Accordions -- Accordions are expandable sections that reveal or hide content when clicked. Beautiify offers various styles, including 3D Accordion, Glassmorphism Accordion, Horizontal Picture Accordion, and so on.

2. Backgrounds -- Beautiify includes a collection of visually appealing backgrounds to enhance the look of your site. Options include 3D Boxes Background, Abstract Background, Animated Colorful Background, and so on.

3. Breadcrumbs -- Breadcrumbs provide navigational links to enhance user experience. Available designs include 3D Breadcrumb, Animated Breadcrumb, Gaming Breadcrumb, and so on.

4. Buttons -- Stylish and functional buttons are available in different shapes and sizes. Designs include Blob Button, Glow Button, Hover Button, and so on.

5. Cards -- Cards are versatile containers for displaying content. Beautiify provides various card designs, such as 3D Animated Card, Blog Post Card, Flip Card, and so on.

6. Carousels -- Carousels are rotating sliders for showcasing images or content. Available types include 3D Image Carousel, Draggable Carousel, Neumorphism Carousel, and so on.

7. Dropdowns -- Dropdowns allow users to select options from a list. Beautiify offers several styles which include Apple Themed Dropdown, and The More Menu Dropdown.

8. Footers -- Footers are customizable sections at the bottom of pages. Beautiify includes Animated Footer, Classic Footer, Waves Footer, and so on.

9. Forms -- Forms are essential for user input. Beautiify provides a range of form designs, including Animated Login Form, Black Red Signup Form, Contact Form, and so on.

10. Loaders -- Loaders indicate the loading process. Beautiify features various loader designs such as Bird Loader, Clock Loader, Helix Loader, and so on.

11. Navigation Bars -- Navigation Bars provide links for site navigation. Beautiify offers Circular Navigation Bar, Hamburger Navigation Bar, Overlay Navigation Bar, and so on.

12. Popups -- Popups display messages or content overlays. Available designs include Context Menu Popup, Error Notification Popup, Success Notification Popup, and so on.

13. Search Bars -- Search Bars enable users to search content on your site. Beautiify provides 3D Search Bar, Google Search Bar, Neumorphism Search Bar, and so on.

14. Text Animations -- Text Animations add dynamic effects to text. Beautiify includes Flip Text Animation, Fog Text Animation, Glowing Text Animation, and so on.

15. Transfer Lists -- Transfer Lists allow items to be moved between lists. Available styles are Neuromorphism Transfer List.

Technology Used🚀

(back to top)

Overview⭐

Live Project -- (https://beautiify.netlify.app/)

Home/Main Page :-

Components Page :-

Contact Page :-

(back to top)

Getting Started💥

• Fork this Repository.
• Clone the forked repository in your local system.

  git clone https://github.com/<your-github-username>/Beautiify.git

• Open index.html in your browser.
• View the Live Project here.
• Raise an issue if you find a bug or add a feature.
• Wait for the issue to be assigned and proceed only after the issue is assigned to you.
• Navigate to the project directory.

  cd Beautiify

• Create a new branch for your feature.

  git checkout -b <your_branch_name>

• Perfom your desired changes to the code base.
• Track and stage your changes.

  
  # Track the changes
  git status

Add changes to Index

git add .

- Commit your changes.

git commit -m "your_commit_message"

- Push your committed changes to the remote repo.

git push origin

- Go to your forked repository on GitHub and click on `Compare & pull request`.
- Add an appropriate title and description to your pull request explaining your changes and efforts done.
- Click on `Create pull request`.
- Congrats! 🥳 You've made your first pull request to this project repo.
- Wait for your pull request to be reviewed and if required suggestions would be provided to improve it.
- Celebrate 🥳 your success after your pull request is merged successfully.
<p align="right">(<a href="#top">back to top</a>)</p>

<!-- --------------------------------------------------------------------------------------------------------------------------------------------------------- -->

<h2>Contributing Guidelines📑</h2>

Read our [Contributing Guidelines](https://github.com/Rakesh9100/Beautiify/blob/main/.github/CONTRIBUTING_GUIDELINES.md) to learn about our development process, how to propose bugfixes and improvements, and how to build to Click-The-Edible-Game.

<!-- --------------------------------------------------------------------------------------------------------------------------------------------------------- -->

<h2>Code Of Conduct📑</h2>

This project and everyone participating in it is governed by the [Code of Conduct](https://github.com/Rakesh9100/Beautiify/blob/main/.github/CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code.

<!-- --------------------------------------------------------------------------------------------------------------------------------------------------------- -->

<h2>This repo has been part of the following Open Source Programs🥳</h2>

<table>

<tr>
<td align="center">
<a href="https://iwoc.codes/"><img src="https://github.com/Rakesh9100/Beautiify/assets/73993775/8ed95409-8fe5-42f5-b60c-51dc9f995df5" height="140px" width="140px" alt="IWOC2024"></a><br><sub><b>IWOC 2k24</b></sub>
</td>
<td align="center">
<a href="https://www.jwoc.tech/"><img src="https://github.com/Rakesh9100/Beautiify/assets/73993775/2a0fcf59-de20-4175-b8bb-67dbc17f3d40" height="140px" width="150px" alt="JWOC2024"></a><br><sub><b>JWOC 2k24</b></sub>
</td>
<td align="center">
<a href="https://www.socialwinterofcode.com/"><img src="https://github.com/Rakesh9100/Beautiify/assets/73993775/9235952f-9062-4352-992d-eb34e4d60283" height="140px" width="180px" alt="SWOC2024"></a><br><sub><b>SWOC 2k24</b></sub>
</td>
</tr>

</table>
<p align="right">(<a href="#top">back to top</a>)</p>

<!-- --------------------------------------------------------------------------------------------------------------------------------------------------------- -->

<h2>Project Admin⚡</h2>

<table>
<tr>
<td align="center">
<a href="https://github.com/Rakesh9100/"><img src="https://avatars.githubusercontent.com/u/73993775?v=4" height="140px" width="140px" alt="Rakesh Roshan"></a><br><sub><b>Rakesh Roshan</b><br><a href="https://www.linkedin.com/in/rakesh-roshan-9100/"><img src="https://github-production-user-asset-6210df.s3.amazonaws.com/73993775/278833250-adb040ea-e3ef-446e-bcd4-3e8d7d4c0176.png" width="45px" height="45px"></a></sub>
</td>
</tr>
</table>

<!-- --------------------------------------------------------------------------------------------------------------------------------------------------------- -->

<h2>Project Contributors🫂</h2>

<a href="https://github.com/rakesh9100/beautiify/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=rakesh9100/beautiify" />
</a>

<!-- --------------------------------------------------------------------------------------------------------------------------------------------------------- -->

<h2>Contributing is fun🧡</h2>

[![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com)
<h3>Contributions of any kind from anyone are always welcome🌟!!</h3>
<h3>Give it a 🌟 if you ❤ this project. Happy Coding👨‍💻</h3>
<p align="right">(<a href="#top">back to top</a>)</p>