Coding Fun Html Create a Split Landing Page With HTML, CSS & JS

Create a Split Landing Page With HTML, CSS & JS

Create a split animated landing page using HTML5, CSS3 transitions and a bit of vanilla JavaScript. We will also be using CSS variables aka custom properties.

CODE: Code for this project

💖 BECOME A PATRON: Show support & get perks!

VISIT MY WEBISTE: Check Out My Udemy Courses


Tags: , , , , , , , , , , , , , , , ,

50 thoughts on “Create a Split Landing Page With HTML, CSS & JS”

  1. Ant Hill says:

    so im coding in notepad++ and for some reason my javascript not working in the css folder at all and i cant understand the why, non of the var or any refference to my jscript folder is rendering in my css page, they dont even high light like it does here, only thing lit up in my js file was the const and the mouseleave and mouse enter refferences, everything else are not highlight besides those, im nose bleed here

  2. Hi,

    is there any option to split div on click rather than hover


  3. Sm1LeY ! says:

    simple and professional, i like that 😀

  4. I followed everything in the tutorial but still can't get the divs to expand when hovering over them. Now I'm trying to figure out the problem.
    Thank you very much for this tutorial ^_^

  5. Mathias Blu says:

    pls help :<

    main.js:18 Uncaught TypeError: Cannot read property 'classList' of null

  6. Tom Wexler says:


    I'm not understanding where these specific classes in CSS are coming from? In the HTML, we have the classes "container", "split left", "split right" and "button". In the CSS these are broken apart and added together in ways I've never seen syntactically before. For example: ".split.right .button", ".split", ".split.left". Shouldn't a class written with a space in HTML like "split left" become .split-left in CSS? Likewise, there is no class .split in the HTML, only "split left" and "split right".

    Any help on this would be huge, as I am trying to really study the completed project and wrap my head around the individual parts!

  7. From learning through your channel i just made this page on my own using flexbox . Thank you.

  8. amar bugarin says:

    Sorry, I am new to web development so I am confused a bit, why do you use :root could have you just put it in a regular body or * .

  9. Most excellent tut. Loving the amount of really talented coders on YT that give really well put together tuts that help noobies understand 100%

  10. JPDG13 says:

    Brad, would you recommend the Normalize.css for media queries now? Or another way to not manually enter device sizes on the css code?

  11. Hi, how about the mobile devices we don't have hover for mobile devices right. is there an alternative for that?

  12. Guy Lemay says:

    WOW! So much goodies in here …thank you!
    Your CSS Kung Fu sure delivers a heck-of-a-punch – ouch, ouch… !

  13. Abhi Patel says:

    When I use your code and run, the animation works. But after closing the page, if I re-run it again, there is no animation while hovering the mouse.

  14. NOOR IFRAH says:

    thank you …your tutorial really helping me solve my problem

  15. i do not know why that not work in the page chrome ……….

  16. Alpha Isreal says:

    what software tool is he using for the text editor?

  17. Hanna Ali says:

    what about creating a "drag" split screen

  18. what do you need to do if you want to make out of 5 splits ?

  19. Greetings from Siberia!
    Thank u so much for the video!
    My style.css and main.js files aren't loading on VS Code liveserver.
    I use Google Chrome and when in Console-Network, these files are blocked (Status: blocked: other)
    These resources are local and Chrome isn't allowed to load them.
    What might be the reason?

  20. Thank you so much traversy media

  21. Khin David says:

    Hey traversy just wondering did u add on more pages or was that the finishing product

  22. Please don't use Jquery full stop. I was a huge Jquery fan, until I realized it had completely ruined my vanilla Javascript skills.

  23. Moximaxius says:

    Is it possible to make something like this work of word press?

  24. Janssenhidal says:

    I wrote the exact same thing as he did but nothing shows up in my page… Just 2 Sentences: Read More. Can anyone help me out pls?

  25. Thanks for the video and spreading knowledge 🙂

  26. i just copied all your code but somehow the javascript file doesn't work, I can't hover my pages. Any idea why?

  27. BlueIceAce says:

    Too advanced for me 😀 but good practice.

  28. I have to meet or speak with you urgently. Please get in contact with me sir. I'm in dire need of you're assistance.

  29. it dosent work, the split it dosent work, no image is displaying

  30. Or Gat says:

    For all of you wondering why he used JS instead of just using :hover in order to resize the divs when hovering over one of them,
    That's because :hover doesn't allow you to change other elements, unless that element that you want to change comes after in the HTML.
    So you could make it work for the first div in the HTML, and change the other div that comes after it, but not the other way around. Which means it would only work for one div,
    either "split right" or "split left", whichever comes first in the HTML. Therefore the only solution is to use JS and play with the classes like he did.

  31. Salman says:

    Can you do a tutorial on Canvas element???
    Please! 🙂

  32. I wrote the code and every thing is fine, but the animation is NOT SMOOTH and it seems to have a tremble, please help 🙂

  33. Hi Sir you never finish the PHP course you have started last year.

  34. Mambo Ego says:

    sit, thanx for your content..everytime you see an error..please leave it in the video..its encouraging for those lighthearted to develop their detective skills on the thing they messed up

  35. codeLikeIvan says:

    Cant wait to get to your level

  36. Tech Stack says:

    hi sir firstly ty so much for all knowledge you share us i have one question how to link page such as click to link and jump in other pages ???

  37. Great video..I am not able to understand how adding z-index fades the other section. Could you please explain that?

  38. Eden Ricana says:

    is it possible to have 3 split landing page?

  39. Hanzla Habib says:

    ERROR: Parsing error: The keyword 'const' is reserved const left = document.querySelector('.left');

  40. Hanzla Habib says:

    please respond why i am getting ESlint error
    even i can use left in js because it says reserve etc
    i have copied your same code but it still says same 🙁

  41. Thank you for these amazing videos, Traversy Media. Keep it up! Forever grateful!

  42. Rahul Tiwari says:

    I did the same code as u do but still I am not getting the same result as u do……

  43. MightyArtss says:

    Hey, just stopping by to say thanks for the quality content that you create Brad, you got me into web development, and I love it ! One thing that I'd like to note for this particular video, which worked pretty well for me, is that, instead of using "position:absolute" and to center all the "items" in the split one by one using precentages, I'd suggest to use "display: flex, flex-direction: column; justify-content: center, align-items: center", and that way, no matter how big the browser window is, they remain at the CENTER of their container (in this case, the split) 😀 Found it more useful that way, while I was making a split landing page where I had a title, button(link) and a logo underneath, so I had to use a lot of positioning while using absolute, and with display:flex, is way easier !

    Keep up the good work, cheers !

Leave a Reply

Your email address will not be published. Required fields are marked *