BUTTON DESIGNS

NORMAL BUTTONS

This is a big button This is a big yellow button This is a big red button This is a big green button This is a big blue button 

Shortcode:

[big-button color="yellow" link="http://www.website.com/"]This is a big yellow button[/big-button] [big-button link="http://www.website.com/"]This is a big button[/big-button]

You can also use straight css class like .big-button (for making it big) and also .yellow, .green, .blue etc (for adding color). The html of this example is:

<a href="http://www.website.com/" class="large button yellow radius">This is a big yellow button</a>
Medium blue button Green medium rounded button Default medium button

Shortcode:

[medium-button color="blue" link="http://www.website.com/"]This is a medium&nbsp;<strong>blue</strong>&nbsp;button[/medium-button] [medium-button color="green" link="http://www.website.com/" rounded="yes"]This is a medium&nbsp;<strong>green</strong>&nbsp;button[/medium-button] [medium-button link="http://www.website.com/"]This is a default medium button[/medium-button]

You can also use straight css class like .medium.button (for making it medium) and also .yellow, .green, .blue etc (for adding color). The html of this example is:

<a href="http://www.website.com/" class="medium button yellow radius">This is a medium yellow button</a>
Small blue button Green small button Small red button Default small button Small orange button Small lightblue button Small purple button Small turqoise button Small darkred button Small green-lemon button Small white button Small black button

Shortcode:

[small-button color="blue" link="http://www.website.com/"]This is a small blue button[/small-button] [small-button color="green" link="http://www.website.com/"]This is a small green button[/small-button] [small-button color="red" link="http://www.website.com/"]This is a small red button[/small-button] [small-button link="http://www.website.com/"]This is a default small button[/small-button]

You can also use straight css class like .small.button (for making it big) and also .yellow, .green, .blue etc (for adding color). The html of this example is:

<a href="http://www.website.com/" class="small button yellow radius">This is a small yellow button</a>

 

NICE BUTTONS

This is a big button This is a big yellow button This is a big red button This is a big green button This is a big blue button 

Shortcode:

[big-button color="yellow" link="http://www.website.com/" type="nice"]This is a big yellow button[/big-button][big-button link="http://www.website.com/" type="nice"]This is a big button[/big-button]

You can also use straight css class like .large.button (for making it big) and also .yellow, .green, .blue etc (for adding color). The html of this example is:

<a href="http://www.website.com/" class="large button yellow nice radius">This is a big yellow button</a>
Medium blue button Green medium button Default medium button

Shortcode:

[medium-button color="blue" link="http://www.website.com/" type="nice"]This is a medium&nbsp;<strong>blue</strong>&nbsp;button[/medium-button] [medium-button color="green" link="http://www.website.com/" type="nice"]This is a medium&nbsp;<strong>green</strong>&nbsp;button[/medium-button] [medium-button link="http://www.website.com/" type="nice"]This is a default medium button[/medium-button]

You can also use straight css class like .medium.button (for making it big) and also .yellow, .green, .blue etc (for adding color). The html of this example is:

<a href="http://www.website.com/" class="medium button yellow nice radius">This is a medium yellow button</a>
Small blue button Green small button Small red button Default small button Small orange button Small lightblue button Small purple button Small turqoise button Small darkred button Small green-lemon button Small white button Small black button

Shortcode:

[small-button color="blue" link="http://www.website.com/" type="nice"]This is a small blue button[/small-button] [small-button color="green" link="http://www.website.com/" type="nice"]This is a small green button[/small-button] [small-button color="red" link="http://www.website.com/" type="nice" rounded="yes"]This is a small red rounded button[/small-button] [small-button link="http://www.website.com/" type="nice"]This is a default small button[/small-button]

You can also use straight css class like .small.button (for making it big) and also .yellow, .green, .blue etc (for adding color). The html of this example is:

<a href="http://www.website.com/" class="small button yellow nice radius">This is a small yellow button</a>

 

ROUND CORNERS

This is a big yellow button This is a big red button

Shortcode:

[big-button color="red" link="http://www.website.com/" corners="round"]This is a big red button[/big-button][big-button color="red" link="http://www.website.com/" type="nice" corners="round"]This is a big red button[/big-button]

You can also use straight css class like .large.button.round (for making it big) and also .yellow, .green, .blue etc (for adding color). The html of this example is:

<a href="http://www.website.com/" class="large button yellow nice round">This is a big yellow button</a>

TYPOGRAPHY

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

H1 Tag Header

[h1]H1 Tag Header[/h1]

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

H2 Tag Header

[h2]H2 Tag Header[/h2]

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

H3 Tag Header

[h3]H3 Tag Header[/h3]

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

H4 Tag Header

[h4]H4 Tag Header[/h4]

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

H5 Tag Header
[h5]H5 Tag Header[/h5]

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

H6 Tag Header
[h6]H6 Tag Header[/h6]

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

 

