├── Scan Text Loader ├── index.html └── style.css ├── Incoming Call Animation ├── Readme.md ├── index.html └── style.css ├── Tubelight Effect ├── Readme.md ├── index.html └── style.css ├── Neumorphic Button ├── index.html └── style.css ├── Gradient Color Generator ├── Readme.md ├── style.css ├── script.js └── index.html ├── Simple Loader ├── index.html └── style.css ├── Zoom In-Out Text Effect ├── index.html └── style.css ├── README.md ├── Link Hover Animation ├── index.html └── style.css ├── Div follows mouse Animation ├── index.html ├── style.css └── script.js ├── Circular Progress Bar ├── index.html └── style.css ├── Icon Pulse Animation ├── index.html └── style.css ├── Input Animation ├── index.html └── style.css ├── Add to Cart Animation ├── index.html ├── script.js └── style.css ├── Dropdown menu ├── Readme.md ├── index.html └── style.css ├── Password Generator ├── index.html ├── script.js └── style.css ├── Dark light Mode | The easy way └── index.html ├── Light Dark Mode Toggle switch ├── index.html └── style.css ├── Wavy label input ├── index.html └── style.css ├── Custom Radio Buttons ├── index.html └── style.css ├── Social Icons with Glowing Effect ├── index.html └── style.css ├── Gradient Border Animation └── index.html ├── CSS Counter └── index.html ├── Pulse Loader └── index.html ├── Bouncing Ball └── index.html ├── Image Hover Overlay └── index.html ├── Pulsing Heart Effect └── index.html ├── Animated Checkbox └── index.html ├── Instagram Logo └── index.html └── Diya (Lamp) └── index.html /Scan Text Loader/index.html: -------------------------------------------------------------------------------- 1 |
2 | Loading 3 |
4 | -------------------------------------------------------------------------------- /Incoming Call Animation/Readme.md: -------------------------------------------------------------------------------- 1 | A simple incoming call animation made using HTML and CSS. 2 | Give it a Star if you like it... 3 | Thanks 👍 4 | -------------------------------------------------------------------------------- /Tubelight Effect/Readme.md: -------------------------------------------------------------------------------- 1 | ### Hello, 2 | Wanna see codepen version of Tube light Effect. [Click Here](https://codepen.io/coding_dev_/pen/zYWxwNB) 3 | 4 | Thank You for Reading! 5 | -------------------------------------------------------------------------------- /Neumorphic Button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Neumorphic Button 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Gradient Color Generator/Readme.md: -------------------------------------------------------------------------------- 1 | A Gradient Color Generator made using HTML, CSS and Javascript. 2 | 3 | Preview : 4 | 5 | preview 6 | -------------------------------------------------------------------------------- /Simple Loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Simple Loader 5 | 6 | 7 |
8 |
9 |
10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /Tubelight Effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Tube Light Effect 9 | 10 | 11 | 12 | 13 |
Hello World
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Zoom In-Out Text Effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
hey
6 |
hey
7 |
hey
8 |
hey
9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hello Everyone 2 | This repo contains mini projects build using HTML, CSS and JavaScript. 3 | 4 | All the mini things shown on my [instagram](https://www.instagram.com/coding_dev_/) 5 | 6 | Learn Web Development by making this Mini Projects! 7 | 8 | It contains: 9 | 1. Password Generator 10 | 2. Image Hover Overlay 11 | 3. Instagram Logo 12 | 4. Animations 13 | 5. Etc 14 | 15 | And many more coming soon... 16 | -------------------------------------------------------------------------------- /Link Hover Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Link Hover Animation 9 | 10 | 11 | Hover this Link 12 | 13 | 14 | -------------------------------------------------------------------------------- /Div follows mouse Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Div Follows Mouse Cursor 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Circular Progress Bar/index.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | -------------------------------------------------------------------------------- /Icon Pulse Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Pulse Animation 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /Input Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Input Animation 8 | 9 | 10 |
11 | 12 |
13 | 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /Div follows mouse Animation/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | height: 100vh; 5 | background: rgb(212, 249, 255); 6 | overflow: hidden; 7 | } 8 | #mouse { 9 | width: 3em; 10 | height: 3em; 11 | background: rgb(4, 174, 204); 12 | position: absolute; 13 | border: 5px solid #fff; 14 | transform: translate(-50%, -50%); 15 | border-radius: 50%; 16 | box-shadow: rgba(100, 100, 111, 0.473) 0 7px 29px 0; 17 | transition: 0.1s ease-out; 18 | } 19 | -------------------------------------------------------------------------------- /Add to Cart Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | - 5 | 10 | + 11 | 12 | -------------------------------------------------------------------------------- /Dropdown menu/Readme.md: -------------------------------------------------------------------------------- 1 |

