{"id":21670271,"url":"https://github.com/rakesh9100/beautiify","last_synced_at":"2025-05-15T07:05:01.939Z","repository":{"id":212970819,"uuid":"732725231","full_name":"Rakesh9100/Beautiify","owner":"Rakesh9100","description":"Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience.","archived":false,"fork":false,"pushed_at":"2025-05-02T18:06:49.000Z","size":125358,"stargazers_count":228,"open_issues_count":3,"forks_count":356,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-02T19:20:33.314Z","etag":null,"topics":["components","gssoc2024","iwoc2024","jwoc2k24","kwoc2024","open-source","open-source-development","open-source-project","swoc2024","web-development"],"latest_commit_sha":null,"homepage":"https://beautiify.netlify.app","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Rakesh9100.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING_GUIDELINES.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-17T16:24:33.000Z","updated_at":"2025-05-02T18:06:53.000Z","dependencies_parsed_at":"2024-01-22T20:45:28.228Z","dependency_job_id":"23a11809-a719-4d0f-b7a0-4a1060ccca0d","html_url":"https://github.com/Rakesh9100/Beautiify","commit_stats":null,"previous_names":["rakesh9100/beautiify"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rakesh9100%2FBeautiify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rakesh9100%2FBeautiify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rakesh9100%2FBeautiify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rakesh9100%2FBeautiify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Rakesh9100","download_url":"https://codeload.github.com/Rakesh9100/Beautiify/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254292040,"owners_count":22046426,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","gssoc2024","iwoc2024","jwoc2k24","kwoc2024","open-source","open-source-development","open-source-project","swoc2024","web-development"],"created_at":"2024-11-25T12:30:43.962Z","updated_at":"2025-05-15T07:04:56.930Z","avatar_url":"https://github.com/Rakesh9100.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003cp align=\"center\"\u003e✨Beautiify✨\u003c/p\u003e\n\u003c!--------------------------------------------------------------------------------------------------------------------------------------\u003e\n \u003cdiv align=\"center\"\u003e\n \u003cp\u003e\n\n[![Open Source Love svg1](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/)\n![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat)\n![Visitors](https://api.visitorbadge.io/api/visitors?path=Rakesh9100%2FBeautiify%20\u0026countColor=%23263759\u0026style=flat)\n![GitHub forks](https://img.shields.io/github/forks/Rakesh9100/Beautiify)\n![GitHub Repo stars](https://img.shields.io/github/stars/Rakesh9100/Beautiify)\n![GitHub contributors](https://img.shields.io/github/contributors/Rakesh9100/Beautiify)\n![GitHub last commit](https://img.shields.io/github/last-commit/Rakesh9100/Beautiify)\n![GitHub repo size](https://img.shields.io/github/repo-size/Rakesh9100/Beautiify)\n![Github](https://img.shields.io/github/license/Rakesh9100/Beautiify)\n![GitHub issues](https://img.shields.io/github/issues/Rakesh9100/Beautiify)\n![GitHub closed issues](https://img.shields.io/github/issues-closed-raw/Rakesh9100/Beautiify)\n![GitHub pull requests](https://img.shields.io/github/issues-pr/Rakesh9100/Beautiify)\n![GitHub closed pull requests](https://img.shields.io/github/issues-pr-closed/Rakesh9100/Beautiify)\n \u003c/p\u003e\n \u003c/div\u003e\n\n\u003c!-- --------------------------------------------------------------------------------------------------------------------------------------------------------- --\u003e\n\n\u003cdiv id=\"top\"\u003e\u003c/div\u003e\n\n\u003ch2\u003eTable of Contents🧾\u003c/h2\u003e\n\n- [Introduction📌](#introduction)\n- [Technology Used🚀](#technology-used)\n- [Overview⭐](#overview)\n- [Getting Started💥](#getting-started)\n- [Contributing Guidelines📑](#contributing-guidelines)\n- [Code Of Conduct📑](#code-of-conduct)\n- [Project Admin⚡](#project-admin)\n- [Contributing is fun🧡](#contributing-is-fun)\n\u003cbr\u003e\n\n\u003c!-- --------------------------------------------------------------------------------------------------------------------------------------------------------- --\u003e\n\n\u003ch2\u003eIntroduction📌\u003c/h2\u003e\n\nBeautiify 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.\n\n\u003ch3\u003eFeatures💡\u003c/h3\u003e\nBeautiify 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.\n\n\u003ch3\u003eComponents🎨\u003c/h3\u003e\n\n1. **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.\n\n2. **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.\n\n3. **Breadcrumbs** -- Breadcrumbs provide navigational links to enhance user experience. Available designs include 3D Breadcrumb, Animated Breadcrumb, Gaming Breadcrumb, and so on.\n\n4. **Buttons** -- Stylish and functional buttons are available in different shapes and sizes. Designs include Blob Button, Glow Button, Hover Button, and so on.\n\n5. **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.\n\n6. **Carousels** -- Carousels are rotating sliders for showcasing images or content. Available types include 3D Image Carousel, Draggable Carousel, Neumorphism Carousel, and so on.\n\n7. **Dropdowns** -- Dropdowns allow users to select options from a list. Beautiify offers several styles which include Apple Themed Dropdown, and The More Menu Dropdown.\n\n8. **Footers** -- Footers are customizable sections at the bottom of pages. Beautiify includes Animated Footer, Classic Footer, Waves Footer, and so on.\n\n9. **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.\n    \n10. **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.\n\n11. **Loaders** -- Loaders indicate the loading process. Beautiify features various loader designs such as Bird Loader, Clock Loader, Helix Loader, and so on.\n\n12. **Navigation Bars** -- Navigation Bars provide links for site navigation. Beautiify offers Circular Navigation Bar, Hamburger Navigation Bar, Overlay Navigation Bar, and so on.\n\n13. **Popups** -- Popups display messages or content overlays. Available designs include Context Menu Popup, Error Notification Popup, Success Notification Popup, and so on.\n\n14. **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.\n\n15. **Text Animations** -- Text Animations add dynamic effects to text. Beautiify includes Flip Text Animation, Fog Text Animation, Glowing Text Animation, and so on.\n    \n16. **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.\n    \n17. **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.\n\n18. **Transfer Lists** -- Transfer Lists allow items to be moved between lists. Available styles are Neuromorphism Transfer List.\n\n\u003c!-- --------------------------------------------------------------------------------------------------------------------------------------------------------- --\u003e\n\n\u003ch2\u003eTechnology Used🚀\u003c/h2\u003e\n\n\u003cp\u003e\n  \u003ca href=\"https://www.w3schools.com/html/\"\u003e \u003cimg src=\"https://img.icons8.com/color/70/000000/html-5--v1.png\" alt=\"HTML\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.w3schools.com/css/\"\u003e \u003cimg src=\"https://img.icons8.com/color/70/000000/css3.png\" alt=\"CSS\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.w3schools.com/js/\"\u003e\u003cimg src=\"https://img.icons8.com/color/70/000000/javascript--v1.png\" alt=\"JS\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- --------------------------------------------------------------------------------------------------------------------------------------------------------- --\u003e\n\n\u003ch2\u003eOverview⭐\u003c/h2\u003e\n\n\u003ch2\u003eLive Project -- (https://beautiify.netlify.app/)\u003c/h2\u003e\n\n\u003ch3\u003eHome/Main Page :-\u003c/h3\u003e\n\n![image](https://github.com/Rakesh9100/Beautiify/assets/73993775/f07fd337-8503-47e2-807e-b33c9355dd3b)\u003cbr\u003e\u003cbr\u003e\n\u003ch3\u003eComponents Page :-\u003c/h3\u003e\n\n![image](https://github.com/Rakesh9100/Beautiify/assets/73993775/70a1a164-626b-47c3-b344-353516ee5910)\u003cbr\u003e\u003cbr\u003e\n\u003ch3\u003eContact Page :-\u003c/h3\u003e\n\n![image](https://github.com/Rakesh9100/Beautiify/assets/73993775/a8b66b02-633e-44bb-8c3d-0bd48e0be5d5)\n\u003cbr\u003e\u003cbr\u003e\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\u003c!-- --------------------------------------------------------------------------------------------------------------------------------------------------------- --\u003e\n\n\u003ch2\u003eGetting Started💥\u003c/h2\u003e\n\n- Fork this Repository.\n- Clone the forked repository in your local system.\n```\ngit clone https://github.com/\u003cyour-github-username\u003e/Beautiify.git\n```\n- Open `index.html` in your browser.\n- View the [Live Project](https://beautiify.netlify.app/) here.\n- Raise an issue if you find a bug or add a feature.\n- Wait for the issue to be assigned and proceed only after the issue is assigned to you.\n- Navigate to the project directory.\n```\ncd Beautiify\n```\n- Create a new branch for your feature.\n```\ngit checkout -b \u003cyour_branch_name\u003e\n```\n- Perfom your desired changes to the code base.\n- Track and stage your changes.\n```\n# Track the changes\ngit status\n\n# Add changes to Index\ngit add .\n```\n- Commit your changes.\n```\ngit commit -m \"your_commit_message\"\n```\n- Push your committed changes to the remote repo.\n```\ngit push origin \u003cyour_branch_name\u003e\n```\n- Go to your forked repository on GitHub and click on `Compare \u0026 pull request`.\n- Add an appropriate title and description to your pull request explaining your changes and efforts done.\n- Click on `Create pull request`.\n- Congrats! 🥳 You've made your first pull request to this project repo.\n- Wait for your pull request to be reviewed and if required suggestions would be provided to improve it.\n- Celebrate 🥳 your success after your pull request is merged successfully.\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- --------------------------------------------------------------------------------------------------------------------------------------------------------- --\u003e\n\n\u003ch2\u003eContributing Guidelines📑\u003c/h2\u003e\n\nRead 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.\n\n\u003c!-- --------------------------------------------------------------------------------------------------------------------------------------------------------- --\u003e\n\n\u003ch2\u003eCode Of Conduct📑\u003c/h2\u003e\n\nThis 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.\n\n\u003c!-- --------------------------------------------------------------------------------------------------------------------------------------------------------- --\u003e\n\n\u003ch2\u003eThis repo has been part of the following Open Source Programs🥳\u003c/h2\u003e\n\n\u003ctable\u003e\n\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\n\u003ca href=\"https://iwoc.codes/\"\u003e\u003cimg src=\"https://github.com/Rakesh9100/Beautiify/assets/73993775/8ed95409-8fe5-42f5-b60c-51dc9f995df5\" height=\"140px\" width=\"140px\" alt=\"IWOC2024\"\u003e\u003c/a\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eIWOC 2k24\u003c/b\u003e\u003c/sub\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\u003ca href=\"https://www.jwoc.tech/\"\u003e\u003cimg src=\"https://github.com/Rakesh9100/Beautiify/assets/73993775/2a0fcf59-de20-4175-b8bb-67dbc17f3d40\" height=\"140px\" width=\"150px\" alt=\"JWOC2024\"\u003e\u003c/a\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eJWOC 2k24\u003c/b\u003e\u003c/sub\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\u003ca href=\"https://www.socialwinterofcode.com/\"\u003e\u003cimg src=\"https://github.com/Rakesh9100/Beautiify/assets/73993775/9235952f-9062-4352-992d-eb34e4d60283\" height=\"140px\" width=\"180px\" alt=\"SWOC2024\"\u003e\u003c/a\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eSWOC 2k24\u003c/b\u003e\u003c/sub\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c/table\u003e\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- --------------------------------------------------------------------------------------------------------------------------------------------------------- --\u003e\n\n\u003ch2\u003eProject Admin⚡\u003c/h2\u003e\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\n\u003ca href=\"https://github.com/Rakesh9100/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/73993775?v=4\" height=\"140px\" width=\"140px\" alt=\"Rakesh Roshan\"\u003e\u003c/a\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eRakesh Roshan\u003c/b\u003e\u003cbr\u003e\u003ca href=\"https://www.linkedin.com/in/rakesh-roshan-9100/\"\u003e\u003cimg src=\"https://github-production-user-asset-6210df.s3.amazonaws.com/73993775/278833250-adb040ea-e3ef-446e-bcd4-3e8d7d4c0176.png\" width=\"45px\" height=\"45px\"\u003e\u003c/a\u003e\u003c/sub\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- --------------------------------------------------------------------------------------------------------------------------------------------------------- --\u003e\n\n\u003ch2\u003eProject Contributors🫂\u003c/h2\u003e\n\n\u003ca href=\"https://github.com/rakesh9100/beautiify/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=rakesh9100/beautiify\" /\u003e\n\u003c/a\u003e\n\n\u003c!-- --------------------------------------------------------------------------------------------------------------------------------------------------------- --\u003e\n\n\u003ch2\u003eContributing is fun🧡\u003c/h2\u003e\n\n[![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com)\n\u003ch3\u003eContributions of any kind from anyone are always welcome🌟!!\u003c/h3\u003e\n\u003ch3\u003eGive it a 🌟 if you ❤ this project. Happy Coding👨‍💻\u003c/h3\u003e\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frakesh9100%2Fbeautiify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frakesh9100%2Fbeautiify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frakesh9100%2Fbeautiify/lists"}