HTML code wrapped in [ code ]

#pre-sample {
  font-size:12px;
  color:#ffffff;
}

 

Blockquote

In hendrerit molestie sapien, et pretium urna lobortis et. Mauris felis tortor, auctor a congue quis, interdum a arcu. Vivamus suscipit posuere accumsan. Vestibulum vitae ante nec quam volutpat convallis a vitae est. Praesent facilisis eros in quam congue eget pellentesque nunc interdum. Vestibulum dapibus, dui at pulvinar malesuada, massa purus fringilla elit, et mattis magna purus nec urna.
[blockquote] .. content here .. [/blockquote]

 

Text with highlights

Nam ipsum risus, porttitor tincidunt rhoncus (black25) quis, rhoncus non purus. Nunc tempus iaculis risus, quis posuere turpis auctor eget. Vestibulum turpis sem, rhoncus eu scelerisque (black50) condimentum, varius a leo. Vivamus congue elit quis ante semper pellentesque.

Other highlights:

Red HighlightBlue Highlight / Green Highlight /  Yellow Highlight

 

Codes:

[hlight red] Red Highlight [/hlight] [hlight blue] Blue Highlight [/hlight] [hlight green] Green Highlight [/hlight] [hlight yellow] Yellow Highlight [/hlight]

 

Image in paragraph

.shadow css classJust add .shadow class to the image. Sed lacus risus, molestie eget fermentum in, vehicula ac est. Pellentesque vestibulum nunc nec quam fermentum at venenatis sapien consectetur. Nulla ut augue nec ligula ultricies pharetra ut nec dui. Etiam egestas facilisis volutpat. Quisque non fermentum nisl. Vivamus posuere laoreet augue, eget volutpat libero accumsan vitae. Aliquam ultrices, quam sed posuere pretium, sapien libero tempus mi, sed consequat erat leo et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at vestibulum libero. Phasellus nibh leo, pharetra vel dictum eu, faucibus in nibh.

.shadow css classAenean vulputate imperdiet arcu, eget tempus elit faucibus in. Suspendisse venenatis, justo ac faucibus imperdiet, neque dui suscipit ligula, ac condimentum dui neque et est. Duis sagittis rutrum erat sed aliquet. Ut eget purus et nunc iaculis congue eu eu nibh. Aliquam ac aliquet leo. Curabitur leo urna, vulputate id vulputate id, pulvinar et leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque dapibus lectus eu lorem consectetur sed porttitor ipsum congue.

Etiam egestas facilisis volutpat. Quisque non fermentum nisl. Vivamus posuere laoreet augue, eget volutpat libero accumsan vitae. Aliquam ultrices, quam sed posuere pretium, sapien libero tempus mi, sed consequat erat leo et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at vestibulum libero. Phasellus nibh leo, pharetra vel dictum eu, faucibus in nibh.

 

Lists

  • List with no class
  • List with no class
  • List with no class
  • List with no class
  • List with no class
  • List with .list-type-1 class
  • List with .list-type-1 class
  • List with .list-type-1 class
  • List with .list-type-1 class
  • List with .list-type-1 class
  • List with .list-type-2 class
  • List with .list-type-2 class
  • List with .list-type-2 class
  • List with .list-type-2 class
  • List with .list-type-2 class
  • List with .list-type-3 class
  • List with .list-type-3 class
  • List with .list-type-3 class
  • List with .list-type-3 class
  • List with .list-type-3 class
  • List with .list-type-4 class
  • List with .list-type-4 class
  • List with .list-type-4 class
  • List with .list-type-4 class
  • List with .list-type-4 class
  • List with .list-type-5 class
  • List with .list-type-5 class
  • List with .list-type-5 class
  • List with .list-type-5 class
  • List with .list-type-6 class
  • List with .list-type-6 class
  • List with .list-type-6 class
  • List with .list-type-6 class
  • List with .list-type-7 class
  • List with .list-type-7 class
  • List with .list-type-7 class
  • List with .list-type-7 class
  • List with .list-type-8 class
  • List with .list-type-8 class
  • List with .list-type-8 class
  • List with .list-type-8 class
  • List with .list-type-9 class
  • List with .list-type-9 class
  • List with .list-type-9 class
  • List with .list-type-9 class

List on 2 columns

  • List with .list-type-5 class & 2 columns
  • List with .list-type-5 class & 2 columns
  • List with .list-type-5 class & 2 columns
  • List with .list-type-5 class & 2 columns

List on 3 columns

  • List 3 columns
  • List 3 columns
  • List 3 columns
  • List 3 columns

TABLE DESIGNS

Some table designs:

MINIMAL STYLE

The below exemple has the class set to ".minimal-style"

Country Population Area Official languages
United States of America 306,939,000 9,826,630 km2 English
United Kingdom 61,612,300 244,820 km2 English
India 1,147,995,904 3,287,240 km2 Hindi, English
Canada 33,718,000 9,984,670 km2 English, French
Germany 82,060,000 357,021 km2 German

