[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-70888":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":22,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":37,"readmeContent":38,"aiSummary":39,"trendingCount":16,"starSnapshotCount":16,"syncStatus":40,"lastSyncTime":41,"discoverSource":42},70888,"You-Dont-Need-JavaScript","you-dont-need\u002FYou-Dont-Need-JavaScript","you-dont-need","CSS is powerful, you can do a lot of things without JS.","",null,"HTML",20534,1500,317,52,0,8,44.53,"GNU General Public License v3.0",false,"master",true,[24,25,26,27,28,29,30,31,32,33,34,35,36],"accordion","burger-menu","carousel","counter","css","font","game","hacktoberfest","javascript","popover","textfield","tooltip","treeview","2026-06-12 02:02:44","English | [简体中文](.\u002FREADME-zh_CN.md)\n\n# You Don't Need JavaScript\n\n[![Join the community on Spectrum](https:\u002F\u002Fwithspectrum.github.io\u002Fbadge\u002Fbadge.svg)](https:\u002F\u002Fdev.to\u002Ft\u002Fjavascript)\n\nPlease be aware that the demos may exhibit significant accessibility issues, such as problems with keyboard navigation, speech synthesis, and progressive enhancement or degradation.\n\n### Style Guide:\n\n```markdown\n## \u003Ca id=\"DemoSubject\">\u003C\u002Fa>Carousel\n\n[\u003Cimg src=\"images\u002Fimage1.png\" height=\"230\" title=\"Demo 1\">](http:\u002F\u002Furl-to-page)\n[\u003Cimg src=\"images\u002Fimage2.png\" height=\"230\" title=\"Demo 2\">](http:\u002F\u002Furl-to-page)\n[\u003Cimg src=\"images\u002Fimage3.png\" height=\"230\" title=\"Demo 3\">](http:\u002F\u002Furl-to-page)\n\n**[⬆ back to top](#quick-links)**\n```\n\n---\n\n## Quick Links\n\n- [You Don't Need JavaScript](#you-dont-need-javascript)\n- [Website Demo Using HTML CSS](#website-demo)\n- [Style Guide](#style-guide)\n- [Accordion \u002F Toggle](#accordion--toggle)\n- [Analog Clock](#analog-clock)\n- [Animated Button](#animated-button)\n- [Animated Buttons](#animated-buttons)\n- [Badge](#badge)\n- [Bonfire](#bonfire)\n- [Book Animation](#book-animation)\n- [Bubble](#bubble)\n- [Bus](#bus)\n- [Burger Menu](#burger-menu)\n- [Button Animation](#button-animation)\n- [Button Hover & Click Animation](#button-hover-click-animation)\n- [Button with Rotating Text & Ripple Animation](#button-rotate-and-ripple-animation)\n- [Baby Yoda Animation](#baby-yoda-animation-css)\n- [Captain America Shield](#captain-america-shield)\n- [Carousel](#carousel)\n- [Compass Loader](#compass-loader)\n- [City Animation Footer](#city-animation-footer)\n- [Carousel Effect](#carousel-effect)\n- [Counter of Checked Checkboxes](#counter-of-checked-check-boxes)\n- [CSS Form Handling](#css-form-handling)\n- [Climbing Loading](#Climbing-Loading)\n- [Download_buttons](#Download_buttons)\n- [Dog Box Animation](#dog-box-animation)\n- [Dismissible Alert](#dismissible-alert)\n- [Dropdown Menu](#dropdown-menu)\n- [Dynamic Image Colorizing](#dynamic-image-colorizing)\n- [Earth](#earth)\n- [Enable Dark Mode](#darkmode)\n- [Fancy Menu](#fancy-menu)\n- [Flip the grid](#flip-grid)\n- [Flip on Click](#flip-on-click)\n- [Flipbook Storyboard](#flipbook-storyboard)\n- [Floating Label on Textfield](#floating-label-on-textfield)\n- [Floating Labels V2](#floating-labelv2)\n- [Font-Face (Latin)](#font-face-latin)\n- [Footer](#footer)\n- [Gradient Animation](#gradient-animation)\n- [Growing Flower](#growing-flower)\n- [Horizontal image slider](#horizontal-image-slider)\n- [Hourglass Sand Timer](#hourglass-sand-timer)\n- [Hover Animation](#hover-animation)\n- [Image Gallery](#image-gallery)\n- [Image Hover Effect]()\n- [Image Comparison Slider](#image-comparison-slider)\n- [Infinite Carousel](#infinite-carousel)\n- [Info on Hover \u002F Popover](#info-on-hover-popover)\n- [Input Text Field](#input-text)\n- [Interactive Resume](#interactive-resume)\n- [Jumping Ball](#jumping-ball)\n- [Light Bulb Animation](#light-bulb-animation)\n- [Lighthouse Scene](#lighthouse-scene)\n- [Loader Diamond Animation](#loader-diamond)\n- [Loaders](#loaders)\n- [Loading_Css_effect](#Loading-Css-effect)\n- [Lego_Loader](#Lego-Loader)\n- [MasterCard](#mastercard)\n- [Mobile Menu Off Canvas](#mobile-menu-off-canvas)\n- [Modal\u002FPopup](#modalpopup)\n- [Mondrian Composition](#mondrian-composition)\n- [Morph Loader](#morph-loader)\n- [Mouse Tracking](#mouse-tracking)\n- [Multi Step Checkout](#multi-step-checkout)\n- [NavBar](#navbar)\n- [Neon Button](#neon-button)\n- [Neon Card](#neon-card)\n- [Netlix Clone v2](#Netflix-Clone-v2)\n- [Neumorphism Card Design](#neumorphism-card-design)\n- [Night City](#night-city)\n- [Parallax Scrolling](#parallax-scrolling)\n- [Pendulum](#pendulum)\n- [Playing Card Animation](#playing-card-animation)\n- [Product Cards](#product-cards)\n- [Profile Cards](#profilecards)\n- [Radial Color Pulsar](#RadialPulsar)\n- [Responsive Counter Showing # of Items That Didn't Fit Screen](#responsive-counter-showing--of-items-that-didnt-fit-screen)\n- [Retro Loader](#RetroLoader)\n- [Ripple Effect](#ripple-effect)\n- [Redar Loader](#Redar-Loader)\n- [Resizable Split Panel](#resizable-split-panel)\n- [Rotating Text](#rotating-text)\n- [Scary Animation](#scary-animation)\n- [Scenery](#scenery)\n- [Scroll Video Cinematic Animation](#scroll-video-cinematic)\n- [Shake Button](#shake-button)\n- [Shuffling Squares](#shuffling-squares)\n- [Star Wars Intro](#star-wars-intro)\n- [Switch](#switch)\n- [Social Media Icons](#social-icons)\n- [Spaceship](#spaceship)\n- [Tables](#css-tables)\n- [Tabs](#tabs)\n- [MakemyTrip](#mmt)\n- [Text Hover Gallery](#text-hover-gallery)\n- [Text Spoiler Effect](#text-spoiler)\n- [Timeline](#timeline)\n- [Time Travel](#time-travel)\n- [Thank You Animation](#thankyou-animation)\n- [Toast Notification](#toast-notifications)\n- [Todo List](#todo-list)\n- [Tooltips](#tooltips)\n- [Treeview](#treeview)\n- [Twitter Heart Animation](#twitter-heart-animation)\n- [Tri Color Loader](#Tri-Color-Loader)\n- [Traffic Light Loader](#Traffic-light-loader)\n- [Book Animation](#book-animation)\n- [Zomato](#zomato)\n- [Zoom When Hover](#zoom-when-hover)\n- [Debit Card Hover effect](#debit-card-hover)\n- [Progress Bar On Scroll](#ProgressOnScroll)\n- [Password Strength Checker](#password-strength-checker)\n- [Pricing Table](#pricing-table)\n- [Text Change Animation](#text-change-animaton) \n- [Glide to Reveal](#glide-to-reveal)\n- [Terminal Animation](#terminal-animation)\n- **Contribution**\n  - [Contributors](#contributors)\n  - [Contributing](#contributing)\n\n---\n\n## \u003Ca id=\"earth\">\u003C\u002Fa>EARTH\n\n[EARTH](\u002FYou-Dont-Need-JavaScript\u002FEARTH\u002Fearth.mp4)\n\n**[⬆ back to top](#quick-links)**\n\n## \u003Ca id=\"image-hover-effect\">\u003C\u002Fa>Image Hover Effect\n\n[\u003Cimg src=\"Image-Hover-Effect\\image.png\" height=\"230\" title=\"Image Hover Effect\" alt=\"Image-Hover-Effect\">](http:\u002F\u002Furl-to-page)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"toggle\">\u003C\u002Fa>CSS Toggle\n\n[\u003Cimg src=\"images\u002Ftoggle1.png\" height=\"230\" title=\"CSS Toggle\" alt=\"Toggle\">](https:\u002F\u002Fcodepen.io\u002FVikash-Gorai\u002Fpen\u002FQWYbpVm)\n[\u003Cimg src=\"images\u002Ftoggle2.png\" height=\"230\" title=\"CSS Toggle\" alt=\"Toggle\">](https:\u002F\u002Fcodepen.io\u002FVikash-Gorai\u002Fpen\u002FQWYbpVm)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"text-spoiler\">\u003C\u002Fa>Text Spoiler Effect\n\n##### Light Theme:\n\n[\u003Cvideo width=\"400\" height=\"200\" controls>\n\n\u003Csource src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F4786bfb6-78e7-4682-b098-c49f3f518b5f\" type=\"video\u002Fmp4\">\nYour browser does not support the video tag.\n\u003C\u002Fvideo>](http:\u002F\u002Furl-to-light-theme-page)\n\n##### Dark Theme:\n\n[\u003Cvideo width=\"400\" height=\"200\" controls>\n\n\u003Csource src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F1b305f75-26b3-41c3-a19a-6f7bd043d393\" type=\"video\u002Fmp4\">\nYour browser does not support the video tag.\n\u003C\u002Fvideo>](http:\u002F\u002Furl-to-dark-theme-page)\n\n**[⬆ back to top](#quick-links)**\n\n## \u003Ca id=\"blog-cards\">\u003C\u002Fa>Blog Post Cards\n\n[\u003Cimg src=\"images\u002Fneuo.png\" height=\"230\" title=\"Demo 1\">](http:\u002F\u002Furl-to-page)\n[\u003Cimg src=\"images\u002Fclaycards.png\" height=\"230\" title=\"Demo 2\">](http:\u002F\u002Furl-to-page)\n[\u003Cimg src=\"images\u002Fglasscards.png\" height=\"230\" title=\"Demo 3\">](http:\u002F\u002Furl-to-page)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Faq-section\">\u003C\u002Fa>Faq Section\n\n[\u003Cimg src=\"images\u002Ffaqclay.png\" height=\"230\" title=\"Demo 1\">](http:\u002F\u002Furl-to-page)\n[\u003Cimg src=\"images\u002Ffaqneuo.png\" height=\"230\" title=\"Demo 2\">](http:\u002F\u002Furl-to-page)\n[\u003Cimg src=\"images\u002Ffaqglass.png\" height=\"230\" title=\"Demo 3\">](http:\u002F\u002Furl-to-page)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"pricing-table\">\u003C\u002Fa>Pricing Table\n\n[\u003Cimg src=\"images\u002Fpricingtable1.png\" height=\"230\" title=\"Demo 1\">](http:\u002F\u002Furl-to-page)\n[\u003Cimg src=\"images\u002Fpricingtable2.png\" height=\"230\" title=\"Demo 2\">](http:\u002F\u002Furl-to-page)\n[\u003Cimg src=\"images\u002Fpricingtable3.png\" height=\"230\" title=\"Demo 3\">](http:\u002F\u002Furl-to-page)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"social-icons\">\u003C\u002Fa>Social_media_icons\n\n[\u003Cimg src=\"images\u002Ficons.png\" height=\"230\" title=\"Social-media-icons\">]\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Accordion\">\u003C\u002Fa>Accordion \u002F Toggle\n\n[\u003Cimg src=\"images\u002Faccordion.png\" height=\"230\" title=\"Demo 1\">](http:\u002F\u002Fwww.mraffaele.com\u002Flabs\u002Fcss-only-accordions\u002F)\n[\u003Cimg src=\"images\u002Ftoggler.png\" height=\"230\" title=\"Demo 2\">](http:\u002F\u002Fcodepen.io\u002Fcristina-silva\u002Fpen\u002FpyXQrj)\n[\u003Cimg src=\"images\u002Ftoggler2.png\" height=\"230\" title=\"Demo 3\">](http:\u002F\u002Fcodepen.io\u002FPaulZi\u002Fpen\u002FzBbVvV)\n[\u003Cimg src=\"images\u002Faccordion.gif\" height=\"230\" title=\"Demo 4\">](http:\u002F\u002Fcodepen.io\u002Fekrof\u002Fpen\u002FYqmXdQ)\n[\u003Cimg src=\"images\u002FAccordionAndFAQ.gif\" height=\"230\" title=\"Demo 5\">](https:\u002F\u002Fcodepen.io\u002Ftheslladev\u002Fpen\u002FdyxzEqy)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Animated-Buttons\">\u003C\u002Fa>Animated Buttons\n\n\u003Cimg src=\"images\u002FAnimated-button-1.png\" height=\"230\" title=\"Demo 1\">\n\u003Cimg src=\"images\u002FAnimated-button.png\" height=\"230\" title=\"Demo 2\">\n\u003Cimg src=\"images\u002FAnimated-button-2.png\" height=\"230\" title=\"Demo 2\">\n\u003Cimg src=\"images\u002FliquidButton.png\" height=\"230\" title=\"Demo 2\">\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n \n\n## \u003Ca id=\"bus\">\u003C\u002Fa>Bus\n\n\u003Cimg src=\"images\u002Fbus.png\" height=\"230\" title=\"Demo 1\">\n\n## \u003Ca id=\"captain\">\u003C\u002Fa>Captain America Shield\n\n\u003Cimg src=\"Captain America Shield\u002Fimages\u002Fshield.png\" height=\"230\" title=\"Demo 1\">\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Carousel\">\u003C\u002Fa>Carousel\n\n[\u003Cimg src=\"images\u002Fslideshow2.png\" height=\"230\" title=\"Demo 1\">](http:\u002F\u002Fcodepen.io\u002FSitePoint\u002Fpen\u002FMyPVdK)\n[\u003Cimg src=\"images\u002Fslideshow.png\" height=\"230\" title=\"Demo 2\">](https:\u002F\u002Fcodepen.io\u002Fcavico\u002Fpen\u002FyOjwya)\n[\u003Cimg src=\"images\u002Fslideshow3.png\" height=\"230\" title=\"Demo 3\">](https:\u002F\u002Fcodepen.io\u002FFabianK\u002Fpen\u002FzJLLrR)\n[\u003Cimg src=\"images\u002Fcarousel.png\" height=\"230\" title=\"Demo 4\">](https:\u002F\u002Fcodepen.io\u002FNiklasKnaack\u002Fpen\u002FabrOMLY)\n[\u003Cimg src=\".\u002Fimages\u002FInfinite-carousel-purnasth.gif\" alt=\"Carousel-Nepal\" height=\"230\" title=\"Carousel-Nepal\">](https:\u002F\u002Fcodepen.io\u002Fpurnaaa\u002Fpen\u002FNWoWeBB)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Counter\">\u003C\u002Fa>Counter of checked check-boxes\n\n[\u003Cimg src=\"images\u002Fcheckedcounter.png\" height=\"230\" title=\"Demo 1\">](https:\u002F\u002Fcodepen.io\u002Fanon\u002Fpen\u002FeZWXOZ)\n[\u003Cimg src=\"images\u002Fcheckedcounter2.png\" height=\"230\" title=\"Demo 2\">](http:\u002F\u002Fcodepen.io\u002Flonekorean\u002Fpen\u002FwKbzv)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Climbing Loading\">\u003C\u002Fa>Climbing Loading\n\n[\u003Cimg src=\"images\u002FClimbing_Loading.gif\" height=\"230\" title=\"Demo\">](https:\u002F\u002Fcodepen.io\u002Fshail2604\u002Fpen\u002FGgoWVym)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Flip\">\u003C\u002Fa>Flip on click\n\n[\u003Cimg src=\"images\u002Fflipper.png\" height=\"230\" title=\"Demo\">](https:\u002F\u002Fcodepen.io\u002FRuudBurger\u002Fpen\u002Fbwjry)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Flip\">\u003C\u002Fa>Flip on click\n\n[\u003Cimg src=\"images\u002Fpendulum.png\" height=\"230\" title=\"Pendulum Animation Demo\">](https:\u002F\u002Fcodepen.io\u002FTAPAS-SINGHAL\u002Fpen\u002FZEwOGjj)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Animated Box\">\u003C\u002Fa>Animated Box\n\n[\u003Cimg src=\"images\u002FAnimatedBox.jpg\" height=\"230\" title=\"Demo\">](https:\u002F\u002Fcodepen.io\u002FAyan-Saxena\u002Fpen\u002FqBgBYoZ)\n[\u003Cimg src=\"images\u002FAnimatedBox2.jpg\" height=\"230\" title=\"Demo\">](https:\u002F\u002Fcodepen.io\u002FAyan-Saxena\u002Fpen\u002FqBgBYoZ)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"analogclock\">\u003C\u002Fa>Analog-clock\n\n[\u003Cimg src=\"images\u002Fclock.jpg\" height=\"230\" title=\"Analog-clock\">](https:\u002F\u002Fcodepen.io\u002Fhimadeepthi-sayani\u002Fpen\u002FRwvNqQm)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n[\u003Cimg src=\"images\u002Ftextfields.png\" height=\"230\" title=\"Demo\">](http:\u002F\u002Fcodepen.io\u002FKtorZ\u002Fpen\u002FZOzdqG)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"badge\">\u003C\u002Fa>Badge\n\n\u003Cimg src=\"images\u002Fbadge_design1.png\" height=\"230\" title=\"Demo\">\n\n\u003Cimg src=\"images\u002Fbadge_design2.png\" height=\"230\" title=\"Demo\">\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"text-hover-gallery\">\u003C\u002Fa>Badge\n\n[\u003Cimg src=\"images\u002FtextHoverGallery.gif\" height=\"230\" title=\"Demo\">](.\u002FText%20Hover%20gallery\u002Findex.html)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Font\">\u003C\u002Fa>Font-Face (Latin)\n\n[\u003Cimg src=\"images\u002Fsansfont.png\" height=\"230\" title=\"Demo\">](https:\u002F\u002Fyusugomori.com\u002Fprojects\u002Fcss-sans\u002Ffonts)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"WebsiteDemo\">\u003C\u002Fa>Website Demo\n\n[\u003Cimg src=\"images\u002FWebsite_demo.png\" height=\"230\" title=\"Website_Demo\">](https:\u002F\u002Fgithub.com\u002FGarv0504\u002FYou-Dont-Need-JavaScript\u002Fblob\u002FaddingWebsite\u002Fnew-website\u002Fimages\u002FWebsite_demo.png)\n[\u003Cimg src=\"images\u002FWebsite_demo_2.png\" height=\"230\" title=\"Website_Demo\">](https:\u002F\u002Fgithub.com\u002FGarv0504\u002FYou-Dont-Need-JavaScript\u002Fblob\u002FaddingWebsite\u002Fnew-website\u002Fimages\u002FWebsite_demo_2.png)\n[\u003Cimg src=\"images\u002FWebsite_demo_3.png\" height=\"230\" title=\"Website_Demo\">](https:\u002F\u002Fgithub.com\u002FGarv0504\u002FYou-Dont-Need-JavaScript\u002Fblob\u002FaddingWebsite\u002Fnew-website\u002Fimages\u002FWebsite_demo_3.png)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Travel-Website\">\u003C\u002Fa>Travelling Website\n\n[\u003Cimg src=\"images\u002FTravel_01.png\" height=\"250\" title=\"Website_Demo\">](https:\u002F\u002Fgithub.com\u002FGarv0504\u002FYou-Dont-Need-JavaScript\u002Fblob\u002FaddingWebsite\u002Fnew-website\u002Fimages\u002FTravel_01.png)\n[\u003Cimg src=\"images\u002FTravel_02.png\" height=\"250\" title=\"Website_Demo\">](https:\u002F\u002Fgithub.com\u002FGarv0504\u002FYou-Dont-Need-JavaScript\u002Fblob\u002FaddingWebsite\u002Fnew-website\u002Fimages\u002FTravel_02.png)\n[\u003Cimg src=\"images\u002FTravel_03.png\" height=\"250\" title=\"Website_Demo\">](https:\u002F\u002Fgithub.com\u002FGarv0504\u002FYou-Dont-Need-JavaScript\u002Fblob\u002FaddingWebsite\u002Fnew-website\u002Fimages\u002FTravel_03.png)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Info\">\u003C\u002Fa>Info on hover\u002F Popover\n\n[\u003Cimg src=\"images\u002Ftooltips.png\" height=\"230\" title=\"Demo 1\">](https:\u002F\u002Fcodepen.io\u002Fmonika-sivakumar\u002Fpen\u002FrNoqxVX)\n[\u003Cimg src=\"images\u002Ftooltips2.png\" height=\"230\" title=\"Demo 2\">](http:\u002F\u002Fcodepen.io\u002Fcristina-silva\u002Fpen\u002FXXOpga)\n[\u003Cimg src=\"images\u002Finfo-on-hover.png\" height=\"230\" title=\"Demo 3\">](http:\u002F\u002Fcodepen.io\u002FSitePoint\u002Fpen\u002FakAmPw)\n[\u003Cimg src=\"images\u002Ftooltips.gif\" height=\"230\" title=\"Demo 4\">](http:\u002F\u002Fcodepen.io\u002Fekrof\u002Fpen\u002FYqmXdQ)\n[\u003Cimg src=\"images\u002FPopover.gif\" height=\"230\" title=\"Demo 4\">](https:\u002F\u002Fcodepen.io\u002Ftheslladev\u002Fpen\u002FoNKPwro)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Image\">\u003C\u002Fa>Image Gallery\n\n[\u003Cimg src=\"images\u002Fgallery.png\" height=\"230\" title=\"Demo 1\">](https:\u002F\u002Fcodepen.io\u002Fshaishgandhi\u002Fpen\u002FyJzamw)\n[\u003Cimg src=\"images\u002Fgallery2.png\" height=\"230\" title=\"Demo 2\">](http:\u002F\u002Fcodepen.io\u002Fpavlovsk\u002Fpen\u002Fsjubp)\n[\u003Cimg src=\"images\u002Fgallery3.png\" height=\"230\" title=\"Demo 2\">](https:\u002F\u002Fcodepen.io\u002Folgamozejko\u002Fpen\u002FyLjwyye)\n[\u003Cimg src=\"images\u002Fvertical-gallery.gif\" height=\"230\" title=\"Demo 4\">]()\n[\u003Cimg src=\".\u002FAuthor\u002Fa-img2.jpg\" height=\"230\" title=\"Demo 5\">]()\n[\u003Cimg src=\"images\u002Finfinite-slider.png\" height=\"230\" title=\"Demo 6\">]()\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"image-comparison-slider\">\u003C\u002Fa>Image Comparison Slider\n\n[\u003Cimg src=\"Image Comparision Slider\u002Fss_1.png\" height=\"230\" title=\"Pure CSS Image Comparison Slider Demo 1\">](Image%20Comparision%20Slider\u002Findex.html)\n[\u003Cimg src=\"Image Comparision Slider\u002Fss_2.png\" height=\"230\" title=\"Pure CSS Image Comparison Slider Demo 2\">](Image%20Comparision%20Slider\u002Findex.html)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"interactive-image\">\u003C\u002Fa>Interactive Image Gallery\n\n[\u003Cimg src=\".\u002Fimages\u002Finteractive-image.png\" height=\"230\" title=\"Demo Image\">]\n\u003Cbr>\n[\u003Cvideo src=\".\u002Fdemo video\u002Finteractive-image.mov\" height=\"230\" title=\"Demo Video\">]\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Loaders\">\u003C\u002Fa>Loaders\n\n[\u003Cimg src=\"images\u002Floader.png\" height=\"230\" title=\"Demo 1\">](http:\u002F\u002Fcodepen.io\u002Flucadem1313\u002Fpen\u002FvKWqRV)\n[\u003Cimg src=\"images\u002Floader2.png\" height=\"230\" title=\"Demo 2\">](http:\u002F\u002Fcodepen.io\u002Flucadem1313\u002Fpen\u002FXKzLER)\n[\u003Cimg src=\"images\u002Floader3.png\" height=\"230\" title=\"Demo 3\">](http:\u002F\u002Fcodepen.io\u002Fbrunjo\u002Fpen\u002FxbwVXJ)\n[\u003Cimg src=\"images\u002Floader4.png\" height=\"230\" title=\"Demo 4\">](http:\u002F\u002Fcodepen.io\u002Fbrunjo\u002Fpen\u002FByjRPy)\n[\u003Cimg src=\"images\u002Floader5.png\" height=\"230\" title=\"Demo 5\">](http:\u002F\u002Fcodepen.io\u002Fbrunjo\u002Fpen\u002FLEGyrJ)\n[\u003Cimg src=\"images\u002Floader6.png\" height=\"230\" title=\"Demo 6\">](http:\u002F\u002Fcodepen.io\u002Fbrunjo\u002Fpen\u002FbNEWjV)\n[\u003Cimg src=\"images\u002Floader7.png\" height=\"230\" title=\"Demo 7\">](http:\u002F\u002Fcodepen.io\u002Fbrunjo\u002Fpen\u002FwBKmbm)\n[\u003Cimg src=\"images\u002Floader8.png\" height=\"230\" title=\"Demo 8\">](http:\u002F\u002Ftobiasahlin.com\u002Fspinkit\u002F)\n[\u003Cimg src=\"images\u002Floader9.png\" height=\"230\" title=\"Demo 9\">](http:\u002F\u002Fcodepen.io\u002Fviduthalai1947\u002Fpen\u002FJkhDK)\n[\u003Cimg src=\".\u002Fimages\u002Fcss-loader-purna.gif\" alt=\"CSS-Loader-Purna\" height=\"230\" title=\"CSS-Loader-Purna\">](https:\u002F\u002Fcodepen.io\u002Fpurnaaa\u002Fpen\u002FvYVVygB)\n[\u003Cimg src=\"images\u002Floader10.png\" height=\"230\" title=\"Demo 10\">](https:\u002F\u002Fcodepen.io\u002FSahil-Patil-the-sans\u002Fpen\u002FWNPbVqK)\n[\u003Cimg src=\"images\u002Floader11.gif\" height=\"230\" title=\"Demo 11\">](https:\u002F\u002Fcodepen.io\u002Fsugeng-sulistiyawan\u002Fpen\u002FPoyjPWd)\n[\u003Cimg src=\"images\u002Floader12.gif\" height=\"230\" title=\"Demo 12\">](http:\u002F\u002Fcodepen.io\u002Frcjasub\u002Fpen\u002FzxrddOP)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"MasterCard\">\u003C\u002Fa>MasterCard\n\n[\u003Cimg src=\"MasterCard\u002Fscreenshot.PNG\" height=\"230\" title=\"Website_Demo\">](https:\u002F\u002Fgithub.com\u002Fyou-dont-need\u002FYou-Dont-Need-JavaScript\u002Fblob\u002Fmaster\u002FMasterCard\u002Fscreenshot.PNG)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"DropdownMenu\">\u003C\u002Fa>Dropdown Menu\n\n[\u003Cimg src=\"images\u002Fmenu2.png\" height=\"230\" title=\"Demo 1\">](https:\u002F\u002Fcodepen.io\u002Fantoniputra\u002Fpen\u002FBzyWmb)\n[\u003Cimg src=\"images\u002Fmenu3.png\" height=\"230\" title=\"Demo 2\">](http:\u002F\u002Fcodepen.io\u002Fcristina-silva\u002Fpen\u002FNNOodj)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Mobile\">\u003C\u002Fa>Mobile menu off canvas\n\n[\u003Cimg src=\"images\u002Fmenu.png\" height=\"230\" title=\"Demo\">](https:\u002F\u002Fcodepen.io\u002Ffabricionaweb\u002Fpen\u002FxOLwxj)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"BurgerMenu\">\u003C\u002Fa>Burger Menu\n\n[\u003Cimg src=\"images\u002Fmenu4.png\" height=\"230\" title=\"Demo\">](https:\u002F\u002Fcodepen.io\u002Feduardoboucas\u002Fpen\u002FBNyKwO)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"button_letsgo\">\u003C\u002Fa>Button Animation\n\n[\u003Cimg src=\"images\u002FButtonAnimation.gif\" height=\"250\" title=\"Demo\">](\u003C[https:\u002F\u002Fcodepen.io\u002Feduardoboucas\u002Fpen\u002FBNyKwO](https:\u002F\u002Fcodepen.io\u002FAman-Pathan-the-typescripter\u002Fpen\u002FMWLYNNx)>)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"buttonLikeCred\">\u003C\u002Fa>Button Rotate and Ripple Animation\n\n[\u003Cimg src=\"images\u002FbuttonRotatingRipple.gif\" height=\"250\" title=\"Demo\">](https:\u002F\u002Fcodepen.io\u002Fharsharora1205\u002Fpen\u002FExqZEyw)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"buttonEffect\">\u003C\u002Fa>Button Hover Click Animation\n\n[\u003Cimg src=\"images\u002FbuttonHoverClick.gif\" height=\"250\" title=\"Demo\">](https:\u002F\u002Fcodepen.io\u002Fharsharora1205\u002Fpen\u002FoNKYaME)\n[\u003Cimg src=\"images\u002FButtonNeon.gif\" height=\"250\" title=\"Demo\">](https:\u002F\u002Fcodepen.io\u002Fsugeng-sulistiyawan\u002Fpen\u002FeYPRpZN)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"morph-loader\">\u003C\u002Fa>Morph Loader\n\n[\u003Cimg src=\"images\u002FmorphLoader.gif\" height=\"230\" title=\"Morph Loader Demo\">](.\u002FMorphLoader\u002Findex.html)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"compassloader\">\u003C\u002Fa>Compass Loader\n\n[\u003Cimg src=\"images\u002FCompassLoader.gif\" height=\"230\" title=\"Demo\">](\u003C[https:\u002F\u002Fcodepen.io\u002Feduardoboucas\u002Fpen\u002FBNyKwO](https:\u002F\u002Fcodepen.io\u002FAman-Pathan-the-typescripter\u002Fpen\u002FdyaPmrE)>)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"FancyMenu\">\u003C\u002Fa>Fancy Menu\n\n[\u003Cimg src=\"images\u002FfancyMenu.gif\" height=\"230\" title=\"Demo\">](http:\u002F\u002Fcodepen.io\u002Flbebber\u002Fpen\u002FRNgBPP)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"footer\">\u003C\u002Fa>Footer\n\n[\u003Cimg src=\"images\u002Ffooter_lg.png\" height=\"230\" title=\"Demo\">](https:\u002F\u002Fcodepen.io\u002Fjanup2442\u002Fpen\u002FqBgBBKz)\n[\u003Cimg src=\"images\u002Ffooter_sm.png\" height=\"230\" title=\"Demo\">](https:\u002F\u002Fcodepen.io\u002Fjanup2442\u002Fpen\u002FqBgBBKz)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Modal\">\u003C\u002Fa>Modal\u002FPopup\n\n[\u003Cimg src=\"images\u002Fmodal2.png\" height=\"230\" title=\"Demo 1\">](https:\u002F\u002Fcodepen.io\u002Fpeiche\u002Fpen\u002Fvhqym)\n[\u003Cimg src=\"images\u002Fmodal.png\" height=\"230\" title=\"Demo 2\">](https:\u002F\u002Fcodepen.io\u002Fchrisburnell\u002Fpen\u002FscyKF)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"mondrian-composition\">\u003C\u002Fa>Mondrian Composition\n\n[\u003Cimg src=\"images\u002Fmondrian_composition.png\" height=\"230\" title=\"Mondrian Art Demo\">](https:\u002F\u002Fcodepen.io\u002FVINAY-MADIVAL\u002Fpen\u002FVYerdxY)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Mouse\">\u003C\u002Fa>Mouse tracking\n\n[\u003Cimg src=\"images\u002Fmousetracking.png\" height=\"230\" title=\"Demo 1\">](https:\u002F\u002Fcodepen.io\u002FMomciloo\u002Fpen\u002FGoGRrQ)\n[\u003Cimg src=\"images\u002Fmouse-tracking-2.gif\" height=\"230\" title=\"Demo 2\">](https:\u002F\u002Fcodepen.io\u002Fmasterujjval\u002Fpen\u002FxxmBRJV)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"navBar\">\u003C\u002Fa>NavBar\n\n[\u003Cimg src=\"images\u002Fnavbar.png\" height=\"230\" title=\"Demo1\">](https:\u002F\u002Fcodepen.io\u002Fjanup2442\u002Fpen\u002FQWzPRQQ)\n[\u003Cimg src=\"images\u002Fimage_navbar.png\" title=\"Demo2\">](https:\u002F\u002Fcodepen.io\u002Fshail-sharma\u002Fpen\u002FeYqdyvw)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Parallax\">\u003C\u002Fa>Parallax scrolling\n\n[\u003Cimg src=\"images\u002Fparallax.png\" height=\"230\" title=\"Demo\">](http:\u002F\u002Fkeithclark.co.uk\u002Farticles\u002Fpure-css-parallax-websites\u002Fdemo3\u002F)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Tabs\">\u003C\u002Fa>Tabs\n\n[\u003Cimg src=\"images\u002Ftabs.png\" height=\"230\" title=\"Demo 1\">](https:\u002F\u002Fcodepen.io\u002Fllgruff\u002Fpen\u002FZGBxOa)\n[\u003Cimg src=\"images\u002Ftabs2.png\" height=\"230\" title=\"Demo 2\">](https:\u002F\u002Fcodepen.io\u002Ffusco\u002Fpen\u002FWvzjrm)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"time-travel\">\u003C\u002Fa>Time Travel\n\n[\u003Cimg src=\"Time-Travel\u002Fpreview.png\" height=\"230\" title=\"Time Travel\">](Time-Travel\u002Findex.html)\n\nA pure CSS time travel timeline that allows you to explore different eras.\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"toast-notifications\">\u003C\u002Fa>Toast Notifications\n\n[\u003Cimg src=\"toast-notifications\u002Ftoast-notif.png\" height=\"230\" title=\"Demo\">](https:\u002F\u002Fcodepen.io\u002FRajat-Hegde\u002Fpen\u002FbNEqqym)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"flip-grid\">\u003C\u002Fa>Flip grid\n\n[\u003Cimg src=\"flip grid animation\u002Fflip.gif\" height=\"230\" title=\"Demo\">](https:\u002F\u002Fcodepen.io\u002FRajat-Hegde\u002Fpen\u002FbNEqjRp)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"flipbook-storyboard\">\u003C\u002Fa>Flipbook Storyboard\n\n[\u003Cimg src=\"flipbook-storyboard\u002Fpreview.png\" height=\"230\" title=\"Flipbook Storyboard Demo - CSS Only Interactive Flipbook with Glassmorphism Design\">](.\u002Fflipbook-storyboard\u002Findex.html)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Todo\">\u003C\u002Fa>Todo List\n\n[\u003Cimg src=\"images\u002FTodo List.png\" height=\"230\" title=\"Demo\">](https:\u002F\u002Fcodepen.io\u002FSamsShow\u002Fpen\u002FNWeerXr)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Tooltips\">\u003C\u002Fa>Tooltips\n\n- [Demo](https:\u002F\u002Fkushagragour.in\u002Flab\u002Fhint\u002F)\n- [CSS Tooltip with Animation](https:\u002F\u002Fcodepen.io\u002FElian-Echavarria\u002Fpen\u002FXJXgmWN)\n\n## \u003Ca id=\"Treeview\">\u003C\u002Fa>Treeview\n\n[\u003Cimg src=\"images\u002Ftree.png\" height=\"230\" title=\"Demo\">](https:\u002F\u002Fcodepen.io\u002Frgg\u002Fpen\u002FWrKyzj)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Twitter\">\u003C\u002Fa>Twitter Heart Animation\n\n[\u003Cimg src=\"images\u002Fart_twitter_heart_animation.gif\" height=\"230\" title=\"Demo\">](http:\u002F\u002Fcodepen.io\u002Fthebabydino\u002Fpen\u002FRRRRZE)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Tri_Color_Loader\">\u003C\u002Fa>Tri Color Loader\n\n[\u003Cimg src=\"images\u002Ftri_color_loader.gif\" height=\"230\" title=\"Demo\">](https:\u002F\u002Fcodepen.io\u002Fshail2604\u002Fpen\u002FraxLgbo)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Traffic_Light_Loader\">\u003C\u002Fa>Traffic Light Loader\n\n[\u003Cimg src=\"images\u002FTraffic_Light_Loader.gif\" height=\"230\" title=\"Demo\">](https:\u002F\u002Fcodepen.io\u002Fshail2604\u002Fpen\u002FKwVWWob)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"BookAnimation\">\u003C\u002Fa>Book Animation\n\n[\u003Cimg src=\"images\u002Fbook_animation.gif\" height=\"350\" title=\"Book Animation\">](https:\u002F\u002Fcodepen.io\u002FParas-Shenmare\u002Fpen\u002FeYxJpQB)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"ImageColorizing\">\u003C\u002Fa>Dynamic Image Colorizing\n\n[\u003Cimg src=\"images\u002Fimagecolorizing.png\" height=\"230\" title=\"Demo\">](http:\u002F\u002Fcodepen.io\u002Fnoahblon\u002Fpen\u002FZbjmbK)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"DarkMode\">\u003C\u002Fa>DarkMode\n\n[\u003Cimg src=\"images\u002Fdarkmode.gif\" title=\"Dark Mode - Day and nigth\">](http:\u002F\u002Fcodepen.io\u002Fmarcelesilv\u002Fpen\u002FyLjrEzz)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"RippleEffect\">\u003C\u002Fa>Ripple Effect\n\n[\u003Cimg src=\"images\u002Fripple-effect.gif\" height=\"230\" title=\"Ripple EffectDemo\">](http:\u002F\u002Fmladenplavsic.github.io\u002Fcss-ripple-effect\u002F)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"ResponsiveItemShowcase\">\u003C\u002Fa>Responsive Counter Showing # of Items That Didn't Fit Screen\n\n[\u003Cimg src=\"images\u002Fresponsive-item-showcase.gif\" title=\"Responsive Item Showcase\">](https:\u002F\u002Fcodepen.io\u002Fpavlovsk\u002Fpen\u002FQqrZzv\u002Fright\u002F)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Redar Loader\">\u003C\u002Fa>Readar Loader\n\n[\u003Cimg src=\"images\u002Fredar_loader.gif\" title=\"Redar Loader\">](https:\u002F\u002Fcodepen.io\u002Fshail2604\u002Fpen\u002FJoGKqda)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"resizable-split-panel\">\u003C\u002Fa>Resizable Split Panel\n\n[\u003Cimg src=\"images\u002Fresizable_panel_demo.gif\" title=\"Resizable Split Panel Demo\">](https:\u002F\u002Fcodepen.io\u002FVINAY-MADIVAL\u002Fpen\u002FogboooB)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"login\">\u003C\u002Fa>A login Page with Glassmorphism Effect\n\n[\u003Cimg src=\"Login_Page\u002Flog-in-6398177_1280.png\" title=\"Responsive Login Page with Glassmorphism Effect\">]\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"NeumorphismCardDesign\">\u003C\u002Fa>Neumorphism Card Design\n\n[\u003Cimg src=\"images\u002Fneumorphism-card-design.gif\" title=\"Neumorphism Card Design\">](https:\u002F\u002Fcodepen.io\u002Fsaviomartin\u002Fpen\u002FLYNgqKW)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"neon-button\">\u003C\u002Fa>Neon Button\n\n[\u003Cimg src=\"images\u002Fneon-button.gif\" title=\"Neon Button\">](https:\u002F\u002Fcodepen.io\u002Fnikhilkalburgi\u002Fpen\u002FWNyeopW)\n[\u003Cimg src=\"images\u002Fneon-button-updated.gif\" title=\"Neon Button Updated\">](https:\u002F\u002Fcodepen.io\u002Fmasterujjval\u002Fpen\u002FMWZMZbw)\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"neon-card\">\u003C\u002Fa>Neon Card\n\n[\u003Cimg src=\"images\u002Fneon-card-2.gif\" title=\"Neon Card\">](examples\u002Fneon-card-2.html)\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"night-city\">\u003C\u002Fa>Night City\n\n[\u003Cimg src=\"Night City\u002Fpreview1.png\" height=\"230\" title=\"Night City - City View\">](\u003CNight City>)\n[\u003Cimg src=\"Night City\u002Fpreview2.png\" height=\"230\" title=\"Night City - Road View\">](\u003CNight City>)\n\nA pure CSS animation showcasing a dynamic night city scene with interactive views. Features a detailed cityscape with animated elements and a road scene with moving vehicles, all without JavaScript.\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Netflix-Clone-v2\">\u003C\u002Fa>Netflix Clone Demo\n\n[\u003Cimg src=\"Netflix Clone v2\u002FScreenshot1.png\" height=\"230\" title=\"Demo 1\">](http:\u002F\u002Furl-to-page)\n[\u003Cimg src=\"Netflix Clone v2\u002FScreenshot2.png\" height=\"230\" title=\"Demo 2\">](http:\u002F\u002Furl-to-page)\n[\u003Cimg src=\"Netflix Clone v2\u002FScreenshot3.png\" height=\"230\" title=\"Demo 3\">](http:\u002F\u002Furl-to-page)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"shake-button\">\u003C\u002Fa>Shake Button\n\n[\u003Cimg src=\"images\u002Fshake-button.gif\" height=\"230\" title=\"Demo\">](https:\u002F\u002Fcodepen.io\u002Fkrushnarout\u002Fpen\u002FzYyLEmM)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"moving_hand\">\u003C\u002Fa>Shake Button\n\n[\u003Cimg src=\"images\u002Fmoving_hand.png\" height=\"230\" title=\"image\">](examples\u002FMoving_hand.html)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"css-form-handling\">\u003C\u002Fa>CSS Form Handling\n\n[\u003Cimg src=\"images\u002Fform-preview.png\" height=\"230\" title=\"CSS Form Handling\">](CSS-Form-Handling\u002F)\n\n**[⬆ back to top](#quick-links)**\n\n## \u003Ca id=\"Download_buttons\">\u003C\u002Fa>Download_buttons\n\n[\u003Cimg src=\"images\u002FDownload_buttons.png\" title=\"Download_buttons\">](https:\u002F\u002Fcodepen.io\u002FShail-Sharma-the-animator\u002Fpen\u002FrNXYMGx)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Download_buttons\">\u003C\u002Fa>Download buttons\n\n[\u003Cimg src=\"images\u002FDownload_buttons.png\" title=\"Download_buttons\">](https:\u002F\u002Fcodepen.io\u002FShail-Sharma-the-animator\u002Fpen\u002FrNXYMGx)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Dog-Animation\">\u003C\u002Fa>Dog Box Animation\n\n[\u003Cimg src=\"images\u002FDog-box-animation.png\" title=\"Dog-box\">](https:\u002F\u002Fgithub.com\u002Fyou-dont-need\u002FYou-Dont-Need-JavaScript\u002Fassets\u002F101883389\u002Fb8321f82-ee84-4e4a-9010-62a5f4afc45a)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Thankyou-Animation\">\u003C\u002Fa>Thankyou-Animation\n\n[\u003Cimg src=\"images\u002FThankyou-animation.png\" height=\"230\" title=\"Thankyou\">](https:\u002F\u002Fgithub.com\u002Fyou-dont-need\u002FYou-Dont-Need-JavaScript\u002Fassets\u002F101883389\u002F5e37601d-dce5-4326-b22a-c7d4f1c6d16f)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Square_roation_animation\">\u003C\u002Fa>Square_rotation_animation (Latin)\n\n[\u003Cimg src=\"images\u002FSquare_rotation_animation (1).png\" height=\"230\" title=\"SqaureRotationAnimation(1)\">](demoLink)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Switch\">\u003C\u002Fa>Switch\n\n[\u003Cimg src=\"images\u002FSwitch.gif\" height=\"230\" title=\"Switch\">](https:\u002F\u002Fgithub.com\u002FDreadlord075\u002FYou-Dont-Need-JavaScript\u002Fblob\u002Fd581e4061af20aa2e2dbf0c11a8860c3fe768245\u002Fimages\u002FSwitch.gif)\n\n[\u003Cimg src=\"images\u002FNew_Switch.gif\" height=\"230\" title=\"New_Switch\">](https:\u002F\u002Fcodepen.io\u002Fshail-sharma\u002Fpen\u002FPoMpvjO)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"bonfire\">\u003C\u002Fa>Bonfire\n\n[\u003Cimg src=\"images\u002FBonfire.gif\" height=\"230\" title=\"Bonfire\">](https:\u002F\u002Fgithub.com\u002FDreadlord075\u002FYou-Dont-Need-JavaScript\u002Fblob\u002Fd581e4061af20aa2e2dbf0c11a8860c3fe768245\u002Fimages\u002FBonfire.gif)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"scenery\">\u003C\u002Fa>Scenery\n\n[\u003Cimg src=\"images\u002Fscenary.gif\" height=\"230\" title=\"scenery\">](https:\u002F\u002Fgithub.com\u002Fyou-dont-need\u002FYou-Dont-Need-JavaScript\u002Fassets\u002F97428742\u002F5943c92d-c9d3-401e-a8dd-88091a1d839d)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"bubble\">\u003C\u002Fa>Bubble\n\n[\u003Cimg src=\"images\u002Fbubble.gif\" height=\"230\" title=\"bubble\">](https:\u002F\u002Fgithub.com\u002Fyou-dont-need\u002FYou-Dont-Need-JavaScript\u002Fassets\u002F97428742\u002F17b72752-9010-4433-9d1e-b9a24a8f5222)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"flower\">\u003C\u002Fa>Flower\n\n[\u003Cimg src=\"images\u002Fflower.gif\" height=\"230\" title=\"flower\">](https:\u002F\u002Fgithub.com\u002Fyou-dont-need\u002FYou-Dont-Need-JavaScript\u002Fassets\u002F97428742\u002F4ca880e9-47b9-4df5-b484-6e2a955ec266)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"JumpingBall\">\u003C\u002Fa>Jumping Ball\n\n\u003Cimg src=\"images\u002FjumpingBall.png\" height=\"230\" title=\"Jumping Ball\">\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"LightBulbAnimation\">\u003C\u002Fa>Light Bulb Animation\n\n\u003Cimg src=\"images\u002FLightBulbAnimation.png\" height=\"230\" title=\"Light Bulb animation\">\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"lighthouse-scene\">\u003C\u002Fa>Lighthouse Scene\n\n[\u003Cimg src=\"Lighthouse Scene\u002FLighthouse_scene.gif\" height=\"230\" title=\"Lighthouse Scene\">](Lighthouse%20Scene\u002Flighthouse-scene.html)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Loading Css effect\">\u003C\u002Fa>Loading Css effect\n\n\u003Cimg src=\"images\u002FLoading_Css_effect.gif\" height=\"230\" title=\"Loading Css effect\">\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Lego Loader\">\u003C\u002Fa>Lego Loader\n\n\u003Cimg src=\"images\u002Flego_loader.gif\" height=\"230\" title=\"Lego Loader\">\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"city-animation-footer\">\u003C\u002Fa>City animation footer\n\n[\u003Cimg src=\"images\u002FCity animation footer.gif\" height=\"230\" title=\"City animation footer\">](https:\u002F\u002Fgithub.com\u002FDreadlord075\u002FYou-Dont-Need-JavaScript\u002Fblob\u002Fd581e4061af20aa2e2dbf0c11a8860c3fe768245\u002Fimages\u002FCity%20animation%20footer.gif)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"smoke\">\u003C\u002Fa>Smoke\n\n[\u003Cimg src=\"images\u002Fsmoke.gif\" height=\"230\" title=\"smoke\">](https:\u002F\u002Fgithub.com\u002Fyou-dont-need\u002FYou-Dont-Need-JavaScript\u002Fassets\u002F97428742\u002Fd6a4f0b5-5345-4a23-85ae-6c371f597c61)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"loader\">\u003C\u002Fa>Loader\n\n[\u003Cimg src=\"images\u002Floader.gif\" height=\"230\" title=\"loader\">](https:\u002F\u002Fgithub.com\u002Fyou-dont-need\u002FYou-Dont-Need-JavaScript\u002Fassets\u002F97428742\u002F97ba01f5-7e85-4c3e-8d60-47374ef3a1f9)\n\n[\u003Cimg src=\"images\u002FNew_Loader.png\" height=\"230\" title=\"New_Loader\">](https:\u002F\u002Fcodepen.io\u002Fshail-sharma\u002Fpen\u002FyLmMyjq)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"spiner\">\u003C\u002Fa>Spiner\n\n[\u003Cimg src=\"images\u002Fspiner.gif\" height=\"230\" title=\"spiner\">](https:\u002F\u002Fgithub.com\u002Fyou-dont-need\u002FYou-Dont-Need-JavaScript\u002Fassets\u002F97428742\u002F72b2e6fc-d12b-423b-a1a7-2d705e111e1f)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"fire\">\u003C\u002Fa>Fire\n\n[\u003Cimg src=\"images\u002Ffire.gif\" height=\"230\" title=\"fire\">](https:\u002F\u002Fgithub.com\u002Fyou-dont-need\u002FYou-Dont-Need-JavaScript\u002Fassets\u002F97428742\u002F85e70774-0da0-47bf-bbea-1b6d2d6d73e1)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"flame\">\u003C\u002Fa>Flame\n\n[\u003Cimg src=\"images\u002Fflame.gif\" height=\"230\" title=\"flame\">](https:\u002F\u002Fgithub.com\u002Fyou-dont-need\u002FYou-Dont-Need-JavaScript\u002Fassets\u002F97428742\u002F5d8659ea-84e4-481e-bdcd-e5e9fe7d30e9)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"shuffling-squres\">\u003C\u002Fa>Shuffling squares\n\n[\u003Cimg src=\"images\u002Fshuffling-squares.gif\" height=\"230\" title=\"Shuffling squares\">](https:\u002F\u002Fim3.ezgif.com\u002Ftmp\u002Fezgif-3-41efb679c2.gif)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Floating-labelV2\">\u003C\u002Fa>Floating-labelV2\n\n[\u003Cimg src=\"images\u002FFloatinglabel2.gif\" height=\"230\" title=\"Floating-labelV2\">](https:\u002F\u002Fim2.ezgif.com\u002Ftmp\u002Fezgif-2-3297933621.gif)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"scary-animation\">\u003C\u002Fa>scary-animation\n\n[\u003Cimg src=\"images\u002FScary-animation.gif\" height=\"230\" title=\"scary-animation\">](https:\u002F\u002Fim4.ezgif.com\u002Ftmp\u002Fezgif-4-04e4dfec68.gif)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"scroll-video-cinematic\">\u003C\u002Fa>Scroll Video Cinematic Animation\n\n[\u003Cimg src=\"CSS-Scroll-Video-Cinematic\u002Fpreview.gif\" height=\"230\" title=\"CSS Scroll Video Cinematic Animation\">](CSS-Scroll-Video-Cinematic\u002Findex.html)\n\nA modern, interactive scroll-driven video animation created with pure CSS. Features cinematic video effects, gradient overlays, and smooth scroll animations - no JavaScript required!\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"infinite-carousel\">\u003C\u002Fa>infinite-carousel\n\n# [\u003Cimg src=\"images\u002Finfinite-carousel.gif\" height=\"230\" title=\"infinite-carousel\">](https:\u002F\u002Fim4.ezgif.com\u002Ftmp\u002Fezgif-4-cf03115fc6.gif)\n\n[\u003Cimg src=\"images\u002FScary-animation.gif\" height=\"230\" title=\"Floating-labelV2\">](https:\u002F\u002Fim4.ezgif.com\u002Ftmp\u002Fezgif-4-04e4dfec68.gif)\n\n[\u003Cimg src=\"images\u002FScary-animation.gif\" height=\"230\" title=\"scary-animation\">](https:\u002F\u002Fim4.ezgif.com\u002Ftmp\u002Fezgif-4-04e4dfec68.gif)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"growing-flower\">\u003C\u002Fa>growing-flower\n\n[\u003Cimg src=\"images\u002Fgrowing-flower.gif\" height=\"230\" title=\"growing-flower\">](https:\u002F\u002Fim3.ezgif.com\u002Ftmp\u002Fezgif-3-f53ebce80a.gif)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"playing-card\">\u003C\u002Fa>Playing Card Animation\n\n\u003Cimg src=\"images\u002Fplaying-card.png\" height=\"230\" title=\"Playing cacrd animation\">\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"starwarsintro\">\u003C\u002Fa>Star Wars Intro\n\n[\u003Cimg src=\"images\u002Fintro1.png\" height=\"230\" title=\"starwarsintro\">](https:\u002F\u002Fcodepen.io\u002Fkdwzrjtc-the-animator\u002Fpen\u002FMWLgBRz)\n[\u003Cimg src=\"images\u002Fintro2.png\" height=\"230\" title=\"starwarsintro\">](https:\u002F\u002Fcodepen.io\u002Fkdwzrjtc-the-animator\u002Fpen\u002FMWLgBRz)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id= \"Gradient-Animation\">\u003C\u002Fa>Gradient Animation\n\n[\u003Cimg src=\"images\u002Fgradient-animation.gif\" height=\"230\" title=\"Gradient Animation\">](https:\u002F\u002Fgithub.com\u002Fyou-dont-need\u002FYou-Dont-Need-JavaScript\u002Fblob\u002Fb3b64a1d4a426ab3a8f20fbe34640de18bca14a5\u002Fimages\u002Fgradient-animation.gif)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"zoom-when-hover\">\u003C\u002Fa>Zoom when hover\n\n[\u003Cimg src=\"images\u002Fzoom-effect.gif\" height=\"230\" title=\"zoom-when-hover\">](https:\u002F\u002Fcodepen.io\u002Fkdwzrjtc-the-animator\u002Fpen\u002FgOqOwLx)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Floating-labelV2\">\u003C\u002Fa>Floating-labelV2\n\n[\u003Cimg src=\"images\u002FFloatinglabel2.gif\" height=\"230\" title=\"Floating-labelV2\">](https:\u002F\u002Fim2.ezgif.com\u002Ftmp\u002Fezgif-2-3297933621.gif)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id= \"Css Tables\">\u003C\u002Fa>CSS Tables\n\n## [![Screenshot 2023-10-23 144658](https:\u002F\u002Fgithub.com\u002Fyou-dont-need\u002FYou-Dont-Need-JavaScript\u002Fassets\u002F113187290\u002Fd73a9af8-5470-4a88-bfc9-a5e8430aba65)](https:\u002F\u002Fcodepen.io\u002FTAPAS-SINGHAL\u002Fpen\u002FabXZNWR)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id= \"3D Transform\">\u003C\u002Fa>3D Transform\n\n## ![animation](https:\u002F\u002Fgithub.com\u002Fyou-dont-need\u002FYou-Dont-Need-JavaScript\u002Fassets\u002F113187290\u002F646f9fb9-f003-4bd1-b535-d0b775bc0b04)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"animated-btn\">\u003C\u002Fa>Animated Button\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id= \"Css FLEX\">\u003C\u002Fa>Css FLEX\n\n## ![Screenshot 2023-10-23 141538](https:\u002F\u002Fgithub.com\u002Fyou-dont-need\u002FYou-Dont-Need-JavaScript\u002Fassets\u002F113248104\u002F973a1186-de6b-4e07-bc53-424b9b864984)\n\n## \u003Ca id=\"Coffee-Animation\">\u003C\u002Fa>Coffee-Animation\n\n[\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fyou-dont-need\u002FYou-Dont-Need-JavaScript\u002Fassets\u002F101883389\u002F7d15c275-5210-4c2e-8530-eb073251a39f\" height=\"230\" title=\"coffee-animation\">](https:\u002F\u002Fgithub.com\u002Fyou-dont-need\u002FYou-Dont-Need-JavaScript\u002Fassets\u002F101883389\u002F7d15c275-5210-4c2e-8530-eb073251a39f)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Basketball-Animation\">\u003C\u002Fa>Basketball-Animation\n\n[\u003Cimg src=\"images\u002Fbasketball-animation.gif\" height=\"230\" title=\"basketball-animation\">](https:\u002F\u002Fgithub.com\u002Fyou-dont-need\u002FYou-Dont-Need-JavaScript\u002Fassets\u002F101883389\u002F66759afd-9794-408d-92a5-53b793072f98)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Business-Card\">\u003C\u002Fa>Business-Card\n\n![img_source](Business-Card\u002Foutput.png)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"SolarSystem\">\u003C\u002Fa>SolarSystem\n\n![img_source](SolarSystem\u002Foutput.png)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Spaceship\">\u003C\u002Fa>Spaceship\n\n![img_source](Spaceship\u002FSpaceship.gif)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Timeline\">\u003C\u002Fa>Timeline\n\n![img_source](Timeline\u002FTimeline.gif)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"RadialPulsar\">\u003C\u002Fa>Radial Color Puslar\n\n[\u003Cimg src=\"Radial Color Pulsar\u002FRadial.png\" title=\"Demo\">](\u003C[https:\u002F\u002Fcodepen.io\u002Feduardoboucas\u002Fpen\u002FBNyKwO](https:\u002F\u002Fcodepen.io\u002FAman-Pathan-the-typescripter\u002Fpen\u002FMWLYNNx)>)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"RetroLoader\">\u003C\u002Fa>Retro Loader\n\n[\u003Cimg src=\"Retro Loader\u002FRetro.png\" title=\"Demo\">](\u003C[https:\u002F\u002Fcodepen.io\u002Feduardoboucas\u002Fpen\u002FBNyKwO](https:\u002F\u002Fcodepen.io\u002FAman-Pathan-the-typescripter\u002Fpen\u002FMWLYNNx)>)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Pendulum\">\u003C\u002Fa>Pendulum\n\n![img_source](images\u002Fpendulum.png)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"SlicedButton\">\u003C\u002Fa>SlicedButton\n\n![img_source](Button\u002FSliced-Button\u002Fsliced_button.gif)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Rating Star\">\u003C\u002Fa>Rating Star\n\n![img_source](images\u002Frating-star.png)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"DVDScreenSaver\">\u003C\u002Fa>DVD Screen Saver\n\n![img_source](images\u002FDVDScreenSaver.png)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"ProfileCards\">\u003C\u002Fa>ProfileCards\n\n![img_source](images\u002FprofileCards\u002Fcard1.png)\n![img_source](images\u002FprofileCards\u002Fcard2.png)\n![img_source](images\u002FprofileCards\u002Fcard3.png)\n![img_source](images\u002FprofileCards\u002Fcard4.png)\n![img_source](images\u002FprofileCards\u002Fcard5.png)\n![img_source](images\u002FprofileCards\u002Fcard6.png)\n![img_source](images\u002FprofileCards\u002Fcard7.png)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"RotateSquare\">\u003C\u002Fa>RotateSquare\n\n[\u003Cimg src=\"images\u002FrotateSquare\" height=\"230\" title=\"Demo 1\">]\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"stickman\">\u003C\u002Fa>Stickman Animation\n\n\u003Cimg src=\".\u002Fimages\u002Fstickman.png\" height=\"200\" title=\"3d card flip transtion demo gif\">\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Clock-App\">\u003C\u002Fa>Clock App\n\n![img_source](image.png)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"mmt\">\u003C\u002Fa>MakemyTrip\n\n![img_source](MakemyTrip\u002Fscreenshot.png)\n\n---\n\n**[⬆ back to top](#quick-links)**\n\n## \u003Ca id=\"zomato\">\u003C\u002Fa>Zomato\n\n![img_source](Zomato\u002Fscreenshot.png)\n\n---\n\n**[⬆ back to top](#quick-links)**\n\n## \u003Ca id=\"3d-card-flip-transition\">\u003C\u002Fa>3D card flip transition\n\n[\u003Cimg src=\".\u002Fimages\u002F3d-card-flip-transition.gif\" height=\"200\" title=\"Demo Image\">]\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"babyYoda\">\u003C\u002Fa>Baby Yoda Animation CSS\n\n[\u003Cimg src=\".\u002Fimages\u002FbabyYoda.jpg\" title=\"Baby Yoda Animation\">](https:\u002F\u002Fcodepen.io\u002Fmarcelesilv\u002Fpen\u002FqBeaOaw)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"debit-card-hover\">\u003C\u002Fa>Debit Card Hover Effect\n\n![Screenshot 2024-10-11 103321](https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F5e8572a6-9328-44fe-8574-d68f2e6b92ca)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"ProgressOnScroll\">\u003C\u002Fa>Progress bar on scroll\n\n[\u003Cimg src=\"images\u002Fprogress_on_scroll_demo.gif\" height=\"230\" title=\"Progress On Scroll Demo\">](https:\u002F\u002Fcodepen.io\u002Fpritam1813\u002Fpen\u002FjOgyERQ)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"password-strength-checker\">\u003C\u002Fa>Password Strength Checker\n\n[\u003Cimg src=\"images\u002FPassword-Strength-Checker.png\" height=\"230\" title=\"password-strength-checker\">](https:\u002F\u002Fsudhanshu-raj.github.io\u002FYou-Dont-Need-JavaScript\u002F)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"horizontal-image-slider\">\u003C\u002Fa>Horizontal Image Slider\n\n\u003Cimg src=\"Horizontal image slider\u002Fimages\u002Fhorizontal-image-slider.gif\" height=\"230\" title=\"horizontal-image-slider\">\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"multi-step-checkout\">\u003C\u002Fa>Mutli Step Checkout\n\n\u003Cimg src=\".\u002FMulti-Step-Checkout\u002Fimg\u002FMulti_Step_Checkout.png\" height=\"230\" title=\"multi-step-checkout\">\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"carousel-effect\">\u003C\u002Fa>Carousel Effect\n\n[Download the demo video](https:\u002F\u002Fraw.githubusercontent.com\u002Famrutha-m206\u002FYou-Dont-Need-JavaScript\u002Fcarousel_effect-feature\u002Fimages\u002Fcarousel_demo.mp4)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"piano\">\u003C\u002Fa>Piano\n\n[\u003Cimg src=\"images\u002Fpiano.png\" height=\"230\" title=\"Piano\">](Piano\u002Findex.html)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n---\n\n## \u003Ca id=\"interactive-resume\">\u003C\u002Fa>Interactive Resume\n\nAn interactive resume built entirely using **HTML and CSS** — featuring animations, hover effects, and smooth transitions that bring your profile to life.  \n**No JavaScript used.**\n\n[\u003Cimg src=\".\u002FInteractive Resume\u002Fpreview-images\u002Fi1.png\" width=\"32%\">](.\u002FInteractive%20Resume\u002Findex.html)\n[\u003Cimg src=\".\u002FInteractive Resume\u002Fpreview-images\u002Fi2.png\" width=\"32%\">](.\u002FInteractive%20Resume\u002Findex.html)\n[\u003Cimg src=\".\u002FInteractive Resume\u002Fpreview-images\u002Fi3.png\" width=\"32%\">](.\u002FInteractive%20Resume\u002Findex.html)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"mewtwo-card\">\u003C\u002Fa>Mewtwo Pokémon Card\n\n[\u003Cimg src=\"images\u002Fmewtwo-card.png\" height=\"230\" title=\"Mewtwo Pokémon Card\">](Pokemon-Mewtwo-Card\u002Fmewtwo.html)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"kaleidoscope\">\u003C\u002Fa>Kaleidoscope\n\n[\u003Cimg src=\"images\u002Fkaleidoscope.png\" height=\"230\" title=\"Kaleidoscope\">](Kaleidoscope\u002Findex.html)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"Glide to Reveal\">\u003C\u002Fa>Glide to Reveal\n\n[\u003Cimg src=\"images\u002Fglidetoreveal.png\" height=\"230\" title=\"Glide-to-reveal\">](Glide-to-reveal\u002Findex.html)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## \u003Ca id=\"rotating-text\">\u003C\u002Fa>Rotating Text\n\n[\u003Cimg src=\"images\u002Frotating_text.mp4\" height=\"230\" title=\"Demo\">]()\n\n## \u003Ca id=\"input-text\">\u003C\u002Fa>Input Text Field\n\n[\u003Cvideo height=\"230\" width=\"230\" controls>\n\n\u003Csource src=\"images\u002Finput-text.mp4\" type=\"video\u002Fmp4\">\n\u003C\u002Fvideo>\n]()\n\n## \u003Ca id=\"night-fire-camp\">\u003C\u002Fa>Night fire camp\n\n[\u003Cvideo height=\"230\" width=\"230\" controls>\n\n\u003Csource src=\"images\u002Fnightfirecamp.mp4\" type=\"video\u002Fmp4\">\n\u003C\u002Fvideo>\n]()\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n**[⬆ back to top](#quick-links)**\n\n## \u003Ca id=\"Robot\">\u003C\u002Fa>Carousel\n\n[\u003Cimg src=\"images\u002FRobot.png\" height=\"230\" title=\"Robot\">](Robot\u002FRobot.html)\n\n**[⬆ back to top](#quick-links)**\n\n\n---\n\n## \u003Ca id=\"terminal-animation\">\u003C\u002Fa>Terminal Animation\n\n[\u003Cimg src=\".\u002Fimages\u002FTerminal Animation.gif\" height=\"230\" title=\"terminal-animation\">](https:\u002F\u002Fgithub.com\u002Fyou-dont-need\u002FYou-Dont-Need-JavaScript\u002Fterminal-animation\u002Findex.html)\n---\n\n## \u003Ca id=\"text-change-animation\">\u003C\u002Fa>Text Change Animaton\n\n\u003Cimg src=\".\u002Fimages\u002Ftext-change-animation.gif\" height=\"230\" title=\"Text Change Animation\"> (.\u002FText Change Animation\u002Findex.html)\n\n**[⬆ back to top](#quick-links)**\n\n---\n\n## Contributors\n\nThanks to these wonderful people who have contributed to this project!\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fyou-dont-need\u002FYou-Dont-Need-JavaScript\u002Fgraphs\u002Fcontributors\">\n  \u003Cimg src=\"https:\u002F\u002Fcontrib.rocks\u002Fimage?repo=you-dont-need\u002FYou-Dont-Need-JavaScript\" \u002F>\n\u003C\u002Fa>\n\n## Contributing\n\nWe welcome contributions from the community to make this project better. Feel free to fork the repository, make your changes, and submit a pull request. Be sure to follow our [Code of Conduct](CODE_OF_CONDUCT.md).\n\nFor detailed guidelines on how to contribute, please refer to our [CONTRIBUTING](CONTRIBUTING.md) file.\n\n**[⬆ back to top](#quick-links)**\n\nLet's build something great together!\n\n## License\n\nThis project is licensed under the **GNU General Public License v3.0 (GPL-3.0)** — see the [LICENSE](LICENSE) file for details.\n","该项目展示了如何仅使用CSS实现多种交互效果和动画，无需JavaScript。它包含了一系列示例，如手风琴、汉堡菜单、轮播图、计数器、字体样式、游戏、弹出框、文本字段、工具提示和树形视图等，覆盖了网页设计中常见的多种UI组件和视觉效果。项目强调了纯CSS在构建响应式和动态界面方面的能力，并提供了详细的样式指南来帮助开发者理解和应用这些技术。适用于希望减少前端代码复杂度或对JavaScript有依赖限制的场景，比如提高网站加载速度、增强可访问性或简化维护工作。",2,"2026-06-11 03:34:44","high_star"]