You-Dont-Need-JavaScript

KO | EN

gitlite — search

#javascript #python #ai #llm #android #machine-learning #linux #windows #awesome #awesome-list #pytorch #mcp #ios #openai

You-Dont-Need-JavaScript

(★ 20,572)

CSS is powerful, you can do a lot of things without JS.

File Explorer

Download Latest Version (.zip)

- index.html
- styles.css
- index.html
- Untitled video - Made with Clipchamp.mp4
- - chip.png
  - logo.png
- index.html
- style.css
- 3DPyramid.html
- index.html
- output.png
- animation.html
- Screencast from 31-10-23 07_12_05 PM IST.webm
- index.html
- spinning-donut.png
- animation.gif
- animation.mp4
- index.html
- triangle-3d.html
- index.html
- virtual_keyboard.jpg
- - accordian.css
  - index.html
  - Screenshot (29).png
- - accordion-style.css
  - accordion.html
- - index.html
  - style.css
- Advanced Dancing Animation.html
- readme.md
- - amazon_logo.png
  - box1_image.jpg
  - box2_image.jpg
  - box3_image.jpg
  - box4_image.jpg
  - box5_image.jpg
  - box6_image.jpg
  - box7_image.jpg
  - box8_image.jpg
  - hero_image.jpg
- index.html
- style.css
- index.html
- style.css
- Clocks_output.jpg
- index.html
- style.css
- loading_page.html
- style.css
- Animated Navigation Menu.html
- readme.md
- rainfallAnimation.css
- rainfallAnimation.html
- index.html
- readme.md
- Screen Recording 2024-10-09 220550.mp4
- styles.css
- index.css
- index.html
- animation.css
- index.html
- index.html
- style.css
- index.html
- index1.css
- animatedipne.html
- output.png
- keyframes.html
- readme.md
- - index.css
  - index.html
- APPLE.png
- EMAIL.png
- Footer.png
- image22.png
- Login Page.png
- PASSWORD.png
- - Amitav Ghosh.jpg
  - Arundhati Roy.avif
  - Chetan Bhagat.jpg
  - image.png
  - r.k. narayan.jpg
  - rabindranath tagore.jpg
  - Ruskin Bond.jpg
  - Salman Rushdie.avif
  - Vikram Seth.jpg
- Author-page.html
- main.js
- style.css
- index.html
- style.css
- - index.html
- index.html
- index.html
- logo.png
- BlinkingCardVideo.mp4
- index.html
- style.css
- style.css.map
- style.scss
- claycard.css
- claycard.html
- claycards.png
- Glasscard.html
- glasscards.png
- neuo.png
- neuocards.css
- neuocards.html
- styles.css
- index.html
- style.css
- img1.png
- index.html
- output.png
- styles.css
- - index.html
  - style.css
- - effect.gif
  - index.html
  - README.md
  - style.css
- - index.html
- - effect.gif
  - index.html
  - README.md
  - style.css
- - index.html
- - index.html
  - sliced_button.gif
  - style.css
- indes.html
- style.css
- index.html
- style.css
- - shield.png
- index.html
- README.md
- style.css
- icon.png
- index.html
- styles.css
- - index.html
- - index.html
  - styles.css
- - index.html
  - styles.css
- - index.html
- - index.html
  - output.png
- - index.html
- - index.html
- - bg-blur-card green.png
  - bg-color-changing card.mp4
  - bg-image-changing-card.mp4
  - hover-card indigo.mp4
  - multiple element card.png
- package-lock.json
- package.json
- tailwind.config.js
- - carousel_demo.mp4
- img1.jpg
- img2.jpg
- img3.jpg
- index.html
- style.css
- circular-progress-bar-demo.mp4
- index.html
- style.css
- index.html
- style.css
- hacktoberFest.png
- index.html
- Instructions.md
- index.html
- logo.png
- style.css
- CompassLoader.gif
- index.html
- style.css
- index.html
- readme.md
- style.css
- ui.png
- index.html
- style.css
- index.html
- style.css
- css table ss 2024.png
- index.html
- Screenshot 2023-10-23 144658.png
- index.html
- style.css
- form-preview.png
- index.html
- styles.css
- CSS-grid layout generator.html
- readme.md
- - index.html
  - style.css
- index.html
- style.css
- index.html
- style.css
- index.html
- style.css
- index.html
- style.css
- index.html
- style.css
- index.html
- style.css
- index.html
- style.css
- 14393454_1080_1920_60fps.mp4
- index.html
- preview.gif
- README.md
- style.css
- index.html
- README.md
- click.html
- styles.css
- index.html
- style.css
- index.html
- style.css
- Dancing Alphabates.mp4
- Dancing Alphabets.html
- readme.md
- index.html
- Screenshot 2024-10-11 103321.png
- style.css
- interactive-image.mov
- distorted-text-anim.css
- distorted-text.html
- index.html
- README.md
- DoomGuy.gif
- index.html
- style.css
- index.html
- styles.css
- dvd.png
- index.html
- style.css
- earth.mp4
- index.html
- style.css
- index.html
- style.css
- card-slide-hover-effect.html
- image-border-hover-effect.html
- ModernSidebar.html
- profile-card-hover-effect.html
- spin-square-circle.html
- ToDo.html
- - clay.css
  - clay.html
- - faqglass.html
  - glass.css
- - neu.css
  - neu.html
- .DS_Store
- fav0.png
- fav1.png
- new.html
- Screenshot 2023-10-23 141538.png
- flip.gif
- index.html
- style.css
- - frame1.jpg
  - frame2.jpg
  - frame3.jpg
  - frame4.jpg
  - frame5.jpg
  - README.md
- demonstration.mp4
- index.html
- preview.png
- styles.css
- - FloatingLabelSignUpDemo.gif
  - FLSignUp.css
  - FLSignUp.html
- floatingLabel.css
- floatingLabel.html
- FloatingLabelDemo.gif
- index.html
- index.css
- index.html
- index.html
- Screenshot (736).png
- index.html
- abc.html
- Screenshot 2023-10-23 133423.png
- growing-flower-1.gif
- growing-flower.gif
- growing.css
- growing.html
- index.html
- index.html
- style.css
- hamburgerMenu.css
- hamburgerMenu.html
- HamburgerMenu.png
- - horizontal-image-slider.gif
- index.html
- style.css
- index.html
- README.md
- style.css
- index.html
- style.css
- index.html
- README.md
- ss_1.png
- ss_2.png
- styles.css
- image1.jpeg
- image2.jpg
- image3.jpg
- image_slider.html
- readme.md
- styles.css
- image.png
- image1.jpg
- index.html
- style.css
- - accordion.png
  - checkedcounter.png
  - flipper.png
  - gallery.png
  - game.png
  - loader.png
  - loader2.png
  - loader3.png
  - loader4.png
  - loader5.png
  - loader6.png
  - loader7.png
  - loader8.png
  - loader9.png
  - menu.png
  - menu2.png
  - modal.png
  - modal2.png
  - mousetracking.png
  - parallax.png
  - sansfont.png
  - slideshow.png
  - slideshow2.png
  - sudoku.png
  - tabs.png
  - tabs2.png
  - textfields.png
  - todo.png
  - tooltips.png
  - tree.png
- - card1.png
  - card2.png
  - card3.png
  - card4.png
  - card5.png
  - card6.png
  - card7.png
