link muabanthuoctay

cong ty du lich intour

What you'll be building & The boxes it's made of

Div Block

Text Block

Photography

Heading

My European trip

Button

Explore

Build your Card here

And check it against the reference

STEP 1 of 4

Add HTML elements

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.

TRY IT OUT

Open the Add Elements panel and drag and drop a Div Block into the Workspace area.
Tip: Div blocks are the basic building blocks of all websites because they're used as containers for other elements.
Then drop the following elements inside the Div Block:
- Heading 
- Text Block
- Button
Double-click text elements to edit them.

Workspace

Reference

Photography

My European trip

Explore

STEP 2 of 4

Style the card container

Now that we've built the card's structure, let's give it some style.

TRY IT OUT

Select the Div Block in the Workspace area
Go to the Style panel's Size section and set the Height to 320px to fill the container
With the Div Block still selected, scroll down to the Backgrounds section and add the background image. Then set Size to Cover and Position to the middle dot
Go to the Borders section and apply a 10px Radius to all corners

Workspace

Photography

My European trip

Explore

Reference

Photography

My European trip

Explore

STEP 3 of 4

Style the text and button

Now let's practice our new styling skills to make our type and button look like the Reference.

TRY IT OUT

Apply Typography styles to the Text Block and Heading
Tip: Select elements in the Reference to peek at the Typography styles we used. You can apply styles manually or add the associated selector(s) to apply all the styles automatically.
Next, style the Button by changing the Background and Color, and adding a Radius of 100px, similar to how you styled the card container.
With the Button still selected, go to the Effects section to add a Box shadow, using the reference button as a guide.
Finally, add some Spacing to the Button.

Add 25px Margin to the top, 50px Padding to the left and right, and 15px Padding to the top and bottom.

Workspace

Photography

My European trip

Explore

Reference

Photography

My European trip

Explore

STEP 4 of 4

Centering elements with flexbox

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.

TRY IT OUT

Select your Div Block
Go to the Layout section of the Style panel and select the Display property Flex
Flexbox lays out child elements horizontally or vertically. Select Vertical to stack the elements.
Select Center for both Align and Justify to center your elements horizontally and vertically
Tip: Play with flex settings to create other layouts

Workspace

Photography

My European trip

Explore

Reference

Photography

My European trip

Explore

bonus challenge

Nice work!

You’ve just visually coded a fully functional card component — and learned some fundamental web principles while you were at it.

BONUS CHALLENGE

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!
‍

Tip: You can always select elements in the Reference to see what properties they use.

KEEP LEARNING!

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.
‍

Tip: Preview this page by clicking the eye icon in the top left to make the link above clickable.

Workspace

Reference

May 10, 2019 · Amazing Restaurant

Food tasting event

This month we’ll meet to try new recipes from our fit food experts...

Book your place

xin chào!

moi chi tiet xin lien he:

cong ty du lich intour

What you'll be building & The boxes it's made of

My European trip

Add HTML elements

TRY IT OUT

Workspace

Reference

My European trip

Style the card container

TRY IT OUT

Workspace

My European trip

Reference

My European trip

Style the text and button

TRY IT OUT

Workspace

My European trip

Reference

My European trip

Centering elements with flexbox

TRY IT OUT

Workspace

My European trip

Reference

My European trip

Nice work!

BONUS CHALLENGE

KEEP LEARNING!

Workspace

Reference

Food tasting event