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.
You're at the right place now! How can we help?