Landing Page Design with Animation Using HTML, CSS & JS | Slick Slider | Wavy Line Animation

Published: 14 March 2021
on channel: LearnDesign
7,048
210

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


On this page of the site you can watch the video online Landing Page Design with Animation Using HTML, CSS & JS | Slick Slider | Wavy Line Animation with a duration of hours minute second in good quality, which was uploaded by the user LearnDesign 14 March 2021, share the link with friends and acquaintances, this video has already been watched 7,048 times on youtube and it was liked by 210 viewers. Enjoy your viewing!