- 1.png
- 2.png
- 3.png
- 3d-card-flip-transition.gif
- 4.png
- 5.png
- 6.png
- accordion.gif
- accordion.png
- AccordionAndFAQ.gif
- Animated-button-1.png
- Animated-button-2.png
- Animated-button.png
- AnimatedBox.jpg
- AnimatedBox2.jpg
- art_twitter_heart_animation.gif
- babyYoda.jpg
- badge_design1.png
- badge_design2.png
- basketball-animation.gif
- blue.jpg
- Bonfire.gif
- book_animation.gif
- Bouncing_Ball.gif
- btn1.png
- btn2.png
- bubble.gif
- bus.png
- ButtonAnimation.gif
- buttonHoverClick.gif
- ButtonNeon.gif
- buttonRotatingRipple.gif
- carousel.png
- checkedcounter.png
- checkedcounter2.png
- City animation footer.gif
- claycards.png
- Climbing_Loading.gif
- clock.jpg
- cofeemachineanimation.png
- Coffee-animation.gif
- CompassLoader.gif
- css-loader-purna.gif
- darkmode.gif
- Debit card Effect.png
- Dog-box-animation.png
- Download_buttons.png
- DVDScreenSaver.png
- Expandable Card Design.jpg
- faceAnimation.jpg
- fancyMenu.gif
- faqclay.png
- faqglass.png
- faqneuo.png
- fire.gif
- flame.gif
- flipCardgif.gif
- flipper.png
- Floatinglabel2.gif
- flower.gif
- footer_lg.png
- footer_sm.png
- form-preview.png
- fresh-green-mountains-grassland.jpg
- gallery.png
- gallery2.png
- gallery3.png
- game.png
- gif.gif
- glasscards.png
- Glassmorphism-card-design.gif
- glidetoreveal.png
- gorilla.webp
- gradient-animation.gif
- growing-flower - Copy.gif
- growing-flower-1.gif
- growing-flower.gif
- Heartballs.gif
- icons.png
- image-border-hover-effect.png
- image_navbar.png
- imagecolorizing.png
- Infinite-carousel-purnasth.gif
- infinite-carousel.gif
- infinite-slider.png
- info-on-hover.png
- input-text.mp4
- interactive-image.png
- intro1.png
- intro2.png
- java-script.png
- jumpingBall.png
- kaleidoscope.png
- lego_loader.gif
- LightBulbAnimation.png
- liquidButton.png
- loader 1.jpg
- loader.gif
- loader.png
- loader10.png
- loader11.gif
- loader12.gif
- loader2.png
- loader3.png
- loader4.png
- loader5.png
- loader6.png
- loader7.png
- loader8.png
- loader9.png
- Loading_Css_effect.gif
- lunar eclipse.jpg
- menu.png
- menu2.png
- menu3.png
- menu4.png
- mewtwo-card.png
- modal.png
- modal2.png
- Modern Sidebar Design.jpg
- ModernNavBarDesign.png
- mondrian_composition.png
- morphLoader.gif
- mouse-tracking-2.gif
- mousetracking.png
- moving_hand.png
- navbar.png
- neon-button-updated.gif
- neon-button.gif
- Neon-card-2.gif
- neumorphism-card-design.gif
- neuo.png
- New_Loader.png
- New_Switch.gif
- newTable.png
- nightfirecamp.mp4
- parallax.png
- Password-Strength-Checker.png
- pendulum.png
- piano.png
- playing-card.png
- Popover.gif
- pricingtable1.png
- pricingtable2.png
- pricingtable3.png
- progress_on_scroll_demo.gif
- rating-star.png
- redar_loader.gif
- resizable_panel_demo.gif
- responsive-item-showcase.gif
- ripple-effect.gif
- rotateSquare.png
- rotating_text.mp4
- sansfont.png
- Scary-animation.gif
- scenary.gif
- Screenshot (39).png
- Screenshot (40).png
- Screenshot (42).png
- shake-button.gif
- shuffling-squares.gif
- slider.gif
- slideshow.png
- slideshow2.png
- slideshow3.png
- smoke.gif
- smoke.mp4
- spiner.gif
- Square_rotation_animation (1).png
- Square_rotation_animation (2).png
- Square_rotation_animation (3).png
- stickman.png
- sudoku.png
- Swarupc-crypto-deposits.csv
- Switch.gif
- tabs.png
- tabs2.png
- Terminal Animation.gif
- text-change-animation.gif
- textfields.png
- textHoverGallery.gif
- Thankyou-animation.png
- Todo List.png
- todo.png
- toggle1.png
- toggle2.png
- toggler.png
- toggler2.png
- tooltips.gif
- tooltips.png
- tooltips2.png
- Traffic_Light_Loader.gif
- Travel_01.png
- Travel_02.png
- Travel_03.png
- tree.png
- tri_color_loader.gif
- vanish text animation.jpg
- vertical-gallery.gif
- Waves.png
- Website_demo.png
- Website_demo_2.png
- Website_demo_3.png
- Whale_and_Moon.gif
- zoom-effect.gif
- index.html
- style.css
- - img1.jpg
  - img2.jpg
  - img3.jpg
  - img4.jpg
  - img5.jpg
  - img6.jpg
  - img7.jpg
  - img8.jpg
  - img9.jpg
- index.html
- style.css
- infinite.css
- infinite.html
- index.html
- style.css
- - i1.png
  - i2.png
  - i3.png
  - i4.png
  - i5.png
  - i6.png
  - i7.png
- demo.mp4
- index.html
- style.css
- index.html
- index.html
- style.css
- index.html
- Kaleidoscope.mp4
- kaleidoscope.png
- README.md
- style.css
- index.html
- - leaf-1.png
  - leaf-2.png
  - leaf-3.png
  - leaf-4.png
- leaf.css
- leaf.html
- index.html
- style.css
- bulb.html
- style.css
- lighthouse-scene.html
- Lighthouse_scene.gif
- index.html
- lighting_decor.jpg
- index.html
- README.md
- ui.png
- index.html
- style.css
- index.html
- loading.gif
- index.html
- style.css
- index.html
- style.css
- apple.png
- email icon.png
- google.png
- password icon.png
- Signin.css
- Signin.html
- index.html
- styles.css
- bxs-log-in-circle.svg
- Index.html
- istockphoto-1407633532-1024x1024.jpg
- istockphoto-1437809296-1024x10241.jpg
- log-in-6398177_1280.png
- Motivational Desktop Wallpaper (3).png
- style.css
- index.html
- README.md
- style.css
- index.html
- index.html
- screenshot.png
- style.css
- - bg.png
  - chip.png
  - logo.png
- index.html
- screenshot.PNG
- style.css
- index.html
- style.css
- - style.css
- - index.html
- - castle.png
  - hero.png
  - house.png
  - island.png
- Demo.png
- - 1.jpg
  - 2.jpg
  - 3.jpg
  - image.png
- 3d-hand-loader.html
- About.html
- alert.html
- animated-background.html
- animated-button.html
- Animated-search-box.html
- Animated_Boxes.html
- animated_btn.html
- animated_hover_rotate_effect.html
- AnimatedButtons.html
- animatedDarkCarousel.html
- art.html
- author.html
- basicprofile.html
- basketball.html
- batman-hover-button.html
- Bonfire-2.html
- Bonfire.html
- bouncing_ball.html
- BoxAnimation.html
- bubble.html
- burger-menu-1.html
- bus.html
- Card-flip.html
- card-hover.html
- cardanima.html
- carousel-1.html
- carousel-2.html
- carousel-3.html
- checkbox-counter.html
- city-animation-footer.html
- coffee-animation.html
- coffeemachine.html
- css-toggle-modal.html
- cube.html
- darkmode.html
- Dog-box.html
- EnvelopePopup.html
- ExpandableCardDesign.html
- eyeAnimation.html
- faceAnimation.html
- fire.html
- flame.html
- flip-1.html
- flip-2.html
- floating-labels-1.html
- FloatingImage.html
- flower-animation.html
- flower.html
- footer.html
- game-1.html
- game-2.html
- glassmorphism-card-design.html
- Gradient-Animation.html
- hambmenuleft.html
- heartballs.html
- hover-1.html
- image-gallery-1.html
- image-gallery-2.html
- ImageHoverGallery.html
- input-filed.html
- interactive-image-gallery.html
- liquidButton.html
- loader-1.html
- loader-10.html
- loader-11.html
- loader-2.html
- loader-3.html
- loader-4.html
- loader-5.html
- loader-6.html
- loader-7.html
- loader-8.html
- loader-9.html
- Loader.html
- loader14.html
- login-from.html
- lunar-eclipse.html
- mailanimation.html
- menu-1.html
- modal-1.html
- modal-2.html
- ModernNavbarDesign.html
- mouse-tracking-2.html
- mouse-tracking.html
- moving-hand.html
- Moving-road-animation.html
- Moving_hand.html
- movinghand.html
- movingroad.html
- NameAnimate.html
- navBar.html
- neon-button-updated.html
- neon-button.html
- Neon-card-2.html
- neon_hover_effect.html
- neumorphism-card-design.html
- neuomorphism-button.html
- Ninja-Scroll-Background-Animation.html
- On-Off-switch.html
- openingenvelope.html
- ProgressBar.html
- pure-css-float-labels.html
- retro background.html
- road.html
- Rolling ball.html
- scenary.html
- ScrollingText.html
- shake-button.html
- side-nav-1.html
- slider-bar.html
- slider.html
- smoke.html
- Spiner.html
- Star_Wars_Intro.html
- stickman.html
- tabs-1.html
- tabs-2.html
- template.html
- Thankyou.html
- todo-1.html
- toggling in css.html
- tree-1.html
- Tubelight.html
- vanish-text-animation.html
- Vertical-gallery.html
- WavyFooter.html
- whale&moon.html
- zoom_when_hover.html
- index.html
- styles.css
- index.html
- index.html
- morphLoader.gif
- index.html
- styles.css
- - BHIMUPI.png
  - CREDIT_CARD.png
  - GPAY.png
  - Multi_Step_Checkout.png
  - PAYPAL.png
