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!
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.
Man, you are awesome! You deserve a place in the hall of FAME!
buena padre!
From where should I learn Gsap animation?
Thanks julio a appreciate the lesson hopefully i can send in my responsive version before the week runs out
6 months ago i posted you this project and finally you did it…. awseome julio thank you so much!
MORE GSAP pleaseeeeeeeeeeeeeeee <3
I love to watch your tutorial. lots of love to you <3
You are cool man! awesome tutorial again, please upload some more stufs like this, It was a great find for me, Thanks!
Where can i get images like watch.png
Was this a steam ? loved it man.
do you design your own images?
Julio hi please check my project i made it responsive i know it is not perfect but as a beginner i think it is nice ) here is the link https://javelin-project.netlify.com/ And thank you for the amazing content and the shopping icon does not show up when i host it idk why
I have feeling flebox its self easier than bootstrap, agree or disagree?
More tutorial GSAP, please
It would be great if you could show us howe to add a cool looking Search option to a Responsive Website Nav bar.
You are so beautiful guy!
bro its a great time to drop the other portfolio you posted on insta.
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.
bro how can add multiple languages in my website html….Please tell me ..please
Hello, great video, please can I rent a server without knowing a server side language eg is php, react etc
oh yeah :)))
next video plz customized phone cover use html , css , jq /js
It's good to have this library being instruct step by step by you…
Awesome! Thank you for sharing ^^
great tutorial bro….i really appreciate this tutorial…..go ahead bro….
Amazing !!!
that would be great if you do the whole jevelin website in parts , its a great yet simple website to code
Very nice, indeed.
Can you make a video of a navabar with adjustable logo? I'm struggling with that
amazing content. KEEP IT UP! 👍❗️🙏
Amazing content
Nice video bring more videos on gsap and scroll magic also..
Hey. Great video