├── 404 ├── index.html └── style.css ├── Social-flip-cards ├── script.js ├── index.html └── style.css ├── Magic Card ├── script.js ├── index.html ├── Arduino └── style.css ├── Text morph ├── .vscode │ └── settings.json ├── style.css ├── index.html └── script.js ├── Jello-animated-tab-bar ├── 2.png ├── script.js ├── index.html └── style.css ├── Gradient preloadder ├── index.html └── style.css ├── Neon-cursor ├── script.js ├── index.html └── style.css ├── Invert text on scroll ├── script.js ├── A.html ├── index.html └── style.css ├── Hover-mouse-transition-effect ├── index.html └── style.css ├── ReadMe.md ├── Aurora Text ├── index.html └── style.css ├── Roatating text ├── index.html ├── style.css └── script.js ├── Login-form -animation ├── index.html └── style.css ├── Fluid Toogle ├── index.html └── style.css ├── BubbleNavbar ├── script.js ├── index.html └── style.css ├── Parallax Depth Cards ├── index.html ├── script.js └── style.css ├── Naughty Submit Button ├── style.css ├── index.html └── script.js ├── dropdown1 ├── index.html ├── style.css └── script.js ├── Star-rating ├── script.js ├── style.css └── index.html ├── Mode switch toggle ├── index.html └── style.css ├── Bycyle preloader ├── index.html └── style.css ├── Carousal cards ├── src │ ├── style.css │ └── index.html └── dist │ ├── style.css │ └── index.html ├── CSS-filter-cards ├── index.html └── style.css ├── Download_animation ├── index.html ├── script.js └── style.css └── Progress bar ├── index.html └── style.css /Social-flip-cards/script.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | 4 | */ -------------------------------------------------------------------------------- /Magic Card/script.js: -------------------------------------------------------------------------------- 1 | // your browser should support CSS Houdini to see the animation -------------------------------------------------------------------------------- /Text morph/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } 4 | -------------------------------------------------------------------------------- /Jello-animated-tab-bar/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Atharva1802/CSS-trickies/HEAD/Jello-animated-tab-bar/2.png -------------------------------------------------------------------------------- /Gradient preloadder/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Gradient Preloader Effect -CSS 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Neon-cursor/script.js: -------------------------------------------------------------------------------- 1 | import { neonCursor } from 'https://unpkg.com/threejs-toys@0.0.8/build/threejs-toys.module.cdn.min.js' 2 | 3 | neonCursor({ 4 | el: document.getElementById('app'), 5 | shaderPoints: 16, 6 | curvePoints: 80, 7 | curveLerp: 0.5, 8 | radius1: 5, 9 | radius2: 30, 10 | velocityTreshold: 10, 11 | sleepRadiusX: 100, 12 | sleepRadiusY: 100, 13 | sleepTimeCoefX: 0.0025, 14 | sleepTimeCoefY: 0.0025 15 | }) -------------------------------------------------------------------------------- /Invert text on scroll/script.js: -------------------------------------------------------------------------------- 1 | console.clear(); 2 | gsap.config({ trialWarn: false }); 3 | gsap.registerPlugin(ScrollTrigger); 4 | gsap.to("#container", { 5 | "--target": "0%", 6 | ease: "none", 7 | scrollTrigger: { 8 | trigger: "#container", 9 | markers: { 10 | startColor: "yellow", 11 | endColor: "#42a6e0", 12 | fontSize: "14px" 13 | }, 14 | start: "top top", 15 | end: "+=1000", 16 | pin: true, 17 | scrub: 1 18 | } 19 | }); -------------------------------------------------------------------------------- /Invert text on scroll/A.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a page 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 |

A big brown fox...

14 | 15 |

A bear jumps over the...

16 | 17 |
18 | 19 |
20 | 21 | The DOM 22 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /Hover-mouse-transition-effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS mouse-out transition effect 6 | 7 | 8 | 9 | 10 | 11 |

Hi! I am Atharva👋

12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Magic Card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Magic Card 6 | 7 | 8 | 9 | 10 | 11 |
12 | @Atharvadftba ☄️ 13 |
14 | 15 | Real Magic - Right Here 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /ReadMe.md: -------------------------------------------------------------------------------- 1 | 2 | ### 👋 Hey there! Welcome to my collection of CSS tricks! 🎉 3 | 4 | Feel free to use any of these awesome effects in your own projects! 💻 5 | 6 | - If you notice any errors or bugs 🐞:(
7 | Please let me know by raising an issue.
8 | - If you want to fix it yourself and contribute, that would be amazing! 🛠️
9 | Just make a PR and I'll be happy to review it! 🤗 10 | 11 | If you like what you see, please leave a ⭐️!
12 | Thank you for visiting! 🙏
13 | 14 | ~ Atharva 15 | -------------------------------------------------------------------------------- /Aurora Text/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS only text aurora 6 | 7 | 8 | 9 | 10 | 11 |
12 |

You can do MAGIC with CSS 13 |
14 |
15 |
16 |
17 |
18 |
19 |

20 |

Made with CSS.

21 |
22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Invert text on scroll/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Invert Text On Scroll effect 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Hey! I am AtharvaCheck this out!

13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Neon-cursor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CodePen - ThreeJS Toys - Neon Cursor 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |

NEON
CURSOR

14 | github/threejs-toys 15 |
16 |
17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Roatating text/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rotating Text 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

You are

14 |

15 | wonderful. 16 | magical. 17 | bold. 18 | beautiful. 19 | fun. 20 |

21 |
22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /Invert text on scroll/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "proxima-nova", sans-serif; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | #container { 8 | --target: 100%; 9 | width: 100%; 10 | background: linear-gradient(to right, #000 var(--target), #fff var(--target)); 11 | display: flex; 12 | height: 100vh; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | 17 | h1 { 18 | color: white; 19 | font-size: clamp(2.5rem, 8vw, 6rem); 20 | text-align: center; 21 | letter-spacing: -0.02em; 22 | background: linear-gradient(to right, #fff var(--target), #000 var(--target)); 23 | -webkit-background-clip: text; 24 | -webkit-text-fill-color: transparent; 25 | width: 100%; 26 | display: block; 27 | line-height: 0.95; 28 | } 29 | h1 span { 30 | font-size: 0.5em; 31 | display: block; 32 | } -------------------------------------------------------------------------------- /Text morph/style.css: -------------------------------------------------------------------------------- 1 | /* Explanation in JS tab */ 2 | 3 | /* Cool font from Google Fonts! */ 4 | @import url('https://fonts.googleapis.com/css?family=Raleway:900&display=swap'); 5 | 6 | body { 7 | margin: 0px; 8 | background-color: thistle; 9 | } 10 | 11 | #container { 12 | /* Center the text in the viewport. */ 13 | position: absolute; 14 | margin: auto; 15 | width: 100vw; 16 | height: 80pt; 17 | top: 0; 18 | bottom: 0; 19 | 20 | /* This filter is a lot of the magic, try commenting it out to see how the morphing works! */ 21 | filter: url(#threshold) blur(0.6px); 22 | } 23 | 24 | /* Your average text styling */ 25 | #text1, #text2 { 26 | position: absolute; 27 | width: 100%; 28 | display: inline-block; 29 | 30 | font-family: 'Raleway', sans-serif; 31 | font-size: 80pt; 32 | 33 | text-align: center; 34 | 35 | user-select: none; 36 | } -------------------------------------------------------------------------------- /Login-form -animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CodePen - Login Form with floating placeholder and light button 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Login

13 |
14 |
15 | 16 | 17 |
18 |
19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | Submit 28 | 29 |
30 |
31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /Neon-cursor/style.css: -------------------------------------------------------------------------------- 1 | body, html, #app { 2 | margin: 0; 3 | width: 100%; 4 | height: 100%; 5 | } 6 | 7 | #app { 8 | overflow: hidden; 9 | touch-action: pan-up; 10 | color: #ffffff; 11 | font-family: 'Montserrat', sans-serif; 12 | text-align: center; 13 | text-shadow: 0 0 5px #ffffff, 0 0 20px #000, 0 0 30px #000; 14 | } 15 | 16 | #app h1 { 17 | --fontSize: 60px; 18 | --lineHeight: 80px; 19 | width: auto; 20 | height: calc(2 * var(--lineHeight)); 21 | line-height: var(--lineHeight); 22 | margin: calc(50vh - var(--lineHeight)) auto 0; 23 | font-size: var(--fontSize); 24 | text-transform: uppercase; 25 | } 26 | 27 | #app a { 28 | margin-top: 10px; 29 | display: inline-block; 30 | text-decoration: none; 31 | color: #fff; 32 | } 33 | 34 | #app canvas { 35 | display: block; 36 | position: fixed; 37 | z-index: -1; 38 | top: 0; 39 | } -------------------------------------------------------------------------------- /Hover-mouse-transition-effect/style.css: -------------------------------------------------------------------------------- 1 | h1::before { 2 | transform: scaleX(0); 3 | transform-origin: bottom right; 4 | } 5 | 6 | h1:hover::before { 7 | transform: scaleX(1); 8 | transform-origin: bottom left; 9 | } 10 | 11 | h1::before { 12 | content: " "; 13 | display: block; 14 | position: absolute; 15 | top: 0; right: 0; bottom: 0; left: 0; 16 | inset: 0 0 0 0; 17 | background: rgb(189, 139, 236); 18 | z-index: -1; 19 | transition: transform .3s ease; 20 | } 21 | 22 | h1 { 23 | position: relative; 24 | font-size: 5rem; 25 | } 26 | 27 | html { 28 | block-size: 100%; 29 | inline-size: 100%; 30 | } 31 | 32 | body { 33 | min-block-size: 100%; 34 | min-inline-size: 100%; 35 | margin: 0; 36 | box-sizing: border-box; 37 | display: grid; 38 | place-content: center; 39 | font-family: system-ui, sans-serif; 40 | } 41 | 42 | @media (orientation: landscape) { 43 | body { 44 | grid-auto-flow: column; 45 | } 46 | } -------------------------------------------------------------------------------- /Text morph/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Text Morph 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /Fluid Toogle/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fluid Toggle 6 | 7 | 8 | 9 | 10 | 11 |

Fluid Toggle

12 |
13 | 27 |
28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Magic Card/Arduino: -------------------------------------------------------------------------------- 1 | #include 2 | 3 | // Bluetooth Tx pin to Arduino 2 4 | // Bluetooth Rx pin to Arduino 3 5 | #define rxPin 2 6 | #define txPin 3 7 | SoftwareSerial Bluetooth(rxPin, txPin); 8 | 9 | #define RELAY_1 8 10 | #define RELAY_2 9 11 | 12 | String data = ""; 13 | 14 | void setup() 15 | { 16 | 17 | pinMode(RELAY_1, OUTPUT); // Relay 1 18 | pinMode(RELAY_2, OUTPUT); // Relay 2 19 | 20 | Serial.begin(115200); 21 | Serial.println("Arduino serial initialize"); 22 | 23 | Bluetooth.begin(9600); 24 | Serial.println("Bluetooth software serial initialize"); 25 | } 26 | 27 | void loop() 28 | { 29 | 30 | while (Bluetooth.available() > 0) 31 | { 32 | data = Bluetooth.readString(); 33 | Serial.println(data); 34 | 35 | data.toLowerCase(); 36 | 37 | // Control Light 1 38 | if (data == "light1 on") 39 | digitalWrite(RELAY_1, HIGH); 40 | else if (data == "light1 off") 41 | digitalWrite(RELAY_1, LOW); 42 | // Control Light 2 43 | else if (data == "light2 on") 44 | digitalWrite(RELAY_2, HIGH); 45 | else if (data == "light2 off") 46 | digitalWrite(RELAY_2, LOW); 47 | } 48 | } -------------------------------------------------------------------------------- /Social-flip-cards/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Social Flip Cards - CSS 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
facebook
 14 |
twitter
 15 |
tumblr
 16 |
pinterest
 17 |
behance
 18 |
GitHub
 19 |
linkedin
 20 |
dribbble
 21 |
instagram
 22 |
flickr
 23 |
blogger
 24 |
vimeo
 25 |
