Quadra uses the simplest and most convenient systems for sections and containers. It's very easy to edit and no CSS or javascript details are needed. Solid colors, gradient colors, background images, Cookie background images and much more can be used. All of these can be done with helper classes.

You can use it by adjusting the degree of transparency for all black, gray, white, colored and gradient colors. With a transparent color on the background image, you can create stylish images and legible divs.

This colors and tones can be used with simple classes. This note has .bg-colored class and This note has .bg-green class.

You can use these classes with extras for hovers and active classes. Hover me for hover actions. and Click me for toggle active actions.

Also Quadra is have a perfect Parallax plugin. You can use parallax effects on all HTML elements and background images. Here is a lot of templates. You can use parallax animations horizontal, vertical, all diagonals, and with all CSS settings. And they will work fastest and smoothy. This feature is disabled on mobile devices.

Big thanks to Alexander Prinzhorn for this great plugin. You can visit plugin page from here.

Below is a list of specially selected gray tones. These colors can be used on any HTML element. You can copy class names with clicking on colors.

bg-gray

bg-gray1

bg-gray2

bg-gray3

bg-gray4

bg-gray5

bg-gray6

bg-gray7

bg-gray8

bg-gray9

Dark tones, you can copy them via clicking on colors.

bg-dark

bg-dark1

bg-dark2

bg-dark3

bg-dark4

bg-dark5

bg-dark6

bg-dark7

bg-dark8

bg-dark9

Quadra is have social platform colors for social icons and buttons. Bootstrap colors and Quadra's special colors are available.

bg-default

bg-primary

bg-success

bg-secondary

bg-danger

bg-warning

bg-info

bg-pink

bg-violet

bg-purple

bg-gold

bg-asphalt

bg-mail

bg-facebook

bg-twitter

bg-youtube

bg-vimeo

bg-pinterest

bg-linkedin

bg-flickr

bg-dropbox

bg-instagram

bg-tumblr

bg-skype

bg-google-plus

bg-twitter-alt

bg-rss

bg-apple

bg-windows

bg-dribbble

bg-android

bg-html5

bg-css3

bg-pagelines

bg-gittip

Night colors; you can use all tones on texts and borders with using .color-dark2 or .b-gold. This feature is not available only night colors. Night colors usable for only backgrounds.

bg-night

bg-night1

bg-night2

bg-night3

bg-night4

bg-night5

bg-night6

bg-night7

bg-night8

bg-night9

Gradient colors; you can use them on all HTML elements like sections, buttons even texts!

bg-gradient

bg-gradient1

bg-gradient2

bg-gradient3

bg-gradient4

Soft background colors, white; you can use them on background images and your divs & texts will look perfect.

bg-soft-white

bg-soft-white1

bg-soft-white2

bg-soft-white3

bg-soft-white4

bg-soft-white5

bg-soft-white6

bg-soft-white7

bg-soft-white8

bg-soft-white9

Dark soft backgrounds; you can copy classes with clicking on icons.

bg-soft-dark

bg-soft-dark1

bg-soft-dark2

bg-soft-dark3

bg-soft-dark4

bg-soft-dark5

bg-soft-dark6

bg-soft-dark7

bg-soft-dark8

bg-soft-dark9

You can use soft gradient colors on image backgrounds.

bg-soft-gradient

bg-soft-gradient1

bg-soft-gradient2

bg-soft-gradient3

bg-soft-gradient4

Parallax animations; You can use parallax animations on all HTML elements. You can edit their speed, containers and their direction.

All CSS settings can be used in parallax elements. These animations are disabled on mobile devices. You can active easily on mobile and You can choose the browser types in which the Parallax effect will work.

All animations can be edited easily and you can change everything. This is vertical reverse animation;

All CSS settings can be used in parallax elements. These animations are disabled on mobile devices. You can active easily on mobile and You can choose the browser types in which the Parallax effect will work.

You can use parallax effects horizontal;

All CSS settings can be used in parallax elements. These animations are disabled on mobile devices. You can active easily on mobile and You can choose the browser types in which the Parallax effect will work.

You can change their speed and direction easily;

All CSS settings can be used in parallax elements. These animations are disabled on mobile devices. You can active easily on mobile and You can choose the browser types in which the Parallax effect will work.

Background animation; from left to right. We recommend use repeatable backgrounds for this feature.

All CSS settings can be used in parallax elements. These animations are disabled on mobile devices. You can active easily on mobile and You can choose the browser types in which the Parallax effect will work.

Background animation; from right to left. We recommend use repeatable backgrounds for this feature.

All CSS settings can be used in parallax elements. These animations are disabled on mobile devices. You can active easily on mobile and You can choose the browser types in which the Parallax effect will work.

Copied Copied to clipboard.
Please tell us if you want to see more creative templates in Quadra. We really care about it.
website logo template
Drop us a message

You're at the right place now! How can we help?

VISIT CONTACT PAGE