2 | See the Pen 3 | Dropdown menu by Tilak (@coding_dev_) 4 | on CodePen. 5 |

6 | -------------------------------------------------------------------------------- /Neumorphic Button/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | display: grid; 3 | background: #e8e8e8; 4 | place-items: center; 5 | height: 100vh; 6 | } 7 | button { 8 | color: #090909; 9 | padding: 0.7em 1.7em; 10 | font-size: 18px; 11 | border-radius: 0.5em; 12 | background: #e8e8e8; 13 | border: 1px solid #e8e8e8; 14 | transition: all .3s; 15 | box-shadow: 6px 6px 12px #c5c5c5, 16 | -6px -6px 12px #ffffff; 17 | } 18 | 19 | button:hover { 20 | box-shadow: -6px -6px 12px #c5c5c5, 21 | 6px 6px 12px #fff; 22 | } 23 | -------------------------------------------------------------------------------- /Password Generator/index.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |

Password Generator

4 | 5 | 6 | 7 |
8 | 9 | 10 |
11 |
12 | 13 | -------------------------------------------------------------------------------- /Dark light Mode | The easy way/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 15 | 16 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Light Dark Mode Toggle switch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Light Dark Mode Toggle Switch 7 | 8 | 9 | 16 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Gradient Color Generator/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@500&display=swap'); 2 | 3 | body{font-family: 'Comfortaa', cursive;} 4 | 5 | .container{ 6 | width: 95%; 7 | margin: auto; 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | height: 100vh; 12 | } 13 | 14 | #hex-colors{ 15 | width: 100%; 16 | text-align: center; 17 | } 18 | 19 | #hex-colors h1, h2{ 20 | font-size: 2rem; 21 | text-transform: uppercase; 22 | } 23 | 24 | #hex-colors h2{ 25 | margin-top: 15%; 26 | text-transform: lowercase; 27 | } 28 | -------------------------------------------------------------------------------- /Dropdown menu/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Incoming Call Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Incoming Call Animation 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /Password Generator/script.js: -------------------------------------------------------------------------------- 1 | function generatePsw() { 2 | let output = document.getElementById("output"); 3 | let chars = 4 | "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ@1#_-*&%+=/"; 5 | let length = document.getElementById("length").value - 1; //-1 for index to be accurate 6 | let password = ""; 7 | for (let i = 0; i <= length; i++) { 8 | let random = Math.floor(Math.random() * chars.length); 9 | password += chars.substring(random, random + 1); 10 | } 11 | output.value = password; 12 | } 13 | // copy password to clipboard 14 | function copyPsw() { 15 | output.select(); 16 | document.execCommand("copy"); 17 | } 18 | -------------------------------------------------------------------------------- /Wavy label input/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Waving/Floating Input 7 | 8 | 9 |
10 | 11 | 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /Link Hover Animation/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: grid; 3 | place-items: center; 4 | font-family: sans-serif; 5 | font-size: 27px; 6 | height: 100vh; 7 | } 8 | a { 9 | color: inherit; 10 | text-decoration: none; 11 | background: linear-gradient( 12 | to right, 13 | rgba(100, 200, 200, 1), 14 | rgba(100, 200, 200, 1) 15 | ), 16 | linear-gradient( 17 | to right, 18 | rgba(255, 0, 0, 1), 19 | rgba(255, 0, 180, 1), 20 | rgba(0, 100, 200, 1) 21 | ); 22 | background-size: 100% 3px, 0 3px; 23 | background-position: 100% 100%, 0 100%; 24 | background-repeat: no-repeat; 25 | transition: background-size 400ms; 26 | } 27 | a:hover { 28 | background-size: 0 3px, 100% 3px; 29 | } 30 | -------------------------------------------------------------------------------- /Custom Radio Buttons/index.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 9 | 15 | 21 |
22 | -------------------------------------------------------------------------------- /Social Icons with Glowing Effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 14 |
15 | -------------------------------------------------------------------------------- /Password Generator/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | width: 300px; 3 | padding: 10px; 4 | font-family: sans-serif; 5 | background: linear-gradient(358deg, #30e98f, #6c34dd); 6 | margin: 150px auto; 7 | text-align: center; 8 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.342); 9 | border-radius: 10px; 10 | } 11 | 12 | input { 13 | outline: none; 14 | margin: 10px 0; 15 | border: none; 16 | padding: 6px; 17 | border-radius: 5px; 18 | } 19 | .btn { 20 | background: #5007e0; 21 | padding: 3px 8px; 22 | border: 2px solid #5007e0; 23 | color: white; 24 | cursor: pointer; 25 | font-weight: bold; 26 | transition: 0.1s; 27 | font-size: 17px; 28 | border-radius: 4px; 29 | width: 30%; 30 | } 31 | .btn:hover { 32 | background: transparent; 33 | color: #5007e0; 34 | } 35 | -------------------------------------------------------------------------------- /Gradient Border Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Animated Gradient Border 7 | 33 | 34 | 35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /Gradient Color Generator/script.js: -------------------------------------------------------------------------------- 1 | document.querySelector("#submit").addEventListener("click", () => { 2 | var hex_numbers = ["0","1","2","3","4","5","6","7","8","9","A", "B", "C", "D", "E", "F"]; 3 | var hexcode1 = ""; 4 | var hexcode2 = ""; 5 | var random_index = 0; 6 | 7 | for(let i = 0; i < 6;i++){ 8 | random_index = Math.floor(Math.random() * hex_numbers.length); 9 | hexcode1 += hex_numbers[random_index]; 10 | random_index = Math.floor(Math.random() * hex_numbers.length); 11 | hexcode2 += hex_numbers[random_index]; 12 | } 13 | 14 | document.body.style.background = `linear-gradient(to right, #${hexcode1}, #${hexcode2})`; 15 | document.querySelector("#hexcode1").textContent = hexcode1; 16 | document.querySelector("#hexcode2").textContent = hexcode2; 17 | }); 18 | -------------------------------------------------------------------------------- /Add to Cart Animation/script.js: -------------------------------------------------------------------------------- 1 | let cartButtons = document.querySelectorAll('.cart-button'); 2 | let card_value = document.querySelector(".added"); 3 | let pqtplus = document.querySelector(".pqt-plus"); 4 | let pqtminus = document.querySelector(".pqt-minus"); 5 | let cartvalue = 0; 6 | 7 | cartButtons.forEach(button => { 8 | button.addEventListener('click', cartClick); 9 | }); 10 | function cartClick() { 11 | let button = this; 12 | button.classList.add('clicked'); 13 | card_value.textContent = cartvalue += 1; 14 | } 15 | 16 | pqtplus.addEventListener('click', function(){ 17 | if(card_value.nodeValue <= 0){ 18 | card_value.textContent = cartvalue +=1; 19 | } 20 | }); 21 | 22 | pqtminus.addEventListener('click', function(){ 23 | if(Number(card_value.innerText) - 1 >= 0){ 24 | card_value.textContent = cartvalue -=1; 25 | } 26 | }); 27 | -------------------------------------------------------------------------------- /CSS Counter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Timer 7 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /Pulse Loader/index.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 |
6 | 7 |
8 | 9 | 44 | 45 | 46 |
47 |
48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /Icon Pulse Animation/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | background-color: #d3edf8; 8 | display: grid; 9 | height: 100vh; 10 | place-items: center; 11 | } 12 | .pulse{ 13 | height: 5rem; 14 | width: 5rem; 15 | background: linear-gradient( 16 | #65c0e7, 17 | #22a5dd 18 | ); 19 | border-radius: 50%; 20 | display: grid; 21 | position: relative; 22 | place-items: center; 23 | font-size: 2rem; 24 | color: #fff; 25 | } 26 | .pulse:before, 27 | .pulse:after{ 28 | content: ""; 29 | position: absolute; 30 | height: 100%; 31 | width: 100%; 32 | background-color: #65c0e7; 33 | border-radius: 50%; 34 | z-index: -1; 35 | opacity: 0.7; 36 | } 37 | .pulse:before{ 38 | animation: pulse 2s ease-out infinite; 39 | } 40 | .pulse:after{ 41 | animation: pulse 2s 1s ease-out infinite; 42 | } 43 | @keyframes pulse{ 44 | 100%{ 45 | transform: scale(2.5); 46 | opacity: 0; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /Image Hover Overlay/index.html: -------------------------------------------------------------------------------- 1 | 44 |
45 | text 46 |
47 |
Good Day
48 |
49 |
50 | -------------------------------------------------------------------------------- /Custom Radio Buttons/style.css: -------------------------------------------------------------------------------- 1 | input[type="radio"] { 2 | appearance: none; 3 | 4 | width: 20px; 5 | 6 | height: 20px; 7 | 8 | cursor: pointer; 9 | 10 | border: 2px solid rgb(218, 219, 221); 11 | 12 | border-radius: 50%; 13 | 14 | background-clip: content-box; 15 | 16 | padding: 3px; 17 | 18 | margin: 5px; 19 | } 20 | 21 | input[type="radio"]:checked { 22 | background-color: rgb(213, 214, 219); 23 | } 24 | 25 | .form-control { 26 | border: 2px solid white; 27 | 28 | padding: 10px; 29 | 30 | border-radius: 5px; 31 | 32 | display: inline-flex; 33 | 34 | align-items: center; 35 | 36 | width: fit-content; 37 | 38 | color: white; 39 | 40 | cursor: pointer; 41 | 42 | margin: 5px; 43 | } 44 | 45 | .form-control:hover { 46 | background: rgba(255, 255, 255, 0.349); 47 | } 48 | body { 49 | /* display: grid; 50 | 51 | place-items: center; */ 52 | 53 | /* height: 100vh; */ 54 | 55 | background: linear-gradient(178deg, #240238, #023257); 56 | 57 | padding: 80px; 58 | 59 | font-family : sans-serif ; 60 | } 61 | -------------------------------------------------------------------------------- /Div follows mouse Animation/script.js: -------------------------------------------------------------------------------- 1 | let myDiv = document.getElementById("mouse"); 2 | //Detect touch device 3 | function isTouchDevice() { 4 | try { 5 | //We try to create TouchEvent. It would fail for desktops and throw error 6 | document.createEvent("TouchEvent"); 7 | return true; 8 | } catch (e) { 9 | return false; 10 | } 11 | } 12 | 13 | const move = (e) => { 14 | //Try, catch to avoid any errors for touch screens (Error thrown when user doesn't move his finger) 15 | try { 16 | //PageX and PageY return the position of client's cursor from top left of screen 17 | var x = !isTouchDevice() ? e.pageX : e.touches[0].pageX; 18 | var y = !isTouchDevice() ? e.pageY : e.touches[0].pageY; 19 | } catch (e) {} 20 | //set left and top of div based on mouse position 21 | myDiv.style.left = x - 30 + "px"; 22 | myDiv.style.top = y - 30 + "px"; 23 | }; 24 | //For mouse 25 | document.addEventListener("mousemove", (e) => { 26 | move(e); 27 | }); 28 | //For touch 29 | document.addEventListener("touchmove", (e) => { 30 | move(e); 31 | }); 32 | -------------------------------------------------------------------------------- /Wavy label input/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | display: grid; 3 | height:100vh; 4 | background: #000; 5 | place-items: center; 6 | font-family: sans-serif; 7 | } 8 | .form-control { 9 | position: relative; 10 | width: 14rem; 11 | } 12 | 13 | .form-control input { 14 | background-color: transparent; 15 | border: 0; 16 | border-bottom: 2px #fff solid; 17 | display: block; 18 | width: 100%; 19 | padding: 15px 0; 20 | font-size: 18px; 21 | color: #fff; 22 | } 23 | 24 | .form-control input:focus, 25 | .form-control input:valid { 26 | outline: 0; 27 | border-bottom-color: cyan; 28 | } 29 | 30 | .form-control label { 31 | position: absolute; 32 | top: 14px; 33 | left: 0; 34 | pointer-events: none; 35 | } 36 | 37 | .form-control label span { 38 | display: inline-block; 39 | font-size: 18px; 40 | min-width: 5px; 41 | color: #fff; 42 | transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); 43 | } 44 | 45 | .form-control input:focus+label span, 46 | .form-control input:valid+label span { 47 | color: cyan; 48 | transform: translateY(-30px); 49 | } 50 | -------------------------------------------------------------------------------- /Pulsing Heart Effect/index.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 52 | -------------------------------------------------------------------------------- /Animated Checkbox/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Animated Checkbox ✅ 7 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /Dropdown menu/style.css: -------------------------------------------------------------------------------- 1 | /* main CSS */ 2 | #main { 3 | position: relative; 4 | list-style: none; 5 | background: #3aafde; 6 | color: #000; 7 | text-transform: uppercase; 8 | display: inline-block; 9 | padding: 0; 10 | margin: 50px auto; 11 | } 12 | #main li { 13 | font-size: 0.8rem; 14 | display: inline-block; 15 | position: relative; 16 | padding: 15px 20px; 17 | cursor: pointer; 18 | z-index: 4; 19 | transition: 0.3s; 20 | min-width: 120px; 21 | } 22 | li:hover{ 23 | background: #92d3ed !important; 24 | } 25 | 26 | .drop { 27 | overflow: hidden; 28 | list-style: none; 29 | position: absolute; 30 | padding: 0; 31 | width: 100%; 32 | left: 0; 33 | top: 48px; 34 | } 35 | .drop div { 36 | transform: translate(0, -100%); 37 | transition: all 0.5s 0.1s; 38 | position: relative; 39 | } 40 | .drop li { 41 | display: block; 42 | padding: 0; 43 | width: 100%; 44 | background: #3aafde; 45 | } 46 | 47 | #main li:nth-child(3):hover ul div { 48 | transform: translate(0, 0); 49 | } 50 | 51 | /* styling page */ 52 | * { 53 | box-sizing: border-box; 54 | } 55 | 56 | body { 57 | font-family: sans-serif; 58 | background: #374954; 59 | color: white; 60 | text-align: center; 61 | } 62 | -------------------------------------------------------------------------------- /Tubelight Effect/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | --var-color: rgb(0, 238, 255); 3 | background: #000; 4 | } 5 | .light { 6 | font-size: 2rem; 7 | color: var(--var-color); 8 | position: relative; 9 | font-weight: bold; 10 | } 11 | .light::before { 12 | position: absolute; 13 | content: attr(data-text); 14 | text-shadow: 0px 0px 20px var(--var-color); 15 | filter: blur(10px) brightness(0); 16 | animation: flicker 2s linear forwards; 17 | animation-delay: 1s; 18 | } 19 | @keyframes flicker { 20 | 0% { 21 | filter: blur(5px) brightness(1); 22 | } 23 | 3% { 24 | filter: blur(5px) brightness(0); 25 | } 26 | 6% { 27 | filter: blur(5px) brightness(0); 28 | } 29 | 7% { 30 | filter: blur(5px) brightness(1); 31 | } 32 | 8% { 33 | filter: blur(5px) brightness(0); 34 | } 35 | 9% { 36 | filter: blur(5px) brightness(1); 37 | } 38 | 10% { 39 | filter: blur(5px) brightness(0); 40 | } 41 | 20% { 42 | filter: blur(5px) brightness(1); 43 | } 44 | 50% { 45 | filter: blur(5px) brightness(1); 46 | } 47 | 99% { 48 | filter: blur(5px) brightness(0); 49 | } 50 | 100% { 51 | filter: blur(5px) brightness(1); 52 | } 53 | } 54 | 55 | /* unimportant css */ 56 | body { 57 | display: grid; 58 | padding: 2rem; 59 | font-family: sans-serif; 60 | } 61 | -------------------------------------------------------------------------------- /Scan Text Loader/style.css: -------------------------------------------------------------------------------- 1 | body {background:#f3efe8;} 2 | .loading { 3 | font-family: "Arial Black", "Arial Bold", Gadget, sans-serif; 4 | text-transform:uppercase; 5 | 6 | width:150px; 7 | text-align:center; 8 | line-height:50px; 9 | 10 | position:absolute; 11 | left:0;right:0;top:50%; 12 | margin:auto; 13 | transform:translateY(-50%); 14 | } 15 | 16 | .loading span { 17 | position:relative; 18 | z-index:999; 19 | color:#fff; 20 | } 21 | .loading:before { 22 | content:''; 23 | background:#61bdb6; 24 | width:128px; 25 | height:36px; 26 | display:block; 27 | position:absolute; 28 | top:0;left:0;right:0;bottom:0; 29 | margin:auto; 30 | 31 | animation:2s loadingBefore infinite ease-in-out; 32 | } 33 | 34 | @keyframes loadingBefore { 35 | 0% {transform:translateX(-14px);} 36 | 50% {transform:translateX(14px);} 37 | 100% {transform:translateX(-14px);} 38 | } 39 | 40 | 41 | .loading:after { 42 | content:''; 43 | background:#ff3600; 44 | width:14px; 45 | height:60px; 46 | display:block; 47 | position:absolute; 48 | top:0;left:0;right:0;bottom:0; 49 | margin:auto; 50 | opacity:.5; 51 | 52 | animation:2s loadingAfter infinite ease-in-out; 53 | } 54 | 55 | @keyframes loadingAfter { 56 | 0% {transform:translateX(-50px);} 57 | 50% {transform:translateX(50px);} 58 | 100% {transform:translateX(-50px);} 59 | } 60 | -------------------------------------------------------------------------------- /Input Animation/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | outline: none; 6 | box-sizing: border-box; 7 | font-family: 'Poppins', sans-serif; 8 | } 9 | body{ 10 | display: grid; 11 | place-items: center; 12 | min-height: 100vh; 13 | } 14 | .input-data{ 15 | height: 40px; 16 | width: 200px; 17 | position: relative; 18 | } 19 | .input-data input{ 20 | height: 100%; 21 | width: 100%; 22 | border: none; 23 | font-size: 17px; 24 | border-bottom: 2px solid #ccc; 25 | } 26 | .input-data input:focus ~ label, 27 | .input-data input:valid ~ label{ 28 | transform: translateY(-20px); 29 | font-size: 15px; 30 | bottom: 15px; 31 | } 32 | .input-data label{ 33 | position: absolute; 34 | bottom: 10px; 35 | left: 0; 36 | color: #666; 37 | transition: all 0.3s ease; 38 | } 39 | .input-data .underline{ 40 | position: absolute; 41 | height: 2px; 42 | width: 100%; 43 | bottom: 0; 44 | } 45 | .input-data .underline:before{ 46 | position: absolute; 47 | content: ""; 48 | height: 100%; 49 | width: 100%; 50 | background: #4158d0; 51 | transform: scaleX(0); 52 | transform-origin: center; 53 | transition: transform 0.3s ease; 54 | } 55 | .input-data input:focus ~ .underline:before, 56 | .input-data input:valid ~ .underline:before{ 57 | transform: scaleX(1); 58 | } 59 | -------------------------------------------------------------------------------- /Circular Progress Bar/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: grid; 3 | height: 100vh; 4 | place-items: center; 5 | background: #243b47; 6 | } 7 | svg { 8 | width: 114px; 9 | height: 114px; 10 | margin: 1em; 11 | } 12 | 13 | .bg { 14 | fill: none; 15 | stroke-width: 10px; 16 | stroke: #1A2C34; 17 | } 18 | 19 | [class^="meter-"] { 20 | fill: none; 21 | stroke-width: 10px; 22 | stroke-linecap: round; 23 | transform: rotate(-90deg); 24 | transform-origin: 50% 50%; 25 | 26 | } 27 | 28 | .meter-1 { 29 | stroke-dasharray: 360; 30 | stroke-dashoffset: 100; 31 | stroke: #00FFFF; 32 | animation: progress-1 1.5s ease-out; 33 | } 34 | .meter-2 { 35 | stroke: #00ff00; 36 | stroke-dasharray: 360; 37 | stroke-dashoffset: 160; 38 | animation: progress-2 1s ease-out; 39 | } 40 | .meter-3 { 41 | stroke: #ff33ff; 42 | stroke-dasharray: 360; 43 | stroke-dashoffset: 250; 44 | animation: progress-3 .75s ease-out; 45 | } 46 | 47 | @keyframes progress-1 { 48 | from { 49 | stroke-dashoffset: 360; 50 | } 51 | to { 52 | stroke-dashoffset: 100; 53 | } 54 | } 55 | 56 | @keyframes progress-2 { 57 | from { 58 | stroke-dashoffset: 360; 59 | } 60 | to { 61 | stroke-dashoffset: 160; 62 | } 63 | } 64 | 65 | @keyframes progress-3 { 66 | from { 67 | stroke-dashoffset: 360; 68 | } 69 | to { 70 | stroke-dashoffset: 250; 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /Instagram Logo/index.html: -------------------------------------------------------------------------------- 1 | 65 |
66 |
67 |
68 |
69 | -------------------------------------------------------------------------------- /Diya (Lamp)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Happy Diwali 6 | 66 | 67 | 68 | 69 |
70 | 71 | 72 | -------------------------------------------------------------------------------- /Light Dark Mode Toggle switch/style.css: -------------------------------------------------------------------------------- 1 | .toggle{ 2 | 3 | position: relative; 4 | 5 | display: inline-block; 6 | 7 | width: 60px; 8 | 9 | height: 34px; 10 | 11 | } 12 | .dark-mode{ 13 | background: black; 14 | color: #fff; 15 | } 16 | /* Hide default HTML checkbox */ 17 | 18 | .toggle input { 19 | 20 | opacity: 1; 21 | 22 | width: 0; 23 | 24 | height: 0; 25 | 26 | } 27 | 28 | /* The slider */ 29 | 30 | .slider { 31 | 32 | position: absolute; 33 | 34 | cursor: pointer; 35 | 36 | top: 0; 37 | 38 | left: 0; 39 | 40 | right: 0; 41 | 42 | bottom: 0; 43 | 44 | background-color: black; 45 | 46 | -webkit-transition: .4s; 47 | 48 | transition: .4s; 49 | 50 | } 51 | .slider:before { 52 | 53 | position: absolute; 54 | 55 | content: ""; 56 | 57 | height: 26px; 58 | 59 | width: 26px; 60 | 61 | left: 4px; 62 | 63 | bottom: 4px; 64 | 65 | background-color: white; 66 | 67 | -webkit-transition: .4s; 68 | 69 | transition: .4s; 70 | 71 | } 72 | 73 | input:checked + .slider { 74 | 75 | background-color: white; 76 | 77 | } 78 | input:checked + .slider::before { 79 | 80 | background-color: black; 81 | 82 | } 83 | 84 | input:focus + .slider { 85 | 86 | box-shadow: 0 0 1px #2196F3; 87 | 88 | } 89 | 90 | input:checked + .slider:before { 91 | 92 | -webkit-transform: translateX(26px); 93 | 94 | -ms-transform: translateX(26px); 95 | 96 | transform: translateX(26px); 97 | 98 | } 99 | 100 | /* Rounded sliders */ 101 | 102 | .slider.round { 103 | 104 | border-radius: 34px; 105 | 106 | } 107 | 108 | .slider.round:before { 109 | 110 | border-radius: 50%; 111 | 112 | } 113 | /*page styling*/ 114 | html{ 115 | display: flex; 116 | 117 | justify-content: center; 118 | height: 100vh; 119 | align-items: center; 120 | } 121 | -------------------------------------------------------------------------------- /Social Icons with Glowing Effect/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | background: #0D0D0D; 8 | } 9 | 10 | /* Centering element */ 11 | .container { 12 | position: absolute; 13 | top: 50%; 14 | left: 50%; 15 | transform: translate(-50%, -50%); 16 | width: 550px; 17 | } 18 | 19 | .container ul { 20 | list-style: none; 21 | } 22 | li { 23 | width: 75px; 24 | height: 75px; 25 | line-height: 75px; 26 | margin: 0 10px; 27 | text-align: center; 28 | cursor: pointer; 29 | border-radius: 50%; 30 | border: 5px solid #D8E2DC; 31 | float: left; 32 | transition: all 0.5s ease; 33 | } 34 | li .fa { 35 | color: #D8E2DC; 36 | margin-top: 20px; 37 | transition: all 0.5s ease; 38 | } 39 | li:hover.facebook { 40 | border: 5px solid #3b5998; 41 | box-shadow: 0 0 15px #3b5998; 42 | transition: all 0.5s ease; 43 | } 44 | li:hover .fa-facebook { 45 | color: #3b5998; 46 | text-shadow: 0 0 15px #3b5998; 47 | transition: all 0.5s ease; 48 | } 49 | li:hover.twitter { 50 | border: 5px solid #00aced; 51 | box-shadow: 0 0 15px #00aced; 52 | transition: all 0.5s ease; 53 | } 54 | li:hover .fa-twitter { 55 | color: #00aced; 56 | text-shadow: 0 0 15px #00aced; 57 | transition: all 0.5s ease; 58 | } 59 | li:hover.instagram { 60 | border: 5px solid #bc2a8d; 61 | box-shadow: 0 0 15px #bc2a8d; 62 | transition: all 0.5s ease; 63 | } 64 | li:hover .fa-instagram { 65 | color: #bc2a8d; 66 | text-shadow: 0 0 15px #bc2a8d; 67 | transition: all 0.5s ease; 68 | } 69 | li:hover.google { 70 | border: 5px solid #dd4b39; 71 | box-shadow: 0 0 15px #dd4b39; 72 | transition: all 0.5s ease; 73 | } 74 | li:hover .fa-google { 75 | color: #dd4b39; 76 | text-shadow: 0 0 15px #dd4b39; 77 | transition: all 0.5s ease; 78 | } 79 | li:hover.whatsapp { 80 | border: 5px solid #4dc247; 81 | box-shadow: 0 0 15px #4dc247; 82 | transition: all 0.5s ease; 83 | } 84 | li:hover .fa-whatsapp { 85 | color: #4dc247; 86 | text-shadow: 0 0 15px #4dc247; 87 | transition: all 0.5s ease; 88 | } 89 | -------------------------------------------------------------------------------- /Add to Cart Animation/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap"); 2 | 3 | * { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | font-family: "Inter", sans-serif; 8 | } 9 | 10 | body { 11 | margin: 0; 12 | padding: 0; 13 | height: 100vh; 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | background-color: #ebe8ff; 18 | } 19 | 20 | .cart-button { 21 | position: relative; 22 | padding: 10px; 23 | width: 200px; 24 | height: 50px; 25 | border: 0; 26 | border-radius: 10px; 27 | background-color: #2b3044; 28 | outline: none; 29 | cursor: pointer; 30 | margin: 0 10px; 31 | color: #fff; 32 | transition: 0.3s ease-in-out; 33 | overflow: hidden; 34 | user-select: none; 35 | } 36 | 37 | .cart-button:hover { 38 | background-color: #202431; 39 | } 40 | .cart-button:active { 41 | transform: scale(0.9); 42 | } 43 | 44 | .cart-button .fa-shopping-cart { 45 | position: absolute; 46 | z-index: 2; 47 | top: 50%; 48 | left: -10%; 49 | font-size: 2em; 50 | transform: translate(-50%, -50%); 51 | } 52 | 53 | .cart-button span { 54 | position: absolute; 55 | z-index: 3; 56 | left: 50%; 57 | top: 50%; 58 | font-size: 1.2em; 59 | color: #fff; 60 | transform: translate(-50%, -50%); 61 | } 62 | .cart-button span.add-to-cart { 63 | opacity: 1; 64 | } 65 | .cart-button span.added { 66 | opacity: 0; 67 | } 68 | 69 | .cart-button.clicked .fa-shopping-cart { 70 | animation: cart 1.5s ease-in-out forwards; 71 | } 72 | 73 | .cart-button.clicked span.add-to-cart { 74 | animation: txt1 1.5s ease-in-out forwards; 75 | } 76 | .cart-button.clicked span.added { 77 | animation: txt2 1.5s ease-in-out forwards; 78 | } 79 | @keyframes cart { 80 | 0% { 81 | left: -10%; 82 | } 83 | 40%, 84 | 60% { 85 | left: 50%; 86 | } 87 | 100% { 88 | left: 110%; 89 | } 90 | } 91 | 92 | @keyframes txt1 { 93 | 0% { 94 | opacity: 1; 95 | } 96 | 20%, 97 | 100% { 98 | opacity: 0; 99 | } 100 | } 101 | @keyframes txt2 { 102 | 0%, 103 | 80% { 104 | opacity: 0; 105 | } 106 | 100% { 107 | opacity: 1; 108 | } 109 | } 110 | 111 | .pqt-plus, 112 | .pqt-minus { 113 | background: #fff; 114 | border: none; 115 | font-size: 20px; 116 | padding: 0 20px; 117 | transition: .2s; 118 | width: 50px; 119 | border-radius: 10px; 120 | height: 50px; 121 | user-select: none; 122 | line-height: 50px; 123 | } 124 | 125 | .pqt-plus:hover, 126 | .pqt-minus:hover { 127 | background: #202431; 128 | color: #fff; 129 | cursor: pointer; 130 | } 131 | --------------------------------------------------------------------------------