Develop creative website layouts in minutes with grid and flexbox - Webflow livestream tutorial
Join host, Nelson Abalos Jr, for another exciting “multiversal” episode of Build With Me as we utilize CSS grid and flexbox to quickly create a unique layout, just like the one we’ll be demoing during the stream. Which, by the way, was designed by Nihar Tayade. Check out the original tweet here: / 1645702186926522368
We’ll learn more about:
- How CSS Grid and Flexbox can work together
- Using blend modes to create knockout text on top of a background video element
- Using Webflow interactions to make a googly eye follow your mouse cursor
Cloneable: wfl.io/grid-flexbox-layout
----------
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community: webflow.com/community
webflow.com
/ webflow
/ webflow
Пікірлер: 29
Great video guys like always ❤️🔥❤️🔥
Need more breakdown videos on complex layouts 👍
@Webflow
Жыл бұрын
You got it!
niceeee love it greetings from poland krakow guys :)
Nelson you're the best!
Hi Nelson Would you be able to do a video to show how this can be responsive on the smaller screens? I really liked the design on desktop but am struggling to get the smaller screens to look good. thank you
@Webflow
11 ай бұрын
Great suggestion! Maybe we can tackle that in the future.
there is an align popup. I can't find that myself? Even if I'll reproduce everything, you show. Is that a plugin?
@Webflow
Жыл бұрын
You'll need to click on a child element in a cell to see the alignment button. Hope this helps :)
Hi how are you ! Why you dont use quick stack for build this design i dont understand ? Grid is excellent and il love that, but that was lore quickly with quick stack ?
@Webflow
Жыл бұрын
I use Quick Stack for this build starting from 00:06:35 in.
@gamingspecialunity
Жыл бұрын
So thaaanks ! This design is so beautiful.
Why you did not put grid in section?,can we build layouts with no section?
Grimur is hilarious 😂
8:55 I can't find that button for alignment options.
@Webflow
Жыл бұрын
You'll need to click on a child element in a cell to see the alignment button. Hope this helps :)
Жыл бұрын
@@Webflow I did but it didn't appear.
@Pawelrudko
Жыл бұрын
I don't see this option either
How would I make a text mask for video like this if the background is black?
@Webflow
Жыл бұрын
Here is how to do this: www.loom.com/share/d9699a3a717c43429ad61213b43306e6
@chriswertz5825
Жыл бұрын
@@Webflow thanks for the quick reply. I’ll watch asap
@chriswertz5825
Жыл бұрын
@@Webflow great! thanks Nelson.
@chriswertz5825
Жыл бұрын
@@Webflow Ok that worked, one more question. Can this work for an SVG?
@Webflow
Жыл бұрын
It should work. I found an article that proves it: stackoverflow.com/questions/69801440/i-am-trying-to-clip-a-background-div-with-an-svg-text
How to create a table in webflow
@Webflow
Жыл бұрын
Our team is working on a feature for this currently. If you need a table now, you can try using Flexbox, Grid or a table generator. Hope this helps.
If they dont show the responsive part, this is useless