Kinh Op Bep Sieu Dep
Scroll down to start
Kinh en nho chuyen cung cap kinh mau op bep sieu dep ma gia re
- 1website: https://kinhennho.com/
- 2Style a card container
- 3Style text and buttons
- 4Center elements with flexbox
On the web — and in Webflow — every element is a box, and boxes are often nested inside other boxes to build layouts. This is called the box model. Once you understand the box model, building websites becomes much easier.
The card to the right shows what you'll build today, and how you'll use the box model to build it.
In the box model, elements that contain other elements, like the div block here, are parents. Elements inside a parent are called children.
To build a layout, you’ll typically add Display settings to parent elements to control how their children behave.
Now let’s put this knowledge to work by building this card from scratch.
To start designing, grab elements from the Add Elements panel at the top of the left-hand toolbar, then drag and drop them into the Workspace.
Now that we've built the card's structure, let's give it some style.
Now let's practice our new styling skills to make our type and button look like the Reference.
On the web, elements sit at the top-left of their parent container by default. But we can change this by applying display styles to parent elements, like our div block, that control how child elements behave.
You’ve just visually coded a fully functional card component — and learned some fundamental web principles while you were at it.
We’ve prepared another card for you to build — this time, by yourself. Feel free to scroll back up if you’re unsure about anything. Happy designing!
This is just the beginning of what you can do in Webflow. When you're ready for more, you'll find hours of videos and guides in Webflow University.
This month we’ll meet to try new recipes from our fit food experts...
Book your place