Components

[themegasm_masonry] [themegasm_masonry_item] [themegasm_box]

Typography

[themegasm_hr shape=’dashed’ color=’#ccc’ margin=’40’ full_width=’true’][/themegasm_hr]

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.

[themegasm_highlight colorize=’text’]This is a highlighted text [/themegasm_highlight] tags morbi tristique senectus et netus et malesuada This is between tags. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. [themegasm_abbr title=’World Health Organization’]WHO[/themegasm_abbr] eu libero sit amet quam egestas semper, [themegasm_highlight]this a highlighted text.[/themegasm_highlight]

This is an H1 heading

This is an H2 heading

This is an H3 heading

This is an H4 heading

This is an H5 heading

This is an H6 heading

[themegasm_hr shape=’dashed’ color=’#ccc’ margin=’40’][/themegasm_hr]

I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur. Isaac Asimov

[themegasm_hr shape=’dashed’ color=’#ccc’ margin=’40’][/themegasm_hr]

HR Lines

[themegasm_hr shape=’solid’ color=’#ccc’ margin=’40’][/themegasm_hr] [themegasm_hr shape=’dashed’ color=’#ccc’ margin=’40’][/themegasm_hr] [themegasm_hr shape=’dotted’ color=’#ccc’ margin=’40’][/themegasm_hr] [themegasm_hr shape=’solid’ thickness=’thick’ color=’#ccc’ margin=’40’][/themegasm_hr] [themegasm_hr shape=’dashed’ thickness=’thick’ color=’#ccc’ margin=’40’][/themegasm_hr] [themegasm_hr shape=’dotted’ thickness=’thick’ color=’#ccc’ margin=’40’][/themegasm_hr] [themegasm_hr shape=’dashed’ color=’#ccc’ margin=’40’][/themegasm_hr]

Lists

[themegasm_row] [themegasm_column columns=’6′]

Disc List

[themegasm_list]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id volutpat quam.
Pellentesque vulputate eros nunc, eget lacinia nisl tempor consectetur.
Morbi lobortis lacus sed ligula iaculis tristique.

[/themegasm_list] [/themegasm_column] [themegasm_column columns=’6′]

Square List

[themegasm_list style=’square’]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id volutpat quam.
Pellentesque vulputate eros nunc, eget lacinia nisl tempor consectetur.
Morbi lobortis lacus sed ligula iaculis tristique.

[/themegasm_list] [/themegasm_column] [themegasm_column columns=’6′]

Circle List

[themegasm_list style=’circ’]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id volutpat quam.
Pellentesque vulputate eros nunc, eget lacinia nisl tempor consectetur.
Morbi lobortis lacus sed ligula iaculis tristique.

[/themegasm_list] [/themegasm_column] [themegasm_column columns=’6′]

Ordered List

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id volutpat quam.
Pellentesque vulputate eros nunc, eget lacinia nisl tempor consectetur.
Morbi lobortis lacus sed ligula iaculis tristique.

[/themegasm_column] [themegasm_column columns=’12’]

Big Orderes List

[themegasm_list style=’big_ol’]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id volutpat quam.
Pellentesque vulputate eros nunc, eget lacinia nisl tempor consectetur.
Morbi lobortis lacus sed ligula iaculis tristique.

[/themegasm_list] [/themegasm_column] [/themegasm_row] [/themegasm_box] [/themegasm_masonry_item] [themegasm_masonry_item] [themegasm_box]

Buttons

[themegasm_hr shape=’dashed’ color=’#ccc’ margin=’40’ full_width=’true’][/themegasm_hr] [themegasm_button]Small Button[/themegasm_button]

[themegasm_button size=’medium’]medium Button[/themegasm_button]

[themegasm_button size=’large’]large Button[/themegasm_button]

[themegasm_button size=’large’ rounded=’true’]Rounded large Button[/themegasm_button]

[themegasm_button size=’large’ full_width=’true’]Full width large Button[/themegasm_button]

[themegasm_button style=’empty’]Small Button[/themegasm_button]

[themegasm_button style=’empty’ size=’medium’]medium Button[/themegasm_button]

[themegasm_button style=’empty’ size=’large’]large Button[/themegasm_button]

[themegasm_button style=’empty’ size=’large’ rounded=’true’]Rounded large Button[/themegasm_button]

[themegasm_button style=’empty’ size=’large’ full_width=’true’]Full width large Button[/themegasm_button]

[themegasm_button style=’embossed’]Small Button[/themegasm_button]

[themegasm_button style=’embossed’ size=’medium’]medium Button[/themegasm_button]

[themegasm_button style=’embossed’ size=’large’]large Button[/themegasm_button]

[themegasm_button style=’embossed’ size=’large’ full_width=’true’]Full width large Button[/themegasm_button]

[themegasm_hr shape=’dotted’ color=’#ccc’ margin=’40’][/themegasm_hr]

Colors

*All variations above are available with these colors

[themegasm_button style=’embossed’ color=’pink’]Small Embossed Button[/themegasm_button]

[themegasm_button style=’embossed’ color=’blue’]Small Embossed Button[/themegasm_button]

[themegasm_button style=’embossed’ color=’green’]Small Embossed Button[/themegasm_button]

[themegasm_button style=’embossed’ color=’purple’]Small Embossed Button[/themegasm_button]

[themegasm_button style=’embossed’ color=’red’]Small Embossed Button[/themegasm_button]

[themegasm_button style=’embossed’ color=’white’]Small Embossed Button[/themegasm_button]

[themegasm_button style=’embossed’ color=’black’]Small Embossed Button[/themegasm_button] [/themegasm_box] [/themegasm_masonry_item] [themegasm_masonry_item] [themegasm_box]

Boxes

[themegasm_hr shape=’dashed’ color=’#ccc’ margin=’40’ full_width=’true’][/themegasm_hr] [themegasm_alert type=’error’]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/themegasm_alert] [themegasm_alert type=’warning’]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/themegasm_alert] [themegasm_alert type=’success’]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/themegasm_alert] [themegasm_alert]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/themegasm_alert] [/themegasm_box] [/themegasm_masonry_item] [themegasm_masonry_item] [themegasm_box]

Icons

[themegasm_hr shape=’dashed’ color=’#ccc’ margin=’40’ full_width=’true’][/themegasm_hr]

Any shape, any size, any colors with just simple editing using HTML5 data-* attributes

Options Available:

Shape: The shape of the icon background. (circle or square)
Radius: The radius of the circle or the dimensions of the square.
Size: Size of the icon itself.
Duration: The duration of the hover effect animation.
Background: The duration of the hover effect animation.
Color: The duration of the hover effect animation.
Background Hover: The duration of the hover effect animation.
Color Hover: The duration of the hover effect animation.

[themegasm_hr shape=’dashed’ color=’#ccc’ margin=’40’ full_width=’true’][/themegasm_hr]

Examples:

[themegasm_row] [themegasm_column columns=’3′ always_padd=’true’ align=’center’] [themegasm_icon icon=’icon-heart-1′ background_shape=’circle’ background_radius=’41’ size=’30’ background_color=’#dd3333′ background_hover=’#ffffff’ icon_color=’#ffffff’ icon_hover=’#dd3333′][/themegasm_icon][/themegasm_column] [themegasm_column columns=’3′ always_padd=’true’ align=’center’] [themegasm_icon icon=’icon-glass’ background_shape=’circle’ size=’30’ background_color=’#81d742′ background_hover=’#2a8427′ icon_color=’#ffffff’][/themegasm_icon] [/themegasm_column] [themegasm_column columns=’3′ always_padd=’true’ align=’center’] [themegasm_icon icon=’icon-camera-1′ background_shape=’square’ size=’30’ background_color=’#424242′ background_hover=’#5dbdd3′ icon_color=’#ffffff’ icon_hover=’#ffffff’][/themegasm_icon] [/themegasm_column] [themegasm_column columns=’3′ always_padd=’true’ align=’center’] [themegasm_icon icon=’icon-location-1′ background_shape=’circle’ background_radius=’20’ size=’20’ background_color=’#8224e3′ background_hover=’#e2e2e2′ icon_color=’#ffffff’ icon_hover=’#353535′][/themegasm_icon] [/themegasm_column] [/themegasm_row]

[/themegasm_box] [/themegasm_masonry_item] [themegasm_masonry_item] [themegasm_box]

Progress Bars

[themegasm_hr shape=’dashed’ color=’#ccc’ margin=’40’ full_width=’true’][/themegasm_hr] [themegasm_bar title=’Web Design’ progress=’100′ style=’big’ foreground_color=’rgb(184, 113, 155)’ background_color=’#ccc’ text_color=’#fff’][/themegasm_bar]

[themegasm_bar title=’HTML/CSS’ progress=’90’ foreground_color=’#89cfcf’ background_color=’#ccc’ text_color=’#fff’][/themegasm_bar]

[themegasm_bar title=’Javascript’ progress=’80’ foreground_color=’rgb(104, 146, 165)’ background_color=’#ccc’ text_color=’#fff’][/themegasm_bar]

[themegasm_bar title=’PHP’ progress=’40’ foreground_color=’#9acc86′ background_color=’#ccc’ text_color=’#fff’][/themegasm_bar]

[themegasm_bar title=’Flash’ progress=’20’ foreground_color=’#353535′ background_color=’#ccc’ text_color=’#fff’][/themegasm_bar] [themegasm_hr thickness=’thick’ color=’#ccc’][/themegasm_hr] [themegasm_bar title=’Web Design’ progress=’100′ style=’small’ foreground_color=’rgb(184, 113, 155)’ background_color=’#ccc’ text_color=’#fff’][/themegasm_bar]

[themegasm_bar title=’HTML/CSS’ progress=’90’ style=’small’ foreground_color=’#89cfcf’ background_color=’#ccc’ text_color=’#fff’][/themegasm_bar]

[themegasm_bar title=’Javascript’ progress=’80’ style=’small’ foreground_color=’rgb(104, 146, 165)’ background_color=’#ccc’ text_color=’#fff’][/themegasm_bar]

[themegasm_bar title=’PHP’ progress=’40’ style=’small’ foreground_color=’#9acc86′ background_color=’#ccc’ text_color=’#fff’][/themegasm_bar]

[themegasm_bar title=’Flash’ progress=’20’ style=’small’ foreground_color=’#353535′ background_color=’#ccc’ text_color=’#fff’][/themegasm_bar] [/themegasm_box] [/themegasm_masonry_item] [themegasm_masonry_item] [themegasm_box]

Animated Counters

[themegasm_hr shape=’dashed’ color=’#ccc’ margin=’40’ full_width=’true’][/themegasm_hr] [themegasm_row] [themegasm_column columns=’4′ always_padd=’true’] [themegasm_counter number=’170′]

Burgers Swallowed

[/themegasm_counter] [/themegasm_column] [themegasm_column columns=’4′ always_padd=’true’] [themegasm_counter number=’39’]

Cokes Sipped

[/themegasm_counter] [/themegasm_column] [themegasm_column columns=’4′ always_padd=’true’] [themegasm_counter number=’40’ prefix=’K’]

Calories gained

[/themegasm_counter] [/themegasm_column] [themegasm_column columns=’12’ always_padd=’true’] [themegasm_counter number=’70’ prefix=’%’ font_size=’72’]

of us died

[/themegasm_counter] [/themegasm_column] [/themegasm_row] [/themegasm_box] [/themegasm_masonry_item] [themegasm_masonry_item] [themegasm_box]

Tabs & Accordions

[themegasm_hr shape=’dashed’ color=’#ccc’ margin=’40’ full_width=’true’][/themegasm_hr] [themegasm_tabs] [themegasm_tab title=’Tab 1′]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed sagittis felis, sit amet tincidunt turpis. Aenean fermentum leo eget orci adipiscing, ac rhoncus sem accumsan.[/themegasm_tab] [themegasm_tab title=’Tab 2′]Vestibulum porta dolor a venenatis faucibus. Vestibulum blandit lorem velit, et placerat risus consequat in.[/themegasm_tab] [themegasm_tab title=’Tab 3′]uis eu velit ultrices, consectetur dolor sit amet, blandit nibh. Nunc sapien mi, lobortis ac orci quis, vulputate ullamcorper tortor. Ut tincidunt massa orci, et bibendum orci convallis in. Nullam sit amet elit eu lectus adipiscing scelerisque.[/themegasm_tab] [/themegasm_tabs] [themegasm_hr shape=’dotted’ color=’#ccc’][/themegasm_hr] [themegasm_tabs type=’vertical’] [themegasm_tab title=’Tab 1′]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed sagittis felis, sit amet tincidunt turpis. Aenean fermentum leo eget orci adipiscing, ac rhoncus sem accumsan.[/themegasm_tab] [themegasm_tab title=’Tab 2′]Vestibulum porta dolor a venenatis faucibus. Vestibulum blandit lorem velit, et placerat risus consequat in.[/themegasm_tab] [themegasm_tab title=’Tab 3′]uis eu velit ultrices, consectetur dolor sit amet, blandit nibh. Nunc sapien mi, lobortis ac orci quis, vulputate ullamcorper tortor. Ut tincidunt massa orci, et bibendum orci convallis in. Nullam sit amet elit eu lectus adipiscing scelerisque.[/themegasm_tab] [/themegasm_tabs] [themegasm_hr shape=’dotted’ color=’#ccc’][/themegasm_hr] [themegasm_tabs type=’accordion’] [themegasm_tab title=’Tab 1′]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed sagittis felis, sit amet tincidunt turpis. Aenean fermentum leo eget orci adipiscing, ac rhoncus sem accumsan.[/themegasm_tab] [themegasm_tab title=’Tab 2′]Vestibulum porta dolor a venenatis faucibus. Vestibulum blandit lorem velit, et placerat risus consequat in.[/themegasm_tab] [themegasm_tab title=’Tab 3′]uis eu velit ultrices, consectetur dolor sit amet, blandit nibh. Nunc sapien mi, lobortis ac orci quis, vulputate ullamcorper tortor. Ut tincidunt massa orci, et bibendum orci convallis in. Nullam sit amet elit eu lectus adipiscing scelerisque.[/themegasm_tab] [/themegasm_tabs] [/themegasm_box] [/themegasm_masonry_item] [themegasm_masonry_item] [themegasm_box]

Sliders

[themegasm_hr shape=’dashed’ color=’#ccc’ margin=’40’ full_width=’true’][/themegasm_hr] [themegasm_slider pager=’true’] [themegasm_slide image=’http://pierre-beccu.fr/test/files/2014/03/pf_11.jpg’ caption=’Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id cursus nulla, vel lacinia augue. Donec egestas viverra odio in imperdiet. Aliquam erat volutpat. Morbi volutpat tempor nibh, eu imperdiet nunc pretium sit amet’ caption_background=’rgba(#000,0.5)’ caption_color=’#fff’][/themegasm_slide] [themegasm_slide image=’http://pierre-beccu.fr/test/files/2014/03/pf_91.jpg’ caption=’Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at velit id leo posuere lacinia dapibus ut quam. Cras sit amet pulvinar odio, ac malesuada ligula.’ caption_background=’#dd3333′ caption_color=’rgb(255, 255, 255)’][/themegasm_slide] [themegasm_slide image=’http://pierre-beccu.fr/test/files/2014/03/pf_8.jpg’ caption=’Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id cursus nulla, vel lacinia augue. Donec egestas viverra odio in imperdiet’ caption_background=’rgba(#000,0.5)’ caption_color=’#fff’][/themegasm_slide] [themegasm_slide image=’http://pierre-beccu.fr/test/files/2014/03/pf_14.jpg’ caption=’Donec egestas viverra odio in imperdiet. Aliquam erat volutpat. Morbi volutpat tempor nibh, eu imperdiet nunc pretium sit amet’ caption_background=’rgba(#000,0.5)’ caption_color=’#fff’][/themegasm_slide] [/themegasm_slider]

[themegasm_slider mode=’vertical’] [themegasm_slide image=’http://pierre-beccu.fr/test/files/2014/03/pf_11.jpg’ caption=’Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id cursus nulla, vel lacinia augue. Donec egestas viverra odio in imperdiet. Aliquam erat volutpat. Morbi volutpat tempor nibh, eu imperdiet nunc pretium sit amet’ caption_background=’rgba(#000,0.5)’ caption_color=’#fff’][/themegasm_slide] [themegasm_slide image=’http://pierre-beccu.fr/test/files/2014/03/pf_91.jpg’ caption=’Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at velit id leo posuere lacinia dapibus ut quam. Cras sit amet pulvinar odio, ac malesuada ligula.’ caption_background=’#dd3333′ caption_color=’rgb(255, 255, 255)’][/themegasm_slide] [themegasm_slide image=’http://pierre-beccu.fr/test/files/2014/03/pf_8.jpg’ caption=’Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id cursus nulla, vel lacinia augue. Donec egestas viverra odio in imperdiet’ caption_background=’rgba(#000,0.5)’ caption_color=’#fff’][/themegasm_slide] [themegasm_slide image=’http://pierre-beccu.fr/test/files/2014/03/pf_14.jpg’ caption=’Donec egestas viverra odio in imperdiet. Aliquam erat volutpat. Morbi volutpat tempor nibh, eu imperdiet nunc pretium sit amet’ caption_background=’rgba(#000,0.5)’ caption_color=’#fff’][/themegasm_slide] [/themegasm_slider] [/themegasm_box] [/themegasm_masonry_item] [/themegasm_masonry]