typography

General Elements

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
  • Bullet List 1
    • Bullet List 1.1
    • Bullet List 1.2
    • Bullet List 1.3
    • Bullet List 1.4
  • Bullet List 2
  • Bullet List 3
  • Bullet List 4
  1. Number List 1
    1. Number List 1.1
    2. Number List 1.2
    3. Number List 1.3
    4. Number List 1.4
  2. Number List 2
  3. Number List 3
  4. Number List 4
Definition title dt
Defination description dd
Definition title dt
Defination description dd

Code tag: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

block quote Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

element with class .f-left
element with class .f-right

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tables

Table with class .data-table

THEAD THTHEAD THTHEAD THTHEAD THTHEAD TH
TBODY TDTBODY TDTBODY TDTBODY TDTBODY TD
TBODY TDTBODY TDTBODY TDTBODY TDTBODY TD
TBODY TDTBODY TDTBODY TDTBODY TDTBODY TD

 

Custom CSS Classes

tag small and class .small

element with class .underline

Custom CSS Classes Color

element with class .normal

element with class .primary

element with class .secondary

element with class .secondary2

element with class .secondary3

ul.none and ol.none:

  • Bullet List 1
    • Bullet List 1.1
    • Bullet List 1.2
    • Bullet List 1.3
    • Bullet List 1.4
  • Bullet List 2
  • Bullet List 3
  • Bullet List 4

ul.hoz and ol.hoz:

  • Bullet List 1
  • Bullet List 2
  • Bullet List 3
  • Bullet List 4

paragraph with class .box:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Paragraph with class .bottom always has margin-bottom = 0.

Available classes

se a single or combination of the available classes for toggling content across viewport breakpoints.

 Extra small devices Phones (<768px)Small devices Tablets (=768px)Medium devices Desktops (=992px)Large devices Desktops (=1200px)
.visible-xs-*Visible
.visible-sm-*Visible
.visible-md-*Visible
.visible-lg-*Visible
.hidden-xsVisibleVisibleVisible
.hidden-smVisibleVisibleVisible
.hidden-mdVisibleVisibleVisible
.hidden-lgVisibleVisibleVisible

 

Font Icons - Font Awesome

Call

 

<span class="fa fa-phone"></span>

Special Deals

 

<span class="fa fa-tag"></span>

Customer Support

 

<span class="fa fa-life-ring"></span>

Login

 

<span class="fa fa-user"></span>

Search

 

<span class="fa fa-search"></span>

Cart

 

<span class="fa fa-shopping-cart"></span>

Wishlist

 

<span class="fa fa-heart"></span>

Compare

 

<span class="fa fa-exchange"></span>

Address

 

<span class="fa fa-map-marker"></span>

Phone

 

<span class="fa fa-phone"></span>

Fax

 

<span class="fa fa-fax"></span>

Email

 

<span class="fa fa-envelope"></span>

Facebook

 

<span class="fa fa-facebook"></span>

Twitter

 

<span class="fa fa-twitter"></span>

Rss

 

<span class="fa fa-rss"></span>

Pinterest

 

<span class="fa fa-pinterest"></span>

Google Plus

 

<span class="fa fa-google-plus"></span>

Vimeo

 

<span class="fa fa-vimeo-square"></span>

Youtube

 

<span class="fa fa-youtube-play"></span>

 

Examples use font icons

Facebook

 

You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the tag for brevity, but using a is more semantically correct).

<span class="fa fa-facebook-square"></span> fa-facebook-square

If you change the font-size of the icon's container, the icon gets bigger. Same things goes for color, drop shadow, and anything else that gets inherited using CSS.

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.

<span class="fa fa-facebook-square fa-lg"></span> fa-lg
<span class="fa fa-facebook-square fa-2x"></span> fa-2x
<span class="fa fa-facebook-square fa-3x"></span> fa-3x
<span class="fa fa-facebook-square fa-4x"></span> fa-4x
<span class="fa fa-facebook-square fa-5x"></span> fa-5x

 

Logo

.em-payment-icon.em-visa

a.em-payment-icon.em-visa

.em-payment-icon.em-master

a.em-payment-icon.em-master

.em-payment-icon.em-express

a.em-payment-icon.em-express

.em-payment-icon.em-paypal

a.em-payment-icon.em-paypal

.em-payment-icon.em-other

a.em-payment-icon.em-other

 

Label

.label.new

  • New

.label.hot

  • Hot

.label.special

  • Sale

 

image with class .img-responsive:

image with class .img-responsive

La beaute est dans la nature

em_ads_05.jpg

NOUVEAU

12 MAGNIFIQUES PINCEAUX DE MAQUILLAGE

Découvrez la magnifique et incroyable collection de pinceaux spécialement imaginée et créée par Dorothy Roffat. Luxueux, précieux, beaux et écologiques, ces pinceaux sont issus d'un assemblage de Bambous dans leur état naturel, de poils en fibres naturelles et de poils synthétiques. Pour une finition parfaite de votre maquillage, procurez-vous les essentiels pour le visage, les yeux et les lèvres. Avis à tous les maquilleurs et amoureux de beaux makeup, illuminé votre KIT avec ces pinceaux Haute Couture.

Plus d'info

em_ads_06.jpg

POUDRE PRESSEE

 

15 NUANCES DE POUDRES COMPACTES

Légères et soyeuses, les poudres compactes Inception sont issues d'une formulation nouvelle génération. Elles se portent seules ou mieux encore sur le font de teint fluide Inception pour une finition de maquillage sophistiquée. Les poudres de la gamme Inception, qu'elles soient compactes ou libres, caresseront votre peau pour illuminer votre teint et donner un effet de finition naturel et mat.

Voir plus