Griny

Single & Multi page theme

Get started

Columns

12
6
6
4
4
4
3
3
3
3
2
2
2
2
2
2
8
4

Color theme

Dark background

Add .dark-bg class to any element to use this (#243135) background color in the global section (or .light-bg class to use default background color #2D3E43)

Notice! If you change background color by adding .dark-bg or .light-bg, background of some features in this theme also will be inverse.

Base CSS

Typography

Simple heading:

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Add .with-border class to the heading:

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Blockquotes

h2. Heading 2

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

Lists

Unordered

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer posuere erat a ante
    • Risus et vulputate mollis
    • Massa nulla aliquam neque et vulputate mollis
  • Pellentesque ornare, risus et vulputate mollis
  • Massa nulla aliquam neque

Ordered

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer posuere erat a ante
    1. Risus et vulputate mollis
    2. Massa nulla aliquam neque et vulputate mollis
  4. Pellentesque ornare, risus et vulputate mollis
  5. Massa nulla aliquam neque

Tables

Default styles

Add .table class to any <table>.

Caption
First Name Last Name Username
Mark Otto @mdo
Jacob Thornton @fat
Larry the Bird @twitter

Hover styles

Add .table-hover to enable a hover state.

Caption
First Name Last Name Username
Mark Otto @mdo
Jacob Thornton @fat
Larry the Bird @twitter

Forms

Button colors

Disabled buttons

Button sizes

Emphasis classes

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

Text-info. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

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

Text-warning. Etiam porta sem malesuada magna mollis euismod.

Text-error. Donec ullamcorper nulla non metus auctor fringilla.

Labels

Default Info Success Warning Important Inverse

Badges

1 2 4 6 8 10

Helper classes

.section - add the top and bottom 30px margin.

.color - add a green color.

.code - wrap inline snippets of code.

.goTop - add the element to scroll top.

.parallax - add the element with background-image to create parallax effect.

.black-bg - add to fill the area small dots.

.text - add with parent .parallax class to create text in parallax section.

.toSection - add with data-section attribute to scroll to the section you need.

.text-block - need to connect the menu items with sections. Required class.

Components

Progress bar

Design

80%

Development

75%

Branding

40%

Usability

60%

Concepts

100%

Responsive video

Thumbnails

  • Linked image

  • Image with pop-up text (not on mobile devices)

    Have a question? Write!

  • Lightbox image

Pricing tables

Single purchase

$ 10 / mo

  • Single installation
  • Full Responsive
  • Parallax Effect
  • HTML5 & CSS3
  • Smooth scrolling
  • Unlimited Support
  • Bootstrap 2.3.0
Select now

Multiple purchase

$ 50 / mo

  • Multiple installation
  • Full Responsive
  • Parallax Effect
  • HTML5 & CSS3
  • Smooth scrolling
  • Unlimited Support
  • Bootstrap 2.3.0
Buy now

Extended license

$ 500 / mo

  • Unlimited installation
  • Full Responsive
  • Parallax Effect
  • HTML5 & CSS3
  • Smooth scrolling
  • Unlimited Support
  • Bootstrap 2.3.0
Select now

JavaScript

Tabs

Full Responsive

Lorem ipsum dolor sit amet, nam idque tantas vidisse ex, per ea sint explicari theophrastus, dicat tantas copiosae eam id. Id primis dolores eum. Munere sententiae vis ea. Pro dicta insolens eu, duo veniam eruditi oportere an, eum molestie salutandi in. Vix in elit legere appetere, pri in erant nonumes.

Parallax Effect

Id primis dolores eum. Munere sententiae vis ea. Vix in elit legere appetere, pri in erant nonumes.

Donec in velit vel ipsum auctor pulvinar. Vesti bulum iaculis lacinia est. Proin dictum elementum velit. Fusce euismod auctor pulvinar.

Modern Design

Donec in velit vel ipsum auctor pulvinar. Vesti bulum iaculis lacinia est. Proin dictum elementum velit. Fusce euismod auctor pulvinar.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora.

Easy Customizable

Theophrastus, dicat tantas copiosae eam id. Cum maiestatis necessitatibus ad, nam ut mutat quaestio. Id primis dolores eum. Munere sententiae vis ea. Pro dicta insolens eu, duo veniam eruditi oportere an, eum molestie salutandi in. Vix in elit legere appetere, pri in erant nonumes.

Accordion

Lorem ipsum dolor sit amet, nam idque tantas vidisse ex, per ea sint explicari theophrastus, dicat tantas copiosae eam id. Id primis dolores eum. Munere sententiae vis ea. Pro dicta insolens eu, duo veniam eruditi oportere an, eum molestie salutandi in. Vix in elit legere appetere, pri in erant nonumes.

Id primis dolores eum. Munere sententiae vis ea. Vix in elit legere appetere, pri in erant nonumes.

Donec in velit vel ipsum auctor pulvinar. Vesti bulum iaculis lacinia est. Proin dictum elementum velit. Fusce euismod auctor pulvinar.

Donec in velit vel ipsum auctor pulvinar. Vesti bulum iaculis lacinia est. Proin dictum elementum velit. Fusce euismod auctor pulvinar.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora.

Theophrastus, dicat tantas copiosae eam id. Cum maiestatis necessitatibus ad, nam ut mutat quaestio. Id primis dolores eum. Munere sententiae vis ea. Pro dicta insolens eu, duo veniam eruditi oportere an, eum molestie salutandi in. Vix in elit legere appetere, pri in erant nonumes.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora.

Carousel

Alerts

× Holy guacamole! Best check yo self, you're not looking too good.
× Inverse color! Change color according to section background.
× Heads up! This alert needs your attention, but it's not super important.
× Well done! You successfully read this important alert message.
× Oh snap! Change a few things up and try submitting again.

Oh snap! You got an error!

Change this and that and try again.

Take this action Or do this