Lorem Ipsum
november 2 - 4
Lorem Ipsum: 2
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem ipsum
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Hero Unit
- These interactions are triggered when the user hovers over the item with the defined class.
- This item needs to be an anchor element <a></a>.
- No JS file required for these animations.
--hero-grid-gap: 1rem;
--hero-background-color: #ffffff;
--hero-background-image: url("../assets/images/banner/banner-5.jpg");
--hero-content-background-color: rgba(0, 0, 0, 0.5);
--hero-content-padding-x: 1rem;
--hero-content-padding-y: 1rem;
--hero-content-color: #ffffff;
--hero-padding-top: 4rem;
--hero-padding-bottom: 4rem;
--hero-center-max-width: 600px;
.hero-full-default
Lorem Ipsum Dotum
Lorem Ipsum Dotum
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Button
.hero-full-default
Lorem Ipsum Dotum
Lorem Ipsum Dotum
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Button.hero-full-center
Lorem Ipsum Dotum
Lorem Ipsum Dotum
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
ButtonCards with Image and Text
Lorem Ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at est orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at est orci.
Lorem Ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at est orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at est orci.
Lorem Ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at est orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at est orci.
Other cards Animation
.ex-overlay-card
.ex-card-flip
Lorem Ipsum
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Content Marketing
.ex-card-gradient-hover
Lorem Ipsum
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Cards harizantal
--group-hover-duration: 0.3s;
--group-hover-easing: ease-in-out;
.ex-card-harizantal
Lorem Ipsum is simply dummy
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum →
Lorem Ipsum is simply dummy
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum →Four Columns Text Grid
--group-hover-duration: 0.3s;
--group-hover-easing: ease-in-out;
Lorem Ipsum is simply dummy
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum →Lorem Ipsum is simply dummy
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum →Lorem Ipsum is simply dummy
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum →Lorem Ipsum is simply dummy
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum →Text Grid zoom
--group-hover-duration: 0.3s;
--group-hover-easing: ease-in-out;
Lorem Ipsum is simply dummy
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum →Lorem Ipsum is simply dummy
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum →Lorem Ipsum is simply dummy
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum →Lorem Ipsum is simply dummy
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum →Other card Animations
.ex-hvr-glow
Hover over me
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
.ex-hvr-shadow-radial
Hover over me
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
.ex-hvr-shadow
Hover over me
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
.ex-hvr-grow-shadow
Hover over me
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
.ex-hvr-box-shadow-outset
Hover over me
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
.ex-hvr-float-shadow
Hover over me
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Animations
--animate-duration: 1s;
--animate-delay: 0s;
--animate-repeat: 1;
--animate-easing: cubic-bezier(0.76, 0, 0.24, 1);
.fade-in
Exemplifi
We build and manage enterprise websites
.fade-out
Exemplifi
We build and manage enterprise websites
.fade-in-left
Exemplifi
We build and manage enterprise websites
.fade-out-left
Exemplifi
We build and manage enterprise websites
.fade-in-right
Exemplifi
We build and manage enterprise websites
.fade-out-right
Exemplifi
We build and manage enterprise websites
.fade-in-up
Exemplifi
We build and manage enterprise websites
.fade-out-up
Exemplifi
We build and manage enterprise websites
.fade-in-down
Exemplifi
We build and manage enterprise websites
.fade-out-down
Exemplifi
We build and manage enterprise websites
.slide-in-left
Exemplifi
.slide-out-left
Exemplifi
.slide-in-right
Exemplifi
.slide-out-right
Exemplifi
.slide-in-up
Exemplifi
.slide-out-up
Exemplifi
.slide-in-down
Exemplifi
.zoom-in
Exemplifi
We build and manage enterprise websites
.zoom-out
Exemplifi
We build and manage enterprise websites
.zoom-in-left
Exemplifi
We build and manage enterprise websites
.zoom-out-left
Exemplifi
We build and manage enterprise websites
.zoom-in-right
Exemplifi
We build and manage enterprise websites
.zoom-out-right
Exemplifi
We build and manage enterprise websites
.zoom-in-up
Exemplifi
We build and manage enterprise websites
.zoom-out-up
Exemplifi
We build and manage enterprise websites
.zoom-in-down
Exemplifi
We build and manage enterprise websites
.zoom-out-down
Exemplifi
We build and manage enterprise websites
.rotate-in
Exemplifi
We build and manage enterprise websites
.rotate-out
Exemplifi
We build and manage enterprise websites
.rotate-in-up-left
Exemplifi
We build and manage enterprise websites
.rotate-out-up-left
Exemplifi
We build and manage enterprise websites
.rotate-in-up-right
Exemplifi
We build and manage enterprise websites
.rotate-out-up-right
Exemplifi
We build and manage enterprise websites
.rotate-in-down-left
Exemplifi
We build and manage enterprise websites
.rotate-out-down-left
Exemplifi
We build and manage enterprise websites
.rotate-in-down-right
Exemplifi
We build and manage enterprise websites
.rotate-out-down-right
Exemplifi
We build and manage enterprise websites
.back-in-left
Exemplifi
We build and manage enterprise websites
.back-out-left
Exemplifi
We build and manage enterprise websites
.back-in-right
Exemplifi
We build and manage enterprise websites
.back-out-right
Exemplifi
We build and manage enterprise websites
.back-in-up
Exemplifi
We build and manage enterprise websites
.back-out-up
Exemplifi
We build and manage enterprise websites
.back-in-down
Exemplifi
We build and manage enterprise websites
.back-out-down
Exemplifi
We build and manage enterprise websites
Grid/Card Animations
.card-icon-expand
This is option 1
Card description with lots of great facts and interesting details.
→
Card Layouts
--card-border-width: 1px;
--card-border-color: #000000;
--card-border-radius: 4px;
--card-background: #fff;
.card-default
Lorem Ipsum
Lorem ipsum dotum
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Click me.card-default
View
Group Hovers
--group-hover-duration: 0.3s;
--group-hover-easing: ease-in-out;
--group-hover-delay: 0.05s;
.card-default
Lorem Ipsum
Lorem ipsum dotum
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Click meImage Left Text right
--group-hover-duration: 0.3s;
--group-hover-easing: ease-in-out;
--group-hover-delay: 0.05s;
.txt-left-img-rigt
Lorem Ipsum is simply dummy text
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum →
.img-left-txt-right
Lorem Ipsum is simply dummy text
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum →Alerts
--group-hover-duration: 0.3s;
--group-hover-easing: ease-in-out;
.ex-alert
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
.ex-alert-rounded
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.