green premium

Perfection in every cup.
Placeholder Picture
Heading Level 5

The navigation header is ‘pinned’ up top using a *fixed position value* (On desktop view only). Fixed elements are taken out of the flow; this means they do not take up space. To adjust for that an extra top margin is added to this white container. Without that extra top margin this container would have slid up behind the nav bar.

This section below uses Flexbox for the layout. The main reason is that this will allow us to keep the ‘More info’ button’ horizontally aligned no matter the lenght of the paragraph text. The column is the flex parent for the three containers, which is the flex parent for the containing elements. The paragraphs are set to take up any remaining space using a flex grow value of 1 (versus 0 for the other elements).

Just look at the settings on the design pane column, container and paragraph and all will be clear! 

Buy Now

Yep, we offer other hip teas too

Placeholder Picture

japanese

As explained above, no matter the lenght of the paragraph, the buttons below will always be horizontally aligned. Thanks to power of Flexbox!

Button Link
Placeholder Picture

rooibos

The buttons on the left and right use an ID that specifies their color. All other button properties are defined on the type (for all buttons) on this class used by the button in the middle below. To change the general button properties select the button in the middle

Button Link
Placeholder Picture

RED

Then either set the styles on the type selector such as the font styles (pink indicator). Or set styles on the class (blue indicator), such as the dimensions. This will then apply to all buttons. Only the colors are set for the double class and won’t change.

Button Link
Contact Us

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.

Rua do Passal 9500 — Ponta Delgada
PORTUGAL

The tea theme

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.

Please use this free theme for inspiration and learning purposes.

Hip tea links
Tea is social