MAJU, CERDAS, DAN BERWIBAWA

Pages

Quisque dictum magna eu metus fringilla, in mollis tellus tempor

Login

Vivamus auctor mattis odio, et ultrices erat posuere non quisque

Contact

Vivamus auctor mattis odio, et ultrices erat posuere non quisque

Offline Page

Vivamus auctor mattis odio, et ultrices erat posuere non quisque

404 Page

Vivamus auctor mattis odio, et ultrices erat posuere non quisque

Search

Vivamus auctor mattis odio, et ultrices erat posuere non quisque

Item Page

Buttons

Large - Decor

Normal Button Primary Button

Second Button Warning Button

Danger Button Success Button

Normal - Decor

Normal Button Primary Button

Second Button Warning Button

Danger Button Success Button

Small

Normal Button Primary Button

Second Button Warning Button

Danger Button Success Button

Core Typography

Heading Text

h1. Heading Secondary text

h2. Heading Secondary text

h3. Heading Secondary text

h4. Heading Secondary text

h5. Heading Secondary text
h6. Heading Secondary text

TIPS: Create lighter, secondary text in any heading with a generic <small> tag or the .small class.

Example body text

This is a lead paragraph.
Make a paragraph stand out by adding .lead.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

The following snippet of text is rendered as bold text.

The following snippet of text is rendered as italicized text.

An abbreviation of the word attribute is attr.

Address

Company Name
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
P: (123) 456-7890
Alamat email ini dilindungi dari robot spam. Anda memerlukan Javascript yang aktif untuk melihatnya.

Emphasis classes

This is a .mute paragraph.

This is a .text-primary paragraph.

This is a .text-warning paragraph.

This is a .text-danger paragraph.

This is a .text-success paragraph.

This is a .text-info paragraph.

Alignment classes

This is a left aligned text .text-left

This is a center aligned text .text-center

This is a right aligned text .text-right

This is a justify aligned text which is often used in Book Design, Magazine or special Typo Pages. Create a justify aligned text with .text-justify class.

Blockquotes

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

Quote's author in Source Title

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

Quote's author in Source Title

Tags

hotel booking discount location map travel

Color Swatches

Brand Colors

#079aee
Brand Primary
#9aa7ae
Brand Secondary
#f0ad4e
Brand Warning
#fbe57c
Brand Danger
#5bc0de
Brand Info
#4db18d
Brand Success

Grayscale Levels

#222222
Gray Darker
#333333
Gray Dark
#555555
Gray
#9aa7ae
Gray Light
#eeeeee
Gray Lighter
#fafafa
Gray Lightest

Navigations

Tabs

In the area of graphical user interfaces (GUI), a tabbed document interface (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.

GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).

In the area of graphical user interfaces (GUI), a tabbed document interface (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.

GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).

Vertical Menus

Inputs

Indicators

Alerts and Notifications

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

Badges

Labels

Default Primary Success Info Warning Danger

Misc

Text List

  • 100 km/h in 6.1 seconds
  • max speed of 250 km/h
  • 12 litres per 100 km
  • latest safety systems
  • AIRMATIC DC air suspension
  • 100 km/h in 6.1 seconds
  • max speed of 250 km/h
  • 12 litres per 100 km
  • latest safety systems
  • AIRMATIC DC air suspension
  • 100 km/h in 6.1 seconds
  • max speed of 250 km/h
  • 12 litres per 100 km
  • latest safety systems
  • AIRMATIC DC air suspension
  • 100 km/h in 6.1 seconds
  • max speed of 250 km/h
  • 12 litres per 100 km
  • latest safety systems
  • AIRMATIC DC air suspension

List groups

  • 14 Cras justo odio
  • 2 Dapibus ac facilisis in
  • Morbi leo risus
  • 1 Morbi leo risus
  • 2 Dapibus ac facilisis in
9 Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

List group item heading

Donec id elit non mi porta gravida at eget metus risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus.

List group item heading

Donec id elit non mi porta gravida at eget metus.

Panels

Panel heading
Panel content

Panel primary

Panel content

Panel success

Panel content

Panel warning

Panel content

Panel danger

Panel content

Panel info

Panel content

Wells

Look, I'm in a small well!
Look, I'm in a well!
Look, I'm in a large well!

Ipsum Curabitur mauris Morbi elit vestibulum at at semper tellus ligula. Auctor at ipsum pede lacinia pede quis suscipit Curabitur leo at. Semper dui habitasse tortor mollis semper ornare mauris vel et at. Eros elit Nunc Nulla enim Cras id ac pellentesque fermentum eget. Pretium egestas tempus id pellentesque pellentesque turpis porttitor vitae Maecenas leo. In Proin nascetur hac nibh magnis fames.

Lacus ut augue et vitae id malesuada Donec faucibus consectetuer et. Nulla urna sed Vivamus convallis semper urna laoreet platea venenatis laoreet. Dolor et nisl sed urna eget ut wisi Aenean condimentum Nulla. Nibh augue dictumst dui nibh porttitor tellus Aliquam quis Curabitur sem. Porta accumsan scelerisque interdum et consequat.

Augue at at turpis quis metus at id pretium mollis convallis. Ut neque leo tortor augue id Nullam Lorem pulvinar consectetuer tortor. Ut lacus id leo velit dolor penatibus magnis justo ipsum Vestibulum. Auctor sagittis Vivamus gravida enim sit eleifend dui nibh eu convallis. Congue urna volutpat dis dis mus Vivamus dui sed habitant.

Eu leo fringilla est feugiat netus venenatis In mollis gravida turpis. Pulvinar nulla eu tellus platea elit pulvinar lobortis rhoncus tempus convallis. In urna eget eget consequat sed ac risus dis Ut rutrum. Tellus Nulla adipiscing nec congue tristique nonummy Lorem In euismod sapien. Magnis leo lobortis turpis nibh turpis volutpat nulla Phasellus nulla natoque. Nam nibh quis Ut semper sit sagittis adipiscing.

Turpis vitae nulla mollis cursus Vivamus ut wisi euismod nec augue. Mauris non ut neque Vestibulum malesuada quis ullamcorper cursus elit nibh. Quis eleifend nunc ligula dignissim tincidunt et fringilla Aenean volutpat Curabitur. Ipsum lobortis ipsum nec Sed tortor fringilla Vivamus quis auctor dictumst. Vivamus id Sed ac justo malesuada interdum et justo vitae at. Dictumst Nullam vitae porttitor tempor leo Nullam id mollis ornare Nulla. Tellus.

Artikel Selanjutnya...

  1. Privacy Policy
  2. Terms and Conditions
  3. 404 page
  4. Offline page