Quality Exercise Equipment for
Your Home or Business

search

Typography

You can create some beautiful content by using some simple HTML elements. Mj Simple template offers some neat styles for all HTML elements and a great set of CSS classes to style your content. Basic HTML is very easy to learn and this small guide shows you how to use all styles provided by the Mj Simple theme.

Basic HTML Elements

Here is a short demonstration of text-level semanticts. The <p> element creates a new paragraph. It will have some space before and after itself. To turn your text into hypertext just use the <a> element.

Text-level semantics

You can emphasize text using the <em>element or to imply any extra importance the <strong>element. Highlight text with no semantic meaning using the [mark] element[/mark]. Markup document changes like inserted or deleted text with the [del]element[/del] or [ins]element[/ins]. To define an abbreviation use the [abbr] element [/abbr] and to define a definition term use the [dfn]element[/dfn].

Simple Unordered List

  • Lorem ipsum dolor mj-bullet1
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

  • Lorem ipsum dolor mj-bullet2
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

  • Lorem ipsum dolor mj-bullet3
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

  • Lorem ipsum dolor mj-bullet4
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

  • Lorem ipsum dolor mj-bullet5
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

  • Lorem ipsum dolor mj-bullet6
  • consectetur adipisicing elit
  • sed do eiusmod tempor
  • Lorem ipsum dolor mj-bullet7
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

  • Lorem ipsum dolor mj-bullet8
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

  • Lorem ipsum dolor mj-bullet9
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

  • Lorem ipsum dolor mj-bullet10
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

  • Lorem ipsum dolor mj-bullet11
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

  • Lorem ipsum dolor mj-bullet12
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

To use the bullet list style create a list in the following format

[list mj-bullet-1][li]...[/li][li]...[/li][/list]

 

Special Unordered List

  • Lorem ipsum dolor mj-special1
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

  • Lorem ipsum dolor mj-special2
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

  • Lorem ipsum dolor mj-special3
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

  • Lorem ipsum dolor mj-special4
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

  • Lorem ipsum dolor mj-special5
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

  • Lorem ipsum dolor mj-special6
  • consectetur adipisicing elit
  • sed do eiusmod tempor
  • Lorem ipsum dolor mj-special7
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

  • Lorem ipsum dolor mj-special8
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

  • Lorem ipsum dolor bullet-9
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

  • Lorem ipsum dolor mj-special10
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

  • Lorem ipsum dolor mj-special11
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

  • Lorem ipsum dolor mj-special12
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

To use the special list style create a list in the following format

[list mj-special-1][li]...[/li][li]...[/li][/list]

 

Content Highlighter

Drop caps are the first letter of a paragraph which are displayed bigger than the rest of the text. You can create a drop cap using the CSS class dropcap. To emphasize text with some small boxes use <em> element with the CSS class box.

This simple box is intended to group large parts of your content using the CSS class [mj-boxcontent]…[/box].
This simple box is intended to group large parts of your content using the CSS class [mj-boxnote]…[/box].
This simple box is intended to group large parts of your content using the CSS class [mj-boxinfo]…[/box].
This simple box is intended to group large parts of your content using the CSS class [mj-box-fail]…[/box].
This simple box is intended to group large parts of your content using the CSS class [mj-boxhint]…[/box].
This simple box is intended to group large parts of your content using the CSS class [mj-box-success]…[/box].

 

Tables

Table Heading Table Heading Table Heading
Table Footer Table Footer Table Footer
Table Data Table Data Data Centered
Data Bold Table Data Data Centered
Table Data Table Data Data Centered
Data Bold Table Data Data Centered

 

Tabs Module

Tab1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa.

Tab2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa.

Tab3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa.

Tab4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa.

Syntax for tab

<section class=”tabshr”>
<input id=”tab-1″ type=”radio” name=”radio-set” class=”tab-selector-1″ checked=”checked”/>
<label for=”tab-1″ class=”tab-label-1″>About</label>
<input id=”tab-2″ type=”radio” name=”radio-set” class=”tab-selector-2″ />
<label for=”tab-2″ class=”tab-label-2″>Services</label>
<input id=”tab-3″ type=”radio” name=”radio-set” class=”tab-selector-3″ />
<label for=”tab-3″ class=”tab-label-3″>Work</label>
<input id=”tab-4″ type=”radio” name=”radio-set” class=”tab-selector-4″ />
<label for=”tab-4″ class=”tab-label-4″>Contact</label>
<div class=”clear-shadow”></div>
<div class=”content”>
<div class=”content-1″>
<h3>About us</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa.</p>
</div>
<div class=”content-2″>
<h3>Services</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa.</p>
</div>
<div class=”content-3″>
<h3>Work</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa.</p>
</div>
<div class=”content-4″>
<h3>Contact</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa.</p>
</div>
</div>
</section>

 

Accordion Module

Toggles are a nice way to minimize hidden sections on a page by only showing titles of the hidden text while maximizing on space. This allows the user to only view what he/she is interested in with a sleek slide down/up of the hidden content. A good example on how to use them is FAQs.

Accordian Open

<div id=”accordion-container”>

<h2 class=”accordion-header”>Accordian </h2>
<div class=”accordion-content”>
<p>demo</p>
</div>
</div>

Accordian Close

Accordian Close

BLOCK NUMBERS

1Tempor invidunt ut labore et dolore magna aliquyam erat.
2Tempor invidunt ut labore et dolore magna aliquyam erat.
3Tempor invidunt ut labore et dolore magna aliquyam erat.

Syntax:

[mj-block-number]
[mj-digit]{number}[mj-digit]
[mj-bottom] [/mj-bottom]
[/mj-block-number]

EVENTS

03
dec

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

03
jan

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

03
apr

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Syntax:

[mj-event]
[mj-event-time]
[mj-date] your date[/mj-date]
[mj-month] your month[/mj-month]
[/mj-event-time]
Your Description
[/mj-event]

SIMPLE ORDERED LIST

  1. Lorem ipsum is dolor sit amet.
  2. Lorem ipsum is dolor sit amet.
  3. Lorem ipsum is dolor sit amet.
  4. Lorem ipsum is dolor sit amet.

BUTTON VARIATIONS

White Button

White Button

[mj-whitebutton href="#"]
button text[/button]

Simple Button

Simple Button

[mj-simplebutton href="#"]
button text[/button]

Color Button

Color Button

[button href="#"]
button text
[/button]

DEFAULT HEADINGS

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

DOTTED LINE HEADINGS

H1 with a dotted line

H2 with a dotted line

H3 with a dotted line

H4 with a dotted line

H5 with a dotted line
H6 with a dotted line