Amazium Examples

This page is just an example to get you started in building your own awesome responsive website..!

960 1200 Grid

Offsetting columns

Typography & Bullets

This paragraph is using a class called .intro which makes the font-size & line-height 130% and is perfect introduction text that doesn't need to be a H1.

This is a Button..!

<strong> This text is rendered as bold.

<em> This text is rendered as italicized.

<small> This text is rendered for fine print.

<sup> This text is rendered as ^Superscript

<sub> This text is rendered as _Subscript

.highlight This text is Highlighted

Normal Bullets (Custom Image)

• Cras mattis consectetur purus sit amet fermentum.
• Donec ullamcorper nulla non metus auctor fringilla.
  • Aenean eu leo quam.
  • Pellentesque ornare sem lacinia quam venenatis vestibulum.
  • Nullam quis risus eget urna mollis ornare vel eu leo.
• Maecenas sed diam eget risus varius blandit sit amet non magna.

For standard <ul> bullet ponts ive replace the normal dot with a graphic which can be changes easily

<ul>
<li>Your text here</li>
</ul>

Ordered Bullets

1. Cras mattis consectetur purus sit amet fermentum.
2. Donec ullamcorper nulla non metus auctor fringilla.
   1. Aenean eu leo quam.
   2. Pellentesque ornare sem lacinia quam venenatis vestibulum.
   3. Nullam quis risus eget urna mollis ornare vel eu leo.
3. Maecenas sed diam eget risus varius blandit sit amet non magna.

As with <ul> the ordered lists <ol> have had some extra CSS added to them so they are that little bit nicer to look at.

<ol>
<li>Your text here</li>
</ol>

Round Bullets

• Cras mattis consectetur purus sit amet fermentum.
• Donec ullamcorper nulla non metus auctor fringilla.
  • Aenean eu leo quam.
  • Pellentesque ornare sem lacinia quam venenatis vestibulum.
  • Nullam quis risus eget urna mollis ornare vel eu leo.
• Maecenas sed diam eget risus varius blandit sit amet non magna.

For circular bullet point all you need to do is add the class .circle to the <ul>

<ul class="circle">
<li>Your text here</li>
</ul>

Square Bullets

• Cras mattis consectetur purus sit amet fermentum.
• Donec ullamcorper nulla non metus auctor fringilla.
  • Aenean eu leo quam.
  • Pellentesque ornare sem lacinia quam venenatis vestibulum.
  • Nullam quis risus eget urna mollis ornare vel eu leo.
• Maecenas sed diam eget risus varius blandit sit amet non magna.

For square bullet point all you need to do is add the class .square to the <ul>

<ul class="square">
<li>Your text here</li>
</ul>

Forms & Tables