Intro

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.

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
  

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.
  

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