Responsive Bento Style Landing Page in Framer. Full Tutorial

Responsive Bento Style Landing Page in Framer. Full Tutorial

Sergei Chyrkov 25.3K subscribers
5.4K views · 2024-02-15 UI Design
In this tutorials I'll show you how to easily create a personal "bento style" landing page in Framer from scratch. We'll cover stacks, grids, component creation and some basic hover animation, as well as creating a fully responsive layout.

👀 Preview https://higher-goal-107627.framer.app
👉 Free project Remix Link: https://www.buymeacoffee.com/sergeichyrkov/e/220993
🙌 Sign up for Framer — https://framer.link/chyrkov

______________________________
Check out my links ⬇️
▸ My website — https://sergeichyrkov.com
▸ My studio — https://chyrkov.studio
▸ My curated resources library — https://designsweets.co
▸ Twitter — https://twitter.com/sergeichyrkov
▸ Instagram — https://instagram.com/chyrkov
▸ Behance — https://www.behance.net/chyrkov
▸ Linkedin — https://linkedin.com/in/sergeichyrkov
______________________________
📝 Chapters:
0:00 — introduction
0:44 — how to use stacks and create first section
5:15 — create a photo section
12:30 — create other sections
17:43 — change the layout to make it more interesting
22:57 — how to make responsive layout
26:58 — button component with hover animation
29:16 — how to publish a website in Framer
29:35 — how to change domain in Framer
29:52 — conclusion

______________________________
😍 Monetarily Supporting The Channel:
If you like what I do and wish to support the channel monetarily, you can donate me with some coffee here: https://www.buymeacoffee.com/sergeichyrkov
This is appreciated and helps the channel, but please don't feel that it is necessary to enjoy my content.
______________________________
📃 Disclaimer:
Some of the links in my video descriptions are affiliate links, which means at no extra cost to you, I will make a small commission if you click them and make a qualifying purchase.

______________________________
#framer #framertutorial #webdesign