Awesome
English | 简体中文
You Don't Need JavaScript
Please be aware that the demos may exhibit significant accessibility issues, such as problems with keyboard navigation, speech synthesis, and progressive enhancement or degradation.
Style Guide:
## <a id="DemoSubject"></a>Carousel
[<img src="images/image1.png" height="230" title="Demo 1">](http://url-to-page)
[<img src="images/image2.png" height="230" title="Demo 2">](http://url-to-page)
[<img src="images/image3.png" height="230" title="Demo 3">](http://url-to-page)
**[⬆ back to top](#quick-links)**
Quick Links
- You Don't Need JavaScript
- Website Demo Using HTML CSS
- Style Guide
- Accordion / Toggle
- Analog Clock
- Animated Button
- Animated Buttons
- Badge
- Bonfire
- Book Animation
- Bubble
- Bus
- Burger Menu
- Button Animation
- Button Hover & Click Animation
- Button with Rotating Text & Ripple Animation
- Baby Yoda Animation
- Captain America Shield
- Carousel
- Compass Loader
- City Animation Footer
- Carousel Effect
- Counter of Checked Checkboxes
- Download_buttons
- Dog Box Animation
- Dropdown Menu
- Dynamic Image Colorizing
- Enable Dark Mode
- Fancy Menu
- Flip on Click
- Floating Label on Textfield
- Floating Labels V2
- Font-Face (Latin)
- Footer
- Gradient Animation
- Growing Flower
- Horizontal image slider
- Image Gallery
- Image Hover Effect
- Infinite Carousel
- Info on Hover / Popover
- Jumping Ball
- Light Bulb Animation
- Loaders
- MasterCard
- Mobile Menu Off Canvas
- Modal/Popup
- Mouse Tracking
- NavBar
- Neon Button
- Neon Card
- Netlix Clone v2
- Neumorphism Card Design
- Parallax Scrolling
- Pendulum
- Playing Card Animation
- Profile Cards
- Responsive Counter Showing # of Items That Didn't Fit Screen
- Ripple Effect
- Scary Animation
- Scenery
- Shake Button
- Shuffling Squares
- Star Wars Intro
- Switch
- Social Media Icons
- Tables
- Tabs
- MakemyTrip
- Text Spoiler Effect
- Thank You Animation
- Todo List
- Tooltips
- Treeview
- Twitter Heart Animation
- Book Animation
- Zomato
- Zoom When Hover
- Debit Card Hover effect
- Progress Bar On Scroll
- Pricing Table
- Contribution
<a id="image-hover-effect"></a>Image Hover Effect
<a id="toggle"></a>CSS Toggle
<img src="images/toggle1.png" height="230" title="CSS Toggle" alt="Toggle"> <img src="images/toggle2.png" height="230" title="CSS Toggle" alt="Toggle">
<a id="text-spoiler"></a>Text Spoiler Effect
Light Theme:
Dark Theme:
<a id="blog-cards"></a>Blog Post Cards
<img src="images/neuo.png" height="230" title="Demo 1"> <img src="images/claycards.png" height="230" title="Demo 2"> <img src="images/glasscards.png" height="230" title="Demo 3">
<a id="Faq-section"></a>Faq Section
<img src="images/faqclay.png" height="230" title="Demo 1"> <img src="images/faqneuo.png" height="230" title="Demo 2"> <img src="images/faqglass.png" height="230" title="Demo 3">
<a id="pricing-table"></a>Pricing Table
<img src="images/pricingtable1.png" height="230" title="Demo 1"> <img src="images/pricingtable2.png" height="230" title="Demo 2"> <img src="images/pricingtable3.png" height="230" title="Demo 3">
<a id="social-icons"></a>Social_media_icons
[<img src="images/icons.png" height="230" title="Social-media-icons">]
<a id="Accordion"></a>Accordion / Toggle
<img src="images/accordion.png" height="230" title="Demo 1"> <img src="images/toggler.png" height="230" title="Demo 2"> <img src="images/toggler2.png" height="230" title="Demo 3"> <img src="images/accordion.gif" height="230" title="Demo 4"> <img src="images/AccordionAndFAQ.gif" height="230" title="Demo 5">
<a id="Animated-Buttons"></a>Animated Buttons
<img src="images/Animated-button-1.png" height="230" title="Demo 1"> <img src="images/Animated-button.png" height="230" title="Demo 2"> <img src="images/Animated-button-2.png" height="230" title="Demo 2"> <img src="images/liquidButton.png" height="230" title="Demo 2">
<a id="bus"></a>Bus
<img src="images/bus.png" height="230" title="Demo 1"><a id="captain"></a>Captain America Shield
<img src="Captain America Shield/images/shield.png" height="230" title="Demo 1"><a id="Carousel"></a>Carousel
<img src="images/slideshow2.png" height="230" title="Demo 1"> <img src="images/slideshow.png" height="230" title="Demo 2"> <img src="images/slideshow3.png" height="230" title="Demo 3"> <img src="images/carousel.png" height="230" title="Demo 4"> <img src="./images/Infinite-carousel-purnasth.gif" alt="Carousel-Nepal" height="230" title="Carousel-Nepal">
<a id="Counter"></a>Counter of checked check-boxes
<img src="images/checkedcounter.png" height="230" title="Demo 1"> <img src="images/checkedcounter2.png" height="230" title="Demo 2">
<a id="Flip"></a>Flip on click
<img src="images/flipper.png" height="230" title="Demo">
<a id="Flip"></a>Flip on click
<img src="images/pendulum.png" height="230" title="Pendulum Animation Demo">
<a id="Animated Box"></a>Animated Box
<img src="images/AnimatedBox.jpg" height="230" title="Demo"> <img src="images/AnimatedBox2.jpg" height="230" title="Demo">
<a id="analogclock"></a>Analog-clock
<img src="images/clock.jpg" height="230" title="Analog-clock">
<img src="images/textfields.png" height="230" title="Demo">
<a id="badge"></a>Badge
<img src="images/badge_design1.png" height="230" title="Demo"> <img src="images/badge_design2.png" height="230" title="Demo"><a id="Font"></a>Font-Face (Latin)
<img src="images/sansfont.png" height="230" title="Demo">
<a id="WebsiteDemo"></a>Website Demo
<img src="images/Website_demo.png" height="230" title="Website_Demo"> <img src="images/Website_demo_2.png" height="230" title="Website_Demo"> <img src="images/Website_demo_3.png" height="230" title="Website_Demo">
<a id="Travel-Website"></a>Travelling Website
<img src="images/Travel_01.png" height="250" title="Website_Demo"> <img src="images/Travel_02.png" height="250" title="Website_Demo"> <img src="images/Travel_03.png" height="250" title="Website_Demo">
<a id="Info"></a>Info on hover/ Popover
<img src="images/tooltips.png" height="230" title="Demo 1"> <img src="images/tooltips2.png" height="230" title="Demo 2"> <img src="images/info-on-hover.png" height="230" title="Demo 3"> <img src="images/tooltips.gif" height="230" title="Demo 4">
<a id="Image"></a>Image Gallery
<img src="images/gallery.png" height="230" title="Demo 1"> <img src="images/gallery2.png" height="230" title="Demo 2"> <img src="images/gallery3.png" height="230" title="Demo 2"> <img src="images/vertical-gallery.gif" height="230" title="Demo 4"> <img src="./Author/a-img2.jpg" height="230" title="Demo 5">
<a id="interactive-image"></a>Interactive Image Gallery
[<img src="./images/interactive-image.png" height="230" title="Demo Image">] <br> [<video src="./demo video/interactive-image.mov" height="230" title="Demo Video">]
<a id="Loaders"></a>Loaders
<img src="images/loader.png" height="230" title="Demo 1"> <img src="images/loader2.png" height="230" title="Demo 2"> <img src="images/loader3.png" height="230" title="Demo 3"> <img src="images/loader4.png" height="230" title="Demo 4"> <img src="images/loader5.png" height="230" title="Demo 5"> <img src="images/loader6.png" height="230" title="Demo 6"> <img src="images/loader7.png" height="230" title="Demo 7"> <img src="images/loader8.png" height="230" title="Demo 8"> <img src="images/loader9.png" height="230" title="Demo 9"> <img src="./images/css-loader-purna.gif" alt="CSS-Loader-Purna" height="230" title="CSS-Loader-Purna"> <img src="images/loader10.png" height="230" title="Demo 10"> <img src="images/loader11.gif" height="230" title="Demo 11"> <img src="images/loader12.gif" height="230" title="Demo 12">
<a id="MasterCard"></a>MasterCard
<img src="images/screenshot.png" height="230" title="Website_Demo">
<a id="DropdownMenu"></a>Dropdown Menu
<img src="images/menu2.png" height="230" title="Demo 1"> <img src="images/menu3.png" height="230" title="Demo 2">
<a id="Mobile"></a>Mobile menu off canvas
<img src="images/menu.png" height="230" title="Demo">
<a id="BurgerMenu"></a>Burger Menu
<img src="images/menu4.png" height="230" title="Demo">
<a id="button_letsgo"></a>Button Animation
<img src="images/ButtonAnimation.gif" height="250" title="Demo">
<a id="buttonLikeCred"></a>Button Rotate and Ripple Animation
<img src="images/buttonRotatingRipple.gif" height="250" title="Demo">
<a id="buttonEffect"></a>Button Hover Click Animation
<img src="images/buttonHoverClick.gif" height="250" title="Demo"> <img src="images/ButtonNeon.gif" height="250" title="Demo">
<a id="compassloader"></a>Compass Loader
<img src="images/CompassLoader.gif" height="230" title="Demo">
<a id="FancyMenu"></a>Fancy Menu
<img src="images/fancyMenu.gif" height="230" title="Demo">
<a id="footer"></a>Footer
<img src="images/footer_lg.png" height="230" title="Demo"> <img src="images/footer_sm.png" height="230" title="Demo">
<a id="Modal"></a>Modal/Popup
<img src="images/modal2.png" height="230" title="Demo 1"> <img src="images/modal.png" height="230" title="Demo 2">
<a id="Mouse"></a>Mouse tracking
<img src="images/mousetracking.png" height="230" title="Demo 1"> <img src="images/mouse-tracking-2.gif" height="230" title="Demo 2">
<a id="navBar"></a>NavBar
<img src="images/navbar.png" height="230" title="Demo1"> <img src="images/image_navbar.png" title="Demo2">
<a id="Parallax"></a>Parallax scrolling
<img src="images/parallax.png" height="230" title="Demo">
<a id="Tabs"></a>Tabs
<img src="images/tabs.png" height="230" title="Demo 1"> <img src="images/tabs2.png" height="230" title="Demo 2">
<a id="Todo"></a>Todo List
<img src="images/Todo List.png" height="230" title="Demo">
<a id="Tooltips"></a>Tooltips
<a id="Treeview"></a>Treeview
<img src="images/tree.png" height="230" title="Demo">
<a id="Twitter"></a>Twitter Heart Animation
<img src="images/art_twitter_heart_animation.gif" height="230" title="Demo">
<a id="BookAnimation"></a>Book Animation
<img src="images/book_animation.gif" height="350" title="Book Animation">
<a id="ImageColorizing"></a>Dynamic Image Colorizing
<img src="images/imagecolorizing.png" height="230" title="Demo">
<a id="DarkMode"></a>DarkMode
<img src="images/darkmode.gif" title="Dark Mode - Day and nigth">
<a id="RippleEffect"></a>Ripple Effect
<img src="images/ripple-effect.gif" height="230" title="Ripple EffectDemo">
<a id="ResponsiveItemShowcase"></a>Responsive Counter Showing # of Items That Didn't Fit Screen
<img src="images/responsive-item-showcase.gif" title="Responsive Item Showcase">
<a id="login"></a>A login Page with Glassmorphism Effect
[<img src="Login_Page/log-in-6398177_1280.png" title="Responsive Login Page with Glassmorphism Effect">]
<a id="NeumorphismCardDesign"></a>Neumorphism Card Design
<img src="images/neumorphism-card-design.gif" title="Neumorphism Card Design">
<a id="neon-button"></a>Neon Button
<img src="images/neon-button.gif" title="Neon Button"> <img src="images/neon-button-updated.gif" title="Neon Button Updated"> ⬆ back to top
<a id="neon-card"></a>Neon Card
<img src="images/neon-card-2.gif" title="Neon Card"> ⬆ back to top
<a id="Netflix-Clone-v2"></a>Netflix Clone Demo
<img src="Netflix Clone v2/Screenshot1.png" height="230" title="Demo 1"> <img src="Netflix Clone v2/Screenshot2.png" height="230" title="Demo 2"> <img src="Netflix Clone v2/Screenshot3.png" height="230" title="Demo 3">
<a id="shake-button"></a>Shake Button
<img src="images/shake-button.gif" height="230" title="Demo">
<a id="moving_hand"></a>Shake Button
<img src="images/moving_hand.png" height="230" title="image">
<a id="Download_buttons"></a>Download buttons
<img src="images/Download_buttons.png" title="Download_buttons">
<a id="Dog-Animation"></a>Dog Box Animation
<img src="images/Dog-box-animation.png" title="Dog-box">
<a id="Thankyou-Animation"></a>Thankyou-Animation
<img src="images/Thankyou-animation.png" height="230" title="Thankyou">
<a id="Square_roation_animation"></a>Square_rotation_animation (Latin)
<img src="images/Square_rotation_animation (1).png" height="230" title="SqaureRotationAnimation(1)">
<a id="Switch"></a>Switch
<img src="images/Switch.gif" height="230" title="Switch">
<img src="images/New_Switch.gif" height="230" title="New_Switch">
<a id="bonfire"></a>Bonfire
<img src="images/Bonfire.gif" height="230" title="Bonfire">
<a id="scenery"></a>Scenery
<img src="images/scenary.gif" height="230" title="scenery">
<a id="bubble"></a>Bubble
<img src="images/bubble.gif" height="230" title="bubble">
<a id="flower"></a>Flower
<img src="images/flower.gif" height="230" title="flower">
<a id="JumpingBall"></a>Jumping Ball
<img src="images/jumpingBall.png" height="230" title="Jumping Ball"><a id="LightBulbAnimation"></a>Light Bulb Animation
<img src="images/LightBulbAnimation.png" height="230" title="Light Bulb animation"><a id="city-animation-footer"></a>City animation footer
<img src="images/City animation footer.gif" height="230" title="City animation footer">
<a id="smoke"></a>Smoke
<img src="images/smoke.gif" height="230" title="smoke">
<a id="loader"></a>Loader
<img src="images/loader.gif" height="230" title="loader">
<img src="images/New_Loader.png" height="230" title="New_Loader">
<a id="spiner"></a>Spiner
<img src="images/spiner.gif" height="230" title="spiner">
<a id="fire"></a>Fire
<img src="images/fire.gif" height="230" title="fire">
<a id="flame"></a>Flame
<img src="images/flame.gif" height="230" title="flame">
<a id="shuffling-squres"></a>Shuffling squares
<img src="images/shuffling-squares.gif" height="230" title="Shuffling squares">
<a id="Floating-labelV2"></a>Floating-labelV2
<img src="images/Floatinglabel2.gif" height="230" title="Floating-labelV2">
<a id="scary-animation"></a>scary-animation
<img src="images/Scary-animation.gif" height="230" title="scary-animation">
<a id="infinite-carousel"></a>infinite-carousel
<img src="images/infinite-carousel.gif" height="230" title="infinite-carousel">
<img src="images/Scary-animation.gif" height="230" title="Floating-labelV2">
<img src="images/Scary-animation.gif" height="230" title="scary-animation">
<a id="growing-flower"></a>growing-flower
<img src="images/growing-flower.gif" height="230" title="growing-flower">
<a id="playing-card"></a>Playing Card Animation
<img src="images/playing-card.png" height="230" title="Playing cacrd animation"><a id="starwarsintro"></a>Star Wars Intro
<img src="images/intro1.png" height="230" title="starwarsintro"> <img src="images/intro2.png" height="230" title="starwarsintro">
<a id= "Gradient-Animation"></a>Gradient Animation
<img src="images/gradient-animation.gif" height="230" title="Gradient Animation">
<a id="zoom-when-hover"></a>Zoom when hover
<img src="images/zoom-effect.gif" height="230" title="zoom-when-hover">
<a id="Floating-labelV2"></a>Floating-labelV2
<img src="images/Floatinglabel2.gif" height="230" title="Floating-labelV2">
<a id= "Css Tables"></a>CSS Tables
<a id= "3D Transform"></a>3D Transform
<a id="animated-btn"></a>Animated Button
<a id= "Css FLEX"></a>Css FLEX
<a id="Coffee-Animation"></a>Coffee-Animation
<a id="Basketball-Animation"></a>Basketball-Animation
<img src="images/basketball-animation.gif" height="230" title="basketball-animation">
<a id="Business-Card"></a>Business-Card
<a id="SolarSystem"></a>SolarSystem
<a id="Pendulum"></a>Pendulum
<a id="SlicedButton"></a>SlicedButton
<a id="Rating Star"></a>Rating Star
<a id="DVDScreenSaver"></a>DVD Screen Saver
<a id="ProfileCards"></a>ProfileCards
<a id="RotateSquare"></a>RotateSquare
[<img src="images/rotateSquare" height="230" title="Demo 1">]
<a id="stickman"></a>Stickman Animation
<img src="./images/stickman.png" height="200" title="3d card flip transtion demo gif"><a id="Clock-App"></a>Clock App
<a id="mmt"></a>MakemyTrip
<a id="zomato"></a>Zomato
<a id="3d-card-flip-transition"></a>3D card flip transition
[<img src="./images/3d-card-flip-transition.gif" height="200" title="Demo Image">]
<a id="babyYoda"></a>Baby Yoda Animation CSS
<img src="./images/babyYoda.jpg" title="Baby Yoda Animation">
<a id="debit-card-hover"></a>Debit Card Hover Effect
<a id="ProgressOnScroll"></a>Progress bar on scroll
<img src="images/progress_on_scroll_demo.gif" height="230" title="Progress On Scroll Demo">
<a id="horizontal-image-slider"></a>Horizontal Image Slider
<img src="Horizontal image slider/images/horizontal-image-slider.gif" height="230" title="horizontal-image-slider"><a id="carousel-effect"></a>Carousel Effect
Contributors
Thanks to these wonderful people who have contributed to this project!
<a href="https://github.com/you-dont-need/You-Dont-Need-JavaScript/graphs/contributors"> <img src="https://contrib.rocks/image?repo=you-dont-need/You-Dont-Need-JavaScript" /> </a>Contributing
We 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.
For detailed guidelines on how to contribute, please refer to our CONTRIBUTING file.
Let's build something great together!