- index.html
- style.css
- - download.svg
  - like.png
  - like.svg
  - logo.svg
  - next.svg
  - play.svg
  - prev.svg
  - shuffle.svg
- - 8907212018094.webp
  - hindi1.webp
  - hindi2.webp
  - hindi3.webp
  - hindi4.jpg
  - international1.webp
  - international2.webp
  - international3.webp
  - international4.webp
  - international5.webp
  - singer1.webp
  - singer2.webp
  - singer3.webp
  - singer4.webp
  - singer5.webp
  - song2.webp
  - song3.webp
  - song4.webp
  - song5.webp
- - Screenshot 2024-10-09 210903.png
  - Screenshot 2024-10-09 210917.png
  - Screenshot 2024-10-09 210927.png
- index.html
- style.css
- image2.jpeg
- image3.jpeg
- image4.jpeg
- image5.jpg
- image6.jpg
- index.html
- style.css
- - index.html
  - output1.png
  - output2.png
- - index.html
  - style.css
- index.html
- style.css
- - .DS_Store
- index2.html
- style2.css
- - movie1.jpg
  - movie2.jpg
  - movie3.jpg
  - movie4.jpg
  - movie5.jpg
  - movie6.jpg
  - movie7.jpg
  - movie8.jpg
- .DS_Store
- cyberpunk-sound.mp3
- img_main.jpg
- index.html
- netlfix_logo.png
- Screenshot1.png
- Screenshot2.png
- Screenshot3.png
- styles.css
- index.html
- style.css
- index.html
- style.css
- index.html
- styles.css
- newtons-cradle.html
- style.css
- style.css.map
- style.scss
- index.html
- preview1.png
- preview2.png
- style.css
- index.html
- output.mp4
- style.css
- - banner-bg.jpg
  - blog-1.jpg
  - blog-2.jpg
  - blog-3.jpg
  - blog-4.jpg
  - blog-5.jpg
  - book-1.png
  - book-10.png
  - book-2.png
  - book-3.png
  - book-4.png
  - book-5.png
  - book-6.png
  - book-7.png
  - book-8.png
  - book-9.png
  - book3.png
  - book5.png
  - book7.png
  - deal-img.jpg
  - letter-bg.jpg
  - loader-img.gif
  - pic-1.png
  - pic-2.png
  - pic-3.png
  - pic-4.png
  - pic-5.png
  - pic-6.png
  - README.md
  - stand.png
  - worldmap.png
- - image1.png
  - image2.png
  - image3.png
  - image4.png
- index.html
- style.css
- Parralax.html
- index.html
- index.html
- style.css
- index.html
- pendulum.css
- index.html
- piano-logo.png
- piano.css
- README.md
- - comic-webfont.woff
  - comic-webfont.woff2
  - erasbd-webfont.woff
  - erasbd-webfont.woff2
  - forte-webfont.woff
  - forte-webfont.woff2
  - lsans-webfont.woff
  - lsans-webfont.woff2
  - sriracha-regular-webfont.woff
  - sriracha-regular-webfont.woff2
- dark.gif
- G-letter.png
- mewtwo.css
- mewtwo.html
- Mewtwo.mp4
- mewtwo1.jpeg
- pokeball.png
- README.md
- X1.png
- index.html
- style.css
- index.html
- styles.css
- port.css
- port.html
- Portfolio Preview.png
- - index.html
- - index.html
- - index.html
- - bg-card.jpg
  - img-product1.png
  - img-product2.png
  - img-product3.png
- index.html
- style.css
- - card1.css
  - Card1.html
- - card2.css
  - card2.html
- - card3.css
  - card3.html
- - card4.css
  - card4.html
- - card5.css
  - card5.html
- - card6.css
  - card6.html
- - card7.css
  - card7.html
- - NanumGothic-Regular.ttf
  - pressgothic.otf
- index.html
- style.css
- index.html
- style.css
- index.html
- Radial.png
- style.css
- icon.png
- index.html
- meta.json
- styles.css
- index.html
- style.css
- index.html
- index.html
- style.css
- index.html
- style.css
- Footer.css
- index.html
- index.html
- index.html
- prdct1.webp
- style.css
- hamburger menu navbar.gif
- index.html
- index.html
- Retro.png
- RGBcolorgame.html
- index.html
- styles.css
- Robot.html
- Robot.png
- index.html
- style.css
- scary.css
- scary.html
- index.html
- style.css
- index.html
- styles.css
- - main.css
- - Git-2.46.2-64-bit.exe
  - hero.jpg
  - icons8-search.svg
  - thumbnail-1.webp
  - voice-search-icon.svg
- youtube.html
- Bg-stars.mp4
- SP.css
- SP.html
- index.html
- Shapes_output.png
- style.css
- index.html
- style.css
- shuffling.css
- shuffling.html
- ShufflingAnimation.mp4
- index.html
- style.css
- image.jpeg
- index.html
- style.css
- - index.html
  - style.css
- page.html
- icons.html
- Screenshot 2024-10-31 at 11.43.04 PM.png
- solar_system.css
- solar_system.html
- index.html
- output.png
- style.css
- Spaceship.gif
- spaceship.html
- ezgif.com-video-to-gif.gif
- index.html
- style.css
- squareAnimation.html
- index.html
- output.jpg
- style.css
- - index.html
  - README.md
  - style.css
- index.html
- style.css
- index.html
- style.css
- index.html
- textHoverGallery.gif
- Reflection.html
- - dark.mp4
  - light.mp4
- dark_spoiler.html
- light_sopiler.html
- ancient.png
- future.png
- index.html
- medeival.png
- modern.png
- preview.png
- style.css
- Timeline.gif
- timeline.html
- index.html
- styles.css
- toast-notif.png
- tooltip.css
- tooltip.html
- ToolTipVideo.mp4
- index.html
- styles.css
- Tooltip With Animation Demo.mov
- 3D Rotating Cube.html
- Glowing Orb with Rotating Rings.html
- Neon Cube Animation.html
- Neon Wireframe Cube.html
- retro-flip-clock.html
- swirling-gradient-circle.html
- Text Reflection.html
- underwater-text.html
- index.html
- style.css
- agra.jpg
- appartment.jpg
- auth-pages.css
- banglore.jpeg
- bunglow.jpeg
- create_account.html
- delhi.jpg
- Destinations.png
- Footer.jpg
- heroimg.jpg
- hyderabad.jpg
- index.html
- jaipur.jpg
- line.png
- line2.png
- login.html
- logo-removebg-preview.png
- logo.jpg
- mumbai.jpg
- privatevilla.jpg
- README.md
- Screenshot 2023-09-30 163012.png
- style.css
- travellinglogo.png
- Untitled design (1).png
- vr.webp
- vr2.jpg
- Website_FirstPage.png
- index.html
- style.css
- index.html
- - butons.html
- index.html
- watch_output.png
- index.html
- style.css
- app-store-badge.png
- app-store-badge.svg
- Buy_a_home.webp
- favicon.ico
- footer.png
- footer.svg
- GatedCarousel_Desktop (1).webp
- google-play-badge.png
- google-play-badge.svg
- index.html
- IvarHeadline-SemiBold-core.ttf
- main-bg.webp
- mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.ttf
- mem8YaGs126MiZpBA-UFVZ0bf8pkAg.ttf
- Rent_a_home.webp
- Sell_a_home.webp
- style.css
- z-logo.png
- z-logo.svg
- - style.css
- youtube.html
- index.html
- Screenshot 2023-10-23 153841.png
- - cake-1971552_1280.jpg
  - pizza-3010062_1280.jpg
  - strawberry-dessert-2191973_1280.jpg
