help!

zaitra.io

Color themes gives you oportunity to style some basic elements without writing css code.

Color themes for sections:

GREY
<section class="section-grey" id="...">

CYAN
<section class="section-cyan" id="...">

WHITE
<section class="section-white" id="...">

COLORS:
If you need to overwrite default theme colors for texts/headers, you can use these classes.
white:     class="white"     | #ffffff
cyan:      class="cyan"      | #0FB9B1 
dark grey: class="dark-grey" | #1D1D1D
grey:      class="grey"      | #919191
yellow:    class="yellow"    | #ffbd15

SPACING:
Use bootstrap one!
https://getbootstrap.com/docs/4.0/utilities/spacing/

GLOBAL CLASSES
These elements are adaptive based on parent "section-color" class.

LINK
<a class="link"> - style your link

DESCRIPTION
<p class="description"> - use as a text under main section Title, has bigger font-size

HEADERS
<h2 class="header"> - main header of a section
<h4> - title under circles/team members...

PARAGRAPHS
<p> - classic mid-size description, longer texts
<p class="subtitle"> - italic font text

BUTTONS

Buttons adapts colors based on theme (see "Color themes for sections")
- Outlined
<button type="button" class="btn btn-outline-primary">LOAD MORE</button>

ICONS inside circles

<span class="fa-stack fa-4x">
  <i class="fas fa-circle fa-stack-2x icon"></i>         
  <i class="fas fa-satellite fa-stack-1x fa-inverse"></i>
</span>

IMAGES inside CIRCLE (change class white -> grey if you need specific bg)

<div class="rounded-circle circle-img-8 white">
  <img class="mr-3 mx-auto" src="..." width="100" alt="xxx">
</div>