Awesome

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)**

<a id="toggle"></a>CSS Toggle

⬆ back to top

<a id="Accordion"></a>Accordion / Toggle

⬆ back to top

<a id="Animated-Buttons"></a>Animated Buttons

⬆ back to top

<a id="captain"></a>Captain America Shield

⬆ back to top

<a id="Carousel"></a>Carousel

⬆ back to top

<a id="Counter"></a>Counter of checked check-boxes

⬆ back to top

<a id="Flip"></a>Flip on click

⬆ back to top

<a id="Flip"></a>Flip on click

⬆ back to top

<a id="Flip"></a>Flip on click

⬆ back to top

<a id="Animated Box"></a>Animated Box

⬆ back to top

<a id="analogclock"></a>Analog-clock

⬆ back to top

⬆ back to top

<a id="Font"></a>Font-Face (Latin)

⬆ back to top

<a id="Info"></a>Info on hover/ Popover

⬆ back to top

<a id="Image"></a>Image Gallery

⬆ back to top

<a id="Loaders"></a>Loaders

⬆ back to top

<a id="DropdownMenu"></a>Dropdown Menu

⬆ back to top

<a id="Mobile"></a>Mobile menu off canvas

⬆ back to top

<a id="BurgerMenu"></a>Burger Menu

⬆ back to top

<a id="button_letsgo"></a>Button Animation

⬆ back to top

<a id="compassloader"></a>Compass Loader

⬆ back to top

<a id="FancyMenu"></a>Fancy Menu

⬆ back to top

<a id="footer"></a>Footer

⬆ back to top

<a id="Modal"></a>Modal/Popup

⬆ back to top

<a id="Mouse"></a>Mouse tracking

⬆ back to top

<a id="navBar"></a>NavBar

⬆ back to top

<a id="Parallax"></a>Parallax scrolling

⬆ back to top

<a id="Tabs"></a>Tabs

⬆ back to top

<a id="Todo"></a>Todo List

⬆ back to top

<a id="Tooltips"></a>Tooltips

Demo

<a id="Treeview"></a>Treeview

⬆ back to top

<a id="Twitter"></a>Twitter Heart Animation

⬆ back to top

<a id="BookAnimation"></a>Book Animation

⬆ back to top

<a id="ImageColorizing"></a>Dynamic Image Colorizing

⬆ back to top

<a id="DarkMode"></a>DarkMode

⬆ back to top

<a id="RippleEffect"></a>Ripple Effect

⬆ back to top

<a id="ResponsiveItemShowcase"></a>Responsive Counter Showing # of Items That Didn't Fit Screen

⬆ back to top

<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">]

⬆ back to top

<a id="NeumorphismCardDesign"></a>Neumorphism Card Design

⬆ back to top

<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="shake-button"></a>Shake Button

⬆ back to top

<a id="moving_hand"></a>Shake Button

⬆ back to top

<a id="Dog-Animation"></a>Dog Box Animation

⬆ back to top

<a id="Thankyou-Animation"></a>Thankyou-Animation

⬆ back to top

<a id="Square_roation_animation"></a>Square_rotation_animation (Latin)

⬆ back to top

<a id="Switch"></a>Switch

⬆ back to top

<a id="bonfire"></a>Bonfire

⬆ back to top

<a id="scenary"></a>Scenary

⬆ back to top

<a id="bubble"></a>Bubble

⬆ back to top

<a id="flower"></a>Flower

⬆ back to top

<a id="JumpingBall"></a>Jumping Ball

⬆ back to top

<a id="LightBulbAnimation"></a>Light Bulb Animation

⬆ back to top

<a id="city-animation-footer"></a>City animation footer

⬆ back to top

<a id="smoke"></a>Smoke

⬆ back to top

<a id="loader"></a>Loader

⬆ back to top

<a id="spiner"></a>Spiner

⬆ back to top

<a id="fire"></a>Fire

⬆ back to top

<a id="flame"></a>Flame

⬆ back to top

<a id="shuffling-squres"></a>Shuffling squares

<a id="Floating-labelV2"></a>Floating-labelV2

⬆ back to top

<a id="scary-animation"></a>scary-animation

⬆ back to top

<a id="infinite-carousel"></a>infinite-carousel

<img src="images/infinite-carousel.gif" height="230" title="infinite-carousel">

=======

=======

⬆ back to top

<a id="growing-flower"></a>growing-flower

⬆ back to top

<a id="playing-card"></a>Playing Card Animation

⬆ back to top

<a id="starwarsintro"></a>Star Wars Intro

⬆ back to top

<a id= "Gradient-Animation"></a>Gradient Animation

⬆ back to top

<a id="zoom-when-hover"></a>Zoom when hover

<a id="Floating-labelV2"></a>Floating-labelV2

⬆ back to top

<a id= "Css Tables"></a>CSS Tables

=======

<a id= "3D Transform"></a>3D Transform

