you-dont-need / You-Dont-Need-JavaScript
CSS is powerful, you can do a lot of things without JS.
AI Architecture Analysis
This repository is indexed by RepoMind. By analyzing you-dont-need/You-Dont-Need-JavaScript in our AI interface, you can instantly generate complete architecture diagrams, visualize control flows, and perform automated security audits across the entire codebase.
Our Agentic Context Augmented Generation (Agentic CAG) engine loads full source files into context, avoiding the fragmentation of traditional RAG systems. Ask questions about the architecture, dependencies, or specific features to see it in action.
Embed this Badge
Showcase RepoMind's analysis directly in your repository's README.
Repository Summary (README)
PreviewEnglish | 简体中文
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
- CSS Form Handling
- Climbing Loading
- Download_buttons
- Dog Box Animation
- Dismissible Alert
- Dropdown Menu
- Dynamic Image Colorizing
- Earth
- Enable Dark Mode
- Fancy Menu
- Flip the grid
- Flip on Click
- Flipbook Storyboard
- Floating Label on Textfield
- Floating Labels V2
- Font-Face (Latin)
- Footer
- Gradient Animation
- Growing Flower
- Horizontal image slider
- Hourglass Sand Timer
- Hover Animation
- Image Gallery
- Image Hover Effect
- Image Comparison Slider
- Infinite Carousel
- Info on Hover / Popover
- Input Text Field
- Interactive Resume
- Jumping Ball
- Light Bulb Animation
- Lighthouse Scene
- Loader Diamond Animation
- Loaders
- Loading_Css_effect
- Lego_Loader
- MasterCard
- Mobile Menu Off Canvas
- Modal/Popup
- Mondrian Composition
- Morph Loader
- Mouse Tracking
- Multi Step Checkout
- NavBar
- Neon Button
- Neon Card
- Netlix Clone v2
- Neumorphism Card Design
- Night City
- Parallax Scrolling
- Pendulum
- Playing Card Animation
- Product Cards
- Profile Cards
- Radial Color Pulsar
- Responsive Counter Showing # of Items That Didn't Fit Screen
- Retro Loader
- Ripple Effect
- Redar Loader
- Resizable Split Panel
- Rotating Text
- Scary Animation
- Scenery
- Scroll Video Cinematic Animation
- Shake Button
- Shuffling Squares
- Star Wars Intro
- Switch
- Social Media Icons
- Spaceship
- Tables
- Tabs
- MakemyTrip
- Text Hover Gallery
- Text Spoiler Effect
- Timeline
- Time Travel
- Thank You Animation
- Toast Notification
- Todo List
- Tooltips
- Treeview
- Twitter Heart Animation
- Tri Color Loader
- Traffic Light Loader
- Book Animation
- Zomato
- Zoom When Hover
- Debit Card Hover effect
- Progress Bar On Scroll
- Password Strength Checker
- Pricing Table
- Text Change Animation
- Glide to Reveal
- Terminal Animation
- Contribution
<a id="earth"></a>EARTH
<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:
[<video width="400" height="200" controls>
<source src="https://github.com/user-attachments/assets/4786bfb6-78e7-4682-b098-c49f3f518b5f" type="video/mp4"> Your browser does not support the video tag. </video>](http://url-to-light-theme-page)Dark Theme:
[<video width="400" height="200" controls>
<source src="https://github.com/user-attachments/assets/1b305f75-26b3-41c3-a19a-6f7bd043d393" type="video/mp4"> Your browser does not support the video tag. </video>](http://url-to-dark-theme-page)<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="Climbing Loading"></a>Climbing Loading
<img src="images/Climbing_Loading.gif" height="230" title="Demo">
<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="text-hover-gallery"></a>Badge
<img src="images/textHoverGallery.gif" 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"> <img src="images/Popover.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"> <img src="images/infinite-slider.png" height="230" title="Demo 6">
<a id="image-comparison-slider"></a>Image Comparison Slider
<img src="Image Comparision Slider/ss_1.png" height="230" title="Pure CSS Image Comparison Slider Demo 1"> <img src="Image Comparision Slider/ss_2.png" height="230" title="Pure CSS Image Comparison Slider Demo 2">
<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="MasterCard/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="morph-loader"></a>Morph Loader
<img src="images/morphLoader.gif" height="230" title="Morph Loader 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="mondrian-composition"></a>Mondrian Composition
<img src="images/mondrian_composition.png" height="230" title="Mondrian Art Demo">
<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="time-travel"></a>Time Travel
<img src="Time-Travel/preview.png" height="230" title="Time Travel">
A pure CSS time travel timeline that allows you to explore different eras.
<a id="toast-notifications"></a>Toast Notifications
<img src="toast-notifications/toast-notif.png" height="230" title="Demo">
<a id="flip-grid"></a>Flip grid
<img src="flip grid animation/flip.gif" height="230" title="Demo">
<a id="flipbook-storyboard"></a>Flipbook Storyboard
<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="Tri_Color_Loader"></a>Tri Color Loader
<img src="images/tri_color_loader.gif" height="230" title="Demo">
<a id="Traffic_Light_Loader"></a>Traffic Light Loader
<img src="images/Traffic_Light_Loader.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="Redar Loader"></a>Readar Loader
<img src="images/redar_loader.gif" title="Redar Loader">
<a id="resizable-split-panel"></a>Resizable Split Panel
<img src="images/resizable_panel_demo.gif" title="Resizable Split Panel Demo">
<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="night-city"></a>Night City
<img src="Night City/preview1.png" height="230" title="Night City - City View"> <img src="Night City/preview2.png" height="230" title="Night City - Road View">
A 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.
<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="css-form-handling"></a>CSS Form Handling
<img src="images/form-preview.png" height="230" title="CSS Form Handling">
<a id="Download_buttons"></a>Download_buttons
<img src="images/Download_buttons.png" title="Download_buttons">
<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="lighthouse-scene"></a>Lighthouse Scene
<img src="Lighthouse Scene/Lighthouse_scene.gif" height="230" title="Lighthouse Scene">
<a id="Loading Css effect"></a>Loading Css effect
<img src="images/Loading_Css_effect.gif" height="230" title="Loading Css effect"><a id="Lego Loader"></a>Lego Loader
<img src="images/lego_loader.gif" height="230" title="Lego Loader"><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="scroll-video-cinematic"></a>Scroll Video Cinematic Animation
A modern, interactive scroll-driven video animation created with pure CSS. Features cinematic video effects, gradient overlays, and smooth scroll animations - no JavaScript required!
<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="Spaceship"></a>Spaceship
<a id="Timeline"></a>Timeline
<a id="RadialPulsar"></a>Radial Color Puslar
<img src="Radial Color Pulsar/Radial.png" title="Demo">
<a id="RetroLoader"></a>Retro Loader
<img src="Retro Loader/Retro.png" title="Demo">
<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="password-strength-checker"></a>Password Strength Checker
<img src="images/Password-Strength-Checker.png" height="230" title="password-strength-checker">
<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="multi-step-checkout"></a>Mutli Step Checkout
<img src="./Multi-Step-Checkout/img/Multi_Step_Checkout.png" height="230" title="multi-step-checkout"><a id="carousel-effect"></a>Carousel Effect
<a id="piano"></a>Piano
<img src="images/piano.png" height="230" title="Piano">
<a id="interactive-resume"></a>Interactive Resume
An interactive resume built entirely using HTML and CSS — featuring animations, hover effects, and smooth transitions that bring your profile to life.
No JavaScript used.
<img src="./Interactive Resume/preview-images/i1.png" width="32%"> <img src="./Interactive Resume/preview-images/i2.png" width="32%"> <img src="./Interactive Resume/preview-images/i3.png" width="32%">
<a id="mewtwo-card"></a>Mewtwo Pokémon Card
<img src="images/mewtwo-card.png" height="230" title="Mewtwo Pokémon Card">
<a id="kaleidoscope"></a>Kaleidoscope
<img src="images/kaleidoscope.png" height="230" title="Kaleidoscope">
<a id="Glide to Reveal"></a>Glide to Reveal
<img src="images/glidetoreveal.png" height="230" title="Glide-to-reveal">
<a id="rotating-text"></a>Rotating Text
<img src="images/rotating_text.mp4" height="230" title="Demo">
<a id="input-text"></a>Input Text Field
[<video height="230" width="230" controls>
<source src="images/input-text.mp4" type="video/mp4"> </video> ]()<a id="night-fire-camp"></a>Night fire camp
[<video height="230" width="230" controls>
<source src="images/nightfirecamp.mp4" type="video/mp4"> </video> ]()<a id="Robot"></a>Carousel
<img src="images/Robot.png" height="230" title="Robot">
<a id="terminal-animation"></a>Terminal Animation
<img src="./images/Terminal Animation.gif" height="230" title="terminal-animation">
<a id="text-change-animation"></a>Text Change Animaton
<img src="./images/text-change-animation.gif" height="230" title="Text Change Animation"> (./Text Change Animation/index.html)
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!
License
This project is licensed under the GNU General Public License v3.0 (GPL-3.0) — see the LICENSE file for details.