https://github.com/rakesh9100/beautiify
Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience.
https://github.com/rakesh9100/beautiify
components gssoc2024 iwoc2024 jwoc2k24 kwoc2024 open-source open-source-development open-source-project swoc2024 web-development
Last synced: 5 months ago
JSON representation
Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience.
- Host: GitHub
- URL: https://github.com/rakesh9100/beautiify
- Owner: Rakesh9100
- License: apache-2.0
- Created: 2023-12-17T16:24:33.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-05-02T18:06:49.000Z (6 months ago)
- Last Synced: 2025-05-02T19:20:33.314Z (6 months ago)
- Topics: components, gssoc2024, iwoc2024, jwoc2k24, kwoc2024, open-source, open-source-development, open-source-project, swoc2024, web-development
- Language: CSS
- Homepage: https://beautiify.netlify.app
- Size: 120 MB
- Stars: 228
- Watchers: 3
- Forks: 356
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING_GUIDELINES.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
#
✨Beautiify✨
[](https://github.com/ellerbrock/open-source-badges/)
Table of Contents🧾
- [Introduction📌](#introduction)
- [Technology Used🚀](#technology-used)
- [Overview⭐](#overview)
- [Getting Started💥](#getting-started)
- [Contributing Guidelines📑](#contributing-guidelines)
- [Code Of Conduct📑](#code-of-conduct)
- [Project Admin⚡](#project-admin)
- [Contributing is fun🧡](#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. **Heroes** -- Heroes are a large, attention-grabbing picture with text typically shown in the above-the-fold area. Beautiify provides various hero designs such as Carousel Hero, Collage-Style-Hero and so on.
11. **Loaders** -- Loaders indicate the loading process. Beautiify features various loader designs such as Bird Loader, Clock Loader, Helix Loader, and so on.
12. **Navigation Bars** -- Navigation Bars provide links for site navigation. Beautiify offers Circular Navigation Bar, Hamburger Navigation Bar, Overlay Navigation Bar, and so on.
13. **Popups** -- Popups display messages or content overlays. Available designs include Context Menu Popup, Error Notification Popup, Success Notification Popup, and so on.
14. **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.
15. **Text Animations** -- Text Animations add dynamic effects to text. Beautiify includes Flip Text Animation, Fog Text Animation, Glowing Text Animation, and so on.
16. **Toggle Switches** -- Toggle switches prompt users to choose between two mutually exclusive options and always have a default value. Available designs are Robo Toggle Switch, Light Toggle Switch, and so on.
17. **Tooltips** -- A tooltip is a brief, informative message that appears when a user interacts with an element. Beautiify provides various designs like Animated Tooltip, Shopping Cart Tooltip, and so on.
18. **Transfer Lists** -- Transfer Lists allow items to be moved between lists. Available styles are Neuromorphism Transfer List.
Technology Used🚀
Overview⭐
Live Project -- (https://beautiify.netlify.app/)
Home/Main Page :-
Components Page :-
Contact Page :-
Getting Started💥
- Fork this Repository.
- Clone the forked repository in your local system.
```
git clone https://github.com//Beautiify.git
```
- Open `index.html` in your browser.
- View the [Live Project](https://beautiify.netlify.app/) 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
```
- 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.
Contributing Guidelines📑
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.
Code Of Conduct📑
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.
This repo has been part of the following Open Source Programs🥳
IWOC 2k24
JWOC 2k24
SWOC 2k24
Project Admin⚡
Rakesh Roshan
Project Contributors🫂
Contributing is fun🧡
[](https://forthebadge.com)
Contributions of any kind from anyone are always welcome🌟!!
Give it a 🌟 if you ❤ this project. Happy Coding👨💻