Global Styles

  • Typography

  • This page is designed to demonstrate your GLOBAL SETTINGS that affect your entire site as a whole. It’s important to maintain a consistent style throughout your site.

    Headings Style

    Default Heading Font: 

    Questrial

    Default Heading Sizes in px:

    Desktop: 50,40,30,25,20,15

    Tablet: 40,30,25,20,15

    Mobile: 30,25,20,15

    Default Heading Weights: 900,500,800,600,400,300

    Desktop : 50px | 900

    H1 Heading

    H1 Heading

    Tablet : 40px | 900

    H1 Heading

    H1 Heading

    Mobile : 30px | 900

    H1 Heading

    H1 Heading

    Desktop : 40px | 800

    H2 Heading

    H2 Heading

    Tablet : 30px | 800

    H2 Heading

    H2 Heading

    Mobile : 25px | 800

    H2 Heading

    H2 Heading

    Desktop : 30px | 600

    H3 Heading

    H3 Heading

    Tablet : 25px | 600

    H3 Heading

    H3 Heading

    Mobile : 25px | 600

    H3 Heading

    H3 Heading

    Desktop : 25px | 600

    H4 Heading

    H4 Heading

    Tablet : 20px | 600

    H4 Heading

    H4 Heading

    Mobile : 20px | 600

    H4 Heading

    H4 Heading

    Desktop : 20px |500

    H5 Heading
    H5 Heading

    Tablet : 18px | 500

    H5 Heading
    H5 Heading

    Mobile : 18px | 500

    H5 Heading
    H5 Heading

    Desktop : 15px |400

    H6 Heading
    H6 Heading

    Tablet : 18px | 400

    H6 Heading
    H6 Heading

    Mobile : 18px | 400

    H6 Heading
    H6 Heading

    Paragraph Style

    Default Font:

    Open Sans

    Default Sizes in px:

    Desktop: 17

    Tablet: 16

    Mobile: 15

    Default Weights:

    400

    Default  Line height in px:

    20

    Desktop : 17px | 400

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

    Tablet : 16px | 400

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

    Tablet : 15px | 400

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

    List Style

    Default Heading Font:

    Open Sans

    Default Heading Sizes in px:

    Desktop: 17

    Tablet: 16

    Mobile: 15

    Default Heading Weights:

    400

    Desktop : 17px | 400

    Unordered List (H5)

    • Something Cool
    • Something Cooler
    • Something Wicked Cool

    ordered List (H5)

    1. Something Cool
    2. Something Cooler
    3. Something Wicked Cool

    Custom List

    • Something Cool
    • Something Cooler
    • Something Wicked Cool

    Note: Use the below code and css for custom list style

    				
    					<ul class="check-list">
     	<li>Something Cool</li>
     	<li>Something Cooler</li>
     	<li>Something Wicked Cool</li>
    </ul>
    <style>
    ul.check-list {
        list-style: none;
        margin-left: 30px;
    }
    ul.check-list li{
        margin-bottom: 5px;
        font-size: 17px;
        font-weight: 400;
        line-height: 22px;
    }
    ul.check-list li::before {
        content: "\f058";
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        left: 5px;
    }
    </style>
    				
    			

    Desktop : 16px | 400

    Unordered List (H5)

    • Something Cool
    • Something Cooler
    • Something Wicked Cool

    ordered List (H5)

    1. Something Cool
    2. Something Cooler
    3. Something Wicked Cool

    Custom List

    • Something Cool
    • Something Cooler
    • Something Wicked Cool

    Note: Use the below code and css for custom list style

    				
    					<ul class="check-list">
     	<li>Something Cool</li>
     	<li>Something Cooler</li>
     	<li>Something Wicked Cool</li>
    </ul>
    <style>
    ul.check-list {
        list-style: none;
        margin-left: 30px;
    }
    ul.check-list li{
        margin-bottom: 5px;
        font-size: 17px;
        font-weight: 400;
        line-height: 22px;
    }
    ul.check-list li::before {
        content: "\f058";
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        left: 5px;
    }
    @media (min-width: 768px) and (max-width: 1024px){
       ul.check-list li{
           font-size: 16px;
       }
    				
    			

    Desktop : 16px | 400

    Unordered List (H5)

    • Something Cool
    • Something Cooler
    • Something Wicked Cool

    ordered List (H5)

    1. Something Cool
    2. Something Cooler
    3. Something Wicked Cool

    Custom List

    • Something Cool
    • Something Cooler
    • Something Wicked Cool

    Note: Use the below code and css for custom list style

    				
    					<ul class="check-list">
     	<li>Something Cool</li>
     	<li>Something Cooler</li>
     	<li>Something Wicked Cool</li>
    </ul>
    <style>
    ul.check-list {
        list-style: none;
        margin-left: 30px;
    }
    ul.check-list li{
        margin-bottom: 5px;
        font-size: 17px;
        font-weight: 400;
        line-height: 22px;
    }
    ul.check-list li::before {
        content: "\f058";
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        left: 5px;
    }
    @media (max-width: 767px){
       ul.check-list li{
           font-size: 15px;
       }
    }
    </style>
    				
    			
  • Colors

  • This page is designed to demonstrate your GLOBAL SETTINGS that affect your entire site as a whole. It’s important to maintain a consistent style throughout your site.

    Headings Style

    H1 , H2, H4 , H5, H6 Headings

    Black : #0D0A0E

    H3 Headings

    Blue Lagoon : #005566

    Paragraph Style

    Black : #0D0A0E

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

    Button Style

    Primary

    Blue Lagoon

    Outlined Button

  • Elements

  • This page is designed to demonstrate your GLOBAL SETTINGS that affect your entire site as a whole. It’s important to maintain a consistent style throughout your site.

    Tabs

    Accordion

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

    Slider

    Slide 1 Heading
    Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
    Click Here
    Slide 2 Heading
    Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
    Click Here
    Slide 3 Heading
    Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
    Click Here

    Video

  • Images

  • This page is designed to demonstrate your GLOBAL SETTINGS that affect your entire site as a whole. It’s important to maintain a consistent style throughout your site.

    Images Style

    Square shape

    Circle shape

    Rounded Shape

  • Galleries

  • This page is designed to demonstrate your GLOBAL SETTINGS that affect your entire site as a whole. It’s important to maintain a consistent style throughout your site.

    Grid Gallery Style

    Justified Gallery Style

  • Pricing Table

  • Pricing Table 1

    Loreum Ipsum

    Product 1

    $XXX

    per month*

    Feature 1

    Feature 2

    Feature 3

    Feature 4

    Feature 5

    Feature 6

    Loreum Ipsum

    Product 2

    $XXX

    per month*

    Feature 1

    Feature 2

    Feature 3

    Feature 4

    Feature 5

    Feature 6

    Feature 7

    Loreum Ipsum

    Product 3

    $XXX

    per month*

    Feature 1

    Feature 2

    Feature 3

    Feature 4

    Feature 5

    Feature 6

    Feature 7

    Feature 8

    Loreum Ipsum

    Product 4

    $XXX

    per month*

    Feature 1

    Feature 2

    Feature 3

    Feature 4

    Feature 5

    Feature 6

    Feature 7

    Feature 8

    Feature 9

    Pricing Table 2

    • Feature 1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Feature 2Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Feature 3Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Feature 4Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Feature 5Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Feature 6Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Feature 7Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Feature 8Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Feature 9Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Monthly
    • Annual

    ECONOMY

    $ XX Per Month
    •  
    •  
    • Not Included
    •  
    •  
    • XXX+
    •  
    • $XX+
    • $XX
    • $XX+
    • Over $XXX

    BASIC

    $ XX Per Month
    •  
    •  
    • Not Included
    •  
    •  
    • XXX+
    •  
    • $XXX+
    • $XX
    • $XX+
    • Over $XXXX

    ADVANCED

    $ XXX Per Month
    •  
    •  
    • YES
    •  
    •  
    • XXXX+
    •  
    • $XXX+
    • $XXX
    • $XXX+
    • Over $XXXX

    ELITE

    $ XXX Per Month
    •  
    •  
    • YES
    •  
    •  
    • XXXX+
    •  
    • $XXX+
    • $XXX
    • $XXX+
    • $XXXX+

This page is designed to demonstrate your GLOBAL SETTINGS that affect your entire site as a whole. It’s important to maintain a consistent style throughout your site.

Headings Style

Default Heading Font: 

Questrial

Default Heading Sizes in px:

Desktop: 50,40,30,25,20,15

Tablet: 40,30,25,20,15

Mobile: 30,25,20,15

Default Heading Weights: 900,500,800,600,400,300

Desktop : 50px | 900

H1 Heading

H1 Heading

Tablet : 40px | 900

H1 Heading

H1 Heading

Mobile : 30px | 900

H1 Heading

H1 Heading

Desktop : 40px | 800

H2 Heading

H2 Heading

Tablet : 30px | 800

H2 Heading

H2 Heading

Mobile : 25px | 800

H2 Heading

H2 Heading

Desktop : 30px | 600

H3 Heading

H3 Heading

Tablet : 25px | 600

H3 Heading

H3 Heading

Mobile : 25px | 600

H3 Heading

H3 Heading

Desktop : 25px | 600

H4 Heading

H4 Heading

Tablet : 20px | 600

H4 Heading

H4 Heading

Mobile : 20px | 600

H4 Heading

H4 Heading

Desktop : 20px |500

H5 Heading
H5 Heading

Tablet : 18px | 500

H5 Heading
H5 Heading

Mobile : 18px | 500

H5 Heading
H5 Heading

Desktop : 15px |400

H6 Heading
H6 Heading

Tablet : 18px | 400

H6 Heading
H6 Heading

Mobile : 18px | 400

H6 Heading
H6 Heading

Paragraph Style

Default Font:

Open Sans

Default Sizes in px:

Desktop: 17

Tablet: 16

Mobile: 15

Default Weights:

400

Default  Line height in px:

20

Desktop : 17px | 400

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Tablet : 16px | 400

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Tablet : 15px | 400

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

List Style

Default Heading Font:

Open Sans

Default Heading Sizes in px:

Desktop: 17

Tablet: 16

Mobile: 15

Default Heading Weights:

400

Desktop : 17px | 400

Unordered List (H5)

  • Something Cool
  • Something Cooler
  • Something Wicked Cool

ordered List (H5)

  1. Something Cool
  2. Something Cooler
  3. Something Wicked Cool

Custom List

  • Something Cool
  • Something Cooler
  • Something Wicked Cool

Note: Use the below code and css for custom list style

				
					<ul class="check-list">
 	<li>Something Cool</li>
 	<li>Something Cooler</li>
 	<li>Something Wicked Cool</li>
</ul>
<style>
ul.check-list {
    list-style: none;
    margin-left: 30px;
}
ul.check-list li{
    margin-bottom: 5px;
    font-size: 17px;
    font-weight: 400;
    line-height: 22px;
}
ul.check-list li::before {
    content: "\f058";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 5px;
}
</style>
				
			

Desktop : 16px | 400

Unordered List (H5)

  • Something Cool
  • Something Cooler
  • Something Wicked Cool

ordered List (H5)

  1. Something Cool
  2. Something Cooler
  3. Something Wicked Cool

Custom List

  • Something Cool
  • Something Cooler
  • Something Wicked Cool

Note: Use the below code and css for custom list style

				
					<ul class="check-list">
 	<li>Something Cool</li>
 	<li>Something Cooler</li>
 	<li>Something Wicked Cool</li>
</ul>
<style>
ul.check-list {
    list-style: none;
    margin-left: 30px;
}
ul.check-list li{
    margin-bottom: 5px;
    font-size: 17px;
    font-weight: 400;
    line-height: 22px;
}
ul.check-list li::before {
    content: "\f058";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 5px;
}
@media (min-width: 768px) and (max-width: 1024px){
   ul.check-list li{
       font-size: 16px;
   }
				
			

Desktop : 16px | 400

Unordered List (H5)

  • Something Cool
  • Something Cooler
  • Something Wicked Cool

ordered List (H5)

  1. Something Cool
  2. Something Cooler
  3. Something Wicked Cool

Custom List

  • Something Cool
  • Something Cooler
  • Something Wicked Cool

Note: Use the below code and css for custom list style

				
					<ul class="check-list">
 	<li>Something Cool</li>
 	<li>Something Cooler</li>
 	<li>Something Wicked Cool</li>
</ul>
<style>
ul.check-list {
    list-style: none;
    margin-left: 30px;
}
ul.check-list li{
    margin-bottom: 5px;
    font-size: 17px;
    font-weight: 400;
    line-height: 22px;
}
ul.check-list li::before {
    content: "\f058";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 5px;
}
@media (max-width: 767px){
   ul.check-list li{
       font-size: 15px;
   }
}
</style>
				
			

This page is designed to demonstrate your GLOBAL SETTINGS that affect your entire site as a whole. It’s important to maintain a consistent style throughout your site.

Headings Style

H1 , H2, H4 , H5, H6 Headings

Black : #0D0A0E

H3 Headings

Blue Lagoon : #005566

Paragraph Style

Black : #0D0A0E

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Button Style

Primary

Blue Lagoon

Outlined Button

This page is designed to demonstrate your GLOBAL SETTINGS that affect your entire site as a whole. It’s important to maintain a consistent style throughout your site.

Tabs

Accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Slider

Slide 1 Heading
Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
Click Here
Slide 2 Heading
Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
Click Here
Slide 3 Heading
Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
Click Here

Video

This page is designed to demonstrate your GLOBAL SETTINGS that affect your entire site as a whole. It’s important to maintain a consistent style throughout your site.

Images Style

Square shape

Circle shape

Rounded Shape

This page is designed to demonstrate your GLOBAL SETTINGS that affect your entire site as a whole. It’s important to maintain a consistent style throughout your site.

Grid Gallery Style

Justified Gallery Style

Pricing Table 1

Loreum Ipsum

Product 1

$XXX

per month*

Feature 1

Feature 2

Feature 3

Feature 4

Feature 5

Feature 6

Loreum Ipsum

Product 2

$XXX

per month*

Feature 1

Feature 2

Feature 3

Feature 4

Feature 5

Feature 6

Feature 7

Loreum Ipsum

Product 3

$XXX

per month*

Feature 1

Feature 2

Feature 3

Feature 4

Feature 5

Feature 6

Feature 7

Feature 8

Loreum Ipsum

Product 4

$XXX

per month*

Feature 1

Feature 2

Feature 3

Feature 4

Feature 5

Feature 6

Feature 7

Feature 8

Feature 9

Pricing Table 2

  • Feature 1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Feature 2Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Feature 3Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Feature 4Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Feature 5Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Feature 6Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Feature 7Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Feature 8Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Feature 9Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Monthly
  • Annual

ECONOMY

$ XX Per Month
  •  
  •  
  • Not Included
  •  
  •  
  • XXX+
  •  
  • $XX+
  • $XX
  • $XX+
  • Over $XXX

BASIC

$ XX Per Month
  •  
  •  
  • Not Included
  •  
  •  
  • XXX+
  •  
  • $XXX+
  • $XX
  • $XX+
  • Over $XXXX

ADVANCED

$ XXX Per Month
  •  
  •  
  • YES
  •  
  •  
  • XXXX+
  •  
  • $XXX+
  • $XXX
  • $XXX+
  • Over $XXXX

ELITE

$ XXX Per Month
  •  
  •  
  • YES
  •  
  •  
  • XXXX+
  •  
  • $XXX+
  • $XXX
  • $XXX+
  • $XXXX+
Scroll to Top

Get Free
Retirement Report

Protected by Security by CleanTalk and CleanTalk Anti-Spam