How To Make a Website Landing Page With GSAP Animations | HTML and CSS Tutorial



Today we will create a website landing page that uses gsap animations. I thought it’d be a cool idea to get you, the subscribers, more engaged with my content I post. So if you wanted to participate in having your ‘responsive’ take on this project feel free to grab the code below. Then you can share your codepen with me via email.

Disclaimer: Demo built based on the Jevelin WordPress theme. In no way shape or form did I try to replicate this demo exactly like the website it is based on so do not expect it to be 100% accurate.

Jevelin ► https://jevelin.shufflehound.com/single-product/

[ HELP SUPPORT THE CHANNEL ]

Get exclusive Patreon perks.
Patreon ► https://www.patreon.com/juliocodes

[SOURCE CODE ]

Files ► https://github.com/jlop007/jevelin

[ SOCIAL MEDIA ]

Instagram ► https://www.instagram.com/juliocodes

[ HOSTGATOR ]

Get affordable domain and web hosting with HostGator. Save up to 60% off of your entire purchase with the coupon code below.

HostGator ► https://bit.ly/2ZfR0u3
Coupon code ► JULIOCODES60
Video tutorial ► https://youtu.be/5B_LQqR0zsE

[ MY GEAR ]

Programming/Video editing laptop Specs & extras

Laptop: Dell XPS 15 7590
Processor: 9th Generation Intel Core i7-9750h
RAM: 32GB (Upgraded)
Graphics Card: Nvidia GeForce GTX 1650 4GB GDDR5
Storage: 500GB M. 2 PCIe NVMe SSD (Upgraded)
— Extras —
Monitor: Dell Ultrasharp 27″
Keyboard: Logitech MX Keys
Mouse: Logitech MX Master 3
Microphone: Blue Yeti

[ DISCLAIMER No. 1 ]

In order to speed up the development process CSS prefix are not used. In order to ensure cross browser compatibility please use prefixes where necessary.

[ DISCLAIMER No. 2 ]

This video description contain affiliate links, which means that if you click on one of the product links, I’ll receive a small commission. This helps support the channel and allows me to continue to make videos like this. Thank you for the support!

34 thoughts on “How To Make a Website Landing Page With GSAP Animations | HTML and CSS Tutorial

  1. I forgot to add align-items: center inside of the .nav{ … } so make sure you add that in to perfectly center align all the content inside of the .nav vertically.

  2. I don't know is it me or what's wrong, but the hero section isn't working well, and the watch is covering all the right side of the page from the top to the bottom.
    Firstly I thought that I wrote something wrong. Then I'd copied everything from github, but still have the same problem.

Leave a Reply

Your email address will not be published.