├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── feature_request.md │ ├── new-ui-snippet.md │ └── other-issue.md └── PULL_REQUEST_TEMPLATE │ ├── bug_fix.md │ ├── new_feature.md │ ├── new_ui_snippet.md │ └── other_change.md ├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── UI Snippets ├── 3D Cube │ ├── index.html │ └── style.css ├── Accordion │ ├── index.html │ ├── script.js │ └── style.css ├── Bouncing ball │ ├── index.html │ └── style.css ├── Carousel I │ ├── index.html │ ├── script.js │ └── style.css ├── Carousel II │ ├── index.html │ ├── script.js │ └── style.css ├── Cart Item │ ├── Headset.png │ └── index.html ├── Chart │ └── BarChart │ │ ├── index.html │ │ ├── script.js │ │ └── style.css ├── Color Wheel │ ├── index.html │ └── style.css ├── Counter │ ├── index.html │ ├── script.js │ └── style.css ├── Digital Clock │ ├── digital-clock.png │ ├── index.html │ ├── pexels-gradienta-7130469.jpg │ ├── script.js │ └── style.css ├── Festival Lighting │ ├── index.html │ └── style.css ├── FlipCard │ ├── main.html │ └── styles.css ├── Game interface │ ├── index.html │ └── style.css ├── Helpline │ ├── index.html │ └── style.css ├── Indian Flag │ ├── index.html │ └── style.css ├── Loading Page │ ├── index.html │ └── style.css ├── Login UI │ ├── images │ │ ├── 64. Magic Mint.jpg │ │ ├── 70. Honeydew.jpg │ │ └── icons8-github.svg │ ├── index.html │ └── styles.css ├── Magic card │ ├── index.html │ └── style.css ├── Mouse Chaser │ ├── index.html │ ├── script.js │ └── styles.css ├── Random Password Genrator │ ├── index.html │ ├── index.js │ └── style.css ├── Session Graph │ ├── index.html │ └── style.css ├── Skeleton UI │ ├── index.html │ └── styles.css ├── Social Login │ └── index.html ├── Text-effect-runner │ ├── index.html │ ├── script.js │ └── style.css ├── Video Player │ ├── index.html │ ├── script.js │ └── style.css ├── profile_card │ └── index.html └── transportation booking │ └── index.html └── client ├── .eslintignore ├── .eslintrc.cjs ├── .gitignore ├── .npmrc ├── .prettierignore ├── .prettierrc ├── README.md ├── jsconfig.json ├── package-lock.json ├── package.json ├── postcss.config.js ├── src ├── app.d.ts ├── app.html ├── lib │ ├── images │ │ ├── github.svg │ │ ├── svelte-logo.svg │ │ ├── svelte-welcome.png │ │ └── svelte-welcome.webp │ └── snippets.json └── routes │ ├── +layout.svelte │ ├── +page.js │ ├── +page.svelte │ ├── Header.svelte │ ├── about │ ├── +page.js │ └── +page.svelte │ ├── contribute │ ├── +page.js │ └── +page.svelte │ └── styles.css ├── static ├── favicon.png └── robots.txt ├── svelte.config.js ├── tailwind.config.js └── vite.config.js /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🐞 Bug report 3 | about: Create a report to help us improve 4 | title: "[BUG] Brief description of the bug" 5 | labels: bug 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **Steps to reproduce** 14 | 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Environment (please complete the following information):** 27 | 28 | - OS: [e.g. Windows, macOS, Linux] 29 | - Browser [e.g. Chrome, Firefox, Safari] 30 | 31 | **Additional context** 32 | Add any other context about the problem here. 33 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🚀 Feature request 3 | about: Suggest an idea for this project 4 | title: "[FEATURE] Brief description of the new feature" 5 | labels: enhancement 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/new-ui-snippet.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🎯 New UI Snippet 3 | about: Suggest a new UI snippet for the project 4 | title: "[UI] Brief description of the new UI snippet" 5 | labels: enhancement, UI 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the UI snippet** 11 | A clear and concise description of the UI snippet you want to add. 12 | 13 | **Why is this UI snippet useful?** 14 | Explain the benefits and use cases for this UI snippet. 15 | 16 | **Design or mockup** 17 | If possible, provide a design or mockup of the UI snippet. 18 | 19 | **Additional context** 20 | Add any other context or information about the UI snippet here. 21 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/other-issue.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🛠 Other Issue 3 | about: For issues that don't fit the other categories 4 | title: "[OTHER] Brief description of the issue" 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the issue** 11 | A clear and concise description of the issue. 12 | 13 | **Additional context** 14 | Add any other context or information about the issue here. 15 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE/bug_fix.md: -------------------------------------------------------------------------------- 1 | **Describe the bug fix** 2 | A clear and concise description of the bug fix and the issue it resolves. 3 | 4 | **Related issue(s)** 5 | If applicable, link to the related issue(s) in the repository. 6 | 7 | **Steps to reproduce the original bug** 8 | 9 | 1. Go to '...' 10 | 2. Click on '....' 11 | 3. Scroll down to '....' 12 | 4. See error 13 | 14 | **Testing the bug fix** 15 | Provide steps to test the bug fix and ensure it resolves the issue. 16 | 17 | **Additional context** 18 | Add any other context or information about the bug fix here. 19 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE/new_feature.md: -------------------------------------------------------------------------------- 1 | **Describe the new feature** 2 | A clear and concise description of the new feature you want to add. 3 | 4 | **Why is this feature useful?** 5 | Explain the benefits and use cases for this feature. 6 | 7 | **Implementation details** 8 | Provide a high-level overview of how this feature can be implemented, including any dependencies or requirements. 9 | 10 | **Testing the new feature** 11 | Provide steps to test the new feature and ensure it works as expected. 12 | 13 | **Additional context** 14 | Add any other context or information about the feature here. 15 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE/new_ui_snippet.md: -------------------------------------------------------------------------------- 1 | **UI Snippet Name** 2 | Provide a name for the new UI snippet. 3 | 4 | **Describe the UI Snippet** 5 | A clear and concise description of the UI snippet and its purpose. 6 | 7 | **Related issue(s)** 8 | If applicable, link to the related issue(s) in the repository. 9 | 10 | **Design and Implementation** 11 | Provide details about the design and implementation of the UI snippet, including any dependencies, libraries, or frameworks used. 12 | 13 | **Testing the UI Snippet** 14 | Provide steps to test the UI snippet and ensure it works as expected. 15 | 16 | **Screenshots** 17 | If applicable, add screenshots to help explain the UI snippet. 18 | 19 | **Additional context** 20 | Add any other context or information about the UI snippet here. 21 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE/other_change.md: -------------------------------------------------------------------------------- 1 | **Describe the change** 2 | A clear and concise description of the change you are proposing. 3 | 4 | **Reason for the change** 5 | Explain why this change is necessary or beneficial. 6 | 7 | **Testing the change** 8 | Provide steps to test the change and ensure it works as expected. 9 | 10 | **Additional context** 11 | Add any other context or information about the change here. 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | .env 3 | .env.example 4 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | deveeshshetty@gmail.com. 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to CSS-Is-Fun 2 | 3 | We appreciate your interest in contributing to CSS-Is-Fun! This document outlines the steps and guidelines for contributing to this project. By following these steps, you can ensure your contribution is smoothly integrated into the project. 4 | 5 | ## Table of Contents 6 | 7 | - [Prerequisites](#prerequisites) 8 | - [Fork the Repository](#fork-the-repository) 9 | - [Clone the Repository](#clone-the-repository) 10 | - [Create a New Branch](#create-a-new-branch) 11 | - [Make Changes](#make-changes) 12 | - [Commit Your Changes](#commit-your-changes) 13 | - [Push to Your Fork](#push-to-your-fork) 14 | - [Submit a Pull Request](#submit-a-pull-request) 15 | - [Code Review](#code-review) 16 | 17 | ## Prerequisites 18 | 19 | Before you start contributing, make sure you have the following tools installed on your local machine: 20 | 21 | - [Git](https://git-scm.com/downloads) 22 | - A code editor of your choice, such as [Visual Studio Code](https://code.visualstudio.com/download), [Atom](https://atom.io/), or [Sublime Text](https://www.sublimetext.com/3). 23 | 24 | ## Fork the Repository 25 | 26 | 1. Navigate to the [CSS-Is-Fun GitHub repository](https://github.com/Deveesh-Shetty/CSS-Is-Fun). 27 | 2. Click the "Fork" button in the top-right corner of the page to create a copy of the repository in your GitHub account. 28 | 29 | ## Clone the Repository 30 | 31 | 1. Open a terminal/command prompt on your local machine. 32 | 2. Navigate to the directory where you want to clone the repository. 33 | 3. Run the following command: 34 | 35 | ```bash 36 | git clone https://github.com/YOUR_USERNAME/CSS-Is-Fun.git 37 | ``` 38 | 39 | Replace `YOUR_USERNAME` with your GitHub username. 40 | 41 | ## Create a New Branch 42 | 43 | 1. Navigate to the cloned repository on your local machine: 44 | 45 | ```bash 46 | cd CSS-Is-Fun 47 | ``` 48 | 49 | 2. Create a new branch using the following command: 50 | 51 | ```git 52 | git checkout -b your-new-branch-name 53 | ``` 54 | 55 | Replace `your-new-branch-name` with a descriptive name for your branch, such as `add-new-feature`. 56 | 57 | ## Make Changes 58 | 59 | 1. Open the project in your preferred code editor. 60 | 2. Make the necessary changes to the project. This could include adding new features, fixing bugs, or improving existing code. 61 | 3. Test your changes to ensure they work correctly and do not introduce new bugs. 62 | 4. Also add it to the `snippets.json` file with the mentioned order in it. 63 | 64 | ## Commit Your Changes 65 | 66 | 1. Stage the changes you made: 67 | 68 | ```git 69 | git add . 70 | ``` 71 | 72 | 2. Commit the changes with a descriptive commit message: 73 | 74 | ```git 75 | git commit -m "Your commit message here" 76 | ``` 77 | 78 | Replace `Your commit message here` with a brief description of the changes you made. 79 | 80 | ## Push to Your Fork 81 | 82 | 1. Push your changes to your forked repository on GitHub: 83 | 84 | ```git 85 | git push origin your-new-branch-name 86 | ``` 87 | 88 | Replace `your-new-branch-name` with the name of your branch. 89 | 90 | ## Submit a Pull Request 91 | 92 | 1. Navigate to the [CSS-Is-Fun GitHub repository](https://github.com/Deveesh-Shetty/CSS-Is-Fun). 93 | 2. Click the "New pull request" button. 94 | 3. Click "compare across forks" and select your forked repository and branch from the dropdown menus. 95 | 4. Review the changes and click "Create pull request." 96 | 5. Add a descriptive title and any additional comments, then click "Create pull request" again. 97 | 98 | ## Code Review 99 | 100 | Once you have submitted your pull request, the project maintainer(s) will review your changes. They may provide feedback and request changes before merging your contribution. Be sure to address their feedback and make any necessary changes to ensure a smooth integration into the project. 101 | 102 | Thank you for your contribution! 🚀 103 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Deveesh Shetty 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS Is Fun 2 | 3 | ### Yes! You heard it right CSS is awesome. 4 | 5 | That's great to hear! CSS is a powerful tool for designing and styling web pages this repository also contains UI snippets which are pre-built CSS code blocks that can be easily integrated into a website to add style and functionality. 6 | 7 | CSS-Is-Fun is a collection of creative and fun CSS animations and effects to enhance your web projects.This repository containing CSS UI snippets is a valuable resource for web designers and developers looking to streamline their workflow and add creative design elements to their projects. By using these snippets, designers can save time and effort while also ensuring consistency and coherence across their website's design. 8 | 9 | # Purpose for Creating Css Is Fun 10 | 11 | if you're looking to add some flair to your website's design, be sure to check out this repository and start experimenting with some of these awesome CSS UI snippets! 12 | 13 | Whether you're looking to create custom buttons, navigation menus, or complex animations, this repository has a wide range of UI snippets to choose from. Each snippet is carefully crafted to provide a beautiful and functional design that will enhance the user experience on your website. 14 | 15 |
16 | 17 | - [Installation](#installation) 18 | - [Snippets](#snippets) 19 | - [Contributing](#contributing) 20 | - [License](#license) 21 | 22 | ## Installation 23 | 24 | To use these CSS animations and effects in your Local System , simply download or clone this repository via using this Link : 25 | 26 | ```git 27 | git clone https://github.com/Deveesh-Shetty/CSS-Is-Fun.git 28 | ``` 29 | 30 | ## Table of Contents 31 | - [Cart Item](https://codepen.io/deveesh_shetty_12/pen/rNKXvKm) 32 | - [Social Login](https://codepen.io/pen/KKejzVy). 33 | - [Counter using Closure](https://codepen.io/pen/vYVjLqx). 34 | - [Accordion](https://codepen.io/pen/YzJLEbb). 35 | - [3D Cube](https://codepen.io/pen/mdzKEQg). 36 | - [Festival Lighting](https://codepen.io/pen/NWOzdvK). 37 | - [Indian Flag](https://codepen.io/pen/xxyzqVa). 38 | - [Image Carousel I](https://codepen.io/pen/gOBKRNV). 39 | - [Image Carousel II](https://codepen.io/pen/bGmjbVo). 40 | - [Color Wheel](https://codepen.io/pen/GRYXvKw). 41 | - [Video Player](https://codepen.io/ahmedelmsery/pen/zYmmxNw). 42 | - [Bar Chart](https://codepen.io/ahmedelmsery/pen/vYVQGLP). 43 | - [Loading Page](https://codepen.io/ahmedelmsery/pen/zZVLMN). 44 | - [Session Graph](https://codepen.io/ahmedelmsery/pen/qBQdZeJ). 45 | - [Flipcard](https://codepen.io/VoiD_Z/pen/KKbBQxy). 46 | - [Mouse Chaser](https://codepen.io/NilothpalPillai/pen/BavPrWm). 47 | - [Helpline](https://codepen.io/Swathi-Singh/pen/dywjqoz). 48 | - [Digital Clock](https://codepen.io/rohancs127/pen/dywgQey). 49 | - [profile card](https://codepen.io/Raksha09/pen/ZEVVzwB). 50 | 51 | ## Snippets 52 | 53 | | Project Name | CodePen Link | Preview | Source Code | 54 | | --------------------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | 55 | | Cart Item | [Go Live](https://codepen.io/deveesh_shetty_12/pen/rNKXvKm) | Cart Item | [Code - Cart Item](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Cart%20Item) | 56 | | Social Login | [Go Live](https://codepen.io/pen/KKejzVy) | Social Login | [Code - Social Login](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Social%20Login) | 57 | | Counter using Closure | [Go Live](https://codepen.io/pen/vYVjLqx) | Counter | [Code - Counter](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Counter) | 58 | | Accordion | [Go Live](https://codepen.io/pen/YzJLEbb) | Accordion | [Code - Accordion](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Accordion) | 59 | | 3D Cube | [Go Live](https://codepen.io/pen/mdzKEQg) | 3D Cube | [Code - 3D Cube](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/3D%20Cube) | 60 | | Festival Lighting | [Go Live](https://codepen.io/pen/NWOzdvK) | Festival Lighting | [Code - Festival Lighting](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Festival%20Lighting) | 61 | | Indian Flag | [Go Live](https://codepen.io/pen/xxyzqVa) | Indian Flag | [Code - Indian Flag](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Indian%20Flag) | 62 | | Image Carousel I | [Go Live](https://codepen.io/pen/gOBKRNV) | Image Carousel I | [Code - Image Carousel I](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Carousel%20I) | 63 | | Image Carousel II | [Go Live](https://codepen.io/pen/bGmjbVo) | Image Carousel II | [Code - Image Carousel II](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Carousel%20II) | 64 | | Color Wheel | [Go Live](https://codepen.io/pen/GRYXvKw) | Color Wheel | [Code - Color Wheel](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Color%20Wheel) | 65 | | Video Player | [Go Live](https://codepen.io/ahmedelmsery/pen/zYmmxNw) | Video Player | [Code - Video Player](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Video%20Player) | 66 | | Bar Chart | [Go Live](https://codepen.io/ahmedelmsery/pen/vYVQGLP) | Bar Chart | [Code - Bar Chart](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Chart/BarChart) | 67 | | Loading Page | [Go Live](https://codepen.io/ahmedelmsery/pen/zZVLMN) | Loading Page | [Code - Loading Page](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Loading%20Page) | 68 | | Session Graph | [Go Live](https://codepen.io/ahmedelmsery/pen/qBQdZeJ) | Session Graph | [Code - Session Graph](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Session%20Graph) | 69 | | Flipcard | [Go Live](https://codepen.io/VoiD_Z/pen/KKbBQxy) | Session Graph | [Code - FlipCard](https://github.com/MeetThakur/CSS-Is-Fun/tree/master/UI%20Snippets/FlipCard) | 70 | | Mouse Chaser | [Go Live](https://codepen.io/NilothpalPillai/pen/BavPrWm) | Mouse Chaser | [Code - Mouse Chaser](https://github.com/Nilothpal-Pillai/CSS-Is-Fun/tree/Mouse-Chaser/UI%20Snippets/Mouse%20Chaser) | 71 | | Helpline | [Go Live](https://codepen.io/Swathi-Singh/pen/dywjqoz) | Helpline | [Code - Helpline](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Helpline) | 72 | | Digital Clock | [Go Live](https://codepen.io/rohancs127/pen/dywgQey) | Helpline | [Code - Digital Clock](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Digital%20Clock) | 73 | | profile card | [Go Live](https://codepen.io/Raksha09/pen/ZEVVzwB) | profile cards | [Code - profilecard](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Helpline) | 74 | 75 |
76 | 77 |

^^ Back to Snippets Top ^^

78 | 79 | ## Contributing 80 | 81 | We encourage your contributions. Welcome to CSS is Fun on GitHub! We're excited about your contributions, big or small. Join our inclusive community and work on various CSS tasks to improve design and functionality. Let's collaborate and make something great together!🚀 For detailed instructions on how to contribute, please refer to the [CONTRIBUTING.md](https://github.com/Deveesh-Shetty/CSS-Is-Fun/blob/master/CONTRIBUTING.md) file. 82 | 83 | ## License 84 | 85 | This project is licensed under the MIT License. 86 | Feel free to modify and adjust the content as needed to suit your project 🥳. 87 | 88 |

^^Back To Top^^

89 | -------------------------------------------------------------------------------- /UI Snippets/3D Cube/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 3D Cube 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /UI Snippets/3D Cube/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | } 5 | 6 | body { 7 | perspective: 25em; 8 | /* perspective - whatever is closer looks bigger and whatever is further away looks smaller. */ 9 | 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | } 14 | 15 | .cube, 16 | .cube-face { 17 | position: absolute; 18 | } 19 | 20 | .cube { 21 | --cube-edge: 6em; 22 | 23 | font-size: 6vmin; 24 | transform-style: preserve-3d; 25 | /* so that its cube children don’t get flattened into its plane */ 26 | 27 | top: 50%; 28 | left: 50%; 29 | 30 | animation: move 2s infinite alternate ease-in-out; 31 | } 32 | 33 | .cube-face { 34 | margin: calc(var(--cube-edge) * -0.5); 35 | /* So that the cube is in dead centre by giving negative margin of half size */ 36 | width: var(--cube-edge); 37 | aspect-ratio: 1; 38 | 39 | outline: 1px solid black; 40 | } 41 | 42 | .cube-face:nth-child(1) { 43 | /* rotate3d(i, j, k, angle) */ 44 | transform: rotateY(0deg) translateZ(calc(var(--cube-edge) * 0.5)); 45 | /* OR transform: rotate3d(0, 1, 0, 0deg) translateZ(calc(var(--cube-edge) * 0.5)); */ 46 | background-color: red; 47 | } 48 | 49 | .cube-face:nth-child(2) { 50 | transform: rotateY(90deg) translateZ(calc(var(--cube-edge) * 0.5)); 51 | background-color: green; 52 | } 53 | 54 | .cube-face:nth-child(3) { 55 | transform: rotateY(180deg) translateZ(calc(var(--cube-edge) * 0.5)); 56 | background-color: blue; 57 | } 58 | 59 | .cube-face:nth-child(4) { 60 | transform: rotateY(270deg) translateZ(calc(var(--cube-edge) * 0.5)); 61 | background-color: orange; 62 | } 63 | 64 | .cube-face:nth-child(5) { 65 | transform: rotateX(90deg) translateZ(calc(var(--cube-edge) * 0.5)); 66 | background-color: yellow; 67 | } 68 | 69 | .cube-face:nth-child(6) { 70 | transform: rotateX(-90deg) translateZ(calc(var(--cube-edge) * 0.5)); 71 | background-color: white; 72 | } 73 | 74 | @keyframes move { 75 | 0% { 76 | transform: rotate3d(1, -1, 0, 0deg); 77 | } 78 | 100% { 79 | transform: rotate3d(1, 1, 0, 360deg); 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /UI Snippets/Accordion/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 15 | Accordion 16 | 17 | 18 |
19 |

Frequenty Asked Questions

20 |
21 |
22 |
23 |

Who is this?

24 | 25 |
26 |

27 | I am Deveesh Shetty. I work with React and NextJS. Connect with me 28 | on 29 | 30 | . 32 |

33 |
34 |
35 |
36 |

What is this?

37 | 38 |
39 |

40 | This is an accordion which I made for fun using HTML, CSS, and 41 | JavaScript. How is it? 42 |

43 |
44 |
45 |
46 |

Why is this?

47 | 48 |
49 |

50 | Well, Why is this even a question! 51 |

52 |
53 |
54 |
55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /UI Snippets/Accordion/script.js: -------------------------------------------------------------------------------- 1 | const answer = document.querySelectorAll(".answer") 2 | const toggleBtns = document.querySelectorAll(".btn") 3 | 4 | toggleBtns.forEach((btn, index) => { 5 | btn.addEventListener("click", () => { 6 | console.log(index) 7 | if (answer[index].getAttribute("data-hidden") === "true") { 8 | answer[index].setAttribute("data-hidden", "false") 9 | btn.classList.add("fa-angle-up") 10 | } else { 11 | answer[index].setAttribute("data-hidden", "true") 12 | btn.classList.remove("fa-angle-up") 13 | btn.classList.add("fa-angle-down") 14 | } 15 | }) 16 | }) 17 | -------------------------------------------------------------------------------- /UI Snippets/Accordion/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-siziing: border-box; 5 | } 6 | 7 | :root { 8 | --clr-primary: #f49f1c; 9 | --clr-secondary: #030e4f; 10 | } 11 | 12 | html { 13 | height: 100%; 14 | } 15 | 16 | body { 17 | height: 100%; 18 | display: flex; 19 | align-items: center; 20 | font-family: sans-serif; 21 | padding-block: 2rem; 22 | justify-content: center; 23 | background-color: var(--clr-secondary); 24 | color: var(--clr-primary); 25 | } 26 | 27 | .container { 28 | height: 100%; 29 | display: flex; 30 | flex-direction: column; 31 | align-items: center; 32 | gap: 2rem; 33 | width: 30rem; 34 | } 35 | 36 | .accordion { 37 | display: grid; 38 | gap: 1.5rem; 39 | width: 100%; 40 | } 41 | 42 | .set { 43 | display: flex; 44 | flex-direction: column; 45 | gap: 0.5rem; 46 | } 47 | 48 | .set > div { 49 | display: flex; 50 | padding-inline: 0.25rem; 51 | align-items: center; 52 | justify-content: space-between; 53 | } 54 | 55 | .btn { 56 | cursor: pointer; 57 | } 58 | 59 | .answer[data-hidden="true"] { 60 | display: none; 61 | } 62 | 63 | .answer[data-hidden="false"] { 64 | border-top: 1px dashed var(--clr-secondary); 65 | padding: 1rem 0.5rem; 66 | background-color: var(--clr-primary); 67 | color: var(--clr-secondary); 68 | display: block; 69 | } 70 | 71 | .link { 72 | color: var(--clr-secondary); 73 | } 74 | -------------------------------------------------------------------------------- /UI Snippets/Bouncing ball/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | -------------------------------------------------------------------------------- /UI Snippets/Bouncing ball/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 100vh; 6 | margin: 0; 7 | background-color: #f0f0f0; 8 | } 9 | 10 | .ball { 11 | width: 100px; 12 | height: 100px; 13 | background-color: #3498db; 14 | border-radius: 50%; 15 | position: relative; 16 | animation: bounce 2s infinite; 17 | } 18 | 19 | @keyframes bounce { 20 | 0%, 100% { 21 | top: 0; 22 | } 23 | 50% { 24 | top: 200px; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /UI Snippets/Carousel I/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Image Carousel I 16 | 17 | 18 |
19 |
20 | 23 |
24 | image 1 25 |
26 |

Image 1

27 |
28 |
29 |
30 | image 1 31 |
32 |

Image 2

33 |
34 |
35 |
36 | image 1 37 |
38 |

Image 3

39 |
40 |
41 | 44 |
45 |
46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /UI Snippets/Carousel I/script.js: -------------------------------------------------------------------------------- 1 | const next = document.querySelector(".next") 2 | const previous = document.querySelector(".previous") 3 | const images = document.querySelectorAll(".carousel") 4 | 5 | function getActiveIndex() { 6 | const activeImage = document.querySelector('.carousel[data-active="true"]') 7 | activeImage.setAttribute("data-active", "false") 8 | const _activeIndex = activeImage.getAttribute("data-index") 9 | const activeIndex = parseInt(_activeIndex) 10 | return activeIndex 11 | } 12 | 13 | next.addEventListener("click", () => { 14 | const activeIndex = getActiveIndex() 15 | const currentIndex = (activeIndex + 1) % images.length 16 | images[currentIndex].setAttribute("data-active", "true") 17 | }) 18 | 19 | previous.addEventListener("click", () => { 20 | const activeIndex = getActiveIndex() 21 | const currentIndex = activeIndex === 0 ? images.length - 1 : activeIndex - 1 22 | images[currentIndex].setAttribute("data-active", "true") 23 | }) 24 | -------------------------------------------------------------------------------- /UI Snippets/Carousel I/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | --clr-primary: #f49f1c; 9 | --clr-secondary: #030e4f; 10 | } 11 | 12 | html, 13 | body { 14 | height: 100%; 15 | } 16 | 17 | body { 18 | background-color: #eee; 19 | display: flex; 20 | justify-content: center; 21 | align-items: center; 22 | } 23 | 24 | .carousel-container { 25 | --image-gap: 0.5em; 26 | 27 | display: flex; 28 | gap: var(--image-gap); 29 | align-content: center; 30 | margin-inline: 0.5rem; 31 | } 32 | 33 | .previous, 34 | .next { 35 | display: flex; 36 | align-items: center; 37 | padding-inline: 0.5rem; 38 | cursor: pointer; 39 | transition: background-color 300ms ease-in-out; 40 | } 41 | 42 | .previous:hover, 43 | .next:hover { 44 | background-color: rgba(0, 0, 0, 0.1); 45 | } 46 | 47 | .carousel { 48 | position: relative; 49 | overflow: hidden; 50 | display: flex; 51 | } 52 | 53 | .carousel > img { 54 | --image-size: 20em; 55 | --inactive-image-size: 2em; 56 | 57 | max-width: 100%; 58 | width: var(--image-size); 59 | aspect-ratio: 1; 60 | display: block; 61 | user-select: none; 62 | object-fit: cover; 63 | transition: width 500ms ease-in-out; 64 | } 65 | 66 | .carousel[data-active="false"] > .content { 67 | display: none; 68 | } 69 | 70 | .content { 71 | position: absolute; 72 | display: flex; 73 | justify-content: center; 74 | align-items: center; 75 | inset: 0; 76 | background-color: rgba(0, 0, 0, 0.3); 77 | color: white; 78 | transform: translateY(100%); 79 | transition: transform 350ms ease-in-out; 80 | } 81 | 82 | .content > p { 83 | font-size: clamp(1em, 10vw, 2em); 84 | } 85 | 86 | .carousel[data-active="false"] > img { 87 | width: var(--inactive-image-size); 88 | height: var(--image-size); 89 | } 90 | 91 | .carousel[data-active="true"]:hover > .content { 92 | transform: translateY(0); 93 | } 94 | 95 | @media screen and (max-width: 480px) { 96 | .carousel-container { 97 | --image-gap: 0; 98 | } 99 | 100 | .carousel > img { 101 | --image-size: auto; 102 | } 103 | .carousel[data-active="false"] > img { 104 | display: none; 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /UI Snippets/Carousel II/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Carousel II 9 | 10 | 11 |
12 |
13 | 14 |
15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /UI Snippets/Carousel II/script.js: -------------------------------------------------------------------------------- 1 | const carousel = document.querySelector(".grid-carousel") 2 | 3 | const totalImages = 40 4 | 5 | for (let i = 1; i <= totalImages; i++) { 6 | // Generating Images 7 | const div = document.createElement("div") 8 | div.classList.add("carousel-item") 9 | div.setAttribute("data-active", false) 10 | const img = document.createElement("img") 11 | img.setAttribute("src", `https://picsum.photos/400/400?random=${i}`) 12 | img.setAttribute("alt", `Image ${i}`) 13 | div.appendChild(img) 14 | 15 | carousel.appendChild(div) 16 | 17 | // Getting columns based on the total images 18 | // Currently for every 5 image 1 column is increased and 2 is by default 19 | const totalColumns = parseInt(totalImages / 5) + 2 20 | carousel.style.setProperty("--columns", totalColumns) 21 | } 22 | 23 | const images = document.querySelectorAll(".carousel-item") 24 | 25 | images.forEach((img) => { 26 | img.addEventListener("click", () => { 27 | const isActive = img.getAttribute("data-active") 28 | if (isActive === "false") { 29 | img.style.gridColumn = "span 2" 30 | img.style.gridRow = "span 2" 31 | img.setAttribute("data-active", true) 32 | } else { 33 | img.style.gridColumn = "span 1" 34 | img.style.gridRow = "span 1" 35 | img.setAttribute("data-active", false) 36 | } 37 | }) 38 | }) 39 | -------------------------------------------------------------------------------- /UI Snippets/Carousel II/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | html, 8 | body { 9 | min-height: 100%; 10 | } 11 | 12 | body { 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | } 17 | 18 | .grid-carousel { 19 | --columns: 6; 20 | --carousel-gap: 1vmin; 21 | --image-size: 5em; 22 | 23 | padding: 1rem; 24 | max-width: calc(var(--columns) * var(--image-size)); 25 | margin-inline: auto; 26 | display: grid; 27 | grid-template-columns: repeat(var(--columns), 1fr); 28 | gap: var(--carousel-gap); 29 | /* grid-auto-rows: var(--image-size); */ 30 | grid-auto-flow: row dense; 31 | 32 | transition: all 500ms ease-in-out; 33 | } 34 | 35 | .carousel-item { 36 | /* width: var(--image-size); */ 37 | width: 100%; 38 | aspect-ratio: 1; 39 | } 40 | 41 | .carousel-item > img { 42 | max-width: 100%; 43 | display: block; 44 | object-fit: cover; 45 | } 46 | -------------------------------------------------------------------------------- /UI Snippets/Cart Item/Headset.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-shetty/CSS-Is-Fun/2933d968add449e4728e449a2ca992701f1b0071/UI Snippets/Cart Item/Headset.png -------------------------------------------------------------------------------- /UI Snippets/Cart Item/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | Cart Item 13 | 14 | 15 |
18 |
19 | Razer Headset 20 |
21 |
22 |
23 |

26 | Free Shipping 27 |

28 |

29 | Razer Kraken Pro V2 Headphones Razer Kraken 7.1 30 |

31 |
32 |
33 |

1 599,-

34 |

799,-

35 |
36 |

37 | The offer is valid upto April 3 or as long as stock lasts! 38 |

39 | 44 |

🟢 50+ pcs. in stock

45 |
46 | 52 | 58 |
59 |
60 |
61 |
@ShettyDeveesh
62 | 63 | 64 | -------------------------------------------------------------------------------- /UI Snippets/Chart/BarChart/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Bar Chart 9 | 10 | 11 |
12 | 13 |

Bar Chart

14 | 15 |
16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /UI Snippets/Chart/BarChart/script.js: -------------------------------------------------------------------------------- 1 | const barChart = document.getElementById("bar-chart") 2 | 3 | new Chart(barChart, { 4 | type: "bar", 5 | data: { 6 | labels: ["JavaScript", "TypeScript", "CSS", "Python", "C", "Java"], 7 | datasets: [ 8 | { 9 | label: "Like Rating", 10 | data: [7, 8, 10, 7, 5, 2], 11 | borderWidth: 1, 12 | }, 13 | ], 14 | }, 15 | options: { 16 | scale: { 17 | y: { 18 | min: 1, 19 | max: 10, 20 | }, 21 | }, 22 | plugins: { 23 | legend: { 24 | display: false, 25 | }, 26 | title: { 27 | display: true, 28 | text: "How much do I like these languages?", 29 | align: "center", 30 | }, 31 | }, 32 | }, 33 | }) 34 | -------------------------------------------------------------------------------- /UI Snippets/Chart/BarChart/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | } 5 | 6 | body { 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | } 11 | -------------------------------------------------------------------------------- /UI Snippets/Color Wheel/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Color Wheel 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /UI Snippets/Color Wheel/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | } 5 | 6 | body { 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | } 11 | 12 | div { 13 | background: conic-gradient( 14 | violet, 15 | indigo, 16 | blue, 17 | green, 18 | yellow, 19 | orange, 20 | red, 21 | violet 22 | ); 23 | border-radius: 50%; 24 | aspect-ratio: 1; 25 | width: 50%; 26 | } 27 | -------------------------------------------------------------------------------- /UI Snippets/Counter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 15 | Counter using Closure 16 | 17 | 18 |
19 |

Counter

20 |
21 |

0

22 |
23 | 26 | 29 |
30 |
31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /UI Snippets/Counter/script.js: -------------------------------------------------------------------------------- 1 | const result = document.getElementById("result") 2 | 3 | function createCounter() { 4 | let count = 0 5 | return function setCount(state) { 6 | if (state === "increment") { 7 | count++ 8 | } else if (state === "decrement") { 9 | count-- 10 | } else { 11 | console.log("Operation not defined!") 12 | } 13 | result.innerText = count 14 | } 15 | } 16 | 17 | const counter = createCounter() 18 | 19 | function increment() { 20 | counter("increment") 21 | } 22 | 23 | function decrement() { 24 | counter("decrement") 25 | } 26 | -------------------------------------------------------------------------------- /UI Snippets/Counter/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | --clr-primary: #f49f1c; 9 | --clr-secondary: #030e4f; 10 | } 11 | 12 | html { 13 | height: 100%; 14 | } 15 | 16 | body { 17 | display: flex; 18 | height: 100%; 19 | justify-content: center; 20 | align-items: center; 21 | background-color: #030e4f; 22 | color: #f49f1c; 23 | } 24 | 25 | main { 26 | display: flex; 27 | flex-direction: column; 28 | align-items: center; 29 | gap: 1rem; 30 | } 31 | 32 | .title { 33 | font-size: 2rem; 34 | } 35 | 36 | .counter { 37 | width: 100%; 38 | display: flex; 39 | flex-direction: column; 40 | gap: 1rem; 41 | } 42 | 43 | .button-list { 44 | display: flex; 45 | gap: 1rem; 46 | } 47 | 48 | .button-list > button { 49 | all: unset; 50 | display: flex; 51 | align-items: center; 52 | background-color: var(--clr-primary); 53 | color: var(--clr-secondary); 54 | cursor: pointer; 55 | font-weight: 700; 56 | padding: 0.5rem 2rem; 57 | font-size: 1.5rem; 58 | border-radius: 1rem; 59 | text-align: center; 60 | box-shadow: 4px 4px 4px #555; 61 | transition: box-shadow 400ms ease-in-out; 62 | } 63 | 64 | .button-list > button:hover { 65 | box-shadow: 0 0 4px #777; 66 | } 67 | 68 | #result { 69 | text-align: center; 70 | font-size: 5rem; 71 | } 72 | -------------------------------------------------------------------------------- /UI Snippets/Digital Clock/digital-clock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-shetty/CSS-Is-Fun/2933d968add449e4728e449a2ca992701f1b0071/UI Snippets/Digital Clock/digital-clock.png -------------------------------------------------------------------------------- /UI Snippets/Digital Clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Digital Clock 7 | 8 | 9 | 10 |

Digital Clock

11 |
12 |
13 |
:
14 |
15 |
:
16 |
17 |
18 |
@Rohan
19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /UI Snippets/Digital Clock/pexels-gradienta-7130469.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-shetty/CSS-Is-Fun/2933d968add449e4728e449a2ca992701f1b0071/UI Snippets/Digital Clock/pexels-gradienta-7130469.jpg -------------------------------------------------------------------------------- /UI Snippets/Digital Clock/script.js: -------------------------------------------------------------------------------- 1 | function updateDigitalClock() { 2 | const digitalClock = document.getElementById('digital-clock'); 3 | const now = new Date(); 4 | const hours = now.getHours(); 5 | const minutes = now.getMinutes(); 6 | const seconds = now.getSeconds(); 7 | 8 | const THours = hours > 12 ? (hours-12) : hours; 9 | 10 | const formattedHours = THours < 10 ? `0${THours}` : THours; 11 | const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes; 12 | const formattedSeconds = seconds < 10 ? `0${seconds}` : seconds; 13 | 14 | Hours.innerText = `${formattedHours}`; 15 | Minutes.innerText = `${formattedMinutes}`; 16 | Seconds.innerText = `${formattedSeconds}`; 17 | 18 | } 19 | 20 | updateDigitalClock(); 21 | setInterval(updateDigitalClock, 1000); -------------------------------------------------------------------------------- /UI Snippets/Digital Clock/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:400); 2 | 3 | 4 | body { 5 | background-image:url("pexels-gradienta-7130469.jpg"); 6 | background-position:right; 7 | font-family: "Roboto"; 8 | display: flex; 9 | flex-direction: column; 10 | justify-content: center; 11 | align-items: center; 12 | } 13 | 14 | .clock { 15 | font-size: 48px; 16 | color: #333; 17 | display: flex; 18 | column-gap: 30px; 19 | justify-content: center; 20 | align-items: center; 21 | height: 75vh; 22 | 23 | } 24 | 25 | #Hours, #Minutes, #Seconds{ 26 | width:150px; 27 | height: 150px; 28 | border: solid white 1px; 29 | color: rgb(70, 70, 70); 30 | border-radius: 10px; 31 | display: flex; 32 | justify-content: center; 33 | align-items: center; 34 | transition: 0.5s; 35 | } 36 | #Hours:hover, #Minutes:hover, #Seconds:hover{ 37 | box-shadow: 3px 3px 5px rgba(128, 128, 128, 0.151); 38 | } 39 | 40 | h1 { 41 | color: #6969698a; 42 | transition: 2s; 43 | } 44 | 45 | h1:hover{ 46 | color: rgba(240, 248, 255, 0.685); 47 | } 48 | 49 | .footer{ 50 | margin-top: 50px; 51 | opacity: 0.2; 52 | } 53 | 54 | @media(max-width:600px){ 55 | #Hours, #Minutes, #Seconds{ 56 | width:50px; 57 | height: 50px; 58 | } 59 | 60 | .clock{ 61 | font-size: 20px; 62 | } 63 | } -------------------------------------------------------------------------------- /UI Snippets/Festival Lighting/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Festival Lighting 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /UI Snippets/Festival Lighting/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | html, 8 | body { 9 | height: 100%; 10 | } 11 | 12 | body { 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | background-color: #131313; 17 | } 18 | 19 | main { 20 | display: flex; 21 | flex-wrap: wrap; 22 | justify-content: center; 23 | gap: 6vmin; 24 | width: max(90%, 25em); 25 | } 26 | 27 | .light::before { 28 | content: ""; 29 | position: absolute; 30 | height: 2px; 31 | width: 10vmin; 32 | background-color: #666; 33 | z-index: -1; 34 | } 35 | 36 | .light { 37 | --light-size: 4vmin; 38 | --light-clr: red; 39 | --delay: 0s; 40 | --total-time: 5s; 41 | 42 | position: relative; 43 | width: var(--light-size); 44 | aspect-ratio: 1 / 2; 45 | border-radius: 50%; 46 | background-color: var(--light-clr); 47 | box-shadow: 0 0 1em 2px var(--light-clr); 48 | animation: light-up var(--total-time) var(--delay) infinite alternate 49 | ease-in-out; 50 | } 51 | 52 | .light:nth-child(odd) { 53 | --light-clr: purple; 54 | --delay: 1s; 55 | } 56 | 57 | .light:nth-child(5n + 2) { 58 | --light-clr: hotpink; 59 | --delay: 2s; 60 | } 61 | 62 | .light:nth-child(3n + 1) { 63 | --light-clr: orange; 64 | --delay: 500ms; 65 | } 66 | 67 | @keyframes light-up { 68 | to { 69 | box-shadow: 0 0 2em 10px var(--light-clr); 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /UI Snippets/FlipCard/main.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |
12 |
13 |

Front Side

14 |
15 |
16 |

Back Side

17 |
18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /UI Snippets/FlipCard/styles.css: -------------------------------------------------------------------------------- 1 | .card { 2 | padding: 20px; 3 | width: 200px; 4 | height: 300px; 5 | perspective: 1000px; 6 | } 7 | 8 | .card-inner { 9 | width: 100%; 10 | height: 100%; 11 | position: relative; 12 | transform-style: preserve-3d; 13 | transition: transform 0.5s; 14 | } 15 | 16 | .card:hover .card-inner { 17 | transform: rotateY(180deg); 18 | } 19 | 20 | .card-front, 21 | .card-back { 22 | position: absolute; 23 | width: 100%; 24 | height: 100%; 25 | backface-visibility: hidden; 26 | } 27 | 28 | .card-front { 29 | background-color: black; 30 | color: #fff; 31 | display: flex; 32 | align-items: center; 33 | border: 10px solid black; 34 | border-radius: 10px; 35 | justify-content: center; 36 | font-size: 24px; 37 | transform: rotateY(0deg); 38 | } 39 | 40 | .card-back { 41 | background-color: blue; 42 | color: black; 43 | display: flex; 44 | align-items: center; 45 | border: 10px solid blue; 46 | border-radius: 10px; 47 | justify-content: center; 48 | font-size: 24px; 49 | transform: rotateY(180deg); 50 | } 51 | -------------------------------------------------------------------------------- /UI Snippets/Game interface/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 |
9 |

My Awesome Game

10 |
11 |
12 |
13 |

Player Info

14 |

Name: John Doe

15 |

Level: 5

16 |

Score: 1000

17 |
18 |
19 | 20 |
21 |
22 |
23 | 24 |
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /UI Snippets/Game interface/style.css: -------------------------------------------------------------------------------- 1 | 2 | .game-interface { 3 | max-width: 800px; 4 | margin: 0 auto; 5 | background-color: #333; 6 | color: #fff; 7 | border-radius: 10px; 8 | padding: 20px; 9 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 10 | } 11 | 12 | .game-header { 13 | text-align: center; 14 | font-size: 24px; 15 | } 16 | 17 | .game-content { 18 | display: flex; 19 | flex-wrap: wrap; 20 | justify-content: space-between; 21 | margin-top: 20px; 22 | } 23 | 24 | .game-info, .game-screen { 25 | flex: 1; 26 | padding: 20px; 27 | } 28 | 29 | .game-info { 30 | background-color: #444; 31 | border-radius: 5px; 32 | } 33 | 34 | .game-info h2 { 35 | font-size: 18px; 36 | margin: 0; 37 | } 38 | 39 | .game-info p { 40 | margin: 10px 0; 41 | } 42 | 43 | .game-button { 44 | background-color: #3498db; 45 | color: #fff; 46 | padding: 10px 20px; 47 | border: none; 48 | border-radius: 5px; 49 | cursor: pointer; 50 | transition: background-color 0.3s ease; 51 | } 52 | 53 | .game-button:hover { 54 | background-color: #2980b9; 55 | } 56 | -------------------------------------------------------------------------------- /UI Snippets/Helpline/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Helpline Image 7 | 8 | 9 | Helpline Image 10 | 11 | 12 | -------------------------------------------------------------------------------- /UI Snippets/Helpline/style.css: -------------------------------------------------------------------------------- 1 | /* Apply styles to the body */ 2 | body { 3 | background-color:black; 4 | } 5 | 6 | /* Style the image */ 7 | img { 8 | max-width: 100%; 9 | height: auto; 10 | margin: 20px auto; 11 | display: block; 12 | border: 2px solid #333; 13 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 14 | } 15 | -------------------------------------------------------------------------------- /UI Snippets/Indian Flag/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Indian Flag 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /UI Snippets/Indian Flag/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | html, 8 | body { 9 | height: 100%; 10 | } 11 | 12 | body { 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | background: linear-gradient(45deg, lightblue, pink); 17 | } 18 | 19 | :root { 20 | --saffron: #ff9933; 21 | --white: #ffffff; 22 | --green: #138808; 23 | --navy-blue: #000080; 24 | } 25 | 26 | .flag { 27 | height: 60vmin; 28 | aspect-ratio: 4 / 3; 29 | display: flex; 30 | flex-direction: column; 31 | } 32 | 33 | .saffron, 34 | .white, 35 | .green { 36 | height: 20vmin; 37 | } 38 | .saffron { 39 | background-color: var(--saffron); 40 | } 41 | .white { 42 | display: flex; 43 | justify-content: center; 44 | align-items: center; 45 | background-color: var(--white); 46 | } 47 | .green { 48 | background-color: var(--green); 49 | } 50 | .ashoka-chakra { 51 | border: 0.75vmin solid var(--navy-blue); 52 | width: 18vmin; 53 | aspect-ratio: 1; 54 | border-radius: 50%; 55 | position: relative; 56 | display: flex; 57 | justify-content: center; 58 | align-items: center; 59 | } 60 | .spokes { 61 | position: absolute; 62 | width: 17.5vmin; 63 | height: 0.2vmin; 64 | background-color: var(--navy-blue); 65 | } 66 | .spokes::before, 67 | .spokes::after { 68 | content: ""; 69 | position: absolute; 70 | width: 1vmin; 71 | aspect-ratio: 1; 72 | background-color: var(--navy-blue); 73 | border-radius: 50%; 74 | } 75 | .spokes::before { 76 | top: 0.75vmin; 77 | left: 0vmin; 78 | } 79 | .spokes::after { 80 | right: 0vmin; 81 | bottom: 0.75vmin; 82 | } 83 | 84 | .spokes:nth-child(1) { 85 | transform: rotate(15deg); 86 | } 87 | .spokes:nth-child(2) { 88 | transform: rotate(30deg); 89 | } 90 | .spokes:nth-child(3) { 91 | transform: rotate(45deg); 92 | } 93 | .spokes:nth-child(4) { 94 | transform: rotate(60deg); 95 | } 96 | .spokes:nth-child(5) { 97 | transform: rotate(75deg); 98 | } 99 | .spokes:nth-child(6) { 100 | transform: rotate(90deg); 101 | } 102 | .spokes:nth-child(7) { 103 | transform: rotate(105deg); 104 | } 105 | .spokes:nth-child(8) { 106 | transform: rotate(120deg); 107 | } 108 | .spokes:nth-child(9) { 109 | transform: rotate(135deg); 110 | } 111 | .spokes:nth-child(10) { 112 | transform: rotate(150deg); 113 | } 114 | .spokes:nth-child(11) { 115 | transform: rotate(165deg); 116 | } 117 | .spokes:nth-child(12) { 118 | transform: rotate(180deg); 119 | } 120 | -------------------------------------------------------------------------------- /UI Snippets/Loading Page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | L 11 | o 12 | a 13 | d 14 | i 15 | n 16 | g 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /UI Snippets/Loading Page/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:300); 2 | 3 | html { 4 | height: 90%; 5 | } 6 | 7 | body { 8 | background: #3F485B; 9 | display: flex; 10 | align-items: center; 11 | height: 90%; 12 | } 13 | 14 | .back { 15 | margin: 1em auto; 16 | font-family: "Roboto"; 17 | } 18 | 19 | .back span { 20 | font-size: 3em; 21 | color: #F2C640; 22 | background: #262B37; 23 | display: table-cell; 24 | box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3), 0 5px 0 #ccc; 25 | padding: 0 15px; 26 | line-height: 100px; 27 | animation: jumb 2s infinite; 28 | } 29 | 30 | @keyframes jumb { 31 | 0% { 32 | transform: translateY(0px) 33 | } 34 | 35 | 50% { 36 | transform: translateY(-30px); 37 | box-shadow: 0 15px 0 rgb(242, 198, 64); 38 | } 39 | 40 | 100% { 41 | transform: translateY(0px) 42 | } 43 | } 44 | 45 | .back span:nth-child(1) { 46 | animation-delay: 0s; 47 | } 48 | 49 | .back span:nth-child(2) { 50 | animation-delay: .1s; 51 | } 52 | 53 | .back span:nth-child(3) { 54 | animation-delay: .2s; 55 | } 56 | 57 | .back span:nth-child(4) { 58 | animation-delay: .3s; 59 | } 60 | 61 | .back span:nth-child(5) { 62 | animation-delay: .4s; 63 | } 64 | 65 | .back span:nth-child(6) { 66 | animation-delay: .5s; 67 | } 68 | 69 | .back span:nth-child(7) { 70 | animation-delay: .6s; 71 | } 72 | -------------------------------------------------------------------------------- /UI Snippets/Login UI/images/64. Magic Mint.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-shetty/CSS-Is-Fun/2933d968add449e4728e449a2ca992701f1b0071/UI Snippets/Login UI/images/64. Magic Mint.jpg -------------------------------------------------------------------------------- /UI Snippets/Login UI/images/70. Honeydew.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-shetty/CSS-Is-Fun/2933d968add449e4728e449a2ca992701f1b0071/UI Snippets/Login UI/images/70. Honeydew.jpg -------------------------------------------------------------------------------- /UI Snippets/Login UI/images/icons8-github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /UI Snippets/Login UI/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Login UI 7 | 8 | 9 | 10 |
11 | 12 |

USER LOGIN

13 | 14 |
15 |
16 | 17 |
18 | 19 |
20 |
21 |

OR , Use your Email

22 |
23 |
24 | 25 | 26 | 27 | 28 | 29 |

By clicking on Login, you agree to our Terms and conditions.

30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /UI Snippets/Login UI/styles.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:400); 2 | 3 | body{ 4 | font-family: 'Roboto'; 5 | margin-top: 7%; 6 | display:grid; 7 | align-items: center; 8 | justify-content: center; 9 | background-image: url("images/64.\ Magic\ Mint.jpg"); 10 | background-position: 0px -2000px; 11 | color: rgb(103, 103, 103); 12 | } 13 | 14 | .container{ 15 | display: flex; 16 | background-image: url("images/70.\ Honeydew.jpg"); 17 | background-size: cover; 18 | flex-direction: column; 19 | align-items: center; 20 | justify-content: center; 21 | box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.246); 22 | width: 630px; 23 | height: 630px; 24 | row-gap: 4%; 25 | border-radius: 10px; 26 | } 27 | 28 | h1{ 29 | color:black; 30 | font-size: 26px; 31 | } 32 | 33 | .else-section{ 34 | display: flex; 35 | width:100%; 36 | justify-content:center ; 37 | align-items: center; 38 | column-gap: 10px; 39 | color: rgb(151, 151, 151); 40 | } 41 | 42 | .line{ 43 | background-color: rgb(151, 151, 151); 44 | width: 100px; 45 | height: 0.5px; 46 | } 47 | 48 | .github-login-option{ 49 | display: flex; 50 | justify-content: center; 51 | transition: 0.3s; 52 | cursor:pointer; 53 | overflow: hidden; 54 | border-radius: 10px; 55 | cursor:pointer; 56 | } 57 | .github-login-option:hover{ 58 | box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.499); 59 | } 60 | .github-login-option:hover .continue-with-github-button{ 61 | background-color: rgb(38, 38, 38); 62 | } 63 | 64 | .github-icon-div{ 65 | height: 40px; 66 | } 67 | .github-icon{ 68 | height: 40px; 69 | background-color: white; 70 | } 71 | 72 | .github-icon-div>img{ 73 | border-color: black; 74 | border-width: 1px; 75 | } 76 | 77 | .continue-with-github-button{ 78 | height: 40px; 79 | border: none; 80 | padding-left: 50px; 81 | padding-right: 50px; 82 | background-color:black; 83 | color: white; 84 | font-weight: bold; 85 | transition: 0.3s; 86 | cursor: pointer; 87 | } 88 | 89 | .email-input, .password-input, .confirm-password-input{ 90 | background: none; 91 | border: solid rgba(0, 0, 0, 0.372) 1px; 92 | color: rgba(0,0,0,0.7); 93 | padding: 15px; 94 | padding-right: 55px; 95 | border-radius: 10px; 96 | font-size: 17px; 97 | } 98 | 99 | .email-input:focus, .password-input:focus, .confirm-password-input:focus{ 100 | outline: none; 101 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.372); 102 | } 103 | 104 | .email-input::placeholder, .password-input::placeholder, .confirm-password-input::placeholder{ 105 | color: rgba(0,0,0,0.372); 106 | } 107 | 108 | .login-button{ 109 | background: none; 110 | padding: 12px; 111 | padding-left: 60px; 112 | padding-right: 60px; 113 | border: none; 114 | font-family: 'Roboto'; 115 | font-size: 20px; 116 | background-color: rgba(0, 0, 0, 0.8); 117 | color: white; 118 | font-weight: bold; 119 | border-radius: 10px; 120 | transition: 0.3s; 121 | cursor: pointer; 122 | } 123 | 124 | .login-button:hover{ 125 | background-color: rgb(62, 62, 62); 126 | box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.499); 127 | padding: 18px; 128 | padding-left: 66px; 129 | padding-right: 66px; 130 | } 131 | 132 | .TandC{ 133 | cursor:pointer; 134 | } 135 | -------------------------------------------------------------------------------- /UI Snippets/Magic card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | Magic Card 12 |
13 | 14 | Mythrill 15 | 16 | 17 | -------------------------------------------------------------------------------- /UI Snippets/Magic card/style.css: -------------------------------------------------------------------------------- 1 | @property --rotate { 2 | syntax: ""; 3 | initial-value: 132deg; 4 | inherits: false; 5 | } 6 | 7 | :root { 8 | --card-height: 65vh; 9 | --card-width: calc(var(--card-height) / 1.5); 10 | } 11 | 12 | 13 | body { 14 | min-height: 100vh; 15 | background: #212534; 16 | display: flex; 17 | align-items: center; 18 | flex-direction: column; 19 | padding-top: 2rem; 20 | padding-bottom: 2rem; 21 | box-sizing: border-box; 22 | } 23 | 24 | 25 | .card { 26 | background: #191c29; 27 | width: var(--card-width); 28 | height: var(--card-height); 29 | padding: 3px; 30 | position: relative; 31 | border-radius: 6px; 32 | justify-content: center; 33 | align-items: center; 34 | text-align: center; 35 | display: flex; 36 | font-size: 1.5em; 37 | color: rgb(88 199 250 / 0%); 38 | cursor: pointer; 39 | font-family: cursive; 40 | } 41 | 42 | .card:hover { 43 | color: rgb(88 199 250 / 100%); 44 | transition: color 1s; 45 | } 46 | .card:hover:before, .card:hover:after { 47 | animation: none; 48 | opacity: 0; 49 | } 50 | 51 | 52 | .card::before { 53 | content: ""; 54 | width: 104%; 55 | height: 102%; 56 | border-radius: 8px; 57 | background-image: linear-gradient( 58 | var(--rotate) 59 | , #5ddcff, #3c67e3 43%, #4e00c2); 60 | position: absolute; 61 | z-index: -1; 62 | top: -1%; 63 | left: -2%; 64 | animation: spin 2.5s linear infinite; 65 | } 66 | 67 | .card::after { 68 | position: absolute; 69 | content: ""; 70 | top: calc(var(--card-height) / 6); 71 | left: 0; 72 | right: 0; 73 | z-index: -1; 74 | height: 100%; 75 | width: 100%; 76 | margin: 0 auto; 77 | transform: scale(0.8); 78 | filter: blur(calc(var(--card-height) / 6)); 79 | background-image: linear-gradient( 80 | var(--rotate) 81 | , #5ddcff, #3c67e3 43%, #4e00c2); 82 | opacity: 1; 83 | transition: opacity .5s; 84 | animation: spin 2.5s linear infinite; 85 | } 86 | 87 | @keyframes spin { 88 | 0% { 89 | --rotate: 0deg; 90 | } 91 | 100% { 92 | --rotate: 360deg; 93 | } 94 | } 95 | 96 | a { 97 | color: #212534; 98 | text-decoration: none; 99 | font-family: sans-serif; 100 | font-weight: bold; 101 | margin-top: 2rem; 102 | } -------------------------------------------------------------------------------- /UI Snippets/Mouse Chaser/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Mouse Chaser 7 | 8 | 9 | 10 |
11 |

Catch me if you can

12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /UI Snippets/Mouse Chaser/script.js: -------------------------------------------------------------------------------- 1 | const moverHandler = () => { 2 | let moverEle = document.getElementsByClassName("mover")[0]; 3 | 4 | let maxX = window.innerWidth - moverEle.clientWidth; 5 | let maxY = window.innerHeight - moverEle.clientHeight; 6 | 7 | let randomX = Math.random() * maxX; 8 | let randomY = Math.random() * maxY; 9 | 10 | randomX = Math.min(randomX, maxX); 11 | randomY = Math.min(randomY, maxY); 12 | 13 | moverEle.style.transform = `translate(${randomX}px, ${randomY}px)`; 14 | }; 15 | -------------------------------------------------------------------------------- /UI Snippets/Mouse Chaser/styles.css: -------------------------------------------------------------------------------- 1 | .mover { 2 | background-color: lightskyblue; 3 | color: black; 4 | display: inline-block; 5 | padding: 0px 20px; 6 | margin: 20px; 7 | font-family: "Arial"; 8 | font-size: large; 9 | position: relative; 10 | } 11 | -------------------------------------------------------------------------------- /UI Snippets/Random Password Genrator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Random Password Generator 8 | 9 | 10 |
11 |

Random Password Generator

12 | 13 |
14 | 15 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /UI Snippets/Random Password Genrator/index.js: -------------------------------------------------------------------------------- 1 | function generatePassword() { 2 | const length = 12; // Change this value to set the desired password length 3 | const charset = 4 | "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+{}[]|:;<>,.?"; // You can customize the character set as needed 5 | let password = ""; 6 | 7 | for (let i = 0; i < length; i++) { 8 | const randomIndex = Math.floor(Math.random() * charset.length); 9 | password += charset[randomIndex]; 10 | } 11 | 12 | document.getElementById("password").textContent = password; 13 | } 14 | 15 | function copyToClipboard() { 16 | const passwordField = document.getElementById("password"); 17 | const textArea = document.createElement("textarea"); 18 | textArea.value = passwordField.textContent; 19 | document.body.appendChild(textArea); 20 | textArea.select(); 21 | document.execCommand("copy"); 22 | document.body.removeChild(textArea); 23 | alert("Password copied to clipboard!"); 24 | } 25 | -------------------------------------------------------------------------------- /UI Snippets/Random Password Genrator/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, sans-serif; 3 | text-align: center; 4 | background-color: #201622; 5 | margin: 0; 6 | padding: 0; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | height: 100vh; 11 | } 12 | 13 | .container { 14 | background-color: #160d1b; 15 | opacity: 0.7; 16 | color: #fff; 17 | border-radius: 10px; 18 | padding: 20px; 19 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 20 | width: 300px; 21 | } 22 | 23 | h1 { 24 | font-size: 24px; 25 | margin-bottom: 20px; 26 | } 27 | 28 | #password { 29 | font-size: 24px; 30 | padding: 10px; 31 | height: 30px; 32 | color: #0699f4; 33 | font-weight: 600; 34 | margin-bottom: 20px; 35 | background-color: #170e0e; 36 | border: 1px solid #ccc; 37 | border-radius: 25px; 38 | } 39 | 40 | button { 41 | font-size: 18px; 42 | padding: 10px 20px; 43 | cursor: pointer; 44 | background-color: #007bff; 45 | color: #fff; 46 | border: none; 47 | border-radius: 25px; 48 | } 49 | 50 | button:hover { 51 | background-color: #0056b3; 52 | } 53 | 54 | #copy-button { 55 | font-size: 18px; 56 | padding: 10px 20px; 57 | cursor: pointer; 58 | background-color: #28a745; 59 | color: #fff; 60 | border: none; 61 | border-radius: 25px; 62 | margin-top: 10px; 63 | } 64 | 65 | #copy-button:hover { 66 | background-color: #1e7e34; 67 | } 68 | -------------------------------------------------------------------------------- /UI Snippets/Session Graph/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Session Graph 9 | 10 | 11 |
12 | 15 |
16 |

Session by Device

17 |
18 |
19 |
20 |

21 |
22 |
23 |
Desktop
24 |

49.4%

25 |
26 |
27 |
Mobile
28 |

31.6%

29 |
30 |
Tablet
31 |

19%

32 |
33 |
34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /UI Snippets/Session Graph/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | --clr-1: #1f2432; 9 | --clr-2: #191e2c; 10 | --clr-3: #ddd; 11 | } 12 | 13 | html { 14 | min-height: 100vh; 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | } 19 | 20 | body { 21 | background-color: var(--clr-1); 22 | color: var(--clr-3); 23 | display: flex; 24 | justify-content: center; 25 | align-items: center; 26 | } 27 | 28 | select { 29 | background-color: var(--clr-1); 30 | outline: none; 31 | color: var(--clr-3); 32 | border: none; 33 | padding: 0.5rem 1rem; 34 | width: 10rem; 35 | } 36 | 37 | .session-tab { 38 | display: flex; 39 | flex-direction: column; 40 | align-items: center; 41 | justify-content: center; 42 | background-color: var(--clr-2); 43 | width: 25rem; 44 | border: 1px solid #334155; 45 | padding: 1rem; 46 | box-shadow: 0 0 0 8px var(--clr-2); 47 | } 48 | 49 | .data-label { 50 | display: flex; 51 | width: 100%; 52 | padding-inline: 1rem; 53 | justify-content: space-between; 54 | } 55 | 56 | .dot { 57 | position: relative; 58 | font-size: 0.85rem; 59 | } 60 | 61 | .dot::before { 62 | content: ""; 63 | position: absolute; 64 | left: -0.6rem; 65 | top: 50%; 66 | bottom: 0; 67 | width: 0.5rem; 68 | aspect-ratio: 1; 69 | border-radius: 50%; 70 | transform: translateY(-50%); 71 | } 72 | 73 | .dot[data-clr="red"]::before { 74 | background-color: red; 75 | } 76 | .dot[data-clr="blue"]::before { 77 | background-color: blue; 78 | } 79 | .dot[data-clr="orange"]::before { 80 | background-color: orange; 81 | } 82 | 83 | .pie-chart { 84 | width: 75%; 85 | display: flex; 86 | justify-content: center; 87 | align-items: center; 88 | aspect-ratio: 1; 89 | margin-block: 1.5rem; 90 | position: relative; 91 | border-radius: 50%; 92 | background: conic-gradient(blue 0% 49.4%, red 49.4% 81%, orange 0); 93 | } 94 | 95 | .pie-chart::after { 96 | content: ""; 97 | position: absolute; 98 | inset: 1rem; 99 | border-radius: 50%; 100 | background-color: var(--clr-2); 101 | z-index: 5; 102 | } 103 | 104 | .pie-chart > h2 { 105 | position: relative; 106 | z-index: 10; 107 | } 108 | -------------------------------------------------------------------------------- /UI Snippets/Skeleton UI/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | LinkedIn Profile Skeleton 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /UI Snippets/Skeleton UI/styles.css: -------------------------------------------------------------------------------- 1 | /* Reset some default styles */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | font-family: Arial, sans-serif; 10 | background-color: #f0f0f0; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | height: 100vh; 15 | } 16 | 17 | .profile-container { 18 | background-color: #fff; 19 | border-radius: 5px; 20 | box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); 21 | width: 400px; 22 | padding: 20px; 23 | } 24 | 25 | .profile-header { 26 | display: flex; 27 | align-items: center; 28 | margin-bottom: 20px; 29 | } 30 | 31 | .profile-avatar { 32 | width: 60px; 33 | height: 60px; 34 | background-color: #ccc; 35 | border-radius: 50%; 36 | margin-right: 20px; 37 | flex-shrink: 0; 38 | } 39 | 40 | .profile-info { 41 | flex-grow: 1; 42 | } 43 | 44 | .profile-name { 45 | width: 50%; 46 | height: 20px; 47 | background-color: #ccc; 48 | margin-bottom: 10px; 49 | } 50 | 51 | .profile-title { 52 | width: 30%; 53 | height: 15px; 54 | background-color: #ccc; 55 | } 56 | 57 | .profile-content { 58 | margin-top: 10px; 59 | } 60 | 61 | .profile-summary { 62 | height: 80px; 63 | background-color: #ccc; 64 | margin-bottom: 10px; 65 | } 66 | 67 | .profile-connections { 68 | width: 60%; 69 | height: 15px; 70 | background-color: #ccc; 71 | } 72 | 73 | /* Add animations */ 74 | .profile-container * { 75 | animation: loading 1.5s infinite; 76 | } 77 | 78 | @keyframes loading { 79 | 0% { 80 | background-position: -200px 0; 81 | } 82 | 100% { 83 | background-position: 200px 0; 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /UI Snippets/Social Login/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | Social Login 13 | 14 | 15 |
16 |
19 |
22 |

Already Working Together?

23 |

24 | Log in to your account and connect with your teammates! 25 |

26 | 27 |
28 |
29 | 36 | 42 |
43 |
44 |
45 |
46 | random image 51 | random image 56 | random image 61 | random image 66 | random image 71 |
72 |
73 |
74 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /UI Snippets/Text-effect-runner/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | supppp... 8 | 9 | 10 |

Starting...

11 |
12 | 13 | 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /UI Snippets/Text-effect-runner/script.js: -------------------------------------------------------------------------------- 1 | const textElement = document.getElementById("text"); 2 | const speedElement = document.getElementById("speed"); 3 | const text = "We Love Programming!"; 4 | let index = 1; 5 | let speed = 300 / speedElement.value; 6 | 7 | const writeText = () => { 8 | textElement.innerText = text.slice(0, index); 9 | index++; 10 | if (index > text.length) index = 1; 11 | setTimeout(writeText, speed); 12 | }; 13 | 14 | writeText(); 15 | 16 | speedElement.addEventListener("input", (e) => (speed = 300 / e.target.value)); 17 | -------------------------------------------------------------------------------- /UI Snippets/Text-effect-runner/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color:white; 9 | font-family: "Roboto", sans-serif; 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | justify-content: center; 14 | height: 100vh; 15 | overflow: hidden; 16 | margin: 0; 17 | } 18 | 19 | div { 20 | position: absolute; 21 | bottom: 20px; 22 | background: white; 23 | padding: 10px 20px; 24 | font-size: 18px; 25 | } 26 | 27 | input { 28 | width: 50px; 29 | padding: 5px; 30 | font-size: 18px; 31 | background-color: white; 32 | border: none; 33 | text-align: center; 34 | } 35 | 36 | input:focus { 37 | outline: none; 38 | } 39 | -------------------------------------------------------------------------------- /UI Snippets/Video Player/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | Video Player 13 | 14 | 15 |
16 |
17 | Marvel Movie 21 |
22 |
23 |
24 | 25 | 30 | 31 | 32 | 33 |
34 |
35 | 36 |

45:25:12

37 |
38 |
39 |
40 | 41 | 42 | 43 |
44 |
45 | 46 |
47 |
48 |
49 |
50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /UI Snippets/Video Player/script.js: -------------------------------------------------------------------------------- 1 | const play = document.querySelector("[data-play-pause]") 2 | 3 | play.onclick = () => { 4 | if (play.classList.contains("ti-player-play-filled")) { 5 | play.classList.remove("ti-player-play-filled") 6 | play.classList.add("ti-player-pause-filled") 7 | } else { 8 | play.classList.remove("ti-player-pause-filled") 9 | play.classList.add("ti-player-play-filled") 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /UI Snippets/Video Player/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | height: 100%; 9 | } 10 | 11 | body { 12 | padding: 2rem; 13 | min-height: 100%; 14 | background-color: #f3f3f7; 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | } 19 | 20 | main { 21 | --radius: 1rem; 22 | width: min(80%, 50rem); 23 | border-radius: var(--radius); 24 | } 25 | 26 | .screen { 27 | width: 100%; 28 | aspect-ratio: 16 / 9; 29 | background-color: white; 30 | border-radius: var(--radius) var(--radius) 0 0; 31 | position: relative; 32 | z-index: 1; 33 | } 34 | 35 | .screen > img { 36 | border-radius: inherit; 37 | max-width: 100%; 38 | object-fit: cover; 39 | aspect-ratio: inherit; 40 | display: block; 41 | } 42 | 43 | .control { 44 | --gap: clamp(1rem, 2vw, 2rem); 45 | 46 | width: 100%; 47 | height: clamp(1rem, 10vw, 3rem); 48 | display: flex; 49 | align-items: center; 50 | gap: var(--gap); 51 | justify-content: center; 52 | background-color: #fff; 53 | font-size: clamp(0.75rem, 5vw, 1.25rem); 54 | border-radius: 0 0 var(--radius) var(--radius); 55 | 56 | transition: transform 500ms ease-in-out; 57 | } 58 | 59 | .control.toggle { 60 | transform: translateY(-50%); 61 | } 62 | 63 | #player { 64 | width: 12rem; 65 | } 66 | 67 | :has(.control.toggle) .screen i[data-contract] { 68 | display: none; 69 | } 70 | 71 | /* Only icons with title with have this indicating they are clickable */ 72 | .control i[title] { 73 | cursor: pointer; 74 | } 75 | 76 | .control > div { 77 | display: flex; 78 | align-items: center; 79 | gap: calc(var(--gap) / 2); 80 | } 81 | 82 | .control > div > .timer { 83 | font-size: 1rem; 84 | } 85 | 86 | @media screen and (max-width: 50em) { 87 | .control { 88 | flex-direction: column; 89 | height: auto; 90 | padding: 1rem; 91 | } 92 | .control > div { 93 | gap: var(--gap); 94 | width: 100%; 95 | } 96 | .media-control { 97 | justify-content: center; 98 | } 99 | #player { 100 | flex-basis: 100%; 101 | } 102 | .volume-control, 103 | .timer-control { 104 | justify-content: space-between; 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /UI Snippets/profile_card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
37 |
38 |
39 |
40 |

Name1

41 | loading 42 |
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto eum dolor accusamus id magnam voluptatem? Eaque neque reprehenderit consequuntur praesentium!.
43 | Find more about me by clicking below.... 44 |
45 |
46 | 47 |
48 |
49 |
50 |
loading
51 |
52 |
53 |
loading
54 |
55 |
56 |
57 | 58 | 59 |
60 |
61 |
62 | 63 | 64 | 65 |
66 |
67 |

Name2

68 | loading 69 |
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam sint dolor cumque a enim esse!.
70 | Find more about me by clicking below.... 71 |
72 |
73 | 74 |
75 |
76 |
77 |
loading
78 |
79 |
80 |
loading
81 |
82 |
83 |
84 | 85 | 86 |
87 |
88 |
89 | 90 | 91 | 92 |
93 |
94 |

Name3

95 | loading 96 |
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci perspiciatis porro est impedit commodi architecto maiores facere quas.
97 | Find more about me by clicking below.... 98 |
99 |
100 | 101 |
102 |
103 |
104 |
loading
105 |
106 |
107 |
loading
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 | 117 | 118 | -------------------------------------------------------------------------------- /UI Snippets/transportation booking/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Transportation Booking 7 | 55 | 56 | 57 |
58 |

Transportation Booking

59 |
60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 76 | 77 | 78 |
79 |
80 | 81 | 82 | -------------------------------------------------------------------------------- /client/.eslintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | 10 | # Ignore files for PNPM, NPM and YARN 11 | pnpm-lock.yaml 12 | package-lock.json 13 | yarn.lock 14 | -------------------------------------------------------------------------------- /client/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['eslint:recommended', 'plugin:svelte/recommended', 'prettier'], 4 | parserOptions: { 5 | sourceType: 'module', 6 | ecmaVersion: 2020, 7 | extraFileExtensions: ['.svelte'] 8 | }, 9 | env: { 10 | browser: true, 11 | es2017: true, 12 | node: true 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /client/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | .vercel 10 | .output 11 | vite.config.js.timestamp-* 12 | vite.config.ts.timestamp-* 13 | -------------------------------------------------------------------------------- /client/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /client/.prettierignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | 10 | # Ignore files for PNPM, NPM and YARN 11 | pnpm-lock.yaml 12 | package-lock.json 13 | yarn.lock 14 | -------------------------------------------------------------------------------- /client/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "printWidth": 100, 6 | "plugins": ["prettier-plugin-svelte"], 7 | "pluginSearchDirs": ["."], 8 | "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] 9 | } 10 | -------------------------------------------------------------------------------- /client/README.md: -------------------------------------------------------------------------------- 1 | # create-svelte 2 | 3 | Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte). 4 | 5 | ## Creating a project 6 | 7 | If you're seeing this, you've probably already done this step. Congrats! 8 | 9 | ```bash 10 | # create a new project in the current directory 11 | npm create svelte@latest 12 | 13 | # create a new project in my-app 14 | npm create svelte@latest my-app 15 | ``` 16 | 17 | ## Developing 18 | 19 | Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: 20 | 21 | ```bash 22 | npm run dev 23 | 24 | # or start the server and open the app in a new browser tab 25 | npm run dev -- --open 26 | ``` 27 | 28 | ## Building 29 | 30 | To create a production version of your app: 31 | 32 | ```bash 33 | npm run build 34 | ``` 35 | 36 | You can preview the production build with `npm run preview`. 37 | 38 | > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. 39 | -------------------------------------------------------------------------------- /client/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true 12 | } 13 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files 14 | // 15 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes 16 | // from the referenced tsconfig.json - TypeScript does not merge them in 17 | } 18 | -------------------------------------------------------------------------------- /client/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "client", 3 | "version": "0.0.1", 4 | "scripts": { 5 | "dev": "vite dev", 6 | "build": "vite build", 7 | "preview": "vite preview", 8 | "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json", 9 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch", 10 | "lint": "prettier --plugin-search-dir . --check . && eslint .", 11 | "format": "prettier --plugin-search-dir . --write ." 12 | }, 13 | "devDependencies": { 14 | "@fontsource/fira-mono": "^4.5.10", 15 | "@neoconfetti/svelte": "^1.0.0", 16 | "@sveltejs/adapter-auto": "^2.0.0", 17 | "@sveltejs/kit": "^1.20.4", 18 | "@types/cookie": "^0.5.1", 19 | "autoprefixer": "^10.4.16", 20 | "eslint": "^8.28.0", 21 | "eslint-config-prettier": "^8.5.0", 22 | "eslint-plugin-svelte": "^2.30.0", 23 | "postcss": "^8.4.31", 24 | "prettier": "^2.8.0", 25 | "prettier-plugin-svelte": "^2.10.1", 26 | "svelte": "^4.0.5", 27 | "svelte-check": "^3.4.3", 28 | "tailwindcss": "^3.3.3", 29 | "typescript": "^5.0.0", 30 | "vite": "^4.4.2" 31 | }, 32 | "type": "module" 33 | } 34 | -------------------------------------------------------------------------------- /client/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /client/src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface Platform {} 9 | } 10 | } 11 | 12 | export {}; 13 | -------------------------------------------------------------------------------- /client/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 |
%sveltekit.body%
11 | 12 | 13 | -------------------------------------------------------------------------------- /client/src/lib/images/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 9 | 16 | -------------------------------------------------------------------------------- /client/src/lib/images/svelte-logo.svg: -------------------------------------------------------------------------------- 1 | svelte-logo -------------------------------------------------------------------------------- /client/src/lib/images/svelte-welcome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-shetty/CSS-Is-Fun/2933d968add449e4728e449a2ca992701f1b0071/client/src/lib/images/svelte-welcome.png -------------------------------------------------------------------------------- /client/src/lib/images/svelte-welcome.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-shetty/CSS-Is-Fun/2933d968add449e4728e449a2ca992701f1b0071/client/src/lib/images/svelte-welcome.webp -------------------------------------------------------------------------------- /client/src/lib/snippets.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Cart Item", 4 | "codepen-link": "https://codepen.io/deveesh_shetty_12/pen/rNKXvKm", 5 | "image-link": "https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/9b12a923-f70a-411e-8964-0273e507576a", 6 | "author": "Deveesh-Shetty" 7 | }, 8 | { 9 | "name": "Social Login", 10 | "codepen-link": "https://codepen.io/pen/KKejzVy", 11 | "image-link": "https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/18d4af5d-459e-4b45-8c51-aa253ff88da9", 12 | "author": "Deveesh-Shetty" 13 | }, 14 | { 15 | "name": "Counter using Closure", 16 | "codepen-link": "https://codepen.io/pen/vYVjLqx", 17 | "image-link": "https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/eefb6819-f21e-4b6b-8bcd-3a08368bcd51", 18 | "author": "Deveesh-Shetty" 19 | }, 20 | { 21 | "name": "Accordion", 22 | "codepen-link": "https://codepen.io/pen/YzJLEbb", 23 | "image-link": "https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/8417ccd9-8363-4d3f-920b-1b7013ba1158", 24 | "author": "Deveesh-Shetty" 25 | }, 26 | { 27 | "name": "3D Cube", 28 | "codepen-link": "https://codepen.io/pen/mdzKEQg", 29 | "image-link": "https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/07cf6fab-5941-44fa-8964-dc73175239a4", 30 | "author": "Deveesh-Shetty" 31 | }, 32 | { 33 | "name": "Festival Lighting", 34 | "codepen-link": "https://codepen.io/pen/NWOzdvK", 35 | "image-link": "https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/477cc242-4b77-4e50-bcd7-d64cfce2ed34", 36 | "author": "Deveesh-Shetty" 37 | }, 38 | { 39 | "name": "Indian Flag", 40 | "codepen-link": "https://codepen.io/pen/xxyzqVa", 41 | "image-link": "https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/68843a36-a400-4e48-8907-435e68d8cdc0", 42 | "author": "Deveesh-Shetty" 43 | }, 44 | { 45 | "name": "Image Carousel I", 46 | "codepen-link": "https://codepen.io/pen/gOBKRNV", 47 | "image-link": "https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/5fc52924-7403-4178-a7ab-fc796cfab567", 48 | "author": "Deveesh-Shetty" 49 | }, 50 | { 51 | "name": "Image Carousel II", 52 | "codepen-link": "https://codepen.io/pen/bGmjbVo", 53 | "image-link": "https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/a8ef65b5-873c-4365-b4be-485bae463e87", 54 | "author": "Deveesh-Shetty" 55 | }, 56 | { 57 | "name": "Color Wheel", 58 | "codepen-link": "https://codepen.io/pen/GRYXvKw", 59 | "image-link": "https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/b4a4bc20-d43b-4bc0-b86d-ae89ae84ff42", 60 | "author": "Deveesh-Shetty" 61 | }, 62 | { 63 | "name": "Video Player", 64 | "codepen-link": "https://codepen.io/ahmedelmsery/pen/zYmmxNw", 65 | "image-link": "https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/4fa44080-b6cf-4a5a-b0eb-53012b1e39a7", 66 | "author": "Deveesh-Shetty" 67 | }, 68 | { 69 | "name": "Bar Chart", 70 | "codepen-link": "https://codepen.io/ahmedelmsery/pen/vYVQGLP", 71 | "image-link": "https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/700f6a4f-b376-42cd-89fb-d40ace55acea", 72 | "author": "Deveesh-Shetty" 73 | }, 74 | { 75 | "name": "Loading Page", 76 | "codepen-link": "https://codepen.io/ahmedelmsery/pen/zZVLMN", 77 | "image-link": "https://res.cloudinary.com/duwcigilo/image/upload/v1684336253/Loading_image_ig5hh7.jpg", 78 | "author": "CHAITHANYA K S S" 79 | }, 80 | { 81 | "name": "Session Graph", 82 | "codepen-link": "https://codepen.io/ahmedelmsery/pen/qBQdZeJ", 83 | "image-link": "https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/61b32539-f2d0-4c29-800f-03657d5af192", 84 | "author": "Deveesh-Shetty" 85 | }, 86 | { 87 | "name": "Flipcard", 88 | "codepen-link": "https://codepen.io/VoiD_Z/pen/KKbBQxy", 89 | "image-link": "https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/61b32539-f2d0-4c29-800f-03657d5af192", 90 | "author": "Meet Thakur" 91 | }, 92 | { 93 | "name": "Helpline", 94 | "codepen-link": "https://codepen.io/Swathi-Singh/pen/dywjqoz", 95 | "image-link": "https://wpassets.adda247.com/wp-content/uploads/multisite/sites/5/2020/04/11132345/Helpline.jpg", 96 | "author": "swathi singh" 97 | }, 98 | { 99 | "name": "Digital Clock", 100 | "codepen-link": "https://codepen.io/rohancs127/pen/dywgQey", 101 | "image-link": "https://github.com/Deveesh-Shetty/CSS-Is-Fun/blob/master/UI%20Snippets/Digital%20Clock/digital-clock.png", 102 | "author": "Rohan" 103 | }, 104 | { 105 | "name":"profile card", 106 | "codepen-link":"https://codepen.io/Raksha09/pen/ZEVVzwB", 107 | "image-link":"https://imagetolink.com/ib/oIEvRnPHUP", 108 | "author":"raksha0709" 109 | }, 110 | { 111 | "name":"Login UI", 112 | "codepen-link":"https://codepen.io/rohancs127/pen/XWoOaoG", 113 | "image-link":"https://i.imgur.com/yNfGcdF.png", 114 | "author":"Rohan" 115 | }, 116 | { 117 | "name":"Magic Card", 118 | "codepen-link":"https://codepen.io/Nandan-aghera/pen/WNPNjbW", 119 | "image-link":"https://imagetolink.com/ib/5zU6L3qQWj", 120 | "author":"Nandan" 121 | }, 122 | { 123 | "name":"Game Interface", 124 | "codepen-link":"https://codepen.io/Nandan-aghera/pen/LYqYZjv", 125 | "image-link":"https://imagetolink.com/ib/DIWEoDwgGu", 126 | "author":"Nandan" 127 | }, 128 | { 129 | "name":"Transportation Booking UI", 130 | "codepen-link":"https://codepen.io/Nandan-aghera/pen/yLZYgwg", 131 | "image-link":"https://imagetolink.com/ib/QLKsJROmte", 132 | "author":"Nandan" 133 | }, 134 | { 135 | "name":"Bouncing Ball", 136 | "codepen-link":"https://codepen.io/Nandan-aghera/pen/gOqOXEw", 137 | "image-link":"https://imagetolink.com/ib/3HUDdOQtLY", 138 | "author":"Nandan" 139 | } 140 | 141 | 142 | ] 143 | -------------------------------------------------------------------------------- /client/src/routes/+layout.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 |
8 | 9 |
10 | 11 |
12 | 13 | 16 |
17 | -------------------------------------------------------------------------------- /client/src/routes/+page.js: -------------------------------------------------------------------------------- 1 | // since there's no dynamic data here, we can prerender 2 | // it so that it gets served as a static asset in production 3 | export const prerender = true; 4 | -------------------------------------------------------------------------------- /client/src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | Home 7 | 8 | 9 | 10 |
11 |

UI Snippets

12 |
13 | {#each snippets as snippet (snippet)} 14 |
15 | 16 | 29 | {snippet.name} 30 |
31 |

{snippet.name}

32 |

Visit at Codepen

33 |

Author: {snippet.author}

34 |
35 |
36 | {/each} 37 |
38 |
39 | -------------------------------------------------------------------------------- /client/src/routes/Header.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 |
7 | CSS is fun 8 |
9 | 10 | 23 | 24 |
25 | 26 | GitHub 27 | 28 |
29 |
30 | -------------------------------------------------------------------------------- /client/src/routes/about/+page.js: -------------------------------------------------------------------------------- 1 | import { dev } from '$app/environment'; 2 | 3 | // we don't need any JS on this page, though we'll load 4 | // it in dev so that we get hot module replacement 5 | export const csr = dev; 6 | 7 | // since there's no dynamic data here, we can prerender 8 | // it so that it gets served as a static asset in production 9 | export const prerender = true; 10 | -------------------------------------------------------------------------------- /client/src/routes/about/+page.svelte: -------------------------------------------------------------------------------- 1 | 2 | About 3 | 4 | 5 | 6 |
7 | 8 |

About this app

9 | 10 |

11 | This is a SvelteKit app. You can make your own by typing the 12 | following into your command line and following the prompts: 13 |

14 | 15 | 
npm create svelte@latest
16 | 17 |

18 | The page you're looking at is purely static HTML, with no client-side interactivity needed. 19 | Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening 20 | the devtools network panel and reloading. 21 |

22 |
23 | -------------------------------------------------------------------------------- /client/src/routes/contribute/+page.js: -------------------------------------------------------------------------------- 1 | // since there's no dynamic data here, we can prerender 2 | // it so that it gets served as a static asset in production 3 | export const prerender = true; 4 | -------------------------------------------------------------------------------- /client/src/routes/contribute/+page.svelte: -------------------------------------------------------------------------------- 1 |

Contribution guide goes here

2 | -------------------------------------------------------------------------------- /client/src/routes/styles.css: -------------------------------------------------------------------------------- 1 | @import '@fontsource/fira-mono'; 2 | @tailwind base; 3 | @tailwind components; 4 | @tailwind utilities; 5 | 6 | :root { 7 | --font-body: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 8 | Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 9 | --font-mono: 'Fira Mono', monospace; 10 | --color-bg-0: rgb(202, 216, 228); 11 | --color-bg-1: hsl(209, 36%, 86%); 12 | --color-bg-2: hsl(224, 44%, 95%); 13 | --color-theme-1: #ff3e00; 14 | --color-theme-2: #4075a6; 15 | --color-text: rgba(0, 0, 0, 0.7); 16 | --column-width: 42rem; 17 | --column-margin-top: 4rem; 18 | font-family: var(--font-body); 19 | color: var(--color-text); 20 | } 21 | 22 | body { 23 | min-height: 100vh; 24 | margin: 0; 25 | background-attachment: fixed; 26 | background-color: var(--color-bg-1); 27 | background-size: 100vw 100vh; 28 | background-image: radial-gradient( 29 | 50% 50% at 50% 50%, 30 | rgba(255, 255, 255, 0.75) 0%, 31 | rgba(255, 255, 255, 0) 100% 32 | ), 33 | linear-gradient(180deg, var(--color-bg-0) 0%, var(--color-bg-1) 15%, var(--color-bg-2) 50%); 34 | } 35 | 36 | h1, 37 | h2, 38 | p { 39 | font-weight: 400; 40 | } 41 | 42 | p { 43 | line-height: 1.5; 44 | } 45 | 46 | a { 47 | color: var(--color-theme-1); 48 | text-decoration: none; 49 | } 50 | 51 | a:hover { 52 | text-decoration: underline; 53 | } 54 | 55 | h1 { 56 | font-size: 2rem; 57 | text-align: center; 58 | } 59 | 60 | h2 { 61 | font-size: 1rem; 62 | } 63 | 64 | pre { 65 | font-size: 16px; 66 | font-family: var(--font-mono); 67 | background-color: rgba(255, 255, 255, 0.45); 68 | border-radius: 3px; 69 | box-shadow: 2px 2px 6px rgb(255 255 255 / 25%); 70 | padding: 0.5em; 71 | overflow-x: auto; 72 | color: var(--color-text); 73 | } 74 | 75 | .text-column { 76 | display: flex; 77 | max-width: 48rem; 78 | flex: 0.6; 79 | flex-direction: column; 80 | justify-content: center; 81 | margin: 0 auto; 82 | } 83 | 84 | input, 85 | button { 86 | font-size: inherit; 87 | font-family: inherit; 88 | } 89 | 90 | button:focus:not(:focus-visible) { 91 | outline: none; 92 | } 93 | 94 | @media (min-width: 720px) { 95 | h1 { 96 | font-size: 2.4rem; 97 | } 98 | } 99 | 100 | .visually-hidden { 101 | border: 0; 102 | clip: rect(0 0 0 0); 103 | height: auto; 104 | margin: 0; 105 | overflow: hidden; 106 | padding: 0; 107 | position: absolute; 108 | width: 1px; 109 | white-space: nowrap; 110 | } 111 | -------------------------------------------------------------------------------- /client/static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-shetty/CSS-Is-Fun/2933d968add449e4728e449a2ca992701f1b0071/client/static/favicon.png -------------------------------------------------------------------------------- /client/static/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /client/svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from '@sveltejs/adapter-auto'; 2 | import { vitePreprocess } from '@sveltejs/kit/vite'; 3 | /** @type {import('@sveltejs/kit').Config} */ 4 | const config = { 5 | kit: { 6 | adapter: adapter() 7 | }, 8 | preprocess: vitePreprocess() 9 | }; 10 | export default config; -------------------------------------------------------------------------------- /client/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: ['./src/**/*.{html,js,svelte,ts}'], 4 | theme: { 5 | extend: {} 6 | }, 7 | plugins: [] 8 | }; 9 | -------------------------------------------------------------------------------- /client/vite.config.js: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | import { defineConfig } from 'vite'; 3 | 4 | export default defineConfig({ 5 | plugins: [sveltekit()] 6 | }); 7 | --------------------------------------------------------------------------------