26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /BubbleNavbar/script.js: -------------------------------------------------------------------------------- 1 | function move(id, position, color) { 2 | var tl = gsap.timeline(); 3 | tl.to("#bgBubble", {duration: 0.15, bottom: "-30px", ease: "ease-out"}, 0) 4 | .to("#bubble1", {duration: 0.1, y: "120%", boxShadow: 'none', ease: "ease-out",}, 0) 5 | .to("#bubble2", {duration: 0.1, y: "120%", boxShadow: 'none', ease: "ease-out",}, 0) 6 | .to("#bubble3", {duration: 0.1, y: "120%", boxShadow: 'none', ease: "ease-out",}, 0) 7 | .to("#bubble4", {duration: 0.1, y: "120%", boxShadow: 'none', ease: "ease-out",}, 0) 8 | .to(".icon", {duration: 0.05, opacity: 0, ease: "ease-out",}, 0) 9 | .to("#bgBubble", {duration: 0.2, left: position, ease: "ease-in-out"}, 0.1) 10 | .to("#bgBubble", {duration: 0.15, bottom: "-50px", ease: "ease-out"}, '-=0.2') 11 | .to(`#bubble${id}`, {duration: 0.15, y: "0%", opacity: 1, boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)', ease: "ease-out"}, '-=0.1') 12 | .to(`#bubble${id}> span`, {duration: 0.15, y: "0%", opacity: 0.7, ease: "ease-out"}, '-=0.1') 13 | .to("#navbarContainer", {duration: 0.3, backgroundColor: color, ease: "ease-in-out"}, 0) 14 | .to("#bg", {duration: 0.3, backgroundColor: color, ease: "ease-in-out"}, 0) 15 | .to("#bgBubble", {duration: 0.3, backgroundColor: color, ease: "ease-in-out"}, 0) 16 | } -------------------------------------------------------------------------------- /Gradient preloadder/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | height: 100vh; 11 | background: #000000; 12 | } 13 | 14 | .loader { 15 | position: relative; 16 | width: 200px; 17 | height: 200px; 18 | border-radius: 50%; 19 | border: 4px solid #15008c; 20 | overflow: hidden; 21 | box-shadow: -5px -5px 5px rgba(255, 255, 255, 0.1), 10px 10px 10px rgba(0, 0, 0, 0.4), inset -5px -5px 5px rgba(255, 255, 255, 0.2), inset 10px 10px 10px rgba(0, 0, 0, 0.4); 22 | } 23 | .loader:before { 24 | content: ""; 25 | position: absolute; 26 | top: 25px; 27 | left: 25px; 28 | right: 25px; 29 | bottom: 25px; 30 | z-index: 10; 31 | background: #532ecc; 32 | border-radius: 50%; 33 | border: 2px solid #240229; 34 | box-shadow: inset -2px -2px 5px rgba(255, 255, 255, 0.2), inset 3px 3px 5px rgba(0, 0, 0, 0.5); 35 | } 36 | .loader span { 37 | position: absolute; 38 | width: 100%; 39 | height: 100%; 40 | border-radius: 50%; 41 | z-index: -1; 42 | background: linear-gradient(#d5401b, #ffffff, #02bd08); 43 | filter: blur(20px); 44 | animation: animate 0.5s linear infinite; 45 | } 46 | 47 | @keyframes animate { 48 | 0% { 49 | transform: rotate(0deg); 50 | } 51 | 100% { 52 | transform: rotate(360deg); 53 | } 54 | } -------------------------------------------------------------------------------- /Roatating text/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Open+Sans:600); 2 | 3 | body { 4 | display: flex; 5 | position: center; 6 | font-family: 'Open Sans', sans-serif; 7 | font-weight: 600; 8 | font-size: 40px; 9 | } 10 | 11 | .text { 12 | color: white; 13 | position: absolute; 14 | width: 600px; 15 | left: 50%; 16 | margin-left: -225px; 17 | height: 40px; 18 | top: 50%; 19 | margin-top: -20px; 20 | } 21 | 22 | p { 23 | display: inline-block; 24 | vertical-align: top; 25 | margin: 0; 26 | } 27 | 28 | .word { 29 | position: absolute; 30 | width: 340px; 31 | opacity: 0; 32 | } 33 | 34 | .letter { 35 | display: inline-block; 36 | position: relative; 37 | float: left; 38 | transform: translateZ(25px); 39 | transform-origin: 50% 50% 25px; 40 | } 41 | 42 | .letter.out { 43 | transform: rotateX(90deg); 44 | transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19); 45 | } 46 | 47 | .letter.behind { 48 | transform: rotateX(-90deg); 49 | } 50 | 51 | .letter.in { 52 | transform: rotateX(0deg); 53 | transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275); 54 | } 55 | 56 | .wisteria { 57 | color: #8e44ad; 58 | } 59 | 60 | .belize { 61 | color: #2980b9; 62 | } 63 | 64 | .pomegranate { 65 | color: #c0392b; 66 | } 67 | 68 | .green { 69 | color: #16a085; 70 | } 71 | 72 | .midnight { 73 | color: #276db3; 74 | } -------------------------------------------------------------------------------- /Parallax Depth Cards/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Parallax Depth Cards 6 | 7 | 8 | 9 | 10 | 11 | 12 |

Hover over the cards

13 | 14 |
15 | 16 |

Card 1

17 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

18 | 19 | 20 |

Card 2

21 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

22 | 23 | 24 |

Card 3

25 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

26 | 27 | 28 |

Card 4

29 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

30 | 31 |
32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /Naughty Submit Button/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: "Poppins", sans-serif; 6 | } 7 | body { 8 | background-image:"https://malatyahaber.com/fotolar/2022/05/kayit-altinda-80-irk-kedi-var1936.jpg"; 9 | } 10 | .container { 11 | width: 31.25em; 12 | background-color: #4b4b4b; 13 | padding: 1.4em 3.75em; 14 | position: absolute; 15 | transform: translate(-50%, -50%); 16 | top: 50%; 17 | left: 50%; 18 | border-radius: 0.7em; 19 | box-shadow: 0 1em 4em rgba(71, 50, 4, 0.3); 20 | } 21 | h2{ 22 | text-align: center; 23 | font-size: 32px; 24 | margin-bottom: 30px; 25 | color: rgb(255, 255, 255); 26 | } 27 | input, 28 | #submit { 29 | border: none; 30 | outline: none; 31 | display: block; 32 | color: rgb(68, 63, 63); 33 | 34 | } 35 | input { 36 | width: 100%; 37 | background-color: transparent; 38 | margin-bottom: 2em; 39 | font-size: 20px; 40 | padding: 1em 0 0.5em 0.5em; 41 | border-bottom: 2px solid #ffffff; 42 | } 43 | #submit { 44 | position: relative; 45 | left: 0; 46 | font-size: 1.1em; 47 | width: 7em; 48 | background-color: #c4c7da; 49 | color: rgb(85, 85, 85); 50 | padding: 0.8em 0; 51 | margin-top: 2em; 52 | border-radius: 0.3em; 53 | } 54 | #message-ref { 55 | font-size: 0.9em; 56 | margin-top: 1.5em; 57 | color: #34bd34; 58 | visibility: hidden; 59 | } -------------------------------------------------------------------------------- /dropdown1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CodePen - Dropdown Menu 6 | 7 | 8 | 9 | 10 | 11 |
12 | 25 |
26 |
27 |
    28 | 29 |
    30 |
    31 |
    32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /Roatating text/script.js: -------------------------------------------------------------------------------- 1 | var words = document.getElementsByClassName('word'); 2 | var wordArray = []; 3 | var currentWord = 0; 4 | 5 | words[currentWord].style.opacity = 1; 6 | for (var i = 0; i < words.length; i++) { 7 | splitLetters(words[i]); 8 | } 9 | 10 | function changeWord() { 11 | var cw = wordArray[currentWord]; 12 | var nw = currentWord == words.length-1 ? wordArray[0] : wordArray[currentWord+1]; 13 | for (var i = 0; i < cw.length; i++) { 14 | animateLetterOut(cw, i); 15 | } 16 | 17 | for (var i = 0; i < nw.length; i++) { 18 | nw[i].className = 'letter behind'; 19 | nw[0].parentElement.style.opacity = 1; 20 | animateLetterIn(nw, i); 21 | } 22 | 23 | currentWord = (currentWord == wordArray.length-1) ? 0 : currentWord+1; 24 | } 25 | 26 | function animateLetterOut(cw, i) { 27 | setTimeout(function() { 28 | cw[i].className = 'letter out'; 29 | }, i*80); 30 | } 31 | 32 | function animateLetterIn(nw, i) { 33 | setTimeout(function() { 34 | nw[i].className = 'letter in'; 35 | }, 340+(i*80)); 36 | } 37 | 38 | function splitLetters(word) { 39 | var content = word.innerHTML; 40 | word.innerHTML = ''; 41 | var letters = []; 42 | for (var i = 0; i < content.length; i++) { 43 | var letter = document.createElement('span'); 44 | letter.className = 'letter'; 45 | letter.innerHTML = content.charAt(i); 46 | word.appendChild(letter); 47 | letters.push(letter); 48 | } 49 | 50 | wordArray.push(letters); 51 | } 52 | 53 | changeWord(); 54 | setInterval(changeWord, 4000); -------------------------------------------------------------------------------- /Naughty Submit Button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Naughty Submit Button 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Naughty Submit Button | Atharva 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | Submit Button - Naughty 25 | 26 | 30 | 31 | 32 | 33 | 34 |
    35 |

    Naughty Input Box

    36 | 37 | 38 | 39 |

    Signed Up Successfully!

    40 |
    41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /404/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | error 404 page 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Document 16 | 17 | 18 | 19 | 20 |
    21 |
    22 | 23 | 24 |
    25 |
    26 |
    27 |
    28 |
    29 |
    30 | 31 | 32 | 33 |
    34 |
    35 |
    36 |
    37 |
    38 |
    39 |
    40 |
    41 |
    42 |
    43 | 44 |
    45 | 46 |
    47 |
    48 |

    Page Not Found

    49 |

    We're sorry, the page you were looking for isn't found here. The link you followed may either be broken or no longer exists. Please try again, or take a look at our.

    50 |
    51 |
    52 | 53 |
    54 |
    55 | 56 | 57 |
    58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /Star-rating/script.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("DOMContentLoaded",() => { 2 | const starRating = new StarRating("form"); 3 | }); 4 | 5 | class StarRating { 6 | constructor(qs) { 7 | this.ratings = [ 8 | {id: 1, name: "Terrible"}, 9 | {id: 2, name: "Bad"}, 10 | {id: 3, name: "OK"}, 11 | {id: 4, name: "Good"}, 12 | {id: 5, name: "Excellent"} 13 | ]; 14 | this.rating = null; 15 | this.el = document.querySelector(qs); 16 | 17 | this.init(); 18 | } 19 | init() { 20 | this.el?.addEventListener("change",this.updateRating.bind(this)); 21 | 22 | // stop Firefox from preserving form data between refreshes 23 | try { 24 | this.el?.reset(); 25 | } catch (err) { 26 | console.error("Element isn’t a form."); 27 | } 28 | } 29 | updateRating(e) { 30 | // clear animation delays 31 | Array.from(this.el.querySelectorAll(`[for*="rating"]`)).forEach(el => { 32 | el.className = "rating__label"; 33 | }); 34 | 35 | const ratingObject = this.ratings.find(r => r.id === +e.target.value); 36 | const prevRatingID = this.rating?.id || 0; 37 | 38 | let delay = 0; 39 | this.rating = ratingObject; 40 | this.ratings.forEach(rating => { 41 | const { id } = rating; 42 | 43 | // add the delays 44 | const ratingLabel = this.el.querySelector(`[for="rating-${id}"]`); 45 | 46 | if (id > prevRatingID + 1 && id <= this.rating.id) { 47 | ++delay; 48 | ratingLabel.classList.add(`rating__label--delay${delay}`); 49 | } 50 | 51 | // hide ratings to not read, show the one to read 52 | const ratingTextEl = this.el.querySelector(`[data-rating="${id}"]`); 53 | 54 | if (this.rating.id !== id) 55 | ratingTextEl.setAttribute("hidden",true); 56 | else 57 | ratingTextEl.removeAttribute("hidden"); 58 | }); 59 | } 60 | } -------------------------------------------------------------------------------- /Mode switch toggle/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Theme Switch 6 | 7 | 8 | 9 | 10 | 11 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /Bycyle preloader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bicycle Preloader 6 | 7 | 8 | 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 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /Carousal cards/src/style.css: -------------------------------------------------------------------------------- 1 | @layer demo, carousel3d; 2 | 3 | @layer carousel3d { 4 | .carousel3d { perspective: 1000px; display: grid; place-items: center } 5 | .carousel3d *:not(:empty) { transform-style: preserve-3d } 6 | .carousel3d > .items { 7 | --width: 50vmin; 8 | --spacing: 0vmin; 9 | display: grid; 10 | width: var(--width); 11 | aspect-ratio: 1/1; 12 | 13 | /* props for single items */ 14 | --angle: calc(360deg / var(--items-total)); 15 | /* calc z-translate */ 16 | --C: calc(var(--angle) / 2); 17 | --B: calc(90deg - var(--C)); 18 | --c: calc(var(--width) / 2); 19 | --b: calc(var(--c) * sin(var(--B)) / sin(var(--C))); 20 | --tz: calc(var(--b) + var(--spacing, 0)); 21 | 22 | /* move back to keep front item correct size */ 23 | translate: 0 0 calc(var(--tz) * -1); 24 | } 25 | .carousel3d > .items >.item { 26 | grid-area: 1/1; 27 | transform: 28 | rotateY(calc(var(--angle) * var(--item-index))) 29 | translateZ(var(--tz)); 30 | } 31 | 32 | /* animation */ 33 | .carousel3d > .items { 34 | animation: carousel3dRotate calc(var(--items-total) * 3s) linear infinite 35 | } 36 | .carousel3d > .items:hover { 37 | animation-play-state: paused 38 | } 39 | @keyframes carousel3dRotate { 40 | to { transform: rotateY(360deg) } 41 | } 42 | 43 | .item {display: flex } 44 | .item > img { width: 100%; height: 100%; object-fit: cover } 45 | } 46 | 47 | @layer demo { 48 | * { box-sizing: border-box } 49 | html, body { height: 100%; margin: 0; text-align: center; color: white; font-family: system-ui, sans-serif } 50 | body { padding: 2rem; display: grid; place-items: center; background-color: #1d1e22; overflow-x: hidden } 51 | .ctrls { position: fixed; top: 1rem; margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem } 52 | .trigwarning { position: fixed; padding: 1rem; bottom: 1rem; margin-inline: auto; text-align: center; color: hsl(50 70% 50%) } 53 | @supports(top: calc(sin(1) * 1px)) { .trigwarning {display: none } } 54 | 55 | } -------------------------------------------------------------------------------- /Carousal cards/dist/style.css: -------------------------------------------------------------------------------- 1 | @layer demo, carousel3d; 2 | 3 | @layer carousel3d { 4 | .carousel3d { perspective: 1000px; display: grid; place-items: center } 5 | .carousel3d *:not(:empty) { transform-style: preserve-3d } 6 | .carousel3d > .items { 7 | --width: 50vmin; 8 | --spacing: 0vmin; 9 | display: grid; 10 | width: var(--width); 11 | aspect-ratio: 1/1; 12 | 13 | /* props for single items */ 14 | --angle: calc(360deg / var(--items-total)); 15 | /* calc z-translate */ 16 | --C: calc(var(--angle) / 2); 17 | --B: calc(90deg - var(--C)); 18 | --c: calc(var(--width) / 2); 19 | --b: calc(var(--c) * sin(var(--B)) / sin(var(--C))); 20 | --tz: calc(var(--b) + var(--spacing, 0)); 21 | 22 | /* move back to keep front item correct size */ 23 | translate: 0 0 calc(var(--tz) * -1); 24 | } 25 | .carousel3d > .items >.item { 26 | grid-area: 1/1; 27 | transform: 28 | rotateY(calc(var(--angle) * var(--item-index))) 29 | translateZ(var(--tz)); 30 | } 31 | 32 | /* animation */ 33 | .carousel3d > .items { 34 | animation: carousel3dRotate calc(var(--items-total) * 3s) linear infinite 35 | } 36 | .carousel3d > .items:hover { 37 | animation-play-state: paused 38 | } 39 | @keyframes carousel3dRotate { 40 | to { transform: rotateY(360deg) } 41 | } 42 | 43 | .item {display: flex } 44 | .item > img { width: 100%; height: 100%; object-fit: cover } 45 | } 46 | 47 | @layer demo { 48 | * { box-sizing: border-box } 49 | html, body { height: 100%; margin: 0; text-align: center; color: rgb(199, 39, 39); font-family: system-ui, sans-serif } 50 | body { padding: 2rem; display: grid; place-items: center; background-color: #000000; overflow-x: hidden } 51 | .ctrls { position: fixed; top: 1rem; margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem } 52 | .trigwarning { position: fixed; padding: 1rem; bottom: 1rem; margin-inline: auto; text-align: center; color: hsl(50 70% 50%) } 53 | @supports(top: calc(sin(1) * 1px)) { .trigwarning {display: none } } 54 | 55 | } -------------------------------------------------------------------------------- /Parallax Depth Cards/script.js: -------------------------------------------------------------------------------- 1 | Vue.config.devtools = true; 2 | 3 | Vue.component('card', { 4 | template: ` 5 |
    10 |
    12 |
    13 |
    14 | 15 | 16 |
    17 |
    18 |
    `, 19 | mounted() { 20 | this.width = this.$refs.card.offsetWidth; 21 | this.height = this.$refs.card.offsetHeight; 22 | }, 23 | props: ['dataImage'], 24 | data: () => ({ 25 | width: 0, 26 | height: 0, 27 | mouseX: 0, 28 | mouseY: 0, 29 | mouseLeaveDelay: null }), 30 | 31 | computed: { 32 | mousePX() { 33 | return this.mouseX / this.width; 34 | }, 35 | mousePY() { 36 | return this.mouseY / this.height; 37 | }, 38 | cardStyle() { 39 | const rX = this.mousePX * 30; 40 | const rY = this.mousePY * -30; 41 | return { 42 | transform: `rotateY(${rX}deg) rotateX(${rY}deg)` }; 43 | 44 | }, 45 | cardBgTransform() { 46 | const tX = this.mousePX * -40; 47 | const tY = this.mousePY * -40; 48 | return { 49 | transform: `translateX(${tX}px) translateY(${tY}px)` }; 50 | 51 | }, 52 | cardBgImage() { 53 | return { 54 | backgroundImage: `url(${this.dataImage})` }; 55 | 56 | } }, 57 | 58 | methods: { 59 | handleMouseMove(e) { 60 | this.mouseX = e.pageX - this.$refs.card.offsetLeft - this.width / 2; 61 | this.mouseY = e.pageY - this.$refs.card.offsetTop - this.height / 2; 62 | }, 63 | handleMouseEnter() { 64 | clearTimeout(this.mouseLeaveDelay); 65 | }, 66 | handleMouseLeave() { 67 | this.mouseLeaveDelay = setTimeout(() => { 68 | this.mouseX = 0; 69 | this.mouseY = 0; 70 | }, 1000); 71 | } } }); 72 | 73 | 74 | 75 | const app = new Vue({ 76 | el: '#app' }); -------------------------------------------------------------------------------- /CSS-filter-cards/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CodePen - CSS Filter Cards 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
    14 |
    15 | 16 |
    17 |
    18 |

    Category

    19 |

    Example Card Heading

    20 |
    21 |     22 | 23 |
    24 |
    25 |

    Category

    26 |

    Example Card Heading

    27 |
    28 |     29 | 30 |
    31 |
    32 |

    Category

    33 |

    Example Card Heading

    34 |
    35 | 36 |     37 |
    38 |
    39 |

    Category

    40 |

    Example Card Heading

    41 |
    42 |     43 |
    44 |
    45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /Carousal cards/src/index.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    4 | 5 |
    6 |
    7 | 8 |
    9 |
    10 | 11 |
    12 |
    13 | 14 |
    15 |
    16 | 17 |
    18 |
    19 |
    20 | 21 |
    This browser is not supported... yet. CSS Trigonometry is currently supported in Safari, Firefox, and Chrome Canary with the "Experimental Web Platform Features" flag enabled.
    22 | 23 | 24 |
    25 | 26 | 27 | 28 |
    29 | 30 | 31 | 53 | 54 | -------------------------------------------------------------------------------- /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: #121627; 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: #1d1522; 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: rgba(88, 199, 250, 0); 38 | cursor: pointer; 39 | font-family: cursive; 40 | } 41 | 42 | .card:hover { 43 | color: rgb(94, 94, 234); 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%, #40197b); 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 | } -------------------------------------------------------------------------------- /BubbleNavbar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Navigation 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /Carousal cards/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CodePen - 3d carousel with CSS trig-functions 6 | 7 | 8 | 9 | 10 | 11 |
    12 |
    13 |
    14 | 15 |
    16 |
    17 | 18 |
    19 |
    20 | 21 |
    22 |
    23 | 24 |
    25 |
    26 | 27 |
    28 |
    29 |
    30 | 31 |
    This browser is not supported... yet. CSS Trigonometry is currently supported in Safari, Firefox, and Chrome Canary with the "Experimental Web Platform Features" flag enabled.
    32 | 33 | 34 |
    35 | 36 | 37 | 38 |
    39 | 40 | 41 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /Naughty Submit Button/script.js: -------------------------------------------------------------------------------- 1 | /* 2 | /^[a-zA-Z][a-zA-Z0-9]{3,32}/gi 3 | /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/gm 4 | */ 5 | let usernameRef = document.getElementById("username"); 6 | let passwordRef = document.getElementById("password"); 7 | let submitBtn = document.getElementById("submit"); 8 | let messageRef = document.getElementById("message-ref"); 9 | 10 | let isUsernameValid = () => { 11 | /* Username should be contain more than 3 characters. Should begin with alphabetic character Can contain numbers */ 12 | const usernameRegex = /^[a-zA-Z][a-zA-Z0-9]{3,32}/gi; 13 | return usernameRegex.test(usernameRef.value); 14 | }; 15 | 16 | let isPasswordValid = () => { 17 | /* Password should be atleast 8 characters long. Should contain atleast 1 number, 1 special symbol , 1 lower case and 1 upper case */ 18 | const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/gm; 19 | return passwordRegex.test(passwordRef.value); 20 | }; 21 | 22 | usernameRef.addEventListener("input", () => { 23 | if (!isUsernameValid()) { 24 | messageRef.style.visibility = "hidden"; 25 | usernameRef.style.cssText = 26 | "border-color: #fe2e2e; background-color: #ffc2c2"; 27 | } else { 28 | usernameRef.style.cssText = 29 | "border-color: #34bd34; background-color: #c2ffc2"; 30 | } 31 | }); 32 | 33 | passwordRef.addEventListener("input", () => { 34 | if (!isPasswordValid()) { 35 | messageRef.style.visibility = "hidden"; 36 | passwordRef.style.cssText = 37 | "border-color: #fe2e2e; background-color: #ffc2c2"; 38 | } else { 39 | passwordRef.style.cssText = 40 | "border-color: #34bd34; background-color: #c2ffc2"; 41 | } 42 | }); 43 | 44 | submitBtn.addEventListener("mouseover", () => { 45 | //If either password or username is invalid then do this.. 46 | if (!isUsernameValid() || !isPasswordValid()) { 47 | //Get the current position of submit btn 48 | let containerRect = document 49 | .querySelector(".container") 50 | .getBoundingClientRect(); 51 | let submitRect = submitBtn.getBoundingClientRect(); 52 | let offset = submitRect.left - containerRect.left; 53 | console.log(offset); 54 | //If the button is on the left hand side.. move it to the the right hand side 55 | if (offset <= 100) { 56 | submitBtn.style.transform = "translateX(16.25em)"; 57 | } 58 | //Vice versa 59 | else { 60 | submitBtn.style.transform = "translateX(0)"; 61 | } 62 | } 63 | }); 64 | submitBtn.addEventListener("click", () => { 65 | messageRef.style.visibility = "visible"; 66 | }); -------------------------------------------------------------------------------- /BubbleNavbar/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #c9dfbb; 3 | width: 100vw; 4 | height: 100vh; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | margin: 0; 9 | overflow: hidden; 10 | } 11 | 12 | #navbarContainer { 13 | width: 400px; 14 | min-width: 400px; 15 | height: 70vh; 16 | background-color: #fd8763; 17 | border-radius: 20px; 18 | display: flex; 19 | justify-content: flex-end; 20 | flex-direction: column; 21 | overflow: hidden; 22 | position: relative; 23 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); 24 | } 25 | 26 | #navbar { 27 | width: 100%; 28 | height: 60px; 29 | background-color: #ffffff; 30 | position: absolute; 31 | } 32 | 33 | #bubbleWrapper { 34 | position: absolute; 35 | display: flex; 36 | justify-content: space-around; 37 | width: 100%; 38 | bottom: 25px; 39 | } 40 | 41 | .bubble { 42 | background-color: #fff; 43 | width: 50px; 44 | height: 50px; 45 | bottom: 85px; 46 | border-radius: 50%; 47 | z-index: 1; 48 | transform: translateY(120%); 49 | display: flex; 50 | justify-content: center; 51 | align-items: center; 52 | } 53 | 54 | .icon { 55 | opacity: 0; 56 | } 57 | 58 | #bubble1 { 59 | transform: translateY(0%); 60 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 61 | } 62 | #bubble1 > span { 63 | opacity: 0.7; 64 | } 65 | 66 | #bgWrapper { 67 | filter: url(#goo); 68 | width: 100%; 69 | height: 100px; 70 | position: absolute; 71 | bottom: 60px; 72 | } 73 | 74 | #bg { 75 | background-color: #f5af46; 76 | width: 120%; 77 | height: 100%; 78 | margin-left: -10%; 79 | } 80 | 81 | #bgBubble { 82 | position: absolute; 83 | background-color: #eaad52; 84 | width: 70px; 85 | height: 70px; 86 | border-radius: 50%; 87 | bottom: -50px; 88 | left: 50px; 89 | transform: translateX(-50%); 90 | } 91 | 92 | #menuWrapper { 93 | position: absolute; 94 | width: 100%; 95 | display: flex; 96 | justify-content: space-around; 97 | } 98 | 99 | .menuElement { 100 | opacity: 0.4; 101 | transform: translateY(100%); 102 | cursor: pointer; 103 | } 104 | .menuElement:hover { 105 | opacity: 0.5; 106 | } 107 | 108 | #contentWrapper { 109 | position: absolute; 110 | top: 50%; 111 | width: 100%; 112 | transform: translateY(-50%); 113 | display: flex; 114 | justify-content: center; 115 | align-items: center; 116 | } 117 | #contentWrapper h2 { 118 | color: #fff; 119 | font-family: sans-serif; 120 | font-weight: 400; 121 | } 122 | 123 | .content { 124 | display: none; 125 | opacity: 0; 126 | } -------------------------------------------------------------------------------- /CSS-filter-cards/style.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | --background-dark: #2d3548; 3 | --text-light: rgba(255,255,255,0.6); 4 | --text-lighter: rgba(255,255,255,0.9); 5 | --spacing-s: 8px; 6 | --spacing-m: 16px; 7 | --spacing-l: 24px; 8 | --spacing-xl: 32px; 9 | --spacing-xxl: 64px; 10 | --width-container: 1200px; 11 | } 12 | 13 | *{ 14 | border: 0; 15 | margin: 0; 16 | padding: 0; 17 | box-sizing: border-box; 18 | } 19 | 20 | html{ 21 | height: 100%; 22 | font-family: 'Montserrat', sans-serif; 23 | font-size: 14px; 24 | } 25 | 26 | body{ 27 | height: 100%; 28 | } 29 | 30 | .hero-section{ 31 | align-items: flex-start; 32 | background-image: linear-gradient(15deg, #0f4667 0%, #2a6973 150%); 33 | display: flex; 34 | min-height: 100%; 35 | justify-content: center; 36 | padding: var(--spacing-xxl) var(--spacing-l); 37 | } 38 | 39 | .card-grid{ 40 | display: grid; 41 | grid-template-columns: repeat(1, 1fr); 42 | grid-column-gap: var(--spacing-l); 43 | grid-row-gap: var(--spacing-l); 44 | max-width: var(--width-container); 45 | width: 100%; 46 | } 47 | 48 | @media(min-width: 540px){ 49 | .card-grid{ 50 | grid-template-columns: repeat(2, 1fr); 51 | } 52 | } 53 | 54 | @media(min-width: 960px){ 55 | .card-grid{ 56 | grid-template-columns: repeat(4, 1fr); 57 | } 58 | } 59 | 60 | .card{ 61 | list-style: none; 62 | position: relative; 63 | } 64 | 65 | .card:before{ 66 | content: ''; 67 | display: block; 68 | padding-bottom: 150%; 69 | width: 100%; 70 | } 71 | 72 | .card__background{ 73 | background-size: cover; 74 | background-position: center; 75 | border-radius: var(--spacing-l); 76 | bottom: 0; 77 | filter: brightness(0.75) saturate(1.2) contrast(0.85); 78 | left: 0; 79 | position: absolute; 80 | right: 0; 81 | top: 0; 82 | transform-origin: center; 83 | trsnsform: scale(1) translateZ(0); 84 | transition: 85 | filter 200ms linear, 86 | transform 200ms linear; 87 | } 88 | 89 | .card:hover .card__background{ 90 | transform: scale(1.05) translateZ(0); 91 | } 92 | 93 | .card-grid:hover > .card:not(:hover) .card__background{ 94 | filter: brightness(0.5) saturate(0) contrast(1.2) blur(20px); 95 | } 96 | 97 | .card__content{ 98 | left: 0; 99 | padding: var(--spacing-l); 100 | position: absolute; 101 | top: 0; 102 | } 103 | 104 | .card__category{ 105 | color: var(--text-light); 106 | font-size: 0.9rem; 107 | margin-bottom: var(--spacing-s); 108 | text-transform: uppercase; 109 | } 110 | 111 | .card__heading{ 112 | color: var(--text-lighter); 113 | font-size: 1.9rem; 114 | text-shadow: 2px 2px 20px rgba(0,0,0,0.2); 115 | line-height: 1.4; 116 | word-spacing: 100vw; 117 | } -------------------------------------------------------------------------------- /Text morph/script.js: -------------------------------------------------------------------------------- 1 | /* 2 | This effect cleverly utilizes SVG filters to create a "Morphing Text" effect. 3 | Essentially, it layers 2 text elements on top of each other, and blurs them depending on which text element should be more visible. 4 | Once the blurring is applied, both texts are fed through a threshold filter together, which produces the "gooey" effect. 5 | Check the CSS - Comment the #container rule's filter out to see how the blurring works! 6 | */ 7 | 8 | const elts = { 9 | text1: document.getElementById("text1"), 10 | text2: document.getElementById("text2") }; 11 | 12 | 13 | // The strings to morph between. You can change these to anything you want! 14 | const texts = [ 15 | "Learn", 16 | "how", 17 | "to", 18 | "create", 19 | "this", 20 | "effect?", 21 | "See the code below👇", 22 | ]; 23 | 24 | 25 | // Controls the speed of morphing. 26 | const morphTime = 0.65; 27 | const cooldownTime = 0.35; 28 | 29 | let textIndex = texts.length - 1; 30 | let time = new Date(); 31 | let morph = 0; 32 | let cooldown = cooldownTime; 33 | 34 | elts.text1.textContent = texts[textIndex % texts.length]; 35 | elts.text2.textContent = texts[(textIndex + 1) % texts.length]; 36 | 37 | function doMorph() { 38 | morph -= cooldown; 39 | cooldown = 0; 40 | 41 | let fraction = morph / morphTime; 42 | 43 | if (fraction > 1) { 44 | cooldown = cooldownTime; 45 | fraction = 1; 46 | } 47 | 48 | setMorph(fraction); 49 | } 50 | 51 | // A lot of the magic happens here, this is what applies the blur filter to the text. 52 | function setMorph(fraction) { 53 | // fraction = Math.cos(fraction * Math.PI) / -2 + .5; 54 | 55 | elts.text2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`; 56 | elts.text2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`; 57 | 58 | fraction = 1 - fraction; 59 | elts.text1.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`; 60 | elts.text1.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`; 61 | 62 | elts.text1.textContent = texts[textIndex % texts.length]; 63 | elts.text2.textContent = texts[(textIndex + 1) % texts.length]; 64 | } 65 | 66 | function doCooldown() { 67 | morph = 0; 68 | 69 | elts.text2.style.filter = ""; 70 | elts.text2.style.opacity = "100%"; 71 | 72 | elts.text1.style.filter = ""; 73 | elts.text1.style.opacity = "0%"; 74 | } 75 | 76 | // Animation loop, which is called every frame. 77 | function animate() { 78 | requestAnimationFrame(animate); 79 | 80 | let newTime = new Date(); 81 | let shouldIncrementIndex = cooldown > 0; 82 | let dt = (newTime - time) / 1000; 83 | time = newTime; 84 | 85 | cooldown -= dt; 86 | 87 | if (cooldown <= 0) { 88 | if (shouldIncrementIndex) { 89 | textIndex++; 90 | } 91 | 92 | doMorph(); 93 | } else { 94 | doCooldown(); 95 | } 96 | } 97 | 98 | // Start the animation. 99 | animate(); -------------------------------------------------------------------------------- /Download_animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Download progress animation 6 | 7 | 8 | 9 | 10 | 11 | 12 | 30 | 31 | 32 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /Jello-animated-tab-bar/script.js: -------------------------------------------------------------------------------- 1 | // resources in description 2 | const mainTabs = document.querySelector(".main-tabs"); 3 | const mainSliderCircle = document.querySelector(".main-slider-circle"); 4 | const roundButtons = document.querySelectorAll(".round-button"); 5 | 6 | const colors = { 7 | blue: { 8 | 50: { 9 | value: "#e3f2fd" 10 | }, 11 | 100: { 12 | value: "#bbdefb" 13 | } 14 | }, 15 | green: { 16 | 50: { 17 | value: "#e8f5e9" 18 | }, 19 | 100: { 20 | value: "#c8e6c9" 21 | } 22 | }, 23 | purple: { 24 | 50: { 25 | value: "#f3e5f5" 26 | }, 27 | 100: { 28 | value: "#e1bee7" 29 | } 30 | }, 31 | orange: { 32 | 50: { 33 | value: "#ffe0b2" 34 | }, 35 | 100: { 36 | value: "#ffe0b2" 37 | } 38 | }, 39 | red: { 40 | 50: { 41 | value: "#ffebee" 42 | }, 43 | 100: { 44 | value: "#ffcdd2" 45 | } 46 | } 47 | }; 48 | 49 | const getColor = (color, variant) => { 50 | return colors[color][variant].value; 51 | }; 52 | 53 | const handleActiveTab = (tabs, event, className) => { 54 | tabs.forEach((tab) => { 55 | tab.classList.remove(className); 56 | }); 57 | 58 | if (!event.target.classList.contains(className)) { 59 | event.target.classList.add(className); 60 | } 61 | }; 62 | 63 | mainTabs.addEventListener("click", (event) => { 64 | const root = document.documentElement; 65 | const targetColor = event.target.dataset.color; 66 | const targetTranslateValue = event.target.dataset.translateValue; 67 | 68 | if (event.target.classList.contains("round-button")) { 69 | mainSliderCircle.classList.remove("animate-jello"); 70 | void mainSliderCircle.offsetWidth; 71 | mainSliderCircle.classList.add("animate-jello"); 72 | 73 | root.style.setProperty("--translate-main-slider", targetTranslateValue); 74 | root.style.setProperty("--main-slider-color", getColor(targetColor, 50)); 75 | root.style.setProperty("--background-color", getColor(targetColor, 100)); 76 | 77 | handleActiveTab(roundButtons, event, "active"); 78 | 79 | if (!event.target.classList.contains("gallery")) { 80 | root.style.setProperty("--filters-container-height", "0"); 81 | root.style.setProperty("--filters-wrapper-opacity", "0"); 82 | } else { 83 | root.style.setProperty("--filters-container-height", "3.8rem"); 84 | root.style.setProperty("--filters-wrapper-opacity", "1"); 85 | } 86 | } 87 | }); 88 | 89 | const filterTabs = document.querySelector(".filter-tabs"); 90 | const filterButtons = document.querySelectorAll(".filter-button"); 91 | 92 | filterTabs.addEventListener("click", (event) => { 93 | const root = document.documentElement; 94 | const targetTranslateValue = event.target.dataset.translateValue; 95 | 96 | if (event.target.classList.contains("filter-button")) { 97 | root.style.setProperty("--translate-filters-slider", targetTranslateValue); 98 | handleActiveTab(filterButtons, event, "filter-active"); 99 | } 100 | }); -------------------------------------------------------------------------------- /Parallax Depth Cards/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 40px 0; 3 | font-family: "Raleway"; 4 | font-size: 14px; 5 | font-weight: 500; 6 | background-color: #9b6955; 7 | -webkit-font-smoothing: antialiased; 8 | } 9 | 10 | .title { 11 | font-family: "Raleway"; 12 | font-size: 24px; 13 | font-weight: 700; 14 | color: #44271f; 15 | text-align: center; 16 | } 17 | 18 | p { 19 | line-height: 1.5em; 20 | } 21 | 22 | h1 + p, p + p { 23 | margin-top: 10px; 24 | } 25 | 26 | .container { 27 | padding: 40px 80px; 28 | display: flex; 29 | flex-wrap: wrap; 30 | justify-content: center; 31 | } 32 | 33 | .card-wrap { 34 | margin: 10px; 35 | transform: perspective(800px); 36 | transform-style: preserve-3d; 37 | cursor: pointer; 38 | } 39 | .card-wrap:hover .card-info { 40 | transform: translateY(0); 41 | } 42 | .card-wrap:hover .card-info p { 43 | opacity: 1; 44 | } 45 | .card-wrap:hover .card-info, .card-wrap:hover .card-info p { 46 | transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1); 47 | } 48 | .card-wrap:hover .card-info:after { 49 | transition: 5s cubic-bezier(0.23, 1, 0.32, 1); 50 | opacity: 1; 51 | transform: translateY(0); 52 | } 53 | .card-wrap:hover .card-bg { 54 | transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 5s cubic-bezier(0.23, 1, 0.32, 1); 55 | opacity: 0.8; 56 | } 57 | .card-wrap:hover .card { 58 | transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 2s cubic-bezier(0.23, 1, 0.32, 1); 59 | box-shadow: rgba(255, 255, 255, 0.2) 0 0 40px 5px, white 0 0 0 1px, rgba(0, 0, 0, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px, inset white 0 0 0 6px; 60 | } 61 | 62 | .card { 63 | position: relative; 64 | flex: 0 0 240px; 65 | width: 240px; 66 | height: 320px; 67 | background-color: #644949; 68 | overflow: hidden; 69 | border-radius: 10px; 70 | box-shadow: rgba(0, 0, 0, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px, inset rgba(255, 255, 255, 0.5) 0 0 0 6px; 71 | transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95); 72 | } 73 | 74 | .card-bg { 75 | opacity: 0.5; 76 | position: absolute; 77 | top: -20px; 78 | left: -20px; 79 | width: 100%; 80 | height: 100%; 81 | padding: 20px; 82 | background-repeat: no-repeat; 83 | background-position: center; 84 | background-size: cover; 85 | transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95); 86 | pointer-events: none; 87 | } 88 | 89 | .card-info { 90 | padding: 20px; 91 | position: absolute; 92 | bottom: 0; 93 | color: #fff; 94 | transform: translateY(40%); 95 | transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1); 96 | } 97 | .card-info p { 98 | opacity: 0; 99 | text-shadow: black 0 2px 3px; 100 | transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1); 101 | } 102 | .card-info * { 103 | position: relative; 104 | z-index: 1; 105 | } 106 | .card-info:after { 107 | content: ""; 108 | position: absolute; 109 | top: 0; 110 | left: 0; 111 | z-index: 0; 112 | width: 100%; 113 | height: 100%; 114 | background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.6) 100%); 115 | background-blend-mode: overlay; 116 | opacity: 0; 117 | transform: translateY(100%); 118 | transition: 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95); 119 | } 120 | 121 | .card-info h1 { 122 | font-family: "Playfair Display"; 123 | font-size: 36px; 124 | font-weight: 700; 125 | text-shadow: rgba(0, 0, 0, 0.5) 0 10px 10px; 126 | } -------------------------------------------------------------------------------- /Login-form -animation/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | } 4 | body { 5 | margin:0; 6 | padding:0; 7 | font-family: sans-serif; 8 | background: linear-gradient(#141e30, #243b55); 9 | } 10 | 11 | .login-box { 12 | position: absolute; 13 | top: 50%; 14 | left: 50%; 15 | width: 400px; 16 | padding: 40px; 17 | transform: translate(-50%, -50%); 18 | background: rgba(0,0,0,.5); 19 | box-sizing: border-box; 20 | box-shadow: 0 15px 25px rgba(0,0,0,.6); 21 | border-radius: 10px; 22 | } 23 | 24 | .login-box h2 { 25 | margin: 0 0 30px; 26 | padding: 0; 27 | color: #fff; 28 | text-align: center; 29 | } 30 | 31 | .login-box .user-box { 32 | position: relative; 33 | } 34 | 35 | .login-box .user-box input { 36 | width: 100%; 37 | padding: 10px 0; 38 | font-size: 16px; 39 | color: #fff; 40 | margin-bottom: 30px; 41 | border: none; 42 | border-bottom: 1px solid #fff; 43 | outline: none; 44 | background: transparent; 45 | } 46 | .login-box .user-box label { 47 | position: absolute; 48 | top:0; 49 | left: 0; 50 | padding: 10px 0; 51 | font-size: 16px; 52 | color: #fff; 53 | pointer-events: none; 54 | transition: .5s; 55 | } 56 | 57 | .login-box .user-box input:focus ~ label, 58 | .login-box .user-box input:valid ~ label { 59 | top: -20px; 60 | left: 0; 61 | color: #03e9f4; 62 | font-size: 12px; 63 | } 64 | 65 | .login-box form a { 66 | position: relative; 67 | display: inline-block; 68 | padding: 10px 20px; 69 | color: #03e9f4; 70 | font-size: 16px; 71 | text-decoration: none; 72 | text-transform: uppercase; 73 | overflow: hidden; 74 | transition: .5s; 75 | margin-top: 40px; 76 | letter-spacing: 4px 77 | } 78 | 79 | .login-box a:hover { 80 | background: #03e9f4; 81 | color: #fff; 82 | border-radius: 5px; 83 | box-shadow: 0 0 5px #03e9f4, 84 | 0 0 25px #03e9f4, 85 | 0 0 50px #03e9f4, 86 | 0 0 100px #03e9f4; 87 | } 88 | 89 | .login-box a span { 90 | position: absolute; 91 | display: block; 92 | } 93 | 94 | .login-box a span:nth-child(1) { 95 | top: 0; 96 | left: -100%; 97 | width: 100%; 98 | height: 2px; 99 | background: linear-gradient(90deg, transparent, #03e9f4); 100 | animation: btn-anim1 1s linear infinite; 101 | } 102 | 103 | @keyframes btn-anim1 { 104 | 0% { 105 | left: -100%; 106 | } 107 | 50%,100% { 108 | left: 100%; 109 | } 110 | } 111 | 112 | .login-box a span:nth-child(2) { 113 | top: -100%; 114 | right: 0; 115 | width: 2px; 116 | height: 100%; 117 | background: linear-gradient(180deg, transparent, #03e9f4); 118 | animation: btn-anim2 1s linear infinite; 119 | animation-delay: .25s 120 | } 121 | 122 | @keyframes btn-anim2 { 123 | 0% { 124 | top: -100%; 125 | } 126 | 50%,100% { 127 | top: 100%; 128 | } 129 | } 130 | 131 | .login-box a span:nth-child(3) { 132 | bottom: 0; 133 | right: -100%; 134 | width: 100%; 135 | height: 2px; 136 | background: linear-gradient(270deg, transparent, #03e9f4); 137 | animation: btn-anim3 1s linear infinite; 138 | animation-delay: .5s 139 | } 140 | 141 | @keyframes btn-anim3 { 142 | 0% { 143 | right: -100%; 144 | } 145 | 50%,100% { 146 | right: 100%; 147 | } 148 | } 149 | 150 | .login-box a span:nth-child(4) { 151 | bottom: -100%; 152 | left: 0; 153 | width: 2px; 154 | height: 100%; 155 | background: linear-gradient(360deg, transparent, #03e9f4); 156 | animation: btn-anim4 1s linear infinite; 157 | animation-delay: .75s 158 | } 159 | 160 | @keyframes btn-anim4 { 161 | 0% { 162 | bottom: -100%; 163 | } 164 | 50%,100% { 165 | bottom: 100%; 166 | } 167 | } -------------------------------------------------------------------------------- /Bycyle preloader/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | border: 0; 3 | box-sizing: border-box; 4 | margin: 0; 5 | padding: 0; 6 | } 7 | :root { 8 | --hue: 564; 9 | --bg: hsl(var(--hue),90%,90%); 10 | --fg: hsl(var(--hue),90%,10%); 11 | --primary: hsl(var(--hue),90%,50%); 12 | --trans-dur: 0.3s; 13 | font-size: calc(16px + (32 - 16) * (100vw - 320px) / (2560 - 320)); 14 | } 15 | body { 16 | background-color: var(--bg); 17 | color: var(--fg); 18 | display: flex; 19 | font: 1em/1.5 sans-serif; 20 | height: 100vh; 21 | transition: 22 | background-color var(--trans-dur), 23 | color var(--trans-dur); 24 | } 25 | .bike { 26 | display: block; 27 | margin: auto; 28 | width: 16em; 29 | height: auto; 30 | } 31 | .bike__body, 32 | .bike__front, 33 | .bike__handlebars, 34 | .bike__pedals, 35 | .bike__pedals-spin, 36 | .bike__seat, 37 | .bike__spokes, 38 | .bike__spokes-spin, 39 | .bike__tire { 40 | animation: bikeBody 3s ease-in-out infinite; 41 | stroke: var(--primary); 42 | transition: stroke var(--trans-dur); 43 | } 44 | .bike__front { 45 | animation-name: bikeFront; 46 | } 47 | .bike__handlebars { 48 | animation-name: bikeHandlebars; 49 | } 50 | .bike__pedals { 51 | animation-name: bikePedals; 52 | } 53 | .bike__pedals-spin { 54 | animation-name: bikePedalsSpin; 55 | } 56 | .bike__seat { 57 | animation-name: bikeSeat; 58 | } 59 | .bike__spokes, 60 | .bike__tire { 61 | stroke: currentColor; 62 | } 63 | .bike__spokes { 64 | animation-name: bikeSpokes; 65 | } 66 | .bike__spokes-spin { 67 | animation-name: bikeSpokesSpin; 68 | } 69 | .bike__tire { 70 | animation-name: bikeTire; 71 | } 72 | 73 | /* Dark theme */ 74 | @media (prefers-color-scheme: dark) { 75 | :root { 76 | --bg: hsl(var(--hue),90%,10%); 77 | --fg: hsl(var(--hue),90%,90%); 78 | } 79 | } 80 | 81 | /* Animations */ 82 | @keyframes bikeBody { 83 | from { stroke-dashoffset: 79; } 84 | 33%, 85 | 67% { stroke-dashoffset: 0; } 86 | to { stroke-dashoffset: -79; } 87 | } 88 | @keyframes bikeFront { 89 | from { stroke-dashoffset: 19; } 90 | 33%, 91 | 67% { stroke-dashoffset: 0; } 92 | to { stroke-dashoffset: -19; } 93 | } 94 | @keyframes bikeHandlebars { 95 | from { stroke-dashoffset: 10; } 96 | 33%, 97 | 67% { stroke-dashoffset: 0; } 98 | to { stroke-dashoffset: -10; } 99 | } 100 | @keyframes bikePedals { 101 | from { 102 | animation-timing-function: ease-in; 103 | stroke-dashoffset: -25.133; 104 | } 105 | 33%, 106 | 67% { 107 | animation-timing-function: ease-out; 108 | stroke-dashoffset: -21.991; 109 | } 110 | to { 111 | stroke-dashoffset: -25.133; 112 | } 113 | } 114 | @keyframes bikePedalsSpin { 115 | from { transform: rotate(0.1875turn); } 116 | to { transform: rotate(3.1875turn); } 117 | } 118 | @keyframes bikeSeat { 119 | from { stroke-dashoffset: 5; } 120 | 33%, 121 | 67% { stroke-dashoffset: 0; } 122 | to { stroke-dashoffset: -5; } 123 | } 124 | @keyframes bikeSpokes { 125 | from { 126 | animation-timing-function: ease-in; 127 | stroke-dashoffset: -31.416; 128 | } 129 | 33%, 130 | 67% { 131 | animation-timing-function: ease-out; 132 | stroke-dashoffset: -23.562; 133 | } 134 | to { 135 | stroke-dashoffset: -31.416; 136 | } 137 | } 138 | @keyframes bikeSpokesSpin { 139 | from { transform: rotate(0); } 140 | to { transform: rotate(3turn); } 141 | } 142 | @keyframes bikeTire { 143 | from { 144 | animation-timing-function: ease-in; 145 | stroke-dashoffset: 56.549; 146 | transform: rotate(0); 147 | } 148 | 33% { 149 | stroke-dashoffset: 0; 150 | transform: rotate(0.33turn); 151 | } 152 | 67% { 153 | animation-timing-function: ease-out; 154 | stroke-dashoffset: 0; 155 | transform: rotate(0.67turn); 156 | } 157 | to { 158 | stroke-dashoffset: -56.549; 159 | transform: rotate(1turn); 160 | } 161 | } -------------------------------------------------------------------------------- /Fluid Toogle/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | 5 | } 6 | 7 | body { 8 | display: grid; 9 | height: 100vh; 10 | } 11 | h1 { 12 | align-self: center; 13 | justify-self:center; 14 | } 15 | .container { 16 | align-self: center; 17 | justify-self:center; 18 | -webkit-filter: contrast(20); 19 | filter: contrast(20); 20 | background: rgb(0, 0, 0); 21 | border: 2px solid transparent; 22 | box-shadow: 5px 5px 5px rgba(0,0,0,.5); 23 | height: 135px; 24 | width: 325px; 25 | border-radius: 500px; 26 | overflow: hidden; 27 | transition: all ease 500ms; 28 | } 29 | 30 | .container:hover { 31 | box-shadow: 5px 5px 2.5px rgba(0,0,0,.5); 32 | } 33 | 34 | .label { 35 | position: relative; 36 | height: 100%; 37 | width: 100%; 38 | display: grid; 39 | cursor: pointer; 40 | } 41 | 42 | #toggle-btn { 43 | display: none; 44 | } 45 | 46 | .drop { 47 | position: absolute; 48 | left: 10px; 49 | top: 50%; 50 | -webkit-transform:translateY(-50%) scale(1); 51 | -ms-transform:translateY(-50%) scale(1); 52 | transform: translateY(-50%) scale(1); 53 | height: 110px; 54 | width: 110px; 55 | border-radius: 50%; 56 | -webkit-filter: blur(10px); 57 | filter: blur(10px); 58 | background: #fff; 59 | transition: all ease 2750ms; 60 | opacity: 1; 61 | } 62 | .grow-rgba { 63 | position: absolute; 64 | right: 270px; 65 | top: 50%; 66 | -webkit-transform:translateY(-50%) scale(0); 67 | -ms-transform:translateY(-50%) scale(0); 68 | transform: translateY(-50%) scale(0); 69 | height: 110px; 70 | width: 110px; 71 | border-radius: 50%; 72 | -webkit-filter: blur(10px); 73 | filter: blur(10px); 74 | background: #fff; 75 | cursor: pointer; 76 | transition: all ease 3900ms; 77 | transition-delay: 200ms; 78 | opacity:0; 79 | } 80 | .droplet { 81 | position: absolute; 82 | left: 50px; 83 | top: 50%; 84 | -webkit-transform:translateY(-50%); 85 | -ms-transform:translateY(-50%); 86 | transform: translateY(-50%); 87 | height: 50px; 88 | width: 50px; 89 | border-radius: 50%; 90 | -webkit-filter: blur(10px); 91 | filter: blur(10px); 92 | transition: all ease 1250ms; 93 | background:#fff; 94 | } 95 | 96 | /* TOGGLE FEATURES-ANIMATIONS */ 97 | #toggle-btn:checked + .grow { 98 | -webkit-transform:translateY(-50%) scale(0); 99 | -ms-transform:translateY(-50%) scale(0); 100 | transform: translateY(-50%) scale(0); 101 | opacity: 0; 102 | transition: all ease 2000ms; 103 | } 104 | 105 | #toggle-btn:checked ~ .grow-rgba { 106 | right: 10px; 107 | height: 120px; 108 | width: 120px; 109 | -webkit-transform:translateY(-50%) scale(1); 110 | -ms-transform:translateY(-50%) scale(1); 111 | transform: translateY(-50%) scale(1); 112 | opacity: 1; 113 | transition: all ease 2000ms; 114 | } 115 | 116 | #toggle-btn:checked ~ .droplet { 117 | left: 215px; 118 | height: 90px; 119 | width: 90px; 120 | background: linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%), linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%), linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%); 121 | z-index: 999; 122 | animation-name: rotate; 123 | animation-duration: 2500ms; 124 | animation-iteration-count: infinite; 125 | animation-timing-function: linear; 126 | } 127 | 128 | @keyframes rotate { 129 | 0% { 130 | top: 50%; 131 | -webkit-transform:translateY(-50%) rotate(0deg); 132 | -ms-transform:translateY(-50%) rotate(0deg); 133 | transform: translateY(-50%) rotate(0deg); 134 | } 135 | 100% { 136 | top: 50%; 137 | -webkit-transform:translateY(-50%) rotate(360deg); 138 | -ms-transform:translateY(-50%) rotate(360deg); 139 | transform:translateY(-50%) rotate(360deg); 140 | } 141 | } -------------------------------------------------------------------------------- /Aurora Text/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"); 2 | 3 | :root { 4 | --bg: #000000; 5 | --clr-1: #00c2ff; 6 | --clr-2: #33ff8c; 7 | --clr-3: #ffc640; 8 | --clr-4: #e54cff; 9 | 10 | --blur: 1rem; 11 | --fs: clamp(3rem, 8vw, 7rem); 12 | --ls: clamp(-1.75px, -0.25vw, -3.5px); 13 | } 14 | 15 | body { 16 | min-height: 100vh; 17 | display: grid; 18 | place-items: center; 19 | background-color: var(--bg); 20 | color: #fff; 21 | font-family: "Inter", "DM Sans", Arial, sans-serif; 22 | } 23 | 24 | *, 25 | *::before, 26 | *::after { 27 | font-family: inherit; 28 | box-sizing: border-box; 29 | } 30 | 31 | .content { 32 | text-align: center; 33 | } 34 | 35 | .title { 36 | font-size: var(--fs); 37 | font-weight: 800; 38 | letter-spacing: var(--ls); 39 | position: relative; 40 | overflow: hidden; 41 | background: var(--bg); 42 | margin: 0; 43 | } 44 | 45 | .subtitle { 46 | } 47 | 48 | .aurora { 49 | position: absolute; 50 | top: 0; 51 | left: 0; 52 | width: 100%; 53 | height: 100%; 54 | z-index: 2; 55 | mix-blend-mode: darken; 56 | pointer-events: none; 57 | } 58 | 59 | .aurora__item { 60 | overflow: hidden; 61 | position: absolute; 62 | width: 60vw; 63 | height: 60vw; 64 | background-color: var(--clr-1); 65 | border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%; 66 | filter: blur(var(--blur)); 67 | mix-blend-mode: overlay; 68 | } 69 | 70 | .aurora__item:nth-of-type(1) { 71 | top: -50%; 72 | animation: aurora-border 6s ease-in-out infinite, 73 | aurora-1 12s ease-in-out infinite alternate; 74 | } 75 | 76 | .aurora__item:nth-of-type(2) { 77 | background-color: var(--clr-3); 78 | right: 0; 79 | top: 0; 80 | animation: aurora-border 6s ease-in-out infinite, 81 | aurora-2 12s ease-in-out infinite alternate; 82 | } 83 | 84 | .aurora__item:nth-of-type(3) { 85 | background-color: var(--clr-2); 86 | left: 0; 87 | bottom: 0; 88 | animation: aurora-border 6s ease-in-out infinite, 89 | aurora-3 8s ease-in-out infinite alternate; 90 | } 91 | 92 | .aurora__item:nth-of-type(4) { 93 | background-color: var(--clr-4); 94 | right: 0; 95 | bottom: -50%; 96 | animation: aurora-border 6s ease-in-out infinite, 97 | aurora-4 24s ease-in-out infinite alternate; 98 | } 99 | 100 | @keyframes aurora-1 { 101 | 0% { 102 | top: 0; 103 | right: 0; 104 | } 105 | 106 | 50% { 107 | top: 100%; 108 | right: 75%; 109 | } 110 | 111 | 75% { 112 | top: 100%; 113 | right: 25%; 114 | } 115 | 116 | 100% { 117 | top: 0; 118 | right: 0; 119 | } 120 | } 121 | 122 | @keyframes aurora-2 { 123 | 0% { 124 | top: -50%; 125 | left: 0%; 126 | } 127 | 128 | 60% { 129 | top: 100%; 130 | left: 75%; 131 | } 132 | 133 | 85% { 134 | top: 100%; 135 | left: 25%; 136 | } 137 | 138 | 100% { 139 | top: -50%; 140 | left: 0%; 141 | } 142 | } 143 | 144 | @keyframes aurora-3 { 145 | 0% { 146 | bottom: 0; 147 | left: 0; 148 | } 149 | 150 | 40% { 151 | bottom: 100%; 152 | left: 75%; 153 | } 154 | 155 | 65% { 156 | bottom: 40%; 157 | left: 50%; 158 | } 159 | 160 | 100% { 161 | bottom: 0; 162 | left: 0; 163 | } 164 | } 165 | 166 | @keyframes aurora-4 { 167 | 0% { 168 | bottom: -50%; 169 | right: 0; 170 | } 171 | 172 | 50% { 173 | bottom: 0%; 174 | right: 40%; 175 | } 176 | 177 | 90% { 178 | bottom: 50%; 179 | right: 25%; 180 | } 181 | 182 | 100% { 183 | bottom: -50%; 184 | right: 0; 185 | } 186 | } 187 | 188 | @keyframes aurora-border { 189 | 0% { 190 | border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%; 191 | } 192 | 193 | 25% { 194 | border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%; 195 | } 196 | 197 | 50% { 198 | border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%; 199 | } 200 | 201 | 75% { 202 | border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%; 203 | } 204 | 205 | 100% { 206 | border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%; 207 | } 208 | } -------------------------------------------------------------------------------- /Progress bar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pure CSS Progress 6 | 7 | Pure CSS Progress Bar 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
    16 |
    17 |

    Pure CSS Progress Bar

    18 | 19 |
    20 |
    21 |
    22 | 23 | 24 | 25 |
    26 |
    27 |
    28 |
    29 |
    30 |
    31 |
    32 |
    33 |
    34 |
    35 |
    36 |
    37 |
    38 |
    39 |
    40 |
    41 |
    42 |
    43 |

    switch-color

    44 | 49 |
    50 |
    51 | 52 | 53 | 54 | 55 |
    56 |
    57 |
    58 |
    59 |
    60 |
    61 |
    62 |
    63 |
    64 |
    65 |
    66 |
    67 |
    68 |
    69 |
    70 |
    71 |
    72 |
    73 |

    Try another position :)

    74 | 80 |
    81 |
    82 | 83 | 84 | 85 | 86 | 87 | 88 |
    89 |
    90 |
    91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /Mode switch toggle/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | border: 0; 3 | box-sizing: border-box; 4 | margin: 0; 5 | padding: 0; 6 | } 7 | :root { 8 | --hue: 223; 9 | --bg: hsl(var(--hue),10%,90%); 10 | --fg: hsl(var(--hue),10%,10%); 11 | --primary: hsl(var(--hue),90%,50%); 12 | --trans-dur: 0.3s; 13 | --trans-timing: cubic-bezier(0.76,0.05,0.24,0.95); 14 | --trans-timing-in: cubic-bezier(0.76,0.05,0.86,0.06); 15 | --trans-timing-out: cubic-bezier(0.05,0.76,0.06,0.86); 16 | font-size: calc(40px + (80 - 40) * (100vw - 320px) / (2560 - 320)); 17 | } 18 | body, 19 | input { 20 | color: var(--fg); 21 | font: 1em/1.5 sans-serif; 22 | } 23 | body { 24 | background-color: var(--bg); 25 | display: flex; 26 | height: 100vh; 27 | transition: 28 | background-color var(--trans-dur), 29 | color var(--trans-dur); 30 | } 31 | body:has(.switch__input:checked) { 32 | background-color: var(--fg); 33 | color: var(--bg); 34 | } 35 | .switch { 36 | margin: auto; 37 | position: relative; 38 | } 39 | .switch__icon, 40 | .switch__input { 41 | display: block; 42 | } 43 | .switch__icon { 44 | position: absolute; 45 | top: 0.375em; 46 | right: 0.375em; 47 | width: 0.75em; 48 | height: 0.75em; 49 | transition: 50 | opacity calc(var(--trans-dur) / 2), 51 | transform calc(var(--trans-dur) / 2); 52 | } 53 | .switch__icon polyline { 54 | transition: stroke-dashoffset calc(var(--trans-dur) / 2); 55 | } 56 | .switch__icon--light, 57 | .switch__icon--light polyline { 58 | transition-delay: calc(var(--trans-dur) / 2); 59 | transition-timing-function: var(--trans-timing-out); 60 | } 61 | .switch__icon--dark { 62 | opacity: 0; 63 | transform: translateX(-0.75em) rotate(30deg) scale(0.75); 64 | transition-timing-function: var(--trans-timing-in); 65 | } 66 | .switch__input { 67 | background-color: hsl(210,90%,70%); 68 | border-radius: 0.75em; 69 | box-shadow: 70 | 0 0 0 0.125em hsla(var(--hue),90%,50%,0), 71 | 0.125em 0.125em 0.25em hsla(var(--hue),90%,10%,0.2); 72 | outline: transparent; 73 | position: relative; 74 | width: 3em; 75 | height: 1.5em; 76 | -webkit-appearance: none; 77 | appearance: none; 78 | -webkit-tap-highlight-color: transparent; 79 | transition: 80 | background-color var(--trans-dur) var(--trans-timing), 81 | box-shadow 0.15s linear; 82 | } 83 | .switch__input:focus-visible { 84 | box-shadow: 85 | 0 0 0 0.125em hsl(var(--hue),90%,50%), 86 | 0.125em 0.125em 0.25em hsla(var(--hue),90%,10%,0.2); 87 | } 88 | .switch__input:before, 89 | .switch__input:after { 90 | content: ""; 91 | display: block; 92 | position: absolute; 93 | } 94 | .switch__input:before { 95 | background-color: hsl(50,90%,50%); 96 | border-radius: inherit; 97 | mask-image: linear-gradient(120deg,hsl(0,0%,0%) 20%,hsla(0,0%,0%,0) 80%); 98 | -webkit-mask-image: linear-gradient(120deg,hsl(0,0%,0%) 20%,hsla(0,0%,0%,0) 80%); 99 | inset: 0; 100 | transition: background-color var(--trans-dur) var(--trans-timing); 101 | } 102 | .switch__input:after { 103 | background-color: hsl(0,0%,100%); 104 | border-radius: 50%; 105 | box-shadow: 0.05em 0.05em 0.05em hsla(var(--hue),90%,10%,0.1); 106 | top: 0.125em; 107 | left: 0.125em; 108 | width: 1.25em; 109 | height: 1.25em; 110 | transition: 111 | background-color var(--trans-dur) var(--trans-timing), 112 | transform var(--trans-dur) var(--trans-timing); 113 | z-index: 1; 114 | } 115 | .switch__input:checked { 116 | background-color: hsl(290,90%,40%); 117 | } 118 | .switch__input:checked:before { 119 | background-color: hsl(220,90%,40%); 120 | } 121 | .switch__input:checked:after { 122 | background-color: hsl(0,0%,0%); 123 | transform: translateX(1.5em); 124 | } 125 | .switch__input:checked ~ .switch__icon--light, 126 | .switch__input:checked ~ .switch__icon--light polyline { 127 | transition-delay: 0s; 128 | transition-timing-function: var(--trans-timing-in); 129 | } 130 | .switch__input:checked ~ .switch__icon--light { 131 | opacity: 0; 132 | transform: translateX(-0.75em) rotate(-30deg) scale(0.75); 133 | } 134 | .switch__input:checked ~ .switch__icon--light polyline { 135 | stroke-dashoffset: 1.5; 136 | } 137 | .switch__input:checked ~ .switch__icon--dark { 138 | opacity: 1; 139 | transform: translateX(-1.5em); 140 | transition-delay: calc(var(--trans-dur) / 2); 141 | transition-timing-function: var(--trans-timing-out); 142 | } 143 | .switch__sr { 144 | overflow: hidden; 145 | position: absolute; 146 | width: 1px; 147 | height: 1px; 148 | } -------------------------------------------------------------------------------- /Jello-animated-tab-bar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Jello Tab Bar (Animated) 7 | 8 | 9 | 10 | 11 | 12 | 13 | 93 | 94 | 95 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /Download_animation/script.js: -------------------------------------------------------------------------------- 1 | const $ = (s, o = document) => o.querySelector(s); 2 | const $$ = (s, o = document) => o.querySelectorAll(s); 3 | 4 | $$('.button').forEach(button => { 5 | 6 | let count = { 7 | number: 0 8 | }, 9 | icon = $('.icon', button), 10 | iconDiv = $('.icon > div', button), 11 | arrow = $('.icon .arrow', button), 12 | countElem = $('span', button), 13 | svgPath = new Proxy({ 14 | y: null, 15 | s: null, 16 | f: null, 17 | l: null 18 | }, { 19 | set(target, key, value) { 20 | target[key] = value; 21 | if(target.y !== null && target.s != null && target.f != null && target.l != null) { 22 | arrow.innerHTML = getPath(target.y, target.f, target.l, target.s, null); 23 | } 24 | return true; 25 | }, 26 | get(target, key) { 27 | return target[key]; 28 | } 29 | }); 30 | 31 | svgPath.y = 30; 32 | svgPath.s = 0; 33 | svgPath.f = 8; 34 | svgPath.l = 32; 35 | 36 | button.addEventListener('click', e => { 37 | if(!button.classList.contains('loading')) { 38 | 39 | if(!button.classList.contains('animation')) { 40 | 41 | button.classList.add('loading', 'animation'); 42 | 43 | gsap.to(svgPath, { 44 | f: 2, 45 | l: 38, 46 | duration: .3, 47 | delay: .15 48 | }); 49 | 50 | gsap.to(svgPath, { 51 | s: .2, 52 | y: 16, 53 | duration: .8, 54 | delay: .15, 55 | ease: Elastic.easeOut.config(1, .4) 56 | }); 57 | 58 | gsap.to(count, { 59 | number: '100', 60 | duration: 3.8, 61 | delay: .8, 62 | onUpdate() { 63 | countElem.innerHTML = Math.round(count.number) + '%'; 64 | } 65 | }); 66 | 67 | setTimeout(() => { 68 | iconDiv.style.setProperty('overflow', 'visible'); 69 | setTimeout(() => { 70 | button.classList.remove('animation'); 71 | }, 600); 72 | }, 4820); 73 | 74 | } 75 | 76 | } else { 77 | 78 | if(!button.classList.contains('animation')) { 79 | 80 | button.classList.add('reset'); 81 | 82 | gsap.to(svgPath, { 83 | f: 8, 84 | l: 32, 85 | duration: .4 86 | }); 87 | 88 | gsap.to(svgPath, { 89 | s: 0, 90 | y: 30, 91 | duration: .4 92 | }); 93 | 94 | setTimeout(() => { 95 | button.classList.remove('loading', 'reset'); 96 | iconDiv.removeAttribute('style'); 97 | }, 400); 98 | 99 | } 100 | 101 | } 102 | e.preventDefault(); 103 | }); 104 | 105 | }); 106 | 107 | function getPoint(point, i, a, smoothing) { 108 | let cp = (current, previous, next, reverse) => { 109 | let p = previous || current, 110 | n = next || current, 111 | o = { 112 | length: Math.sqrt(Math.pow(n[0] - p[0], 2) + Math.pow(n[1] - p[1], 2)), 113 | angle: Math.atan2(n[1] - p[1], n[0] - p[0]) 114 | }, 115 | angle = o.angle + (reverse ? Math.PI : 0), 116 | length = o.length * smoothing; 117 | return [current[0] + Math.cos(angle) * length, current[1] + Math.sin(angle) * length]; 118 | }, 119 | cps = cp(a[i - 1], a[i - 2], point, false), 120 | cpe = cp(point, a[i - 1], a[i + 1], true); 121 | return `C ${cps[0]},${cps[1]} ${cpe[0]},${cpe[1]} ${point[0]},${point[1]}`; 122 | } 123 | 124 | function getPath(update, first, last, smoothing, pointsNew) { 125 | let points = pointsNew ? pointsNew : [ 126 | [first, 16], 127 | [20, update], 128 | [last, 16] 129 | ], 130 | d = points.reduce((acc, point, i, a) => i === 0 ? `M ${point[0]},${point[1]}` : `${acc} ${getPoint(point, i, a, smoothing)}`, ''); 131 | return ``; 132 | } -------------------------------------------------------------------------------- /Social-flip-cards/style.css: -------------------------------------------------------------------------------- 1 | section { 2 | position: absolute; 3 | left: 50%; 4 | top: 50%; 5 | margin: -135px -180px; 6 | width: 360px; 7 | min-height: 270px; 8 | font-size: 35px; 9 | text-align: center; 10 | } 11 | 12 | a { 13 | display: inline-block; 14 | position: relative; 15 | float: left; 16 | width: 80px; 17 | height: 80px; 18 | margin: 5px; 19 | } 20 | 21 | article { 22 | cursor: pointer; 23 | display: block; 24 | position: absolute; 25 | width: 100%; 26 | height: 100%; 27 | background-color: #333; 28 | box-shadow: 0 0 6px -2px #000, 0 0 45px -20px #000; 29 | color: #fff; 30 | line-height: 90px; 31 | transform: perspective(300px) rotateY(0deg); 32 | transition: transform 0.4s linear, background-color 0s linear 0.2s, color 0s linear 0.2s; 33 | } 34 | a:hover article { 35 | transform: perspective(300px) rotateY(180deg); 36 | color: #eee; 37 | transition: transform 0.2s linear, background-color 0s linear 0.1s, color 0s linear 0.1s; 38 | } 39 | a:nth-child(1):hover article { 40 | background-color: #3B5998; 41 | } 42 | a:nth-child(2):hover article { 43 | background-color: #00ACED; 44 | } 45 | a:nth-child(3):hover article { 46 | background-color: #2C4762; 47 | } 48 | a:nth-child(4):hover article { 49 | background-color: #CB2027; 50 | } 51 | a:nth-child(5):hover article { 52 | background-color: #1769FF; 53 | } 54 | a:nth-child(6):hover article { 55 | background-color: #000000; 56 | } 57 | a:nth-child(7):hover article { 58 | background-color: #3399CC; 59 | } 60 | a:nth-child(8):hover article { 61 | background-color: #EA4C89; 62 | } 63 | a:nth-child(9):hover article { 64 | background-color: #3F729B; 65 | } 66 | a:nth-child(10):hover article { 67 | background-color: #FF0084; 68 | } 69 | a:nth-child(11):hover article { 70 | background-color: #F26300; 71 | } 72 | a:nth-child(12):hover article { 73 | background-color: #445566; 74 | } 75 | 76 | span { 77 | transition: transform 0s linear 0.2s, text-shadow 0s linear 0.2s; 78 | display: block; 79 | -webkit-font-smoothing: subpixel-antialiased; 80 | font-smoothing: antialiased; 81 | } 82 | a:hover span { 83 | transition: transform 0s linear 0.1s, text-shadow 0s linear 0.1s; 84 | transform: scale(-1, 1); 85 | text-shadow: 0 0 50px rgba(255, 255, 255, 0.5); 86 | } 87 | 88 | /* body { 89 | background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JhZGVhNiIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjYjNkZWE2Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYmFkZWE2Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); 90 | background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #badea6), color-stop(50%, #b3dea6), color-stop(100%, #377217)); 91 | background: -moz-linear-gradient(left, #badea6, #b3dea6 50%, #badea6); 92 | background: -webkit-linear-gradient(left, #badea6, #b3dea6 50%, #badea6); 93 | background: linear-gradient(to right, #badea6, #b3dea6 50%, #badea6); 94 | } */ 95 | 96 | @font-face { 97 | font-family: "SSSocial"; 98 | src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/ss-social-regular.eot"); 99 | src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/ss-social-regular.eot?#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/ss-social-regular.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/ss-social-regular.ttf") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/ss-social-regular.svg#SSSocialRegular") format("svg"); 100 | font-weight: normal; 101 | font-style: normal; 102 | } 103 | /* This triggers a redraw in IE to Fix IE8's :before content rendering. */ 104 | html:hover [class^="ss-"] { 105 | -ms-zoom: 1; 106 | } 107 | 108 | .ss-icon, .ss-icon.ss-social, .ss-icon.ss-social-circle, 109 | [class^="ss-"]:before, [class*=" ss-"]:before, 110 | [class^="ss-"][class*=" ss-social"]:before, [class*=" ss-"][class*=" ss-social"]:before, 111 | [class^="ss-"].right:after, [class*=" ss-"].right:after, 112 | [class^="ss-"][class*=" ss-social"].right:after, [class*=" ss-"][class*=" ss-social"].right:after { 113 | font-family: "SSSocial"; 114 | font-style: normal; 115 | font-weight: normal; 116 | text-decoration: none; 117 | text-rendering: optimizeLegibility; 118 | white-space: nowrap; 119 | -moz-font-feature-settings: "liga=1"; 120 | -moz-font-feature-settings: "liga"; 121 | -ms-font-feature-settings: "liga" 1; 122 | -o-font-feature-settings: "liga"; 123 | font-feature-settings: "liga"; 124 | -webkit-font-smoothing: antialiased; 125 | } 126 | 127 | .ss-icon.ss-social-circle, 128 | [class^="ss-"].ss-social-circle:before, [class*=" ss-"].ss-social-circle:before, 129 | [class^="ss-"].ss-social-circle.right:after, [class*=" ss-"].ss-social-circle.right:after { 130 | font-weight: bold; 131 | } 132 | 133 | [class^="ss-"].right:before, 134 | [class*=" ss-"].right:before { 135 | display: none; 136 | content: ''; 137 | } -------------------------------------------------------------------------------- /dropdown1/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | :root { 12 | --bg-color: #222429; 13 | --primary-bg-color: #333740; 14 | --primary-color: #2c62f6; 15 | --text-color: #b1b8ca; 16 | --text-active: #ffffff; 17 | --button-hover-bg-color: #2b2e34; 18 | --border-color: #494d59; 19 | --dropdown-height: 0; 20 | --rotate-arrow: 0; 21 | --translate-value: 0; 22 | --list-opacity: 0; 23 | --transition-time: 0.4s; 24 | --transition-timing: cubic-bezier(0.25, 0.46, 0.45, 0.94); 25 | --border-radius: 1.4rem; 26 | --list-button-height: 4.6rem; 27 | --floating-icon-size: 26; 28 | --floating-icon-top: 0; 29 | --floating-icon-left: 0; 30 | } 31 | 32 | html { 33 | font-size: 62.5%; 34 | } 35 | 36 | html, 37 | body { 38 | height: 100%; 39 | } 40 | 41 | body { 42 | display: flex; 43 | flex-direction: column; 44 | align-items: center; 45 | background-color: var(--bg-color); 46 | padding: 1.5rem; 47 | line-height: 1.4; 48 | } 49 | 50 | button { 51 | border: none; 52 | cursor: pointer; 53 | background-color: transparent; 54 | outline: none; 55 | } 56 | 57 | svg { 58 | height: 1.6rem; 59 | width: 1.6rem; 60 | } 61 | 62 | .text-truncate { 63 | text-overflow: ellipsis; 64 | overflow: hidden; 65 | white-space: nowrap; 66 | } 67 | 68 | .dropdown-container { 69 | margin-top: 30vh; 70 | display: flex; 71 | flex-direction: column; 72 | width: 100%; 73 | max-width: 34rem; 74 | } 75 | 76 | .dropdown-title-icon, 77 | .dropdown-arrow { 78 | display: inline-flex; 79 | } 80 | 81 | .dropdown-title { 82 | margin: 0 auto 0 1.8rem; 83 | text-transform: capitalize; 84 | } 85 | 86 | .dropdown-button { 87 | font-family: "Roboto", sans-serif; 88 | font-weight: 400; 89 | font-size: 1.7rem; 90 | display: flex; 91 | align-items: center; 92 | padding: 0 1.8rem; 93 | } 94 | 95 | .dropdown-button svg { 96 | transition: all var(--transition-time) var(--transition-timing); 97 | fill: var(--text-color); 98 | } 99 | 100 | .dropdown-button svg, 101 | .dropdown-button span { 102 | pointer-events: none; 103 | } 104 | 105 | .dropdown-button:hover, 106 | .dropdown-button:focus { 107 | color: var(--text-active); 108 | } 109 | 110 | .dropdown-button:hover svg, 111 | .dropdown-button:focus svg { 112 | fill: var(--text-active); 113 | } 114 | 115 | .main-button { 116 | height: 5.2rem; 117 | border-radius: var(--border-radius); 118 | color: var(--text-color); 119 | background-color: var(--primary-bg-color); 120 | border: 0.1rem solid var(--border-color); 121 | transition: all var(--transition-time) var(--transition-timing); 122 | } 123 | 124 | .main-button:focus { 125 | border: 0.1rem solid var(--primary-color); 126 | box-shadow: 0 0 0 0.2rem rgba(44, 98, 246, 0.4); 127 | } 128 | 129 | .main-button .dropdown-arrow { 130 | transition: transform var(--transition-time) var(--transition-timing); 131 | transform: rotate(var(--rotate-arrow)); 132 | margin-left: 1.8rem; 133 | } 134 | 135 | .list-button { 136 | height: var(--list-button-height); 137 | transition: color var(--transition-time) var(--transition-timing); 138 | color: var(--text-color); 139 | overflow: hidden; 140 | cursor: none; 141 | } 142 | 143 | .dropdown-list-container { 144 | overflow: hidden; 145 | max-height: var(--dropdown-height); 146 | transition: max-height var(--transition-time) var(--transition-timing); 147 | } 148 | 149 | .dropdown-list-wrapper { 150 | margin-top: 1rem; 151 | padding: 1rem; 152 | background-color: var(--primary-bg-color); 153 | border-radius: var(--border-radius); 154 | border: 0.1rem solid var(--border-color); 155 | position: relative; 156 | } 157 | 158 | ul.dropdown-list { 159 | position: relative; 160 | list-style-type: none; 161 | } 162 | 163 | ul.dropdown-list::before { 164 | content: ""; 165 | position: absolute; 166 | top: 0; 167 | right: 0; 168 | left: 0; 169 | z-index: 0; 170 | opacity: 0; 171 | height: var(--list-button-height); 172 | background-color: var(--button-hover-bg-color); 173 | transition: all var(--transition-time) linear; 174 | transform: translateY(var(--translate-value)); 175 | border-radius: var(--border-radius); 176 | pointer-events: none; 177 | } 178 | ul.dropdown-list:hover::before, 179 | ul.dropdown-list:hover ~ .floating-icon { 180 | opacity: 1; 181 | } 182 | 183 | li.dropdown-list-item { 184 | display: flex; 185 | flex-direction: column; 186 | position: relative; 187 | z-index: 1; 188 | opacity: var(--list-opacity); 189 | transition: opacity 0.8s var(--transition-timing); 190 | } 191 | 192 | .floating-icon { 193 | height: calc(var(--floating-icon-size) * 1px); 194 | width: calc(var(--floating-icon-size) * 1px); 195 | position: absolute; 196 | top: var(--floating-icon-top); 197 | left: var(--floating-icon-left); 198 | background-color: var(--border-color); 199 | border-radius: 1rem; 200 | pointer-events: none; 201 | opacity: 0; 202 | transition: opacity var(--transition-time) var(--transition-timing); 203 | z-index: 2; 204 | display: inline-flex; 205 | align-items: center; 206 | justify-content: center; 207 | } 208 | 209 | .floating-icon svg { 210 | fill: var(--text-active); 211 | } -------------------------------------------------------------------------------- /Jello-animated-tab-bar/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | :root { 12 | --background-color: #bbdefb; 13 | --blue-50: #e3f2fd; 14 | --blue-100: #bbdefb; 15 | --blue-A700: #2962ff; 16 | --green-50: #e8f5e9; 17 | --green-100: #c8e6c9; 18 | --green-A700: #00c853; 19 | --purple-50: #f3e5f5; 20 | --purple-100: #e1bee7; 21 | --purple-A700: #aa00ff; 22 | --orange-50: #fff3e0; 23 | --orange-100: #ffe0b2; 24 | --orange-A700: #ff6d00; 25 | --orange-700: #f57c00; 26 | --grey-900: #212121; 27 | --white: #ffffff; 28 | --round-button-active-color: #212121; 29 | --translate-main-slider: 100%; 30 | --main-slider-color: #e3f2fd; 31 | --translate-filters-slider: 0; 32 | --filters-container-height: 3.8rem; 33 | --filters-wrapper-opacity: 1; 34 | } 35 | 36 | html { 37 | font-size: 62.5%; 38 | } 39 | 40 | html, 41 | body { 42 | height: 100%; 43 | } 44 | 45 | body { 46 | display: flex; 47 | flex-direction: column; 48 | justify-content: center; 49 | align-items: center; 50 | transition: background-color 0.4s ease-in-out; 51 | background-color: var(--background-color); 52 | } 53 | 54 | button { 55 | border: none; 56 | cursor: pointer; 57 | background-color: transparent; 58 | outline: none; 59 | } 60 | 61 | nav.amazing-tabs { 62 | background-color: var(--white); 63 | border-radius: 2.5rem; 64 | user-select: none; 65 | padding-top: 1rem; 66 | } 67 | 68 | .main-tabs-container { 69 | padding: 0 1rem 1rem 1rem; 70 | } 71 | 72 | .main-tabs-wrapper { 73 | position: relative; 74 | } 75 | 76 | ul.main-tabs, 77 | ul.filter-tabs { 78 | list-style-type: none; 79 | display: flex; 80 | } 81 | 82 | ul.main-tabs li { 83 | display: inline-flex; 84 | position: relative; 85 | padding: 1.5rem; 86 | z-index: 1; 87 | } 88 | 89 | .avatar, 90 | .avatar img { 91 | height: 4rem; 92 | width: 4rem; 93 | border-radius: 50%; 94 | pointer-events: none; 95 | } 96 | 97 | .avatar img { 98 | object-fit: cover; 99 | } 100 | 101 | .round-button { 102 | height: 4.8rem; 103 | width: 4.8rem; 104 | border-radius: 50%; 105 | display: inline-flex; 106 | align-items: center; 107 | justify-content: center; 108 | color: var(--grey-900); 109 | transition: color 0.2s ease-in-out; 110 | } 111 | 112 | .round-button:hover, 113 | .round-button.active { 114 | color: var(--round-button-active-color); 115 | } 116 | 117 | .round-button svg { 118 | pointer-events: none; 119 | height: 2.8rem; 120 | width: 2.8rem; 121 | transform: translate(0, 0); 122 | } 123 | 124 | .main-slider { 125 | pointer-events: none; 126 | position: absolute; 127 | top: 0; 128 | left: 0; 129 | padding: 1.5rem; 130 | z-index: 0; 131 | transition: transform 0.4s ease-in-out; 132 | transform: translateX(var(--translate-main-slider)); 133 | } 134 | 135 | .main-slider-circle { 136 | height: 4.8rem; 137 | width: 4.8rem; 138 | border-radius: 50%; 139 | transition: background-color 0.4s ease-in-out; 140 | background-color: var(--main-slider-color); 141 | } 142 | 143 | .animate-jello { 144 | animation: jello-horizontal 0.9s both; 145 | } 146 | 147 | @keyframes jello-horizontal { 148 | 0% { 149 | transform: scale3d(1, 1, 1); 150 | } 151 | 30% { 152 | transform: scale3d(1.25, 0.75, 1); 153 | } 154 | 40% { 155 | transform: scale3d(0.75, 1.25, 1); 156 | } 157 | 50% { 158 | transform: scale3d(1.15, 0.85, 1); 159 | } 160 | 65% { 161 | transform: scale3d(0.95, 1.05, 1); 162 | } 163 | 75% { 164 | transform: scale3d(1.05, 0.95, 1); 165 | } 166 | 100% { 167 | transform: scale3d(1, 1, 1); 168 | } 169 | } 170 | 171 | .filters-container { 172 | overflow: hidden; 173 | padding: 0 3rem; 174 | transition: max-height 0.4s ease-in-out; 175 | max-height: var(--filters-container-height); 176 | } 177 | 178 | .filters-wrapper { 179 | position: relative; 180 | transition: opacity 0.2s ease-in-out; 181 | opacity: var(--filters-wrapper-opacity); 182 | } 183 | 184 | .filter-tabs { 185 | border-radius: 1rem; 186 | padding: 0.3rem; 187 | overflow: hidden; 188 | background-color: var(--orange-50); 189 | } 190 | 191 | .filter-tabs li { 192 | position: relative; 193 | z-index: 1; 194 | display: flex; 195 | flex: 1 0 33.33%; 196 | } 197 | 198 | .filter-button { 199 | display: flex; 200 | align-items: center; 201 | justify-content: center; 202 | border-radius: 0.8rem; 203 | flex-grow: 1; 204 | height: 3rem; 205 | padding: 0 1.5rem; 206 | color: var(--orange-700); 207 | font-family: "Open Sans", sans-serif; 208 | font-weight: 400; 209 | font-size: 1.4rem; 210 | } 211 | 212 | .filter-button.filter-active { 213 | transition: color 0.4s ease-in-out; 214 | color: var(--grey-900); 215 | } 216 | 217 | .filter-slider { 218 | pointer-events: none; 219 | position: absolute; 220 | padding: 0.3rem; 221 | top: 0; 222 | left: 0; 223 | right: 0; 224 | bottom: 0; 225 | z-index: 0; 226 | } 227 | 228 | .filter-slider-rect { 229 | height: 3rem; 230 | width: 33.33%; 231 | border-radius: 0.8rem; 232 | background-color: var(--white); 233 | box-shadow: 0 0.1rem 1rem -0.4rem rgba(0, 0, 0, 0.12); 234 | transition: transform 0.4s ease-in-out; 235 | transform: translateX(var(--translate-filters-slider)); 236 | } -------------------------------------------------------------------------------- /Download_animation/style.css: -------------------------------------------------------------------------------- 1 | .button { 2 | --default: rgb(255, 255, 255); 3 | --active: #1f2ac4; 4 | position: relative; 5 | border: none; 6 | outline: none; 7 | background: none; 8 | padding: 0; 9 | -webkit-appearance: none; 10 | -webkit-tap-highlight-color: transparent; 11 | cursor: pointer; 12 | transform: scale(var(--s, 1)); 13 | transition: transform 0.2s; 14 | } 15 | .button:active { 16 | --s: .96; 17 | } 18 | .button svg { 19 | display: block; 20 | fill: none; 21 | stroke-width: var(--sw, 3px); 22 | stroke-linecap: round; 23 | stroke-linejoin: round; 24 | } 25 | .button .circle { 26 | width: 76px; 27 | height: 76px; 28 | transform: rotate(-90deg); 29 | } 30 | .button .circle circle.default { 31 | stroke: var(--default); 32 | } 33 | .button .circle circle.active { 34 | stroke: var(--active); 35 | stroke-dasharray: 227px; 36 | stroke-dashoffset: var(--active-offset, 227px); 37 | transition: stroke-dashoffset var(--all-transition, 4s) ease var(--all-delay, 0.8s); 38 | } 39 | .button span { 40 | display: block; 41 | position: absolute; 42 | left: 0; 43 | right: 0; 44 | text-align: center; 45 | bottom: 13px; 46 | font-weight: 500; 47 | font-size: 10px; 48 | color: var(--active); 49 | opacity: var(--count-opacity, 0); 50 | transform: translateY(var(--count-y, 4px)); 51 | -webkit-animation: var(--count, none) 0.3s ease forwards var(--all-delay, 4.6s); 52 | animation: var(--count, none) 0.3s ease forwards var(--all-delay, 4.6s); 53 | transition: opacity 0.2s ease 0.6s, transform 0.3s ease 0.6s; 54 | } 55 | .button .icon { 56 | --sw: 2px; 57 | width: 24px; 58 | height: 40px; 59 | position: absolute; 60 | left: 50%; 61 | top: 50%; 62 | margin: -20px 0 0 -12px; 63 | } 64 | .button .icon svg.line { 65 | width: 4px; 66 | height: 37px; 67 | stroke: var(--active); 68 | position: absolute; 69 | left: 10px; 70 | top: 0; 71 | stroke-dasharray: 0 33px var(--line-array, 33px) 66px; 72 | stroke-dashoffset: var(--line-offset, 33px); 73 | transform: translateY(var(--line-y, 0)); 74 | opacity: var(--line-opacity, 1); 75 | transition: stroke-dasharray 0.2s, stroke-dashoffset 0.2s, transform 0.32s ease var(--all-delay, 0.25s); 76 | } 77 | .button .icon div { 78 | width: 40px; 79 | height: 32px; 80 | position: absolute; 81 | overflow: hidden; 82 | left: 50%; 83 | bottom: 1px; 84 | margin-left: -20px; 85 | transform: translate(var(--icon-x, 0), var(--icon-y, 0)); 86 | transition: transform 0.3s ease var(--all-delay, 4.8s); 87 | -webkit-animation: var(--overflow, none) 0s linear forwards var(--all-delay, 4.8s); 88 | animation: var(--overflow, none) 0s linear forwards var(--all-delay, 4.8s); 89 | } 90 | .button .icon div:before, .button .icon div:after { 91 | content: ""; 92 | position: absolute; 93 | z-index: 1; 94 | height: 2px; 95 | left: var(--l, 0); 96 | top: 15px; 97 | width: var(--w, 16px); 98 | background: var(--active); 99 | border-radius: 1px; 100 | transform-origin: var(--tx, 15px) 1px; 101 | transform: rotate(var(--before-rotate, 0deg)); 102 | opacity: var(--tick-opacity, 0); 103 | transition: transform 0.4s ease var(--all-delay, 4.8s), opacity 0s linear var(--all-delay, 4.8s); 104 | } 105 | .button .icon div:after { 106 | --l: 14px; 107 | --w: 26px; 108 | --tx: 1px; 109 | transform: rotate(var(--after-rotate, 0deg)); 110 | } 111 | .button .icon div svg { 112 | stroke: var(--active); 113 | } 114 | .button .icon div svg.arrow { 115 | width: 40px; 116 | height: 32px; 117 | opacity: var(--arrow-opacity, 1); 118 | transition: opacity 0s linear var(--all-delay, 1s); 119 | } 120 | .button .icon div svg.progress { 121 | width: 444px; 122 | height: 10px; 123 | position: absolute; 124 | left: 0; 125 | top: 11px; 126 | transform: translateX(var(--progress-x, 0)); 127 | opacity: var(--progress-opacity, 0); 128 | transition: transform var(--all-transition, 4.4s) ease var(--all-delay, 0.4s), opacity 0s linear var(--all-delay, 1s); 129 | -webkit-animation: var(--hide, none) 0s linear forwards var(--all-delay, 4.8s); 130 | animation: var(--hide, none) 0s linear forwards var(--all-delay, 4.8s); 131 | } 132 | .button.loading:not(.reset) { 133 | --line-y: -36px; 134 | --line-array: 0; 135 | --line-offset: 15px; 136 | --active-offset: 0; 137 | --arrow-opacity: 0; 138 | --progress-opacity: 1; 139 | --progress-x: -400px; 140 | --tick-opacity: 1; 141 | --before-rotate: 47deg; 142 | --after-rotate: -46deg; 143 | --hide: hide; 144 | --overflow: overflow; 145 | --icon-x: 2px; 146 | --icon-y: 7px; 147 | --count-opacity: 1; 148 | --count-y: 0; 149 | --count: count; 150 | } 151 | .button.reset { 152 | --all-delay: 0s; 153 | --all-transition: .3s; 154 | } 155 | 156 | @-webkit-keyframes hide { 157 | to { 158 | opacity: 0; 159 | } 160 | } 161 | 162 | @keyframes hide { 163 | to { 164 | opacity: 0; 165 | } 166 | } 167 | @-webkit-keyframes count { 168 | to { 169 | transform: translateY(4px); 170 | opacity: 0; 171 | } 172 | } 173 | @keyframes count { 174 | to { 175 | transform: translateY(4px); 176 | opacity: 0; 177 | } 178 | } 179 | @-webkit-keyframes overflow { 180 | to { 181 | overflow: visible; 182 | } 183 | } 184 | @keyframes overflow { 185 | to { 186 | overflow: visible; 187 | } 188 | } 189 | html { 190 | box-sizing: border-box; 191 | -webkit-font-smoothing: antialiased; 192 | } 193 | 194 | * { 195 | box-sizing: inherit; 196 | } 197 | *:before, *:after { 198 | box-sizing: inherit; 199 | } 200 | 201 | body { 202 | min-height: 100vh; 203 | font-family: "Inter", "Inter UI", Arial; 204 | display: flex; 205 | justify-content: center; 206 | align-items: center; 207 | background: #000000f3; 208 | font-family: "Roboto", Arial, sans-serif; 209 | } 210 | body .dribbble { 211 | position: fixed; 212 | display: block; 213 | right: 20px; 214 | bottom: 20px; 215 | } 216 | body .dribbble img { 217 | display: block; 218 | width: 76px; 219 | } 220 | body .twitter { 221 | position: fixed; 222 | display: block; 223 | right: 112px; 224 | bottom: 14px; 225 | } 226 | body .twitter svg { 227 | width: 24px; 228 | height: 24px; 229 | fill: white; 230 | } -------------------------------------------------------------------------------- /dropdown1/script.js: -------------------------------------------------------------------------------- 1 | const root = document.documentElement; 2 | const dropdownTitleIcon = document.querySelector(".dropdown-title-icon"); 3 | const dropdownTitle = document.querySelector(".dropdown-title"); 4 | const dropdownList = document.querySelector(".dropdown-list"); 5 | const mainButton = document.querySelector(".main-button"); 6 | const floatingIcon = document.querySelector(".floating-icon"); 7 | 8 | const icons = { 9 | linkedin: 10 | "M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z", 11 | instagram: 12 | "M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z", 13 | facebook: 14 | "M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z", 15 | twitter: 16 | "M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z", 17 | youtube: 18 | "M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z" 19 | }; 20 | 21 | const listItems = ["Linkedin", "Instagram", "Facebook", "Twitter", "Youtube"]; 22 | 23 | const iconTemplate = (path) => { 24 | return ` 25 | 26 | 27 | 28 | `; 29 | }; 30 | 31 | const listItemTemplate = (text, translateValue) => { 32 | return ` 33 |
  • 34 | 37 |
    • 38 | `; 39 | }; 40 | 41 | const renderListItems = () => { 42 | dropdownList.innerHTML += listItems 43 | .map((item, index) => { 44 | return listItemTemplate(item, 100 * index); 45 | }) 46 | .join(""); 47 | }; 48 | 49 | window.addEventListener("load", () => { 50 | renderListItems(); 51 | }); 52 | 53 | const setDropdownProps = (deg, ht, opacity) => { 54 | root.style.setProperty("--rotate-arrow", deg !== 0 ? deg + "deg" : 0); 55 | root.style.setProperty("--dropdown-height", ht !== 0 ? ht + "rem" : 0); 56 | root.style.setProperty("--list-opacity", opacity); 57 | }; 58 | 59 | mainButton.addEventListener("click", () => { 60 | const listWrapperSizes = 3.5; // margins, paddings & borders 61 | const dropdownOpenHeight = 4.6 * listItems.length + listWrapperSizes; 62 | const currDropdownHeight = 63 | root.style.getPropertyValue("--dropdown-height") || "0"; 64 | 65 | currDropdownHeight === "0" 66 | ? setDropdownProps(180, dropdownOpenHeight, 1) 67 | : setDropdownProps(0, 0, 0); 68 | }); 69 | 70 | dropdownList.addEventListener("mouseover", (e) => { 71 | const translateValue = e.target.dataset.translateValue; 72 | root.style.setProperty("--translate-value", translateValue); 73 | }); 74 | 75 | dropdownList.addEventListener("click", (e) => { 76 | const clickedItemText = e.target.innerText.toLowerCase().trim(); 77 | const clickedItemIcon = icons[clickedItemText]; 78 | 79 | dropdownTitleIcon.innerHTML = iconTemplate(clickedItemIcon); 80 | dropdownTitle.innerHTML = clickedItemText; 81 | setDropdownProps(0, 0, 0); 82 | }); 83 | 84 | dropdownList.addEventListener("mousemove", (e) => { 85 | const iconSize = root.style.getPropertyValue("--floating-icon-size") || 0; 86 | const x = e.clientX - dropdownList.getBoundingClientRect().x; 87 | const y = e.clientY - dropdownList.getBoundingClientRect().y; 88 | const targetText = e.target.innerText.toLowerCase().trim(); 89 | const hoverItemText = icons[targetText]; 90 | 91 | floatingIcon.innerHTML = iconTemplate(hoverItemText); 92 | root.style.setProperty("--floating-icon-left", x - iconSize / 2 + "px"); 93 | root.style.setProperty("--floating-icon-top", y - iconSize / 2 + "px"); 94 | }); -------------------------------------------------------------------------------- /Star-rating/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | border: 0; 3 | box-sizing: border-box; 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | :root { 9 | --bg: #e3e4e8; 10 | --fg: #17181c; 11 | --primary: #255ff4; 12 | --yellow: #f4a825; 13 | --yellow-t: rgba(244, 168, 37, 0); 14 | --bezier: cubic-bezier(0.42,0,0.58,1); 15 | --trans-dur: 0.3s; 16 | font-size: calc(24px + (30 - 24) * (100vw - 320px) / (1280 - 320)); 17 | } 18 | 19 | body { 20 | background-color: var(--bg); 21 | color: var(--fg); 22 | font: 1em/1.5 "DM Sans", sans-serif; 23 | display: flex; 24 | height: 100vh; 25 | transition: background-color var(--trans-dur), color var(--trans-dur); 26 | } 27 | 28 | .rating { 29 | margin: auto; 30 | } 31 | .rating__display { 32 | font-size: 1em; 33 | font-weight: 500; 34 | min-height: 1.25em; 35 | position: absolute; 36 | top: 100%; 37 | width: 100%; 38 | text-align: center; 39 | } 40 | .rating__stars { 41 | display: flex; 42 | padding-bottom: 0.375em; 43 | position: relative; 44 | } 45 | .rating__star { 46 | display: block; 47 | overflow: visible; 48 | pointer-events: none; 49 | width: 2em; 50 | height: 2em; 51 | } 52 | .rating__star-ring, .rating__star-fill, .rating__star-line, .rating__star-stroke { 53 | animation-duration: 1s; 54 | animation-timing-function: ease-in-out; 55 | animation-fill-mode: forwards; 56 | } 57 | .rating__star-ring, .rating__star-fill, .rating__star-line { 58 | stroke: var(--yellow); 59 | } 60 | .rating__star-fill { 61 | fill: var(--yellow); 62 | transform: scale(0); 63 | transition: fill var(--trans-dur) var(--bezier), transform var(--trans-dur) var(--bezier); 64 | } 65 | .rating__star-stroke { 66 | stroke: #c7cad1; 67 | transition: stroke var(--trans-dur); 68 | } 69 | .rating__label { 70 | cursor: pointer; 71 | padding: 0.125em; 72 | } 73 | .rating__label--delay1 .rating__star-ring, .rating__label--delay1 .rating__star-fill, .rating__label--delay1 .rating__star-line, .rating__label--delay1 .rating__star-stroke { 74 | animation-delay: 0.05s; 75 | } 76 | .rating__label--delay2 .rating__star-ring, .rating__label--delay2 .rating__star-fill, .rating__label--delay2 .rating__star-line, .rating__label--delay2 .rating__star-stroke { 77 | animation-delay: 0.1s; 78 | } 79 | .rating__label--delay3 .rating__star-ring, .rating__label--delay3 .rating__star-fill, .rating__label--delay3 .rating__star-line, .rating__label--delay3 .rating__star-stroke { 80 | animation-delay: 0.15s; 81 | } 82 | .rating__label--delay4 .rating__star-ring, .rating__label--delay4 .rating__star-fill, .rating__label--delay4 .rating__star-line, .rating__label--delay4 .rating__star-stroke { 83 | animation-delay: 0.2s; 84 | } 85 | .rating__input { 86 | -webkit-appearance: none; 87 | appearance: none; 88 | } 89 | .rating__input:hover ~ [data-rating]:not([hidden]) { 90 | display: none; 91 | } 92 | .rating__input-1:hover ~ [data-rating="1"][hidden], .rating__input-2:hover ~ [data-rating="2"][hidden], .rating__input-3:hover ~ [data-rating="3"][hidden], .rating__input-4:hover ~ [data-rating="4"][hidden], .rating__input-5:hover ~ [data-rating="5"][hidden], .rating__input:checked:hover ~ [data-rating]:not([hidden]) { 93 | display: block; 94 | } 95 | .rating__input-1:hover ~ .rating__label:first-of-type .rating__star-stroke, .rating__input-2:hover ~ .rating__label:nth-of-type(-n + 2) .rating__star-stroke, .rating__input-3:hover ~ .rating__label:nth-of-type(-n + 3) .rating__star-stroke, .rating__input-4:hover ~ .rating__label:nth-of-type(-n + 4) .rating__star-stroke, .rating__input-5:hover ~ .rating__label:nth-of-type(-n + 5) .rating__star-stroke { 96 | stroke: var(--yellow); 97 | transform: scale(1); 98 | } 99 | .rating__input-1:checked ~ .rating__label:first-of-type .rating__star-ring, .rating__input-2:checked ~ .rating__label:nth-of-type(-n + 2) .rating__star-ring, .rating__input-3:checked ~ .rating__label:nth-of-type(-n + 3) .rating__star-ring, .rating__input-4:checked ~ .rating__label:nth-of-type(-n + 4) .rating__star-ring, .rating__input-5:checked ~ .rating__label:nth-of-type(-n + 5) .rating__star-ring { 100 | animation-name: starRing; 101 | } 102 | .rating__input-1:checked ~ .rating__label:first-of-type .rating__star-stroke, .rating__input-2:checked ~ .rating__label:nth-of-type(-n + 2) .rating__star-stroke, .rating__input-3:checked ~ .rating__label:nth-of-type(-n + 3) .rating__star-stroke, .rating__input-4:checked ~ .rating__label:nth-of-type(-n + 4) .rating__star-stroke, .rating__input-5:checked ~ .rating__label:nth-of-type(-n + 5) .rating__star-stroke { 103 | animation-name: starStroke; 104 | } 105 | .rating__input-1:checked ~ .rating__label:first-of-type .rating__star-line, .rating__input-2:checked ~ .rating__label:nth-of-type(-n + 2) .rating__star-line, .rating__input-3:checked ~ .rating__label:nth-of-type(-n + 3) .rating__star-line, .rating__input-4:checked ~ .rating__label:nth-of-type(-n + 4) .rating__star-line, .rating__input-5:checked ~ .rating__label:nth-of-type(-n + 5) .rating__star-line { 106 | animation-name: starLine; 107 | } 108 | .rating__input-1:checked ~ .rating__label:first-of-type .rating__star-fill, .rating__input-2:checked ~ .rating__label:nth-of-type(-n + 2) .rating__star-fill, .rating__input-3:checked ~ .rating__label:nth-of-type(-n + 3) .rating__star-fill, .rating__input-4:checked ~ .rating__label:nth-of-type(-n + 4) .rating__star-fill, .rating__input-5:checked ~ .rating__label:nth-of-type(-n + 5) .rating__star-fill { 109 | animation-name: starFill; 110 | } 111 | .rating__input-1:not(:checked):hover ~ .rating__label:first-of-type .rating__star-fill, .rating__input-2:not(:checked):hover ~ .rating__label:nth-of-type(2) .rating__star-fill, .rating__input-3:not(:checked):hover ~ .rating__label:nth-of-type(3) .rating__star-fill, .rating__input-4:not(:checked):hover ~ .rating__label:nth-of-type(4) .rating__star-fill, .rating__input-5:not(:checked):hover ~ .rating__label:nth-of-type(5) .rating__star-fill { 112 | fill: var(--yellow-t); 113 | } 114 | .rating__sr { 115 | clip: rect(1px, 1px, 1px, 1px); 116 | overflow: hidden; 117 | position: absolute; 118 | width: 1px; 119 | height: 1px; 120 | } 121 | 122 | @media (prefers-color-scheme: dark) { 123 | :root { 124 | --bg: #17181c; 125 | --fg: #e3e4e8; 126 | } 127 | 128 | .rating { 129 | margin: auto; 130 | } 131 | .rating__star-stroke { 132 | stroke: #454954; 133 | } 134 | } 135 | @keyframes starRing { 136 | from, 20% { 137 | animation-timing-function: ease-in; 138 | opacity: 1; 139 | r: 8px; 140 | stroke-width: 16px; 141 | transform: scale(0); 142 | } 143 | 35% { 144 | animation-timing-function: ease-out; 145 | opacity: 0.5; 146 | r: 8px; 147 | stroke-width: 16px; 148 | transform: scale(1); 149 | } 150 | 50%, to { 151 | opacity: 0; 152 | r: 16px; 153 | stroke-width: 0; 154 | transform: scale(1); 155 | } 156 | } 157 | @keyframes starFill { 158 | from, 40% { 159 | animation-timing-function: ease-out; 160 | transform: scale(0); 161 | } 162 | 60% { 163 | animation-timing-function: ease-in-out; 164 | transform: scale(1.2); 165 | } 166 | 80% { 167 | transform: scale(0.9); 168 | } 169 | to { 170 | transform: scale(1); 171 | } 172 | } 173 | @keyframes starStroke { 174 | from { 175 | transform: scale(1); 176 | } 177 | 20%, to { 178 | transform: scale(0); 179 | } 180 | } 181 | @keyframes starLine { 182 | from, 40% { 183 | animation-timing-function: ease-out; 184 | stroke-dasharray: 1 23; 185 | stroke-dashoffset: 1; 186 | } 187 | 60%, to { 188 | stroke-dasharray: 12 12; 189 | stroke-dashoffset: -12; 190 | } 191 | } -------------------------------------------------------------------------------- /Star-rating/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CodePen - Animated Star Rating 6 | 7 | 8 | 9 | 10 | 11 |
    12 |
    13 | 14 | 15 | 16 | 17 | 18 | 39 | 60 | 81 | 102 | 123 | 124 | 125 | 126 | 127 | 128 |
    129 |
    130 | 131 | 132 | 133 | 134 | 135 | -------------------------------------------------------------------------------- /Progress bar/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300); 2 | html, body, div, span, applet, object, iframe, 3 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 4 | a, abbr, acronym, address, big, cite, code, 5 | del, dfn, em, img, ins, kbd, q, s, samp, 6 | small, strike, strong, sub, sup, tt, var, 7 | b, u, i, center, 8 | dl, dt, dd, ol, ul, li, 9 | fieldset, form, label, legend, 10 | table, caption, tbody, tfoot, thead, tr, th, td, 11 | article, aside, canvas, details, embed, 12 | figure, figcaption, footer, header, hgroup, 13 | menu, nav, output, ruby, section, summary, 14 | time, mark, audio, video { 15 | margin: 0; 16 | padding: 0; 17 | border: 0; 18 | font: inherit; 19 | font-size: 100%; 20 | vertical-align: baseline; 21 | background: #000000; 22 | } 23 | 24 | html { 25 | line-height: 1; 26 | } 27 | 28 | ol, ul { 29 | list-style: none; 30 | } 31 | 32 | table { 33 | border-collapse: collapse; 34 | border-spacing: 0; 35 | } 36 | 37 | caption, th, td { 38 | text-align: left; 39 | font-weight: normal; 40 | vertical-align: middle; 41 | } 42 | 43 | q, blockquote { 44 | quotes: none; 45 | } 46 | q:before, q:after, blockquote:before, blockquote:after { 47 | content: ""; 48 | content: none; 49 | } 50 | 51 | a img { 52 | border: none; 53 | } 54 | 55 | article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { 56 | display: block; 57 | } 58 | 59 | body { 60 | font-family: 'Open Sans', sans-serif; 61 | font-size: 16px; 62 | font-weight: 300; 63 | line-height: 1em; 64 | text-align: center; 65 | color: #ffffff; 66 | background: #000000; 67 | } 68 | 69 | h1 { 70 | font-size: 2.5em; 71 | margin: 2em 0 .5em; 72 | } 73 | 74 | h2 { 75 | margin-bottom: 3em; 76 | } 77 | 78 | em, 79 | strong { 80 | font-weight: 700; 81 | } 82 | 83 | input { 84 | display: none; 85 | } 86 | 87 | header p { 88 | margin-bottom: 0; 89 | } 90 | 91 | section { 92 | display: flex; 93 | justify-content: center; 94 | flex-direction: column; 95 | margin-bottom: 2em; 96 | padding: 0; 97 | } 98 | section:last-of-type { 99 | margin-bottom: 0; 100 | } 101 | section article { 102 | align-self: center; 103 | width: 20em; 104 | margin-bottom: 2em; 105 | } 106 | section article p, section article:last-of-type { 107 | margin-bottom: 0; 108 | } 109 | 110 | p { 111 | line-height: 1.5em; 112 | max-width: 20em; 113 | margin: 1.5em auto 2em; 114 | padding-bottom: 1.5em; 115 | } 116 | p span { 117 | display: block; 118 | } 119 | 120 | .container { 121 | z-index: 1; 122 | display: flex; 123 | overflow: hidden; 124 | flex-direction: column; 125 | justify-content: center; 126 | margin-bottom: 4em; 127 | } 128 | 129 | /* 130 | * 131 | * 132 | START // CHART'S RULES 133 | -> "if you're picking code, don't forget the variables :)" 134 | */ 135 | .chart { 136 | font-size: 1em; 137 | perspective: 1000px; 138 | perspective-origin: 50% 50%; 139 | -webkit-backface-visibility: visible; 140 | backface-visibility: visible; 141 | } 142 | 143 | .bar { 144 | font-size: 1em; 145 | position: relative; 146 | height: 10em; 147 | transition: all 0.3s ease-in-out; 148 | transform: rotateX(60deg) rotateY(0deg); 149 | transform-style: preserve-3d; 150 | } 151 | .bar .face { 152 | font-size: 2em; 153 | position: relative; 154 | width: 100%; 155 | height: 2em; 156 | background-color: rgba(254, 254, 254, 0.3); 157 | } 158 | .bar .face.side-a, .bar .face.side-b { 159 | width: 2em; 160 | } 161 | .bar .side-a { 162 | transform: rotateX(90deg) rotateY(-90deg) translateX(2em) translateY(1em) translateZ(1em); 163 | } 164 | .bar .side-b { 165 | transform: rotateX(90deg) rotateY(-90deg) translateX(4em) translateY(1em) translateZ(-1em); 166 | position: absolute; 167 | right: 0; 168 | } 169 | .bar .side-0 { 170 | transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(-1em); 171 | } 172 | .bar .side-1 { 173 | transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(3em); 174 | } 175 | .bar .top { 176 | transform: rotateX(0deg) rotateY(0) translateX(0em) translateY(4em) translateZ(2em); 177 | } 178 | .bar .floor { 179 | box-shadow: 0 0.1em 0.6em rgba(0, 0, 0, 0.3), 0.6em -0.5em 3em rgba(0, 0, 0, 0.3), 1em -1em 8em #fefefe; 180 | } 181 | 182 | .growing-bar { 183 | transition: all 0.3s ease-in-out; 184 | background-color: rgba(236, 0, 140, 0.6); 185 | width: 100%; 186 | height: 2em; 187 | } 188 | 189 | .bar.yellow .side-a, 190 | .bar.yellow .growing-bar { 191 | background-color: rgba(241, 196, 15, 0.6); 192 | } 193 | .bar.yellow .side-0 .growing-bar { 194 | box-shadow: -0.5em -1.5em 4em rgba(241, 196, 15, 0.8); 195 | } 196 | .bar.yellow .floor .growing-bar { 197 | box-shadow: 0em 0em 2em rgba(241, 196, 15, 0.8); 198 | } 199 | 200 | .bar.red .side-a, input[id='red']:checked ~ .chart .side-a, 201 | .bar.red .growing-bar, 202 | input[id='red']:checked ~ .chart .growing-bar { 203 | background-color: rgba(236, 0, 140, 0.6); 204 | } 205 | .bar.red .side-0 .growing-bar, input[id='red']:checked ~ .chart .side-0 .growing-bar { 206 | box-shadow: -0.5em -1.5em 4em rgba(236, 0, 140, 0.8); 207 | } 208 | .bar.red .floor .growing-bar, input[id='red']:checked ~ .chart .floor .growing-bar { 209 | box-shadow: 0em 0em 2em rgba(236, 0, 140, 0.8); 210 | } 211 | 212 | .bar.cyan .side-a, input[id='cyan']:checked ~ .chart .side-a, 213 | .bar.cyan .growing-bar, 214 | input[id='cyan']:checked ~ .chart .growing-bar { 215 | background-color: rgba(87, 202, 244, 0.6); 216 | } 217 | .bar.cyan .side-0 .growing-bar, input[id='cyan']:checked ~ .chart .side-0 .growing-bar { 218 | box-shadow: -0.5em -1.5em 4em #57caf4; 219 | } 220 | .bar.cyan .floor .growing-bar, input[id='cyan']:checked ~ .chart .floor .growing-bar { 221 | box-shadow: 0em 0em 2em #57caf4; 222 | } 223 | 224 | .bar.navy .side-a, 225 | .bar.navy .growing-bar { 226 | background-color: rgba(10, 64, 105, 0.6); 227 | } 228 | .bar.navy .side-0 .growing-bar { 229 | box-shadow: -0.5em -1.5em 4em rgba(10, 64, 105, 0.8); 230 | } 231 | .bar.navy .floor .growing-bar { 232 | box-shadow: 0em 0em 2em rgba(10, 64, 105, 0.8); 233 | } 234 | 235 | .bar.lime .side-a, input[id='lime']:checked ~ .chart .side-a, 236 | .bar.lime .growing-bar, 237 | input[id='lime']:checked ~ .chart .growing-bar { 238 | background-color: rgba(118, 201, 0, 0.6); 239 | } 240 | .bar.lime .side-0 .growing-bar, input[id='lime']:checked ~ .chart .side-0 .growing-bar { 241 | box-shadow: -0.5em -1.5em 4em #76c900; 242 | } 243 | .bar.lime .floor .growing-bar, input[id='lime']:checked ~ .chart .floor .growing-bar { 244 | box-shadow: 0em 0em 2em #76c900; 245 | } 246 | 247 | .bar.white .side-a, 248 | .bar.white .growing-bar { 249 | background-color: rgba(254, 254, 254, 0.6); 250 | } 251 | .bar.white .side-0 .growing-bar { 252 | box-shadow: -0.5em -1.5em 4em #fefefe; 253 | } 254 | .bar.white .floor .growing-bar { 255 | box-shadow: 0em 0em 2em #fefefe; 256 | } 257 | 258 | .bar.gray .side-a, 259 | .bar.gray .growing-bar { 260 | background-color: rgba(68, 68, 68, 0.6); 261 | } 262 | .bar.gray .side-0 .growing-bar { 263 | box-shadow: -0.5em -1.5em 4em #444; 264 | } 265 | .bar.gray .floor .growing-bar { 266 | box-shadow: 0em 0em 2em #444; 267 | } 268 | 269 | .chart .bar.yellow-face .face { 270 | background-color: rgba(241, 196, 15, 0.2); 271 | } 272 | 273 | .chart .bar.lime-face .face { 274 | background-color: rgba(118, 201, 0, 0.2); 275 | } 276 | 277 | .chart .bar.red-face .face { 278 | background-color: rgba(236, 0, 140, 0.2); 279 | } 280 | 281 | .chart .bar.navy-face .face { 282 | background-color: rgba(10, 64, 105, 0.2); 283 | } 284 | 285 | .chart .bar.cyan-face .face { 286 | background-color: rgba(87, 202, 244, 0.2); 287 | } 288 | 289 | .chart .bar.gray-face .face { 290 | background-color: rgba(68, 68, 68, 0.2); 291 | } 292 | 293 | .chart .bar.lightGray-face .face { 294 | background-color: rgba(145, 145, 145, 0.2); 295 | } 296 | 297 | .bar-0 .growing-bar { 298 | width: 0%; 299 | } 300 | 301 | .bar-1 .growing-bar { 302 | width: 1%; 303 | } 304 | 305 | .bar-2 .growing-bar { 306 | width: 2%; 307 | } 308 | 309 | .bar-3 .growing-bar { 310 | width: 3%; 311 | } 312 | 313 | .bar-4 .growing-bar { 314 | width: 4%; 315 | } 316 | 317 | .bar-5 .growing-bar { 318 | width: 5%; 319 | } 320 | 321 | .bar-6 .growing-bar { 322 | width: 6%; 323 | } 324 | 325 | .bar-7 .growing-bar { 326 | width: 7%; 327 | } 328 | 329 | .bar-8 .growing-bar { 330 | width: 8%; 331 | } 332 | 333 | .bar-9 .growing-bar { 334 | width: 9%; 335 | } 336 | 337 | .bar-10 .growing-bar { 338 | width: 10%; 339 | } 340 | 341 | .bar-11 .growing-bar { 342 | width: 11%; 343 | } 344 | 345 | .bar-12 .growing-bar { 346 | width: 12%; 347 | } 348 | 349 | .bar-13 .growing-bar { 350 | width: 13%; 351 | } 352 | 353 | .bar-14 .growing-bar { 354 | width: 14%; 355 | } 356 | 357 | .bar-15 .growing-bar { 358 | width: 15%; 359 | } 360 | 361 | .bar-16 .growing-bar { 362 | width: 16%; 363 | } 364 | 365 | .bar-17 .growing-bar { 366 | width: 17%; 367 | } 368 | 369 | .bar-18 .growing-bar { 370 | width: 18%; 371 | } 372 | 373 | .bar-19 .growing-bar { 374 | width: 19%; 375 | } 376 | 377 | .bar-20 .growing-bar, input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(1) .growing-bar { 378 | width: 20%; 379 | } 380 | 381 | .bar-21 .growing-bar { 382 | width: 21%; 383 | } 384 | 385 | .bar-22 .growing-bar { 386 | width: 22%; 387 | } 388 | 389 | .bar-23 .growing-bar { 390 | width: 23%; 391 | } 392 | 393 | .bar-24 .growing-bar { 394 | width: 24%; 395 | } 396 | 397 | .bar-25 .growing-bar, input[id='pos-0']:checked ~ .chart .growing-bar { 398 | width: 25%; 399 | } 400 | 401 | .bar-26 .growing-bar { 402 | width: 26%; 403 | } 404 | 405 | .bar-27 .growing-bar { 406 | width: 27%; 407 | } 408 | 409 | .bar-28 .growing-bar { 410 | width: 28%; 411 | } 412 | 413 | .bar-29 .growing-bar { 414 | width: 29%; 415 | } 416 | 417 | .bar-30 .growing-bar { 418 | width: 30%; 419 | } 420 | 421 | .bar-31 .growing-bar { 422 | width: 31%; 423 | } 424 | 425 | .bar-32 .growing-bar { 426 | width: 32%; 427 | } 428 | 429 | .bar-33 .growing-bar { 430 | width: 33%; 431 | } 432 | 433 | .bar-34 .growing-bar { 434 | width: 34%; 435 | } 436 | 437 | .bar-35 .growing-bar { 438 | width: 35%; 439 | } 440 | 441 | .bar-36 .growing-bar { 442 | width: 36%; 443 | } 444 | 445 | .bar-37 .growing-bar { 446 | width: 37%; 447 | } 448 | 449 | .bar-38 .growing-bar { 450 | width: 38%; 451 | } 452 | 453 | .bar-39 .growing-bar { 454 | width: 39%; 455 | } 456 | 457 | .bar-40 .growing-bar { 458 | width: 40%; 459 | } 460 | 461 | .bar-41 .growing-bar { 462 | width: 41%; 463 | } 464 | 465 | .bar-42 .growing-bar { 466 | width: 42%; 467 | } 468 | 469 | .bar-43 .growing-bar { 470 | width: 43%; 471 | } 472 | 473 | .bar-44 .growing-bar { 474 | width: 44%; 475 | } 476 | 477 | .bar-45 .growing-bar { 478 | width: 45%; 479 | } 480 | 481 | .bar-46 .growing-bar { 482 | width: 46%; 483 | } 484 | 485 | .bar-47 .growing-bar { 486 | width: 47%; 487 | } 488 | 489 | .bar-48 .growing-bar { 490 | width: 48%; 491 | } 492 | 493 | .bar-49 .growing-bar { 494 | width: 49%; 495 | } 496 | 497 | .bar-50 .growing-bar, input[id='pos-1']:checked ~ .chart .growing-bar, input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(2) .growing-bar, input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(1) .growing-bar, input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(2) .growing-bar { 498 | width: 50%; 499 | } 500 | 501 | .bar-51 .growing-bar { 502 | width: 51%; 503 | } 504 | 505 | .bar-52 .growing-bar { 506 | width: 52%; 507 | } 508 | 509 | .bar-53 .growing-bar { 510 | width: 53%; 511 | } 512 | 513 | .bar-54 .growing-bar { 514 | width: 54%; 515 | } 516 | 517 | .bar-55 .growing-bar { 518 | width: 55%; 519 | } 520 | 521 | .bar-56 .growing-bar { 522 | width: 56%; 523 | } 524 | 525 | .bar-57 .growing-bar { 526 | width: 57%; 527 | } 528 | 529 | .bar-58 .growing-bar { 530 | width: 58%; 531 | } 532 | 533 | .bar-59 .growing-bar { 534 | width: 59%; 535 | } 536 | 537 | .bar-60 .growing-bar { 538 | width: 60%; 539 | } 540 | 541 | .bar-61 .growing-bar { 542 | width: 61%; 543 | } 544 | 545 | .bar-62 .growing-bar { 546 | width: 62%; 547 | } 548 | 549 | .bar-63 .growing-bar { 550 | width: 63%; 551 | } 552 | 553 | .bar-64 .growing-bar { 554 | width: 64%; 555 | } 556 | 557 | .bar-65 .growing-bar { 558 | width: 65%; 559 | } 560 | 561 | .bar-66 .growing-bar { 562 | width: 66%; 563 | } 564 | 565 | .bar-67 .growing-bar { 566 | width: 67%; 567 | } 568 | 569 | .bar-68 .growing-bar { 570 | width: 68%; 571 | } 572 | 573 | .bar-69 .growing-bar { 574 | width: 69%; 575 | } 576 | 577 | .bar-70 .growing-bar, input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(1) .growing-bar, input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(2) .growing-bar, input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(3) .growing-bar { 578 | width: 70%; 579 | } 580 | 581 | .bar-71 .growing-bar { 582 | width: 71%; 583 | } 584 | 585 | .bar-72 .growing-bar { 586 | width: 72%; 587 | } 588 | 589 | .bar-73 .growing-bar { 590 | width: 73%; 591 | } 592 | 593 | .bar-74 .growing-bar { 594 | width: 74%; 595 | } 596 | 597 | .bar-75 .growing-bar, input[id='pos-2']:checked ~ .chart .growing-bar { 598 | width: 75%; 599 | } 600 | 601 | .bar-76 .growing-bar { 602 | width: 76%; 603 | } 604 | 605 | .bar-77 .growing-bar { 606 | width: 77%; 607 | } 608 | 609 | .bar-78 .growing-bar { 610 | width: 78%; 611 | } 612 | 613 | .bar-79 .growing-bar { 614 | width: 79%; 615 | } 616 | 617 | .bar-80 .growing-bar, input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(3) .growing-bar { 618 | width: 80%; 619 | } 620 | 621 | .bar-81 .growing-bar { 622 | width: 81%; 623 | } 624 | 625 | .bar-82 .growing-bar { 626 | width: 82%; 627 | } 628 | 629 | .bar-83 .growing-bar { 630 | width: 83%; 631 | } 632 | 633 | .bar-84 .growing-bar { 634 | width: 84%; 635 | } 636 | 637 | .bar-85 .growing-bar { 638 | width: 85%; 639 | } 640 | 641 | .bar-86 .growing-bar { 642 | width: 86%; 643 | } 644 | 645 | .bar-87 .growing-bar { 646 | width: 87%; 647 | } 648 | 649 | .bar-88 .growing-bar { 650 | width: 88%; 651 | } 652 | 653 | .bar-89 .growing-bar { 654 | width: 89%; 655 | } 656 | 657 | .bar-90 .growing-bar { 658 | width: 90%; 659 | } 660 | 661 | .bar-91 .growing-bar { 662 | width: 91%; 663 | } 664 | 665 | .bar-92 .growing-bar { 666 | width: 92%; 667 | } 668 | 669 | .bar-93 .growing-bar { 670 | width: 93%; 671 | } 672 | 673 | .bar-94 .growing-bar { 674 | width: 94%; 675 | } 676 | 677 | .bar-95 .growing-bar { 678 | width: 95%; 679 | } 680 | 681 | .bar-96 .growing-bar { 682 | width: 96%; 683 | } 684 | 685 | .bar-97 .growing-bar { 686 | width: 97%; 687 | } 688 | 689 | .bar-98 .growing-bar { 690 | width: 98%; 691 | } 692 | 693 | .bar-99 .growing-bar { 694 | width: 99%; 695 | } 696 | 697 | .bar-100 .growing-bar, input[id='pos-3']:checked ~ .chart .growing-bar, input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(3) .growing-bar { 698 | width: 100%; 699 | } 700 | 701 | /* 702 | END // CHART'S RULES 703 | * 704 | * 705 | */ 706 | .chart.grid { 707 | display: flex; 708 | flex-direction: row; 709 | } 710 | .chart.grid .exercise { 711 | flex: 0 0 100%; 712 | display: flex; 713 | } 714 | .chart.grid .exercise .bar { 715 | flex: 1; 716 | margin: 0 .5em; 717 | } 718 | .chart.grid .exercise .bar:nth-child(2) { 719 | z-index: 8; 720 | flex: 1 0 40%; 721 | } 722 | .chart.grid .exercise .bar:first-child { 723 | z-index: 10; 724 | margin-left: 0; 725 | } 726 | .chart.grid .exercise .bar:last-child { 727 | margin-right: 0; 728 | } 729 | 730 | .actions { 731 | display: flex; 732 | justify-content: center; 733 | margin-bottom: 0; 734 | padding-bottom: 2em; 735 | border-bottom: 1px dotted rgba(68, 68, 68, 0.4); 736 | } 737 | 738 | label { 739 | box-sizing: border-box; 740 | padding: 1em; 741 | margin: 0 .2em; 742 | cursor: pointer; 743 | transition: all .15s ease-in-out; 744 | color: #0a4069; 745 | border: 1px solid rgba(254, 254, 254, 0.6); 746 | border-radius: 0; 747 | flex: 1; 748 | } 749 | label:first-child { 750 | margin-left: 0; 751 | border-radius: .2em 0 0 .2em; 752 | } 753 | label:last-child { 754 | margin-right: 0; 755 | border-radius: 0 .2em .2em 0; 756 | } 757 | 758 | input[id='exercise-1']:checked ~ .actions label[for='exercise-1'], 759 | input[id='exercise-2']:checked ~ .actions label[for='exercise-2'], 760 | input[id='exercise-3']:checked ~ .actions label[for='exercise-3'], 761 | input[id='exercise-4']:checked ~ .actions label[for='exercise-4'], 762 | input[id='pos-0']:checked ~ .actions label[for='pos-0'], 763 | input[id='pos-1']:checked ~ .actions label[for='pos-1'], 764 | input[id='pos-2']:checked ~ .actions label[for='pos-2'], 765 | input[id='pos-3']:checked ~ .actions label[for='pos-3'], 766 | input[id='red']:checked ~ .actions label[for='red'], 767 | input[id='cyan']:checked ~ .actions label[for='cyan'], 768 | input[id='lime']:checked ~ .actions label[for='lime'] { 769 | color: #e72828; 770 | border: 1px solid #031523; 771 | background-color: #f9fbfc; 772 | } 773 | 774 | input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(1) { 775 | flex: 1 0 0%; 776 | } 777 | input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(2) { 778 | flex: 1; 779 | } 780 | input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(3) { 781 | flex: 1 0 30%; 782 | } 783 | 784 | input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(1), input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(2), input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(3) { 785 | flex: 1; 786 | } 787 | 788 | input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(1), input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(2) { 789 | flex: 1 0 30%; 790 | } 791 | input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(3) { 792 | flex: 1; 793 | } -------------------------------------------------------------------------------- /404/style.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*********************************** 4 | /* 1. BODY */ 5 | /***********************************/ 6 | 7 | * { 8 | margin: 0; 9 | padding: 0; 10 | -webkit-text-size-adjust: none; 11 | } 12 | 13 | html, body { 14 | height: 100%; 15 | overflow: hidden; 16 | } 17 | 18 | body { 19 | padding: 0; 20 | margin: 0; 21 | background: #030303; 22 | font-size: 14px; 23 | line-height: 1; 24 | } 25 | 26 | label { 27 | cursor: pointer; 28 | } 29 | 30 | a { 31 | margin: 0; 32 | padding: 0; 33 | vertical-align: baseline; 34 | background: transparent; 35 | text-decoration: none; 36 | color: #39414d; 37 | } 38 | 39 | input, select, button, textarea { 40 | margin: 0; 41 | font-size: 100%; 42 | } 43 | 44 | html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, 45 | a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, 46 | small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, 47 | fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input { 48 | border: 0; 49 | outline: 0; 50 | font-size: 100%; 51 | vertical-align: baseline; 52 | background: transparent; 53 | } 54 | 55 | 56 | .top-header:before { 57 | background-image: url(https://1.bp.blogspot.com/-gxsOcYWghHA/Xp_izTh4sFI/AAAAAAAAU8s/y637Fwg99qAuzW9na_NT_uApny8Vce95gCEwYBhgL/s1600/header-footer-gradient-bg.png); 58 | } 59 | .top-header:before { 60 | content: ''; 61 | display: block; 62 | width: 100%; 63 | height: 4px; 64 | background-repeat: repeat-x; 65 | background-size: contain; 66 | position: absolute; 67 | top: 0; 68 | left: 0; 69 | opacity:0.5; 70 | } 71 | 72 | 73 | .starsec{ 74 | content: " "; 75 | position: absolute; 76 | width: 3px; 77 | height: 3px; 78 | background: transparent; 79 | box-shadow: 571px 173px #00BCD4, 1732px 143px #00BCD4, 1745px 454px #FF5722, 234px 784px #00BCD4, 1793px 1123px #FF9800, 1076px 504px #03A9F4, 633px 601px #FF5722, 350px 630px #FFEB3B, 1164px 782px #00BCD4, 76px 690px #3F51B5, 1825px 701px #CDDC39, 1646px 578px #FFEB3B, 544px 293px #2196F3, 445px 1061px #673AB7, 928px 47px #00BCD4, 168px 1410px #8BC34A, 777px 782px #9C27B0, 1235px 1941px #9C27B0, 104px 1690px #8BC34A, 1167px 1338px #E91E63, 345px 1652px #009688, 1682px 1196px #F44336, 1995px 494px #8BC34A, 428px 798px #FF5722, 340px 1623px #F44336, 605px 349px #9C27B0, 1339px 1344px #673AB7, 1102px 1745px #3F51B5, 1592px 1676px #2196F3, 419px 1024px #FF9800, 630px 1033px #4CAF50, 1995px 1644px #00BCD4, 1092px 712px #9C27B0, 1355px 606px #F44336, 622px 1881px #CDDC39, 1481px 621px #9E9E9E, 19px 1348px #8BC34A, 864px 1780px #E91E63, 442px 1136px #2196F3, 67px 712px #FF5722, 89px 1406px #F44336, 275px 321px #009688, 592px 630px #E91E63, 1012px 1690px #9C27B0, 1749px 23px #673AB7, 94px 1542px #FFEB3B, 1201px 1657px #3F51B5, 1505px 692px #2196F3, 1799px 601px #03A9F4, 656px 811px #00BCD4, 701px 597px #00BCD4, 1202px 46px #FF5722, 890px 569px #FF5722, 1613px 813px #2196F3, 223px 252px #FF9800, 983px 1093px #F44336, 726px 1029px #FFC107, 1764px 778px #CDDC39, 622px 1643px #F44336, 174px 1559px #673AB7, 212px 517px #00BCD4, 340px 505px #FFF, 1700px 39px #FFF, 1768px 516px #F44336, 849px 391px #FF9800, 228px 1824px #FFF, 1119px 1680px #FFC107, 812px 1480px #3F51B5, 1438px 1585px #CDDC39, 137px 1397px #FFF, 1080px 456px #673AB7, 1208px 1437px #03A9F4, 857px 281px #F44336, 1254px 1306px #CDDC39, 987px 990px #4CAF50, 1655px 911px #00BCD4, 1102px 1216px #FF5722, 1807px 1044px #FFF, 660px 435px #03A9F4, 299px 678px #4CAF50, 1193px 115px #FF9800, 918px 290px #CDDC39, 1447px 1422px #FFEB3B, 91px 1273px #9C27B0, 108px 223px #FFEB3B, 146px 754px #00BCD4, 461px 1446px #FF5722, 1004px 391px #673AB7, 1529px 516px #F44336, 1206px 845px #CDDC39, 347px 583px #009688, 1102px 1332px #F44336, 709px 1756px #00BCD4, 1972px 248px #FFF, 1669px 1344px #FF5722, 1132px 406px #F44336, 320px 1076px #CDDC39, 126px 943px #FFEB3B, 263px 604px #FF5722, 1546px 692px #F44336; 80 | animation: animStar 150s linear infinite; 81 | } 82 | 83 | .starthird 84 | { 85 | content: " "; 86 | position: absolute; 87 | width: 3px; 88 | height: 3px; 89 | background: transparent; 90 | box-shadow: 571px 173px #00BCD4, 1732px 143px #00BCD4, 1745px 454px #FF5722, 234px 784px #00BCD4, 1793px 1123px #FF9800, 1076px 504px #03A9F4, 633px 601px #FF5722, 350px 630px #FFEB3B, 1164px 782px #00BCD4, 76px 690px #3F51B5, 1825px 701px #CDDC39, 1646px 578px #FFEB3B, 544px 293px #2196F3, 445px 1061px #673AB7, 928px 47px #00BCD4, 168px 1410px #8BC34A, 777px 782px #9C27B0, 1235px 1941px #9C27B0, 104px 1690px #8BC34A, 1167px 1338px #E91E63, 345px 1652px #009688, 1682px 1196px #F44336, 1995px 494px #8BC34A, 428px 798px #FF5722, 340px 1623px #F44336, 605px 349px #9C27B0, 1339px 1344px #673AB7, 1102px 1745px #3F51B5, 1592px 1676px #2196F3, 419px 1024px #FF9800, 630px 1033px #4CAF50, 1995px 1644px #00BCD4, 1092px 712px #9C27B0, 1355px 606px #F44336, 622px 1881px #CDDC39, 1481px 621px #9E9E9E, 19px 1348px #8BC34A, 864px 1780px #E91E63, 442px 1136px #2196F3, 67px 712px #FF5722, 89px 1406px #F44336, 275px 321px #009688, 592px 630px #E91E63, 1012px 1690px #9C27B0, 1749px 23px #673AB7, 94px 1542px #FFEB3B, 1201px 1657px #3F51B5, 1505px 692px #2196F3, 1799px 601px #03A9F4, 656px 811px #00BCD4, 701px 597px #00BCD4, 1202px 46px #FF5722, 890px 569px #FF5722, 1613px 813px #2196F3, 223px 252px #FF9800, 983px 1093px #F44336, 726px 1029px #FFC107, 1764px 778px #CDDC39, 622px 1643px #F44336, 174px 1559px #673AB7, 212px 517px #00BCD4, 340px 505px #FFF, 1700px 39px #FFF, 1768px 516px #F44336, 849px 391px #FF9800, 228px 1824px #FFF, 1119px 1680px #FFC107, 812px 1480px #3F51B5, 1438px 1585px #CDDC39, 137px 1397px #FFF, 1080px 456px #673AB7, 1208px 1437px #03A9F4, 857px 281px #F44336, 1254px 1306px #CDDC39, 987px 990px #4CAF50, 1655px 911px #00BCD4, 1102px 1216px #FF5722, 1807px 1044px #FFF, 660px 435px #03A9F4, 299px 678px #4CAF50, 1193px 115px #FF9800, 918px 290px #CDDC39, 1447px 1422px #FFEB3B, 91px 1273px #9C27B0, 108px 223px #FFEB3B, 146px 754px #00BCD4, 461px 1446px #FF5722, 1004px 391px #673AB7, 1529px 516px #F44336, 1206px 845px #CDDC39, 347px 583px #009688, 1102px 1332px #F44336, 709px 1756px #00BCD4, 1972px 248px #FFF, 1669px 1344px #FF5722, 1132px 406px #F44336, 320px 1076px #CDDC39, 126px 943px #FFEB3B, 263px 604px #FF5722, 1546px 692px #F44336; 91 | animation: animStar 10s linear infinite; 92 | } 93 | 94 | .starfourth 95 | { 96 | content: " "; 97 | position: absolute; 98 | width: 2px; 99 | height: 2px; 100 | background: transparent; 101 | box-shadow: 571px 173px #00BCD4, 1732px 143px #00BCD4, 1745px 454px #FF5722, 234px 784px #00BCD4, 1793px 1123px #FF9800, 1076px 504px #03A9F4, 633px 601px #FF5722, 350px 630px #FFEB3B, 1164px 782px #00BCD4, 76px 690px #3F51B5, 1825px 701px #CDDC39, 1646px 578px #FFEB3B, 544px 293px #2196F3, 445px 1061px #673AB7, 928px 47px #00BCD4, 168px 1410px #8BC34A, 777px 782px #9C27B0, 1235px 1941px #9C27B0, 104px 1690px #8BC34A, 1167px 1338px #E91E63, 345px 1652px #009688, 1682px 1196px #F44336, 1995px 494px #8BC34A, 428px 798px #FF5722, 340px 1623px #F44336, 605px 349px #9C27B0, 1339px 1344px #673AB7, 1102px 1745px #3F51B5, 1592px 1676px #2196F3, 419px 1024px #FF9800, 630px 1033px #4CAF50, 1995px 1644px #00BCD4, 1092px 712px #9C27B0, 1355px 606px #F44336, 622px 1881px #CDDC39, 1481px 621px #9E9E9E, 19px 1348px #8BC34A, 864px 1780px #E91E63, 442px 1136px #2196F3, 67px 712px #FF5722, 89px 1406px #F44336, 275px 321px #009688, 592px 630px #E91E63, 1012px 1690px #9C27B0, 1749px 23px #673AB7, 94px 1542px #FFEB3B, 1201px 1657px #3F51B5, 1505px 692px #2196F3, 1799px 601px #03A9F4, 656px 811px #00BCD4, 701px 597px #00BCD4, 1202px 46px #FF5722, 890px 569px #FF5722, 1613px 813px #2196F3, 223px 252px #FF9800, 983px 1093px #F44336, 726px 1029px #FFC107, 1764px 778px #CDDC39, 622px 1643px #F44336, 174px 1559px #673AB7, 212px 517px #00BCD4, 340px 505px #FFF, 1700px 39px #FFF, 1768px 516px #F44336, 849px 391px #FF9800, 228px 1824px #FFF, 1119px 1680px #FFC107, 812px 1480px #3F51B5, 1438px 1585px #CDDC39, 137px 1397px #FFF, 1080px 456px #673AB7, 1208px 1437px #03A9F4, 857px 281px #F44336, 1254px 1306px #CDDC39, 987px 990px #4CAF50, 1655px 911px #00BCD4, 1102px 1216px #FF5722, 1807px 1044px #FFF, 660px 435px #03A9F4, 299px 678px #4CAF50, 1193px 115px #FF9800, 918px 290px #CDDC39, 1447px 1422px #FFEB3B, 91px 1273px #9C27B0, 108px 223px #FFEB3B, 146px 754px #00BCD4, 461px 1446px #FF5722, 1004px 391px #673AB7, 1529px 516px #F44336, 1206px 845px #CDDC39, 347px 583px #009688, 1102px 1332px #F44336, 709px 1756px #00BCD4, 1972px 248px #FFF, 1669px 1344px #FF5722, 1132px 406px #F44336, 320px 1076px #CDDC39, 126px 943px #FFEB3B, 263px 604px #FF5722, 1546px 692px #F44336; 102 | animation: animStar 50s linear infinite; 103 | } 104 | 105 | .starfifth 106 | { 107 | content: " "; 108 | position: absolute; 109 | width: 1px; 110 | height: 1px; 111 | background: transparent; 112 | box-shadow: 571px 173px #00BCD4, 1732px 143px #00BCD4, 1745px 454px #FF5722, 234px 784px #00BCD4, 1793px 1123px #FF9800, 1076px 504px #03A9F4, 633px 601px #FF5722, 350px 630px #FFEB3B, 1164px 782px #00BCD4, 76px 690px #3F51B5, 1825px 701px #CDDC39, 1646px 578px #FFEB3B, 544px 293px #2196F3, 445px 1061px #673AB7, 928px 47px #00BCD4, 168px 1410px #8BC34A, 777px 782px #9C27B0, 1235px 1941px #9C27B0, 104px 1690px #8BC34A, 1167px 1338px #E91E63, 345px 1652px #009688, 1682px 1196px #F44336, 1995px 494px #8BC34A, 428px 798px #FF5722, 340px 1623px #F44336, 605px 349px #9C27B0, 1339px 1344px #673AB7, 1102px 1745px #3F51B5, 1592px 1676px #2196F3, 419px 1024px #FF9800, 630px 1033px #4CAF50, 1995px 1644px #00BCD4, 1092px 712px #9C27B0, 1355px 606px #F44336, 622px 1881px #CDDC39, 1481px 621px #9E9E9E, 19px 1348px #8BC34A, 864px 1780px #E91E63, 442px 1136px #2196F3, 67px 712px #FF5722, 89px 1406px #F44336, 275px 321px #009688, 592px 630px #E91E63, 1012px 1690px #9C27B0, 1749px 23px #673AB7, 94px 1542px #FFEB3B, 1201px 1657px #3F51B5, 1505px 692px #2196F3, 1799px 601px #03A9F4, 656px 811px #00BCD4, 701px 597px #00BCD4, 1202px 46px #FF5722, 890px 569px #FF5722, 1613px 813px #2196F3, 223px 252px #FF9800, 983px 1093px #F44336, 726px 1029px #FFC107, 1764px 778px #CDDC39, 622px 1643px #F44336, 174px 1559px #673AB7, 212px 517px #00BCD4, 340px 505px #FFF, 1700px 39px #FFF, 1768px 516px #F44336, 849px 391px #FF9800, 228px 1824px #FFF, 1119px 1680px #FFC107, 812px 1480px #3F51B5, 1438px 1585px #CDDC39, 137px 1397px #FFF, 1080px 456px #673AB7, 1208px 1437px #03A9F4, 857px 281px #F44336, 1254px 1306px #CDDC39, 987px 990px #4CAF50, 1655px 911px #00BCD4, 1102px 1216px #FF5722, 1807px 1044px #FFF, 660px 435px #03A9F4, 299px 678px #4CAF50, 1193px 115px #FF9800, 918px 290px #CDDC39, 1447px 1422px #FFEB3B, 91px 1273px #9C27B0, 108px 223px #FFEB3B, 146px 754px #00BCD4, 461px 1446px #FF5722, 1004px 391px #673AB7, 1529px 516px #F44336, 1206px 845px #CDDC39, 347px 583px #009688, 1102px 1332px #F44336, 709px 1756px #00BCD4, 1972px 248px #FFF, 1669px 1344px #FF5722, 1132px 406px #F44336, 320px 1076px #CDDC39, 126px 943px #FFEB3B, 263px 604px #FF5722, 1546px 692px #F44336; 113 | animation: animStar 80s linear infinite; 114 | } 115 | 116 | @keyframes animStar 117 | { 118 | 0% { 119 | transform: translateY(0px); 120 | } 121 | 100% { 122 | transform: translateY(-2000px); 123 | } 124 | } 125 | 126 | 127 | 128 | button { 129 | border: none; 130 | padding: 0; 131 | font-size: 0; 132 | line-height: 0; 133 | background: none; 134 | cursor: pointer; 135 | } 136 | 137 | :focus { 138 | outline: 0; 139 | } 140 | 141 | .clearfix:before, .clearfix:after { 142 | content: "\0020"; 143 | display: block; 144 | height: 0; 145 | visibility: hidden; 146 | } 147 | 148 | .clearfix:after { 149 | clear: both; 150 | } 151 | 152 | .clearfix { 153 | zoom: 1; 154 | } 155 | 156 | /* 1. END BODY */ 157 | /***********************************/ 158 | 159 | /*********************************** 160 | /* 2. CONTENT */ 161 | /***********************************/ 162 | /* 2.1. Section error */ 163 | .error { 164 | min-height: 100vh; 165 | position: relative; 166 | padding: 240px 0; 167 | box-sizing: border-box; 168 | width: 100%; 169 | height: 100%; 170 | text-align: center; 171 | margin-top: 70px; 172 | } 173 | 174 | .error__overlay { 175 | position: absolute; 176 | top: 0; 177 | left: 0; 178 | width: 100%; 179 | height: 100%; 180 | overflow: hidden; 181 | } 182 | 183 | .error__content { 184 | position: absolute; 185 | top: 50%; 186 | left: 50%; 187 | width: 100%; 188 | -webkit-transform: translate(-50%, -50%); 189 | transform: translate(-50%, -50%); 190 | } 191 | 192 | .error__message { 193 | text-align: center; 194 | color: #000000c2; 195 | } 196 | 197 | .message__title { 198 | font-family: 'Montserrat', sans-serif; 199 | font-weight: 900; 200 | text-transform: uppercase; 201 | letter-spacing: 5px; 202 | font-size: 5.6rem; 203 | padding-bottom: 40px; 204 | max-width: 960px; 205 | margin: 0 auto; 206 | } 207 | 208 | .message__text { 209 | font-family: 'Montserrat', sans-serif; 210 | line-height: 42px; 211 | font-size: 18px; 212 | padding: 0 60px; 213 | max-width: 680px; 214 | margin: auto; 215 | } 216 | 217 | .error__nav { 218 | max-width: 600px; 219 | margin: 40px auto 0; 220 | text-align: center; 221 | } 222 | 223 | .e-nav__form { 224 | position: relative; 225 | height: 45px; 226 | overflow: hidden; 227 | width: 170px; 228 | display: inline-block; 229 | vertical-align: top; 230 | border: 1px solid #212121; 231 | padding-left: 10px; 232 | padding-right: 46px; 233 | } 234 | 235 | .e-nav__icon { 236 | position: absolute; 237 | right: 15px; 238 | top: 50%; 239 | -webkit-transform: translateY(-50%); 240 | transform: translateY(-50%); 241 | color: #979595; 242 | -webkit-transition: color .25s ease; 243 | transition: color .25s ease; 244 | } 245 | 246 | .e-nav__link { 247 | height: 45px; 248 | line-height: 45px; 249 | width: 170px; 250 | display: inline-block; 251 | vertical-align: top; 252 | margin: 0 15px; 253 | border: 2.5px solid #585555; 254 | color: #f5f842; 255 | text-decoration: none; 256 | font-family: 'Montserrat', sans-serif; 257 | text-transform: uppercase; 258 | font-size: 11px; 259 | letter-spacing: .1rem; 260 | position: relative; 261 | overflow: hidden; 262 | animation: blinker 2s ease-in-out infinite; 263 | } 264 | 265 | @keyframes blinker { 266 | 40% { 267 | opacity: 0; 268 | } 269 | } 270 | 271 | .e-nav__link:before { 272 | content: ''; 273 | height: 200px; 274 | background: #212121; 275 | position: absolute; 276 | top: 70px; 277 | right: 70px; 278 | width: 260px; 279 | -webkit-transition: all .3s; 280 | transition: all .3s; 281 | -webkit-transform: rotate(50deg); 282 | transform: rotate(50deg); 283 | } 284 | 285 | .e-nav__link:after { 286 | -webkit-transition: all .3s; 287 | transition: all .3s; 288 | z-index: 999; 289 | position: relative; 290 | } 291 | 292 | .e-nav__link:after { 293 | content: "Home Page"; 294 | } 295 | 296 | .e-nav__link:hover:before { 297 | top: -60px; 298 | right: -50px; 299 | } 300 | 301 | .e-nav__link:hover { 302 | color: #fff; 303 | } 304 | 305 | .e-nav__link:nth-child(2):hover:after { 306 | color: #fff; 307 | } 308 | /* 2.1. END Section Error */ 309 | 310 | /* 2.2. Social style */ 311 | .error__social { 312 | position: absolute; 313 | top: 50%; 314 | -webkit-transform: translateY(-50%); 315 | transform: translateY(-50%); 316 | left: 20px; 317 | z-index: 10; 318 | } 319 | 320 | .e-social__list { 321 | margin: 0; 322 | padding: 0; 323 | list-style-type: none; 324 | } 325 | 326 | .e-social__icon { 327 | padding-bottom: 30px; 328 | } 329 | 330 | .e-social__icon:last-child { 331 | padding-bottom: 0; 332 | } 333 | 334 | .e-social__link { 335 | color: #fff; 336 | -webkit-transition: all .25s ease; 337 | transition: all .25s ease; 338 | display: block; 339 | } 340 | 341 | .e-social__link:hover { 342 | opacity: .7; 343 | } 344 | /* 2.2. END Social style */ 345 | 346 | /* 2.3. Lamp */ 347 | .lamp { 348 | position: absolute; 349 | left: 0px; 350 | right: 0px; 351 | top: 0px; 352 | margin: 0px auto; 353 | width: 300px; 354 | display: flex; 355 | flex-direction: column; 356 | align-items: center; 357 | transform-origin: center top; 358 | animation-timing-function: cubic-bezier(0.6, 0, 0.38, 1); 359 | animation: move 5.1s infinite; 360 | } 361 | 362 | @keyframes move { 363 | 0% { 364 | transform: rotate(40deg); 365 | } 366 | 50% { 367 | transform: rotate(-40deg); 368 | } 369 | 100% { 370 | transform: rotate(40deg); 371 | } 372 | } 373 | 374 | .cable { 375 | width: 8px; 376 | height: 208px; 377 | background-image: linear-gradient(rgb(32 148 218 / 70%), rgb(80, 58, 38)), linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)); 378 | } 379 | 380 | .cover { 381 | width: 200px; 382 | height: 80px; 383 | background: #683416; 384 | border-top-left-radius: 50%; 385 | border-top-right-radius: 50%; 386 | position: relative; 387 | z-index: 200; 388 | } 389 | 390 | .in-cover { 391 | width: 100%; 392 | max-width: 200px; 393 | height: 20px; 394 | border-radius: 100%; 395 | background: #fff; 396 | position: absolute; 397 | left: 0px; 398 | right: 0px; 399 | margin: 0px auto; 400 | bottom: -9px; 401 | z-index: 100; 402 | } 403 | .in-cover .bulb { 404 | width: 50px; 405 | height: 50px; 406 | background-color: #fff; 407 | border-radius: 50%; 408 | position: absolute; 409 | left: 0px; 410 | right: 0px; 411 | bottom: -20px; 412 | margin: 0px auto; 413 | -webkit-box-shadow: 0 0 15px 7px rgba(255,255,0,0.9), 0 0 40px 25px rgba(255,255,0,0.5), -75px 0 30px 15px rgba(255,255,0,0.2); 414 | box-shadow: 0 0 25px 7px rgb(255,255,0), 0 0 64px 47px rgba(255,255,0,0.5), 0px 0 30px 15px rgba(255,255,0,0.2); 415 | } 416 | 417 | 418 | .light { 419 | width: 200px; 420 | height: 0px; 421 | border-bottom: 1000px solid rgba(241, 255, 111, 0.76); 422 | filter: blur(200px); 423 | border-left: 50px solid transparent; 424 | border-right: 50px solid transparent; 425 | position: absolute; 426 | left: 0px; 427 | right: 0px; 428 | top: 270px; 429 | margin: 0px auto; 430 | z-index: 1; 431 | border-radius: 90px 90px 0px 0px; 432 | } 433 | /* 2.3. END Lamp */ 434 | /*********************************** 435 | /* 2. END CONTENT */ 436 | /***********************************/ 437 | 438 | /*********************************** 439 | /* 3. RESPONSIVE */ 440 | /***********************************/ 441 | .error { 442 | overflow: hidden; 443 | max-height: 100vh; 444 | } 445 | @media (max-width: 1400px) { 446 | .lamp { 447 | zoom: .5; 448 | } 449 | .error__content { 450 | top: 55%; 451 | } 452 | .message__title { 453 | font-size: 3.5rem; 454 | } 455 | } 456 | @media (max-width: 900px) { 457 | 458 | .message__title { 459 | font-size: 34px; 460 | 461 | } 462 | .error__content { 463 | top: 55%; 464 | } 465 | } 466 | @media (max-width: 950px) { 467 | .lamp__wrap { 468 | max-height: 100vh; 469 | overflow: hidden; 470 | max-width: 100vw; 471 | } 472 | .error__social { 473 | bottom: 30px; 474 | top: auto; 475 | transform: none; 476 | width: 100%; 477 | position: fixed; 478 | left: 0; 479 | } 480 | .e-social__icon { 481 | display: inline-block; 482 | padding-right: 30px; 483 | } 484 | .e-social__icon:last-child { 485 | padding-right: 0; 486 | } 487 | .e-social__icon { 488 | padding-bottom: 0; 489 | } 490 | } 491 | @media (max-width: 750px) { 492 | body, html, { 493 | max-height: 100vh; 494 | } 495 | .error__content { 496 | position: static; 497 | margin: 0 auto; 498 | transform: none; 499 | padding-top: 300px; 500 | } 501 | .error { 502 | padding-top: 0; 503 | padding-bottom: 100px; 504 | height: 100vh; 505 | } 506 | } 507 | @media (max-width: 650px) { 508 | .message__title { 509 | font-size: 36px; 510 | padding-bottom: 20px; 511 | } 512 | .message__text { 513 | font-size: 16px; 514 | line-height: 2; 515 | padding-right: 20px; 516 | padding-left: 20px; 517 | } 518 | .lamp { 519 | zoom: .6; 520 | } 521 | .error__content { 522 | padding-top: 180px; 523 | } 524 | } 525 | @media (max-width: 480px) { 526 | 527 | .message__title { 528 | font-size: 30px; 529 | } 530 | .message__text { 531 | padding-left: 10px; 532 | padding-right: 10px; 533 | font-size: 15px; 534 | } 535 | .error__nav { 536 | margin-top: 20px; 537 | } 538 | } --------------------------------------------------------------------------------