Landing Page Design with Animation Using HTML, CSS & JS | Slick Slider | Wavy Line Animation
Hello friends, In this video, I'm creating a modern landing page design with animation, hover effect, wavy line animation, CSS button hover effect using CSS pseudo property before after, CSS clip-path animation, slick slider custom arrow, slick slider animation, and how I use slick slider events you can see in this video. I hope you like this video.
► PLEASE SUBSCRIBE TO THIS CHANNEL FOR MORE VIDEOS
/ learndesigntutorial
--------------------------------------------------------------------------------------------------
0:08 - Preview(Landing Page Design)
1:59 - Slick slider HTML markup
3:20 - Visit cdnjs.com and copy the link
4:20 - Call/Init slick slider
10:01 - Start slick slider style
12:21 - Slick slider custom arrow style
15:56 - Button hover effect using CSS before
16:40 - Wavy line CSS and animation
19:43 - Slick slider events
--------------------------------------------------------------------------------------------------
Website Design Using HTML,CSS & JS | Landing Page Design | Smooth Scroll Animation | Slick Slider
• Website Design Using HTML,CSS & JS | ...
Fullscreen Navigation Menu | Toggle Menu | Change image on hover Using HTML,CSS & GSAP-GreenSock JS
• Website Design Using HTML,CSS & JS | ...
► Website Landing Page Design | WEBSITE UI DESIGN
Portfolio Website Design | Website Landing Page Design & Animation | HTML, CSS, ANIME JS
• Portfolio Website Design | Website La...
Website Landing Page Design & Animation with Slider using HTML, CSS & JS | Website UI Design
• Website Landing Page Design & Animati...
Beauty Aesthetic Hero Section Website Design | Landing Page Design | Anime js Animation Tutorial
• Beauty Aesthetic Hero Section Website...
Landing page design, Mouse scroll slider, Infinite text scrolling, Sidebar menu HTML, CSS & JQUERY
• Landing Page Design, Mouse scroll sli...
Ecommerce Website Landing Page Design with Sign In Popup & Cart Sidebar Using HTML,CSS & JAVASCRIPT
• Ecommerce Website Landing Page Design...
Landing Page Design Using HTML, CSS & JS | Website UI Design Tutorial
• Landing Page Design Using HTML, CSS &...
Portfolio Website Design With Animation Using HTML, CSS & JS | GSAP - GreenSock Animation
• Portfolio Website Design With Animati...
Website UI Design With Slider Using HTML,CSS & JS | Landing Page Website Design Tutorial
• Website UI Design With Slider Using H...
Landing Page UI Design Using Adobe XD
• Landing Page UI Design Using Adobe XD
Landing Page UI Design using HTML, CSS & Tilt js
• Landing Page UI Design using HTML, CS...
Landing Page Design With Animation Using HTML, CSS | Waves Animation, Dropdown Menu, Circle Rotation
• Landing Page Design With Animation Us...
► ANIMATION VIDEO
How to create custom loader | Website loading animation using html,css and jquery tutorial
• How to create custom loader | How to ...
Pure CSS FadeIn FadeOut Animation - CSS Property #01
• Pure CSS FadeIn FadeOut Animation - C...
Pure CSS Bouncing Ball Animation #02
• Pure CSS Bouncing Ball Animation 02
Square to Circle Rotate Loading Animation with Multiple Colors #03
• Square to Circle Rotate Loading Anima...
Pure CSS Three Dots Loading Animation #04
• Pure CSS Three Dots Loading Animation 04
Pure CSS Jumping Dots Loading Animation #05
• Pure CSS Jumping Dots Loading Animati...
Pure CSS Ripple Loading Animation Effect #06
• Pure CSS Ripple Loading Animation Eff...
Pure CSS Simple Loader Animation Effect #07
• Pure CSS Simple Loader Animation Effe...
Pure CSS Egg Crash Animation Effect 08
• Pure CSS Egg Crash Animation Effect 08
Pure CSS Flip Page Animation Effects 09
• Pure CSS Flip Page Animation Effects 09
Pure CSS Flip & Rotate Loading Text Animation Effect 10
• Pure CSS Flip & Rotate Loading Text A...
► LOADING ANIMATION
3 Cool CSS Loading Animation Effects | Pure CSS Animation Effects | HTML & CSS Animation Tutorial
• CSS Loading Animation Effects | Pure ...
--------------------------------------------------------------------------------------------------
Slick Carousel: https://kenwheeler.github.io/slick
Cdnjs: https://www.cdnjs.com
Image credit: https://www.pexels.com
Email: [email protected]
For support: / helplearndesign
http://learndesigntutorial.com
#landingpagedesign #slickslider #wavylineanimation #csshovereffect #hover