Worship

to begin your journey

is to take the first step

A follower's story

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. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Get inspired

User Quote #1

❝

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh risus, sagittis nec suscipit nec, mollis laoreet eros. Donec faucibus, libero id faucibus scelerisque, justo justo nullam sodales.

❞

How to get started

grid stucture

The parent of these three containers is using grid to lay them out. After 640px, open up the grid editor and add three more columns, and your containers line up automatically. That's all, believe it!

create animations

You can easily create effects like these by adjusting the state, applying your changes, and configuring your transitions. In this case, inside Out of View mode, I adjusted the Y-axis and lowered the opacity.

find your inner spirit

4 Square Grid

Four containers have been placed into one grid container. In the grid, each container is made to take up 1 fr. in width and 500px in height We used Flex controls for each container to keep the content centered. After that the links were a matter of designing along with adding some Hover transitions. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.

Working with grid areas

Rearranging the order of your containers is usually a laborous task, but with CSS Grid you can do this easily. Simply give each of these 4 containers its own ID, then head back to the parent container grid. Open up the grid editor and create 4 grid area names. To keep things simple, I named them image-1, content-1, image-2, content-2. Then assign these grid-areas to the container's ID, using the Apply Styles To dropdown. Now, if you want the container to be arraged a certain way, simply open up the grid editor and rename the are to the location you want it to be under.

Release