Categories
Landing Pages and Conversion to Sale

Responsive Accordion UI Design With Videos, Buttons & Smooth Transition Using HTML, CSS & JavaScript [Video]

Responsive Accordion UI Design With Videos, Buttons & Smooth Transition Using HTML, CSS & JavaScript

Responsive Accordion UI Design With Videos, Buttons & Smooth Transition Using HTML, CSS & JavaScript

On today’s episode, I’m going to show you how to create an awesome Accordion UI Design using HTML, CSS and JavaScript. without any frameworks. The design is really easy to code along and understand. I hope you enjoy this video and if you do, please smash that like button. It helps me create more contents like this. Thank you

📁 Assets
Fonts: https://fonts.google.com/
Icons: https://boxicons.com/
GitHub: https://github.com/JustPerfectDesigns

🔗 Source code
https://github.com/JustPerfectDesigns/responsive-accordion-ui-design-with-videos-buttons.git

✒️ Previous HTML, CSS JavaScript Project
Awesome Progress Bar Animation: https://youtu.be/4PC1UVvy7T8
How To Embed Links In Posts Or Articles: https://youtu.be/7ywjWkt_zNE
Responsive Navigation Menu: https://youtu.be/7kpK0k51ah4
Portfolio Website with Dark / Light Mode: https://youtu.be/lIvkO4MpP_4
Apple AirPods Max Landing Page: https://youtu.be/bbn32aT7yWE

🔔 Subscribe for more!
https://bit.ly/3cZvaEK

⏱ Timestamps
0:00 Intro
1:14 Project Setup in HTML & CSS
2:56 Accordion HTML
06:01 Accordion CSS
15:00 Media Queries For Responsiveness
17:10 Accordion JavaScript
21:19 Change Tab Background Color On Active
22:20 Change Plus Icon To Minus On Active
24:37 Change Question Font Weight To Bold On Active
25:20 Finished Version

👍 Thanks for watching!
Make Sure To Like & Subscribe For More! ❤
https://bit.ly/3cZvaEK

🎵 Music I used
Track: DEAF KEV – Invincible [NCS Release]
Music provided by NoCopyrightSounds.
Watch: https://youtu.be/J2X5mJ3HDYE
Free Download / Stream: http://ncs.io/invincible

Track: Cartoon x Time To Talk – Omen (Ft. Asena) [NCS10 Release]
Music provided by NoCopyrightSounds.
Watch: https://youtu.be/7GhO2lncvBg
Free Download / Stream: https://ncs.io/Omen

Track: JJD – A New Adventure (feat. Molly Ann) [NCS10 Release]
Music provided by NoCopyrightSounds.
Watch: https://youtu.be/ZTwCDpFJEZ4
Free Download / Stream: https://ncs.io/ANewAdventure

Track: JPB – High (feat. Aleesia) [NCS10 Release]
Music provided by NoCopyrightSounds.
Watch: https://youtu.be/lj62iuaKAhU
Free Download / Stream: https://ncs.io/High2

Track: Mike Vallas, Jagsy & quaggin. – Left My Heart In Pain [NCS Release]
Music provided by NoCopyrightSounds.
Watch: https://youtu.be/hiK6LkKsqpo
Free Download / Stream: http://ncs.io/LMHIP

Track: JPB – High [NCS Release]
Music provided by NoCopyrightSounds.
https://youtu.be/Tv6WImqSuxA
Free Download / Stream: http://ncs.io/jpbhigh

#ProgressBar #JavascriptAnimation #JustPerfectDesigns

Watch/Read More