Split landing page animation without javascript
Hello, world 👋 In this video, we created a split landing page using just HTML and CSS without a single line of JavaScript. In this effect, we have two images side by side with equal width, and whenever we hover on any of the images the width of that image gets bigger. Sounds interesting, right? So, let's jump straight into it.
📝 Sourcecode:
https://codepen.io/pen/?template=WNEdqOg
⌚ Timestamp:
Preview: 00:00
Intro: 00:14
Setting up the layout: 00:20
Split Landing Page functionality: 03:38
📺 Must watch videos 🤩
▶ Top Visual Studio Code extensions: • Top visual studio code extensions themes a...
▶ Underline CSS Hover effect: • Cool underline CSS hover effect 😎. || CSS ...
▶ Reveal Elements on scroll: • Reveal elements on scroll using pure javas...
▶ Parallax effects: • Parallax Effects
▶ Pure vanilla JavaScript projects: • Pure vanilla JavaScript projects
🌎 Find me on:-
Github:- https://github.com/ani-24
Codepen:- http://codepen.io/codeit-ani
Discord:- / discord
###############################################################
Thanks for watching the video, make sure you are subscribed to my channel and press the bell icon so that you don't miss any of our videos.
Subscribe to my channel:
/ @codeityt
Also, share the videos with those who need them.
(ignore these tags):
split landing page
landing page
split landing page using html and CSS
split landing page with html and CSS
split landing page without javascript
split screen landing page without javascript
css split screen landing page
css split screen