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.
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 ► jevelin.shuffl...
[SOURCE CODE ]
Files ► github.com/jlo...
[ SOCIAL MEDIA ]
Instagram ► / 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 ► bit.ly/2ZfR0u3
Coupon code ► JULIOCODES60
Video tutorial ► • Video
[ 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!

[@juliocodes]

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.

[@DJalem]

6 months ago i posted you this project and finally you did it.... awseome julio thank you so much!

[@darpananeja4751]

Man, you are awesome! You deserve a place in the hall of FAME!

[@MuhammadAdnan-gx6rd]

It's good to have this library being instruct step by step by you...

[@juliocodes]

Many videos to come on all sorts of subjects in the future. Stay tuned.

[@MuhammadAdnan-gx6rd]

@@juliocodes okay. ..

[@abusalehinrifat5516]

You are cool man! awesome tutorial again, please upload some more stufs like this, It was a great find for me, Thanks!

[@philosopherdaddy3468]

I love to watch your tutorial. lots of love to you

[@thesouthsidedev1812]

Thanks julio a appreciate the lesson hopefully i can send in my responsive version before the week runs out

[@niiightrose8619]

that would be great if you do the whole jevelin website in parts , its a great yet simple website to code

[@juliocodes]

In the future there will be tons more tutorials when I’m able to dedicate more time to RUclips

[@raedsalah]

Was this a steam ? loved it man.

[@udaykulkarni5639]

MORE GSAP pleaseeeeeeeeeeeeeeee

[@deadlife3049]

great tutorial bro....i really appreciate this tutorial.....go ahead bro....

[@juliocodes]

Thanks!

[@hamzaidris7811]

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.

[@ramiromaturano6929]

buena padre!

[@3nails1cross11]

Awesome! Thank you for sharing ^^

[@juliocodes]

Thanks!

[@everydaystoriesanimated2318]

amazing content. KEEP IT UP! 👍❗️🙏

[@juliocodes]

Thank you 🙌

[@SuchilGaming]

Amazing !!!

[@juliocodes]

Thanks!

[@anuj7286]

Nice video bring more videos on gsap and scroll magic also..

[@juliocodes]

I’ll try that next time I do more Gsap

[@owenservicenow9938]

It would be great if you could show us howe to add a cool looking Search option to a Responsive Website Nav bar.

[@akashsapkota4868]

Can you make a video of a navabar with adjustable logo? I'm struggling with that

[@SuchilGaming]

Yes I have the same problem

[@juliocodes]

Adjustable logo how?

[@xAndre-d-Moraes]

Very nice, indeed.

[@juliocodes]

Thanks!

[@MalahimTech]

Amazing content

[@juliocodes]

Thanks!

[@ogulcankarayel5625]

Where can i get images like watch.png

[@TheChilllin]

maybe pexels.com or unsplash

[@deadlockgaming6416]

From where should I learn Gsap animation?

[@DungNguyen-eg7ss]

oh yeah :)))

[@galalistationery9434]

bro how can add multiple languages in my website html....Please tell me ..please

[@fq2953]

Hey. Great video

[@juliocodes]

Thanks!

[@yavallejo]

More tutorial GSAP, please

[@blessingagbi2530]

Hello, great video, please can I rent a server without knowing a server side language eg is php, react etc

[@juliocodes]

Yes

[@siddarthkotthur1558]

do you design your own images?

[@juliocodes]

No, I usually grab them from the demo website I'm replicating

[@omkaratyalkar3401]

next video plz customized phone cover use html , css , jq /js

[@MrKaremnour]

I have feeling flebox its self easier than bootstrap, agree or disagree?

[@juliocodes]

Depends on the layout. If you know what classes to use to build your layouts, bootstrap is pretty straight forward

[@MrKaremnour]

@@juliocodes best answer

[@sandragredo4673]

You are so beautiful guy!