- auth.css
- index.html
- login.html
- screenshot.png
- signup.html
- style.css
.DS_Store
.gitignore
.prettierignore
Advanced Circular Progress Bar - Google Chrome 2024-11-22 00-42-07.mp4
Animated Slider.mp4
CODE_OF_CONDUCT.md
CONTRIBUTING.md
CSS Circular Progress Bar - Google Chrome 2024-11-22 00-27-07.mp4
image.png
index.html
LICENSE
README-zh_CN.md
README.md
You-Dont-Need-JavaScript

# Installation Guide

1. Get the code

git clone https://github.com/you-dont-need/You-Dont-Need-JavaScript

Downloads the entire project code from GitHub to your computer.

cd You-Dont-Need-JavaScript

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

cd Cards

This project's files live in a subfolder, so move into it first.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

English | [简体中文](./README-zh_CN.md)

# You Don't Need JavaScript

[![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://dev.to/t/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:

```markdown
## <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](#you-dont-need-javascript)
- [Website Demo Using HTML CSS](#website-demo)
- [Style Guide](#style-guide)
- [Accordion / Toggle](#accordion--toggle)
- [Analog Clock](#analog-clock)
- [Animated Button](#animated-button)
- [Animated Buttons](#animated-buttons)
- [Badge](#badge)
- [Bonfire](#bonfire)
- [Book Animation](#book-animation)
- [Bubble](#bubble)
- [Bus](#bus)
- [Burger Menu](#burger-menu)
- [Button Animation](#button-animation)
- [Button Hover & Click Animation](#button-hover-click-animation)
- [Button with Rotating Text & Ripple Animation](#button-rotate-and-ripple-animation)
- [Baby Yoda Animation](#baby-yoda-animation-css)
- [Captain America Shield](#captain-america-shield)
- [Carousel](#carousel)
- [Compass Loader](#compass-loader)
- [City Animation Footer](#city-animation-footer)
- [Carousel Effect](#carousel-effect)
- [Counter of Checked Checkboxes](#counter-of-checked-check-boxes)
- [CSS Form Handling](#css-form-handling)
- [Climbing Loading](#Climbing-Loading)
- [Download_buttons](#Download_buttons)
- [Dog Box Animation](#dog-box-animation)
- [Dismissible Alert](#dismissible-alert)
- [Dropdown Menu](#dropdown-menu)
- [Dynamic Image Colorizing](#dynamic-image-colorizing)
- [Earth](#earth)
- [Enable Dark Mode](#darkmode)
- [Fancy Menu](#fancy-menu)
- [Flip the grid](#flip-grid)
- [Flip on Click](#flip-on-click)
- [Flipbook Storyboard](#flipbook-storyboard)
- [Floating Label on Textfield](#floating-label-on-textfield)
- [Floating Labels V2](#floating-labelv2)
- [Font-Face (Latin)](#font-face-latin)
- [Footer](#footer)
- [Gradient Animation](#gradient-animation)
- [Growing Flower](#growing-flower)
- [Horizontal image slider](#horizontal-image-slider)
- [Hourglass Sand Timer](#hourglass-sand-timer)
- [Hover Animation](#hover-animation)
- [Image Gallery](#image-gallery)
- [Image Hover Effect]()
- [Image Comparison Slider](#image-comparison-slider)
- [Infinite Carousel](#infinite-carousel)
- [Info on Hover / Popover](#info-on-hover-popover)
- [Input Text Field](#input-text)
- [Interactive Resume](#interactive-resume)
- [Jumping Ball](#jumping-ball)
- [Light Bulb Animation](#light-bulb-animation)
- [Lighthouse Scene](#lighthouse-scene)
- [Loader Diamond Animation](#loader-diamond)
- [Loaders](#loaders)
- [Loading_Css_effect](#Loading-Css-effect)
- [Lego_Loader](#Lego-Loader)
- [MasterCard](#mastercard)
- [Mobile Menu Off Canvas](#mobile-menu-off-canvas)
- [Modal/Popup](#modalpopup)
- [Mondrian Composition](#mondrian-composition)
- [Morph Loader](#morph-loader)
- [Mouse Tracking](#mouse-tracking)
- [Multi Step Checkout](#multi-step-checkout)
- [NavBar](#navbar)
- [Neon Button](#neon-button)
- [Neon Card](#neon-card)
- [Netlix Clone v2](#Netflix-Clone-v2)
- [Neumorphism Card Design](#neumorphism-card-design)
- [Night City](#night-city)
- [Parallax Scrolling](#parallax-scrolling)
- [Pendulum](#pendulum)
- [Playing Card Animation](#playing-card-animation)
- [Product Cards](#product-cards)
- [Profile Cards](#profilecards)
- [Radial Color Pulsar](#RadialPulsar)
- [Responsive Counter Showing # of Items That Didn't Fit Screen](#responsive-counter-showing--of-items-that-didnt-fit-screen)
- [Retro Loader](#RetroLoader)
- [Ripple Effect](#ripple-effect)
- [Redar Loader](#Redar-Loader)
- [Resizable Split Panel](#resizable-split-panel)
- [Rotating Text](#rotating-text)
- [Scary Animation](#scary-animation)
- [Scenery](#scenery)
- [Scroll Video Cinematic Animation](#scroll-video-cinematic)
- [Shake Button](#shake-button)
- [Shuffling Squares](#shuffling-squares)
- [Star Wars Intro](#star-wars-intro)
- [Switch](#switch)
- [Social Media Icons](#social-icons)
- [Spaceship](#spaceship)
- [Tables](#css-tables)
- [Tabs](#tabs)
- [MakemyTrip](#mmt)
- [Text Hover Gallery](#text-hover-gallery)
- [Text Spoiler Effect](#text-spoiler)
- [Timeline](#timeline)
- [Time Travel](#time-travel)
- [Thank You Animation](#thankyou-animation)
- [Toast Notification](#toast-notifications)
- [Todo List](#todo-list)
- [Tooltips](#tooltips)
- [Treeview](#treeview)
- [Twitter Heart Animation](#twitter-heart-animation)
- [Tri Color Loader](#Tri-Color-Loader)
- [Traffic Light Loader](#Traffic-light-loader)
- [Book Animation](#book-animation)
- [Zomato](#zomato)
- [Zoom When Hover](#zoom-when-hover)
- [Debit Card Hover effect](#debit-card-hover)
- [Progress Bar On Scroll](#ProgressOnScroll)
- [Password Strength Checker](#password-strength-checker)
- [Pricing Table](#pricing-table)
- [Text Change Animation](#text-change-animaton) 
- [Glide to Reveal](#glide-to-reveal)
- [Terminal Animation](#terminal-animation)
- **Contribution**
  - [Contributors](#contributors)
  - [Contributing](#contributing)

---

## <a id="earth"></a>EARTH

[EARTH](/You-Dont-Need-JavaScript/EARTH/earth.mp4)

**[⬆ back to top](#quick-links)**

## <a id="image-hover-effect"></a>Image Hover Effect

[<img src="Image-Hover-Effect\image.png" height="230" title="Image Hover Effect" alt="Image-Hover-Effect">](http://url-to-page)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/toggle1.png" height="230" title="CSS Toggle" alt="Toggle">](https://codepen.io/Vikash-Gorai/pen/QWYbpVm)
[<img src="images/toggle2.png" height="230" title="CSS Toggle" alt="Toggle">](https://codepen.io/Vikash-Gorai/pen/QWYbpVm)

**[⬆ back to top](#quick-links)**

---

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

**[⬆ back to top](#quick-links)**

## <a id="blog-cards"></a>Blog Post Cards

[<img src="images/neuo.png" height="230" title="Demo 1">](http://url-to-page)
[<img src="images/claycards.png" height="230" title="Demo 2">](http://url-to-page)
[<img src="images/glasscards.png" height="230" title="Demo 3">](http://url-to-page)

**[⬆ back to top](#quick-links)**

---

## <a id="Faq-section"></a>Faq Section

[<img src="images/faqclay.png" height="230" title="Demo 1">](http://url-to-page)
[<img src="images/faqneuo.png" height="230" title="Demo 2">](http://url-to-page)
[<img src="images/faqglass.png" height="230" title="Demo 3">](http://url-to-page)

**[⬆ back to top](#quick-links)**

---

## <a id="pricing-table"></a>Pricing Table

[<img src="images/pricingtable1.png" height="230" title="Demo 1">](http://url-to-page)
[<img src="images/pricingtable2.png" height="230" title="Demo 2">](http://url-to-page)
[<img src="images/pricingtable3.png" height="230" title="Demo 3">](http://url-to-page)

**[⬆ back to top](#quick-links)**

---

## <a id="social-icons"></a>Social_media_icons

[<img src="images/icons.png" height="230" title="Social-media-icons">]

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/accordion.png" height="230" title="Demo 1">](http://www.mraffaele.com/labs/css-only-accordions/)
[<img src="images/toggler.png" height="230" title="Demo 2">](http://codepen.io/cristina-silva/pen/pyXQrj)
[<img src="images/toggler2.png" height="230" title="Demo 3">](http://codepen.io/PaulZi/pen/zBbVvV)
[<img src="images/accordion.gif" height="230" title="Demo 4">](http://codepen.io/ekrof/pen/YqmXdQ)
[<img src="images/AccordionAndFAQ.gif" height="230" title="Demo 5">](https://codepen.io/theslladev/pen/dyxzEqy)

**[⬆ back to top](#quick-links)**

---

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

**[⬆ back to top](#quick-links)**

---

&nbsp;

## <a id="bus"></a>Bus

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

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/slideshow2.png" height="230" title="Demo 1">](http://codepen.io/SitePoint/pen/MyPVdK)
[<img src="images/slideshow.png" height="230" title="Demo 2">](https://codepen.io/cavico/pen/yOjwya)
[<img src="images/slideshow3.png" height="230" title="Demo 3">](https://codepen.io/FabianK/pen/zJLLrR)
[<img src="images/carousel.png" height="230" title="Demo 4">](https://codepen.io/NiklasKnaack/pen/abrOMLY)
[<img src="./images/Infinite-carousel-purnasth.gif" alt="Carousel-Nepal" height="230" title="Carousel-Nepal">](https://codepen.io/purnaaa/pen/NWoWeBB)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/checkedcounter.png" height="230" title="Demo 1">](https://codepen.io/anon/pen/eZWXOZ)
[<img src="images/checkedcounter2.png" height="230" title="Demo 2">](http://codepen.io/lonekorean/pen/wKbzv)

**[⬆ back to top](#quick-links)**

---

## <a id="Climbing Loading"></a>Climbing Loading

[<img src="images/Climbing_Loading.gif" height="230" title="Demo">](https://codepen.io/shail2604/pen/GgoWVym)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/flipper.png" height="230" title="Demo">](https://codepen.io/RuudBurger/pen/bwjry)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/pendulum.png" height="230" title="Pendulum Animation Demo">](https://codepen.io/TAPAS-SINGHAL/pen/ZEwOGjj)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/AnimatedBox.jpg" height="230" title="Demo">](https://codepen.io/Ayan-Saxena/pen/qBgBYoZ)
[<img src="images/AnimatedBox2.jpg" height="230" title="Demo">](https://codepen.io/Ayan-Saxena/pen/qBgBYoZ)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/clock.jpg" height="230" title="Analog-clock">](https://codepen.io/himadeepthi-sayani/pen/RwvNqQm)

**[⬆ back to top](#quick-links)**

---

[<img src="images/textfields.png" height="230" title="Demo">](http://codepen.io/KtorZ/pen/ZOzdqG)

**[⬆ back to top](#quick-links)**

---

## <a id="badge"></a>Badge

**[⬆ back to top](#quick-links)**

---

## <a id="text-hover-gallery"></a>Badge

[<img src="images/textHoverGallery.gif" height="230" title="Demo">](./Text%20Hover%20gallery/index.html)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/sansfont.png" height="230" title="Demo">](https://yusugomori.com/projects/css-sans/fonts)

**[⬆ back to top](#quick-links)**

---

## <a id="WebsiteDemo"></a>Website Demo

[<img src="images/Website_demo.png" height="230" title="Website_Demo">](https://github.com/Garv0504/You-Dont-Need-JavaScript/blob/addingWebsite/new-website/images/Website_demo.png)
[<img src="images/Website_demo_2.png" height="230" title="Website_Demo">](https://github.com/Garv0504/You-Dont-Need-JavaScript/blob/addingWebsite/new-website/images/Website_demo_2.png)
[<img src="images/Website_demo_3.png" height="230" title="Website_Demo">](https://github.com/Garv0504/You-Dont-Need-JavaScript/blob/addingWebsite/new-website/images/Website_demo_3.png)

**[⬆ back to top](#quick-links)**

---

## <a id="Travel-Website"></a>Travelling Website

[<img src="images/Travel_01.png" height="250" title="Website_Demo">](https://github.com/Garv0504/You-Dont-Need-JavaScript/blob/addingWebsite/new-website/images/Travel_01.png)
[<img src="images/Travel_02.png" height="250" title="Website_Demo">](https://github.com/Garv0504/You-Dont-Need-JavaScript/blob/addingWebsite/new-website/images/Travel_02.png)
[<img src="images/Travel_03.png" height="250" title="Website_Demo">](https://github.com/Garv0504/You-Dont-Need-JavaScript/blob/addingWebsite/new-website/images/Travel_03.png)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/tooltips.png" height="230" title="Demo 1">](https://codepen.io/monika-sivakumar/pen/rNoqxVX)
[<img src="images/tooltips2.png" height="230" title="Demo 2">](http://codepen.io/cristina-silva/pen/XXOpga)
[<img src="images/info-on-hover.png" height="230" title="Demo 3">](http://codepen.io/SitePoint/pen/akAmPw)
[<img src="images/tooltips.gif" height="230" title="Demo 4">](http://codepen.io/ekrof/pen/YqmXdQ)
[<img src="images/Popover.gif" height="230" title="Demo 4">](https://codepen.io/theslladev/pen/oNKPwro)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/gallery.png" height="230" title="Demo 1">](https://codepen.io/shaishgandhi/pen/yJzamw)
[<img src="images/gallery2.png" height="230" title="Demo 2">](http://codepen.io/pavlovsk/pen/sjubp)
[<img src="images/gallery3.png" height="230" title="Demo 2">](https://codepen.io/olgamozejko/pen/yLjwyye)
[<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">]()

**[⬆ back to top](#quick-links)**

---

## <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">](Image%20Comparision%20Slider/index.html)
[<img src="Image Comparision Slider/ss_2.png" height="230" title="Pure CSS Image Comparison Slider Demo 2">](Image%20Comparision%20Slider/index.html)

**[⬆ back to top](#quick-links)**

---

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

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/loader.png" height="230" title="Demo 1">](http://codepen.io/lucadem1313/pen/vKWqRV)
[<img src="images/loader2.png" height="230" title="Demo 2">](http://codepen.io/lucadem1313/pen/XKzLER)
[<img src="images/loader3.png" height="230" title="Demo 3">](http://codepen.io/brunjo/pen/xbwVXJ)
[<img src="images/loader4.png" height="230" title="Demo 4">](http://codepen.io/brunjo/pen/ByjRPy)
[<img src="images/loader5.png" height="230" title="Demo 5">](http://codepen.io/brunjo/pen/LEGyrJ)
[<img src="images/loader6.png" height="230" title="Demo 6">](http://codepen.io/brunjo/pen/bNEWjV)
[<img src="images/loader7.png" height="230" title="Demo 7">](http://codepen.io/brunjo/pen/wBKmbm)
[<img src="images/loader8.png" height="230" title="Demo 8">](http://tobiasahlin.com/spinkit/)
[<img src="images/loader9.png" height="230" title="Demo 9">](http://codepen.io/viduthalai1947/pen/JkhDK)
[<img src="./images/css-loader-purna.gif" alt="CSS-Loader-Purna" height="230" title="CSS-Loader-Purna">](https://codepen.io/purnaaa/pen/vYVVygB)
[<img src="images/loader10.png" height="230" title="Demo 10">](https://codepen.io/Sahil-Patil-the-sans/pen/WNPbVqK)
[<img src="images/loader11.gif" height="230" title="Demo 11">](https://codepen.io/sugeng-sulistiyawan/pen/PoyjPWd)
[<img src="images/loader12.gif" height="230" title="Demo 12">](http://codepen.io/rcjasub/pen/zxrddOP)

**[⬆ back to top](#quick-links)**

---

## <a id="MasterCard"></a>MasterCard

[<img src="MasterCard/screenshot.PNG" height="230" title="Website_Demo">](https://github.com/you-dont-need/You-Dont-Need-JavaScript/blob/master/MasterCard/screenshot.PNG)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/menu2.png" height="230" title="Demo 1">](https://codepen.io/antoniputra/pen/BzyWmb)
[<img src="images/menu3.png" height="230" title="Demo 2">](http://codepen.io/cristina-silva/pen/NNOodj)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/menu.png" height="230" title="Demo">](https://codepen.io/fabricionaweb/pen/xOLwxj)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/menu4.png" height="230" title="Demo">](https://codepen.io/eduardoboucas/pen/BNyKwO)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/ButtonAnimation.gif" height="250" title="Demo">](<[https://codepen.io/eduardoboucas/pen/BNyKwO](https://codepen.io/Aman-Pathan-the-typescripter/pen/MWLYNNx)>)

**[⬆ back to top](#quick-links)**

---

## <a id="buttonLikeCred"></a>Button Rotate and Ripple Animation

[<img src="images/buttonRotatingRipple.gif" height="250" title="Demo">](https://codepen.io/harsharora1205/pen/ExqZEyw)

**[⬆ back to top](#quick-links)**

---

## <a id="buttonEffect"></a>Button Hover Click Animation

[<img src="images/buttonHoverClick.gif" height="250" title="Demo">](https://codepen.io/harsharora1205/pen/oNKYaME)
[<img src="images/ButtonNeon.gif" height="250" title="Demo">](https://codepen.io/sugeng-sulistiyawan/pen/eYPRpZN)

**[⬆ back to top](#quick-links)**

---

## <a id="morph-loader"></a>Morph Loader

[<img src="images/morphLoader.gif" height="230" title="Morph Loader Demo">](./MorphLoader/index.html)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/CompassLoader.gif" height="230" title="Demo">](<[https://codepen.io/eduardoboucas/pen/BNyKwO](https://codepen.io/Aman-Pathan-the-typescripter/pen/dyaPmrE)>)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/fancyMenu.gif" height="230" title="Demo">](http://codepen.io/lbebber/pen/RNgBPP)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/footer_lg.png" height="230" title="Demo">](https://codepen.io/janup2442/pen/qBgBBKz)
[<img src="images/footer_sm.png" height="230" title="Demo">](https://codepen.io/janup2442/pen/qBgBBKz)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/modal2.png" height="230" title="Demo 1">](https://codepen.io/peiche/pen/vhqym)
[<img src="images/modal.png" height="230" title="Demo 2">](https://codepen.io/chrisburnell/pen/scyKF)

**[⬆ back to top](#quick-links)**

---

## <a id="mondrian-composition"></a>Mondrian Composition

[<img src="images/mondrian_composition.png" height="230" title="Mondrian Art Demo">](https://codepen.io/VINAY-MADIVAL/pen/VYerdxY)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/mousetracking.png" height="230" title="Demo 1">](https://codepen.io/Momciloo/pen/GoGRrQ)
[<img src="images/mouse-tracking-2.gif" height="230" title="Demo 2">](https://codepen.io/masterujjval/pen/xxmBRJV)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/navbar.png" height="230" title="Demo1">](https://codepen.io/janup2442/pen/QWzPRQQ)
[<img src="images/image_navbar.png" title="Demo2">](https://codepen.io/shail-sharma/pen/eYqdyvw)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/parallax.png" height="230" title="Demo">](http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/tabs.png" height="230" title="Demo 1">](https://codepen.io/llgruff/pen/ZGBxOa)
[<img src="images/tabs2.png" height="230" title="Demo 2">](https://codepen.io/fusco/pen/Wvzjrm)

**[⬆ back to top](#quick-links)**

---

## <a id="time-travel"></a>Time Travel

[<img src="Time-Travel/preview.png" height="230" title="Time Travel">](Time-Travel/index.html)

A pure CSS time travel timeline that allows you to explore different eras.

**[⬆ back to top](#quick-links)**

---

## <a id="toast-notifications"></a>Toast Notifications

[<img src="toast-notifications/toast-notif.png" height="230" title="Demo">](https://codepen.io/Rajat-Hegde/pen/bNEqqym)

**[⬆ back to top](#quick-links)**

---

## <a id="flip-grid"></a>Flip grid

[<img src="flip grid animation/flip.gif" height="230" title="Demo">](https://codepen.io/Rajat-Hegde/pen/bNEqjRp)

**[⬆ back to top](#quick-links)**

---

## <a id="flipbook-storyboard"></a>Flipbook Storyboard

[<img src="flipbook-storyboard/preview.png" height="230" title="Flipbook Storyboard Demo - CSS Only Interactive Flipbook with Glassmorphism Design">](./flipbook-storyboard/index.html)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/Todo List.png" height="230" title="Demo">](https://codepen.io/SamsShow/pen/NWeerXr)

**[⬆ back to top](#quick-links)**

---

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

- [Demo](https://kushagragour.in/lab/hint/)
- [CSS Tooltip with Animation](https://codepen.io/Elian-Echavarria/pen/XJXgmWN)

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

[<img src="images/tree.png" height="230" title="Demo">](https://codepen.io/rgg/pen/WrKyzj)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/art_twitter_heart_animation.gif" height="230" title="Demo">](http://codepen.io/thebabydino/pen/RRRRZE)

**[⬆ back to top](#quick-links)**

---

## <a id="Tri_Color_Loader"></a>Tri Color Loader

[<img src="images/tri_color_loader.gif" height="230" title="Demo">](https://codepen.io/shail2604/pen/raxLgbo)

**[⬆ back to top](#quick-links)**

---

## <a id="Traffic_Light_Loader"></a>Traffic Light Loader

[<img src="images/Traffic_Light_Loader.gif" height="230" title="Demo">](https://codepen.io/shail2604/pen/KwVWWob)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/book_animation.gif" height="350" title="Book Animation">](https://codepen.io/Paras-Shenmare/pen/eYxJpQB)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/imagecolorizing.png" height="230" title="Demo">](http://codepen.io/noahblon/pen/ZbjmbK)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/darkmode.gif" title="Dark Mode - Day and nigth">](http://codepen.io/marcelesilv/pen/yLjrEzz)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/ripple-effect.gif" height="230" title="Ripple EffectDemo">](http://mladenplavsic.github.io/css-ripple-effect/)

**[⬆ back to top](#quick-links)**

---

## <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">](https://codepen.io/pavlovsk/pen/QqrZzv/right/)

**[⬆ back to top](#quick-links)**

---

## <a id="Redar Loader"></a>Readar Loader

[<img src="images/redar_loader.gif" title="Redar Loader">](https://codepen.io/shail2604/pen/JoGKqda)

**[⬆ back to top](#quick-links)**

---

## <a id="resizable-split-panel"></a>Resizable Split Panel

[<img src="images/resizable_panel_demo.gif" title="Resizable Split Panel Demo">](https://codepen.io/VINAY-MADIVAL/pen/ogboooB)

**[⬆ back to top](#quick-links)**

---

## <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](#quick-links)**

---

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

[<img src="images/neumorphism-card-design.gif" title="Neumorphism Card Design">](https://codepen.io/saviomartin/pen/LYNgqKW)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/neon-button.gif" title="Neon Button">](https://codepen.io/nikhilkalburgi/pen/WNyeopW)
[<img src="images/neon-button-updated.gif" title="Neon Button Updated">](https://codepen.io/masterujjval/pen/MWZMZbw)
**[⬆ back to top](#quick-links)**

---

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

[<img src="images/neon-card-2.gif" title="Neon Card">](examples/neon-card-2.html)
**[⬆ back to top](#quick-links)**

---

## <a id="night-city"></a>Night City

[<img src="Night City/preview1.png" height="230" title="Night City - City View">](<Night City>)
[<img src="Night City/preview2.png" height="230" title="Night City - Road View">](<Night City>)

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.

**[⬆ back to top](#quick-links)**

---

## <a id="Netflix-Clone-v2"></a>Netflix Clone Demo

[<img src="Netflix Clone v2/Screenshot1.png" height="230" title="Demo 1">](http://url-to-page)
[<img src="Netflix Clone v2/Screenshot2.png" height="230" title="Demo 2">](http://url-to-page)
[<img src="Netflix Clone v2/Screenshot3.png" height="230" title="Demo 3">](http://url-to-page)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/shake-button.gif" height="230" title="Demo">](https://codepen.io/krushnarout/pen/zYyLEmM)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/moving_hand.png" height="230" title="image">](examples/Moving_hand.html)

**[⬆ back to top](#quick-links)**

---

## <a id="css-form-handling"></a>CSS Form Handling

[<img src="images/form-preview.png" height="230" title="CSS Form Handling">](CSS-Form-Handling/)

**[⬆ back to top](#quick-links)**

## <a id="Download_buttons"></a>Download_buttons

[<img src="images/Download_buttons.png" title="Download_buttons">](https://codepen.io/Shail-Sharma-the-animator/pen/rNXYMGx)

**[⬆ back to top](#quick-links)**

---

## <a id="Download_buttons"></a>Download buttons

[<img src="images/Download_buttons.png" title="Download_buttons">](https://codepen.io/Shail-Sharma-the-animator/pen/rNXYMGx)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/Dog-box-animation.png" title="Dog-box">](https://github.com/you-dont-need/You-Dont-Need-JavaScript/assets/101883389/b8321f82-ee84-4e4a-9010-62a5f4afc45a)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/Thankyou-animation.png" height="230" title="Thankyou">](https://github.com/you-dont-need/You-Dont-Need-JavaScript/assets/101883389/5e37601d-dce5-4326-b22a-c7d4f1c6d16f)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/Square_rotation_animation (1).png" height="230" title="SqaureRotationAnimation(1)">](demoLink)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/Switch.gif" height="230" title="Switch">](https://github.com/Dreadlord075/You-Dont-Need-JavaScript/blob/d581e4061af20aa2e2dbf0c11a8860c3fe768245/images/Switch.gif)

[<img src="images/New_Switch.gif" height="230" title="New_Switch">](https://codepen.io/shail-sharma/pen/PoMpvjO)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/Bonfire.gif" height="230" title="Bonfire">](https://github.com/Dreadlord075/You-Dont-Need-JavaScript/blob/d581e4061af20aa2e2dbf0c11a8860c3fe768245/images/Bonfire.gif)

**[⬆ back to top](#quick-links)**

---

## <a id="scenery"></a>Scenery

[<img src="images/scenary.gif" height="230" title="scenery">](https://github.com/you-dont-need/You-Dont-Need-JavaScript/assets/97428742/5943c92d-c9d3-401e-a8dd-88091a1d839d)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/bubble.gif" height="230" title="bubble">](https://github.com/you-dont-need/You-Dont-Need-JavaScript/assets/97428742/17b72752-9010-4433-9d1e-b9a24a8f5222)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/flower.gif" height="230" title="flower">](https://github.com/you-dont-need/You-Dont-Need-JavaScript/assets/97428742/4ca880e9-47b9-4df5-b484-6e2a955ec266)

**[⬆ back to top](#quick-links)**

---

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

**[⬆ back to top](#quick-links)**

---

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

**[⬆ back to top](#quick-links)**

---

## <a id="lighthouse-scene"></a>Lighthouse Scene

[<img src="Lighthouse Scene/Lighthouse_scene.gif" height="230" title="Lighthouse Scene">](Lighthouse%20Scene/lighthouse-scene.html)

**[⬆ back to top](#quick-links)**

---

## <a id="Loading Css effect"></a>Loading Css effect

**[⬆ back to top](#quick-links)**

---

## <a id="Lego Loader"></a>Lego Loader

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/City animation footer.gif" height="230" title="City animation footer">](https://github.com/Dreadlord075/You-Dont-Need-JavaScript/blob/d581e4061af20aa2e2dbf0c11a8860c3fe768245/images/City%20animation%20footer.gif)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/smoke.gif" height="230" title="smoke">](https://github.com/you-dont-need/You-Dont-Need-JavaScript/assets/97428742/d6a4f0b5-5345-4a23-85ae-6c371f597c61)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/loader.gif" height="230" title="loader">](https://github.com/you-dont-need/You-Dont-Need-JavaScript/assets/97428742/97ba01f5-7e85-4c3e-8d60-47374ef3a1f9)

[<img src="images/New_Loader.png" height="230" title="New_Loader">](https://codepen.io/shail-sharma/pen/yLmMyjq)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/spiner.gif" height="230" title="spiner">](https://github.com/you-dont-need/You-Dont-Need-JavaScript/assets/97428742/72b2e6fc-d12b-423b-a1a7-2d705e111e1f)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/fire.gif" height="230" title="fire">](https://github.com/you-dont-need/You-Dont-Need-JavaScript/assets/97428742/85e70774-0da0-47bf-bbea-1b6d2d6d73e1)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/flame.gif" height="230" title="flame">](https://github.com/you-dont-need/You-Dont-Need-JavaScript/assets/97428742/5d8659ea-84e4-481e-bdcd-e5e9fe7d30e9)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/shuffling-squares.gif" height="230" title="Shuffling squares">](https://im3.ezgif.com/tmp/ezgif-3-41efb679c2.gif)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/Floatinglabel2.gif" height="230" title="Floating-labelV2">](https://im2.ezgif.com/tmp/ezgif-2-3297933621.gif)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/Scary-animation.gif" height="230" title="scary-animation">](https://im4.ezgif.com/tmp/ezgif-4-04e4dfec68.gif)

**[⬆ back to top](#quick-links)**

---

## <a id="scroll-video-cinematic"></a>Scroll Video Cinematic Animation

[<img src="CSS-Scroll-Video-Cinematic/preview.gif" height="230" title="CSS Scroll Video Cinematic Animation">](CSS-Scroll-Video-Cinematic/index.html)

A modern, interactive scroll-driven video animation created with pure CSS. Features cinematic video effects, gradient overlays, and smooth scroll animations - no JavaScript required!

**[⬆ back to top](#quick-links)**

---

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

# [<img src="images/infinite-carousel.gif" height="230" title="infinite-carousel">](https://im4.ezgif.com/tmp/ezgif-4-cf03115fc6.gif)

[<img src="images/Scary-animation.gif" height="230" title="Floating-labelV2">](https://im4.ezgif.com/tmp/ezgif-4-04e4dfec68.gif)

[<img src="images/Scary-animation.gif" height="230" title="scary-animation">](https://im4.ezgif.com/tmp/ezgif-4-04e4dfec68.gif)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/growing-flower.gif" height="230" title="growing-flower">](https://im3.ezgif.com/tmp/ezgif-3-f53ebce80a.gif)

**[⬆ back to top](#quick-links)**

---

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

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/intro1.png" height="230" title="starwarsintro">](https://codepen.io/kdwzrjtc-the-animator/pen/MWLgBRz)
[<img src="images/intro2.png" height="230" title="starwarsintro">](https://codepen.io/kdwzrjtc-the-animator/pen/MWLgBRz)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/gradient-animation.gif" height="230" title="Gradient Animation">](https://github.com/you-dont-need/You-Dont-Need-JavaScript/blob/b3b64a1d4a426ab3a8f20fbe34640de18bca14a5/images/gradient-animation.gif)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/zoom-effect.gif" height="230" title="zoom-when-hover">](https://codepen.io/kdwzrjtc-the-animator/pen/gOqOwLx)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/Floatinglabel2.gif" height="230" title="Floating-labelV2">](https://im2.ezgif.com/tmp/ezgif-2-3297933621.gif)

**[⬆ back to top](#quick-links)**

---

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

## [![Screenshot 2023-10-23 144658](https://github.com/you-dont-need/You-Dont-Need-JavaScript/assets/113187290/d73a9af8-5470-4a88-bfc9-a5e8430aba65)](https://codepen.io/TAPAS-SINGHAL/pen/abXZNWR)

**[⬆ back to top](#quick-links)**

---

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

## ![animation](https://github.com/you-dont-need/You-Dont-Need-JavaScript/assets/113187290/646f9fb9-f003-4bd1-b535-d0b775bc0b04)

**[⬆ back to top](#quick-links)**

---

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

**[⬆ back to top](#quick-links)**

---

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

## ![Screenshot 2023-10-23 141538](https://github.com/you-dont-need/You-Dont-Need-JavaScript/assets/113248104/973a1186-de6b-4e07-bc53-424b9b864984)

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

[<img src="https://github.com/you-dont-need/You-Dont-Need-JavaScript/assets/101883389/7d15c275-5210-4c2e-8530-eb073251a39f" height="230" title="coffee-animation">](https://github.com/you-dont-need/You-Dont-Need-JavaScript/assets/101883389/7d15c275-5210-4c2e-8530-eb073251a39f)

**[⬆ back to top](#quick-links)**

---

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

[<img src="images/basketball-animation.gif" height="230" title="basketball-animation">](https://github.com/you-dont-need/You-Dont-Need-JavaScript/assets/101883389/66759afd-9794-408d-92a5-53b793072f98)

**[⬆ back to top](#quick-links)**

---

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

![img_source](https://raw.githubusercontent.com/you-dont-need/You-Dont-Need-JavaScript/master/Business-Card/output.png)

**[⬆ back to top](#quick-links)**

---

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

![img_source](https://raw.githubusercontent.com/you-dont-need/You-Dont-Need-JavaScript/master/SolarSystem/output.png)

**[⬆ back to top](#quick-links)**

---

## <a id="Spaceship"></a>Spaceship

![img_source](https://raw.githubusercontent.com/you-dont-need/You-Dont-Need-JavaScript/master/Spaceship/Spaceship.gif)

**[⬆ back to top](#quick-links)**

---

## <a id="Timeline"></a>Timeline

![img_source](https://raw.githubusercontent.com/you-dont-need/You-Dont-Need-JavaScript/master/Timeline/Timeline.gif)

**[⬆ back to top](#quick-links)**

---

## <a id="RadialPulsar"></a>Radial Color Puslar

[<img src="Radial Color Pulsar/Radial.png" title="Demo">](<[https://codepen.io/eduardoboucas/pen/BNyKwO](https://codepen.io/Aman-Pathan-the-typescripter/pen/MWLYNNx)>)

**[⬆ back to top](#quick-links)**

---

## <a id="RetroLoader"></a>Retro Loader

[<img src="Retro Loader/Retro.png" title="Demo">](<[https://codepen.io/eduardoboucas/pen/BNyKwO](https://codepen.io/Aman-Pathan-the-typescripter/pen/MWLYNNx)>)

**[⬆ back to top](#quick-links)**

---

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

![img_source](https://raw.githubusercontent.com/you-dont-need/You-Dont-Need-JavaScript/master/images/pendulum.png)

**[⬆ back to top](#quick-links)**

---

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

![img_source](https://raw.githubusercontent.com/you-dont-need/You-Dont-Need-JavaScript/master/Button/Sliced-Button/sliced_button.gif)

**[⬆ back to top](#quick-links)**

---

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

![img_source](https://raw.githubusercontent.com/you-dont-need/You-Dont-Need-JavaScript/master/images/rating-star.png)

**[⬆ back to top](#quick-links)**

---

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

![img_source](https://raw.githubusercontent.com/you-dont-need/You-Dont-Need-JavaScript/master/images/DVDScreenSaver.png)

**[⬆ back to top](#quick-links)**

---

## <a id="ProfileCards"></a>ProfileCards

![img_source](https://raw.githubusercontent.com/you-dont-need/You-Dont-Need-JavaScript/master/images/profileCards/card1.png)
![img_source](https://raw.githubusercontent.com/you-dont-need/You-Dont-Need-JavaScript/master/images/profileCards/card2.png)
![img_source](https://raw.githubusercontent.com/you-dont-need/You-Dont-Need-JavaScript/master/images/profileCards/card3.png)
![img_source](https://raw.githubusercontent.com/you-dont-need/You-Dont-Need-JavaScript/master/images/profileCards/card4.png)
![img_source](https://raw.githubusercontent.com/you-dont-need/You-Dont-Need-JavaScript/master/images/profileCards/card5.png)
![img_source](https://raw.githubusercontent.com/you-dont-need/You-Dont-Need-JavaScript/master/images/profileCards/card6.png)
![img_source](https://raw.githubusercontent.com/you-dont-need/You-Dont-Need-JavaScript/master/images/profileCards/card7.png)

**[⬆ back to top](#quick-links)**

---

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

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

**[⬆ back to top](#quick-links)**

---

## <a id="stickman"></a>Stickman Animation

**[⬆ back to top](#quick-links)**

---

## <a id="Clock-App"></a>Clock App

![img_source](https://raw.githubusercontent.com/you-dont-need/You-Dont-Need-JavaScript/master/image.png)

**[⬆ back to top](#quick-links)**

---

## <a id="mmt"></a>MakemyTrip

![img_source](https://raw.githubusercontent.com/you-dont-need/You-Dont-Need-JavaScript/master/MakemyTrip/screenshot.png)

---

**[⬆ back to top](#quick-links)**

## <a id="zomato"></a>Zomato

![img_source](https://raw.githubusercontent.com/you-dont-need/You-Dont-Need-JavaScript/master/Zomato/screenshot.png)

---

**[⬆ back to top](#quick-links)**

## <a id="3d-card-flip-transition"></a>3D card flip transition

[<img src="./images/3d-card-flip-transition.gif" height="200" title="Demo Image">]

**[⬆ back to top](#quick-links)**

---

## <a id="babyYoda"></a>Baby Yoda Animation CSS

[<img src="./images/babyYoda.jpg" title="Baby Yoda Animation">](https://codepen.io/marcelesilv/pen/qBeaOaw)

**[⬆ back to top](#quick-links)**

---

## <a id="debit-card-hover"></a>Debit Card Hover Effect

![Screenshot 2024-10-11 103321](https://github.com/user-attachments/assets/5e8572a6-9328-44fe-8574-d68f2e6b92ca)

**[⬆ back to top](#quick-links)**

---

## <a id="ProgressOnScroll"></a>Progress bar on scroll

[<img src="images/progress_on_scroll_demo.gif" height="230" title="Progress On Scroll Demo">](https://codepen.io/pritam1813/pen/jOgyERQ)

**[⬆ back to top](#quick-links)**

---

## <a id="password-strength-checker"></a>Password Strength Checker

[<img src="images/Password-Strength-Checker.png" height="230" title="password-strength-checker">](https://sudhanshu-raj.github.io/You-Dont-Need-JavaScript/)

**[⬆ back to top](#quick-links)**

---

## <a id="horizontal-image-slider"></a>Horizontal Image Slider

**[⬆ back to top](#quick-links)**

---

## <a id="multi-step-checkout"></a>Mutli Step Checkout

**[⬆ back to top](#quick-links)**

---

## <a id="carousel-effect"></a>Carousel Effect

[Download the demo video](https://raw.githubusercontent.com/amrutha-m206/You-Dont-Need-JavaScript/carousel_effect-feature/images/carousel_demo.mp4)

**[⬆ back to top](#quick-links)**

---

## <a id="piano"></a>Piano

[<img src="images/piano.png" height="230" title="Piano">](Piano/index.html)

**[⬆ back to top](#quick-links)**

---

## <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%">](./Interactive%20Resume/index.html)
[<img src="./Interactive Resume/preview-images/i2.png" width="32%">](./Interactive%20Resume/index.html)
[<img src="./Interactive Resume/preview-images/i3.png" width="32%">](./Interactive%20Resume/index.html)

**[⬆ back to top](#quick-links)**

---

## <a id="mewtwo-card"></a>Mewtwo Pokémon Card

[<img src="images/mewtwo-card.png" height="230" title="Mewtwo Pokémon Card">](Pokemon-Mewtwo-Card/mewtwo.html)

**[⬆ back to top](#quick-links)**

---

## <a id="kaleidoscope"></a>Kaleidoscope

[<img src="images/kaleidoscope.png" height="230" title="Kaleidoscope">](Kaleidoscope/index.html)

**[⬆ back to top](#quick-links)**

---

## <a id="Glide to Reveal"></a>Glide to Reveal

[<img src="images/glidetoreveal.png" height="230" title="Glide-to-reveal">](Glide-to-reveal/index.html)

**[⬆ back to top](#quick-links)**

---

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

**[⬆ back to top](#quick-links)**

---

**[⬆ back to top](#quick-links)**

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

[<img src="images/Robot.png" height="230" title="Robot">](Robot/Robot.html)

**[⬆ back to top](#quick-links)**

---

## <a id="terminal-animation"></a>Terminal Animation

[<img src="./images/Terminal Animation.gif" height="230" title="terminal-animation">](https://github.com/you-dont-need/You-Dont-Need-JavaScript/terminal-animation/index.html)
---

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

**[⬆ back to top](#quick-links)**

---

## Contributors

Thanks to these wonderful people who have contributed to this project!

## 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.

**[⬆ back to top](#quick-links)**

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](LICENSE) file for details.

You-Dont-Need-JavaScript

File Explorer

# Installation Guide

2. Node.js

Today's picks

Was this content helpful?

Recent Feedback

You-Dont-Need-JavaScript

File Explorer

# Installation Guide

2. Node.js

Today's picks

Was this content helpful?

Recent Feedback

Download README