<a id="animated-btn"></a>Animated Button

⬆ back to top

<a id= "Css FLEX"></a>Css FLEX

<a id="Coffee-Animation"></a>Coffee-Animation

⬆ back to top

=======

<a id="Basketball-Animation"></a>Basketball-Animation

⬆ back to top

=======

<a id="Business-Card"></a>Business-Card

img_source

⬆ back to top

=======

<a id="SolarSystem"></a>SolarSystem

img_source

⬆ back to top

<a id="Pendulum"></a>Pendulum

img_source

⬆ back to top

<a id="SlicedButton"></a>SlicedButton

⬆ back to top

<a id="Rating Star"></a>Rating Star

⬆ back to top

<a id="DVDScreenSaver"></a>DVD Screen Saver

img_source

⬆ back to top

<a id="RotateSquare"></a>RotateSquare

[<img src="images/rotateSquare" height="230" title="Demo 1">]

⬆ back to top

=======
&nbsp;

---

## 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](CODE_OF_CONDUCT.md).

For detailed guidelines on how to contribute, please refer to our [CONTRIBUTING](CONTRIBUTING.md) file.

Let's build something great together!

Awesome

You Don't Need JavaScript

Style Guide:

Quick links

<a id="toggle"></a>CSS Toggle

<a id="Accordion"></a>Accordion / Toggle

<a id="Animated-Buttons"></a>Animated Buttons

<a id="captain"></a>Captain America Shield

<a id="Carousel"></a>Carousel

<a id="Counter"></a>Counter of checked check-boxes

<a id="Flip"></a>Flip on click

<a id="Flip"></a>Flip on click

<a id="Flip"></a>Flip on click

<a id="Animated Box"></a>Animated Box

<a id="analogclock"></a>Analog-clock

<a id="Font"></a>Font-Face (Latin)

<a id="Info"></a>Info on hover/ Popover

<a id="Image"></a>Image Gallery

<a id="Loaders"></a>Loaders

<a id="DropdownMenu"></a>Dropdown Menu

<a id="Mobile"></a>Mobile menu off canvas

<a id="BurgerMenu"></a>Burger Menu

<a id="button_letsgo"></a>Button Animation

<a id="compassloader"></a>Compass Loader

<a id="FancyMenu"></a>Fancy Menu

<a id="footer"></a>Footer

<a id="Modal"></a>Modal/Popup

<a id="Mouse"></a>Mouse tracking

<a id="navBar"></a>NavBar

<a id="Parallax"></a>Parallax scrolling

<a id="Tabs"></a>Tabs

<a id="Todo"></a>Todo List

<a id="Tooltips"></a>Tooltips

<a id="Treeview"></a>Treeview

<a id="Twitter"></a>Twitter Heart Animation

<a id="BookAnimation"></a>Book Animation

<a id="ImageColorizing"></a>Dynamic Image Colorizing

<a id="DarkMode"></a>DarkMode

<a id="RippleEffect"></a>Ripple Effect

<a id="ResponsiveItemShowcase"></a>Responsive Counter Showing # of Items That Didn't Fit Screen

<a id="login"></a>A login Page with Glassmorphism Effect

<a id="NeumorphismCardDesign"></a>Neumorphism Card Design

<a id="neon-button"></a>Neon Button

<a id="neon-card"></a>Neon Card

<a id="shake-button"></a>Shake Button

<a id="moving_hand"></a>Shake Button

<a id="Dog-Animation"></a>Dog Box Animation

<a id="Thankyou-Animation"></a>Thankyou-Animation

<a id="Square_roation_animation"></a>Square_rotation_animation (Latin)

<a id="Switch"></a>Switch

<a id="bonfire"></a>Bonfire

<a id="scenary"></a>Scenary

<a id="bubble"></a>Bubble

<a id="flower"></a>Flower

<a id="JumpingBall"></a>Jumping Ball

<a id="LightBulbAnimation"></a>Light Bulb Animation

<a id="city-animation-footer"></a>City animation footer

<a id="smoke"></a>Smoke

<a id="loader"></a>Loader

<a id="spiner"></a>Spiner

<a id="fire"></a>Fire

<a id="flame"></a>Flame

<a id="shuffling-squres"></a>Shuffling squares

<a id="Floating-labelV2"></a>Floating-labelV2

<a id="scary-animation"></a>scary-animation

<a id="infinite-carousel"></a>infinite-carousel

<img src="images/infinite-carousel.gif" height="230" title="infinite-carousel">

<a id="growing-flower"></a>growing-flower

<a id="playing-card"></a>Playing Card Animation

<a id="starwarsintro"></a>Star Wars Intro

<a id= "Gradient-Animation"></a>Gradient Animation

<a id="zoom-when-hover"></a>Zoom when hover

<a id="Floating-labelV2"></a>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

<a id="Business-Card"></a>Business-Card