Colors

There are 2 main brand colors that can be set up in Header bg-primary and bg-secondary

You need to change the default brand colors for your own ones.

Obviously, you can also add additional classes with your colors or use the default colors below


<style>
/* set up your brand colors */
.bg-primary {
    background:#5580ff!important;
}
.bg-secondary {
    background:#ff8a73!important;
}

</style>

Default colors included in Zodiac Framework based on UI flat colors https://flatuicolors.com/ and http://materialuicolors.co/

turquoise

emerald

peter-river

amethyst

wet-asphalt

green-sea

nephritis

belize-hole

wisteria

alizarin

clouds

concrete

midnight-blue

sun-flower

carrot

orange

pumpkin

pomegranate

yellow

pink

purple

red

blue

green

silver

asbestos

amber

lime

deep-purple

brown

teal

cyan

bg-white

bg-grey

bg-dark

Examples of using custom colors

Buttons

Custom button


<a class="hs-button" href="http://www.zodiac-framework.com/" target="">Custom button</a>

Custom button


<a class="hs-button peter-river" href="http://www.zodiac-framework.com/" target="">Custom button</a>

Custom widgets

your title

This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website


<div class="hs-block cc-clearover">
    <center>
     <div class="fa fa-diamond fa-4x">
     </div>
          <h3>Your title</h3>
             <p>
           This is an example text, <a href="https://www.zodiac-framework.com/" title="Home">simply click</a> to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website
            </p>
    </center>
</div>

your title


<div class="hs-block bg-dark color-white link-grey cc-clearover">
    <center>
     <div class="fa fa-diamond fa-4x">
     </div>
          <h3>Your title</h3>
             <p>
           This is an example text, <a href="https://www.zodiac-framework.com/" title="Home">simply click</a> to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website
            </p>
    </center>
</div>

For text color you can use the following classes:

color-dark

color-white

For link colors:

link-dark

link-white

link-grey

Zødiac framework

Current version: 5.5.3

From 10/12/2020 the domain zodiac-framework.com has been moved to a new Jimdo website.

The new website and version (5.0) is available here:

www.hembarevskyy.com/projects/zodiac/