BOX STYLE

The below exemple has the class set to ".box-style"

Country Population Area Official languages
United States of America 306,939,000 9,826,630 km2 English
United Kingdom 61,612,300 244,820 km2 English
India 1,147,995,904 3,287,240 km2 Hindi, English
Canada 33,718,000 9,984,670 km2 English, French
Germany 82,060,000 357,021 km2 German

ZEBRA STYLE

The below exemple has the class set to ".zebra-style"

Country Population Area Official languages
United States of America 306,939,000 9,826,630 km2 English
United Kingdom 61,612,300 244,820 km2 English
India 1,147,995,904 3,287,240 km2 Hindi, English
Canada 33,718,000 9,984,670 km2 English, French
Germany 82,060,000 357,021 km2 German

ONE COLUMN STYLE

The below exemple has the class set to ".onecol-style"

Country Population Area Official languages
United States of America 306,939,000 9,826,630 km2 English
United Kingdom 61,612,300 244,820 km2 English
India 1,147,995,904 3,287,240 km2 Hindi, English
Canada 33,718,000 9,984,670 km2 English, French
Germany 82,060,000 357,021 km2 German

SIMPLE STYLE

The below exemple has the class set to ".simple-style"

Country Population Area Official languages
United States of America 306,939,000 9,826,630 km2 English
United Kingdom 61,612,300 244,820 km2 English
India 1,147,995,904 3,287,240 km2 Hindi, English
Canada 33,718,000 9,984,670 km2 English, French
Germany 82,060,000 357,021 km2 German

 

Code for table:

<table class="minimal-style">
    <thead>
        <tr>  
            <th scope="col">Country</th>
            <th scope="col">Population</th>
            <th scope="col">Area</th>
            <th scope="col">Official languages</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>United States of America</td>
            <td>306,939,000</td>
            <td>9,826,630 km2</td>
            <td>English</td>
        </tr>
        <tr>
            <td>United Kingdom</td>
            <td>61,612,300</td>
            <td>244,820 km2</td>
            <td>English</td>
        </tr>
        <tr>
            <td>India</td>
            <td>1,147,995,904</td>
            <td>3,287,240 km2</td>
            <td>Hindi, English</td>
        </tr>
        <tr>
            <td>Canada</td>
            <td>33,718,000</td>
            <td>9,984,670 km2</td>
            <td>English, French</td>
        </tr>
        <tr>
            <td>Germany</td>
            <td>82,060,000</td>
            <td>357,021 km2</td>
            <td>German</td>
        </tr>
    </tbody>
</table>

Offline Page

 

You can see a screenshot below, of how the under construction page looks like.

offline page

HISTORIC

This is a short historic of how we started this company and where are we now:

2001

The beginning of the road

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor erat viverra justo fringilla ultricies. Fusce dignissim libero in neque feugiat quis laoreet magna vulputate. Phasellus vestibulum, dolor eu molestie tincidunt, purus leo fermentum erat, vel hendrerit mauris massa sed erat.
2003

Got our first award

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor erat viverra justo fringilla ultricies. Fusce dignissim libero in neque feugiat quis laoreet magna vulputate. Phasellus vestibulum, dolor eu molestie tincidunt, purus leo fermentum erat, vel hendrerit mauris massa sed erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor erat viverra justo fringilla ultricies. Fusce dignissim libero in neque feugiat quis laoreet magna vulputate. Phasellus vestibulum, dolor eu molestie tincidunt, purus leo fermentum erat, vel hendrerit mauris massa sed erat.

2007

Merged with another company

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor erat viverra justo fringilla ultricies. Fusce dignissim libero in neque feugiat quis laoreet magna vulputate. Phasellus vestibulum, dolor eu molestie tincidunt, purus leo fermentum erat, vel hendrerit mauris massa sed erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor erat viverra justo fringilla ultricies.
Present

A very succsessful company

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor erat viverra justo fringilla ultricies. Fusce dignissim libero in neque feugiat quis laoreet magna vulputate. Phasellus vestibulum, dolor eu molestie tincidunt, purus leo fermentum erat, vel hendrerit mauris massa sed erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor erat viverra justo fringilla ultricies.

On this journey, we managed clients such as:

Code for historic:

[historic year="2001" title="Title here" order="first" direction="left"]contents here[/historic] [historic year="2002" title="Title here" direction="right"]contents here[/historic] [historic year="2003" title="Title here" order="last" direction="left"]contents here[/historic]

Mandatory: First & last historic must have the order attribute set. If not, the code will break and will not work.

 

Code for clients (remove spaces in gallery brackets):

[clients] { gallery } gallery/clients {/ gallery } [/clients]

 

  • Tweets

Please add WIDGET ID!! (Reconfigure the HG Live Social Module's settings.)