Zum Hauptinhalt springen
Zur Startseite gehen

Bootstrap grid

This is the Bootstrap grid section of moori Foundation. The first column is sticky, the second is filled with content and the third have the property: "justify-content: space-between"
moorl-column-layout-1|slot-a
moorl-column-layout-1|slot-a
moorl-column-layout-1|slot-a
moorl-column-layout-1|slot-a
moorl-column-layout-1|slot-a
moorl-column-layout-1|slot-a
moorl-column-layout-1|slot-a

Element animations

Here you see what kind of animations are possible with moori Foundation. You can configure the animation type, speed and timeout. The animation will run if an element enters the viewport, exists the viewport, the mouse enters it or the page was loaded.
moorl-grid-layout-three|slot-a
moorl-grid-layout-three|slot-b
moorl-grid-layout-three|slot-c
moorl-grid-layout-three|slot-d

Sliders

With moori Foundation you have a full responsive special slider block with multiple elements. Here are two examples.
moorl-interactive-slider|slot-a
moorl-interactive-slider|slot-b
moorl-interactive-slider|slot-c
moorl-interactive-slider|slot-d
moorl-interactive-slider|slot-e
moorl-interactive-slider|slot-f
moorl-interactive-slider|slot-a
moorl-interactive-slider|slot-b
moorl-interactive-slider|slot-c
moorl-interactive-slider|slot-d

Responsive blocks

With moori Foundation you can hide or show blocks based on your customers viewport. Just resize your browser to see the change.
moorl-grid-layout-fifteen|slot-a
moorl-grid-layout-fifteen|slot-b
moorl-grid-layout-fifteen|slot-c
moorl-grid-layout-fifteen|slot-d
moorl-grid-layout-fifteen|slot-e
moorl-grid-layout-fifteen|slot-f
moorl-column-layout-1-1-1-1-1|slot-a
moorl-column-layout-1-1-1-1-1|slot-b
moorl-column-layout-1-1-1-1-1|slot-c
moorl-column-layout-1-1-1-1-1|slot-d
moorl-column-layout-1-1-1-1-1|slot-e