Theme Colors

This is a list of colors used in the proposed theme:

#1abc9c
Turquoise
#16a085
Green sea
#2ecc71
Emerald
#27ae60
Nephritis
#3498db
Peter river
#2980b9
Belize hole
#9b59b6
Amethyst
#8e44ad
Wisteria
#34495e
Wet asphalt
#2c3e50
Midnight blue
#f1c40f
Sun flower
#f39c12
Orange
#e67e22
Carrot
#d35400
Pumpkin
#e74c3c
Alizarin
#c0392b
Pomegranate
#ecf0f1
Clouds
#bdc3c7
Silver
#95a5a6
Concrete
#7f8c8d
Asbestos

User Interface Elements

Main Navigation

Progress bars & Sliders



Navigational Elements

Buttons

Inputs

Select

Tag Inputs

Checkboxes

Radio Buttons

Switches

Sharing Elements

Typography

Header 1 : Showers across the W

Header 2 : Give this quartet a few

Header 3 : The Vatican transitions to a

Header 4 : Great American Bites: Telluride's Oak, The

Header 5 : Author Diane Alberts loves her some good
Header 6 : With the success of young-adult book-to-movie
Paragraph :

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Image : example-image

Note: gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Lead Text :

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Quote :

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus.

Joe Soap, Big Boss Google
Small Font :

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

rendered as bold text

rendered as italicized text

Left aligned text.

Center aligned text.

Right aligned text.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

An abbreviation of the word attribute is attr

HTML is the best thing since sliced bread.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

For example, <section> should be wrapped as inline.

<p>Sample text here...</p>

Tooltips

Text Example

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Four directions

 

 

Ajax Spinner

Spinning pencils

Icons (14)

Credit Card
Gift-Box
Spinning pencils
Clipboard
Retina
Compas
Map
Chat
Mail
Book
Calendar
Pocket
Watches
Infinity-Loop

Glyphs (70)

Social (27)

Samples

To Do list

  • Meet Adrian at 6pm

    Times Square
  • Chat with V.Kudinov

    Skype conference an 9 am
  • Watch Iron Man

    1998 Broadway
  • Fix bug on a Website

    As soon as possible

Video

Tiles

Compas

Web Oriented

100% convertable to HTML/CSS layout.

Get Pro
Infinity-Loop

Easy to Customize

Vector-based shapes and minimum of layer styles.

Get Pro
Pensils

Color Swatches

Easy to add or change elements.

Get Pro
ribbon Chat

Free for Share

Your likes, shares and comments helps us.

Get Pro

Thumbnail

Default example
Custom content
...

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

...

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

...

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Images
... ... 140x140

Forms

Basic Form

Form Legend

Example block-level help text here.

Inline Form

Horizontal form

Inputs

Static control

email@example.com

Disabled Input

Disabled fieldsets

Validation states

Control sizing

Height sizing
Form group sizing
Column sizing

Help text

A block of help text that breaks onto a new line and may extend beyond one line.

Input groups

Basic example
@
.00
$ .00
Sizing
@
@
@
@
Button addons
Buttons with dropdowns
Segmented buttons

Tagsinput

Tags Input
Tags Input Primary with typeahead functionality
Typeahead only
Typeahead with feedback icons

Huge

Default

Large

Small

Switches

Custom colors

Select

Big string
Optroups
Disabled Select
Disabled Options
Inversed Dropdown
Inversed Dropdown + Optgroups
Inversed Dropdown + Disabled Options
Visible search field
Inversed Dropdown + Visible search field
Color variants
Custom sizes
Select with .form-group


Multi select

Big string
Color variants

Checkboxes & Radio-buttons

Custom colour

Plugin methods

                   

              

Buttons

Link

Button Groups

Button dropdowns

Dropdowns

Within a navbar
Single button dropdowns
Split button dropdowns
Sizing
Dropup variation
Active item
Disabled item
Headers
Inverted Dropdown Menu
Inverted Dropdown Menu / Active item
Inverted Dropdown Menu / Disabled item
Inverted Dropdown Menu / Headers

Pagination