398 lines
21 KiB
Plaintext
398 lines
21 KiB
Plaintext
- var theme_customizer = true;
|
|
- var tooltip = true;
|
|
|
|
doctype html
|
|
html(lang='en')
|
|
include ../../components/header-files
|
|
body
|
|
include ../../components/loader
|
|
// page-wrapper Start
|
|
#pageWrapper.page-wrapper
|
|
include ../../components/header
|
|
// Page Body Start
|
|
.page-body-wrapper.horizontal-menu
|
|
include ../../components/sidebar
|
|
.page-body
|
|
.container-fluid
|
|
.page-header
|
|
.row
|
|
.col-sm-6
|
|
h3
|
|
| Typography
|
|
ol.breadcrumb
|
|
li.breadcrumb-item
|
|
a(href='index.html')
|
|
| Home
|
|
li.breadcrumb-item Base
|
|
li.breadcrumb-item.active Typography
|
|
.col-sm-6
|
|
include ../../components/bookmark
|
|
// Container-fluid starts
|
|
.container-fluid
|
|
.row
|
|
.col-sm-12
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Headings
|
|
span
|
|
| All HTML headings,
|
|
code <h1>
|
|
| through
|
|
code <h6>
|
|
| , are available.
|
|
.card-body.typography
|
|
.row
|
|
.col-sm-12.col-xl-6
|
|
h1 This is a Heading 1
|
|
h2 This is a Heading 2
|
|
h3 This is a Heading 3
|
|
h4 This is a Heading 4
|
|
h5 This is a Heading 5
|
|
h6 This is a Heading 6
|
|
.col-sm-12.col-xl-6
|
|
p.h1.txt-primary
|
|
| Heading 1
|
|
small Sub Heading
|
|
p.h2.txt-secondary
|
|
| Heading 2
|
|
small Sub Heading
|
|
p.h3.txt-success
|
|
| Heading 3
|
|
small Sub Heading
|
|
p.h4.txt-info
|
|
| Heading 4
|
|
small Sub Heading
|
|
p.h5.txt-warning
|
|
| Heading 5
|
|
small Sub Heading
|
|
p.h6.txt-danger
|
|
| Heading 6
|
|
small Sub Heading
|
|
.col-sm-12.col-xl-4
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Very Thin (100)
|
|
.card-body.typography
|
|
h1.f-w-100 Heading 1
|
|
h2.f-w-100 Heading 2
|
|
h3.f-w-100 Heading 3
|
|
h4.f-w-100 Heading 4
|
|
h5.f-w-100 Heading 5
|
|
h6.f-w-100 Heading 6
|
|
.col-sm-12.col-xl-4
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Thin (300)
|
|
.card-body.typography
|
|
h1.f-w-300 Heading 1
|
|
h2.f-w-300 Heading 2
|
|
h3.f-w-300 Heading 3
|
|
h4.f-w-300 Heading 4
|
|
h5.f-w-300 Heading 5
|
|
h6.f-w-300 Heading 6
|
|
.col-sm-12.col-xl-4
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Normal (400)
|
|
.card-body.typography
|
|
h1.f-w-400 Heading 1
|
|
h2.f-w-400 Heading 2
|
|
h3.f-w-400 Heading 3
|
|
h4.f-w-400 Heading 4
|
|
h5.f-w-400 Heading 5
|
|
h6.f-w-400 Heading 6
|
|
.col-sm-12.col-xl-4
|
|
.card
|
|
.card-header.pb-0
|
|
h5 light Normal (600)
|
|
.card-body.typography
|
|
h1.f-w-600 Heading 1
|
|
h2.f-w-600 Heading 2
|
|
h3.f-w-600 Heading 3
|
|
h4.f-w-600 Heading 4
|
|
h5.f-w-600 Heading 5
|
|
h6.f-w-600 Heading 6
|
|
.col-sm-12.col-xl-4
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Bold (700)
|
|
.card-body.typography
|
|
h1.f-w-700 Heading 1
|
|
h2.f-w-700 Heading 2
|
|
h3.f-w-700 Heading 3
|
|
h4.f-w-700 Heading 4
|
|
h5.f-w-700 Heading 5
|
|
h6.f-w-700 Heading 6
|
|
.col-sm-12.col-xl-4
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Extra Bold (900)
|
|
.card-body.typography
|
|
h1.f-w-900 Heading 1
|
|
h2.f-w-900 Heading 2
|
|
h3.f-w-900 Heading 3
|
|
h4.f-w-900 Heading 4
|
|
h5.f-w-900 Heading 5
|
|
h6.f-w-900 Heading 6
|
|
.col-sm-12
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Headings
|
|
span Use the included utility classes to recreate the small secondary heading text.
|
|
.card-body.typography
|
|
h3
|
|
| Fancy display heading
|
|
small.text-muted With faded secondary text
|
|
.col-sm-12
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Display headings
|
|
span
|
|
| Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a
|
|
strong display heading
|
|
| —a larger, slightly more opinionated heading style.
|
|
.card-body.typography
|
|
h1.display-1 Display 1
|
|
h1.display-2 Display 2
|
|
h1.display-3 Display 3
|
|
h1.display-4 Display 4
|
|
.col-sm-12
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Lead
|
|
span
|
|
| Make a paragraph stand out by adding
|
|
code .lead
|
|
| .
|
|
.card-body
|
|
p.lead
|
|
| Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
|
|
.col-sm-12.col-xl-6
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Inline text elements
|
|
span Styling for common inline HTML5 elements.
|
|
.card-body
|
|
p
|
|
| You can use the mark tag to
|
|
mark highlight
|
|
| text.
|
|
p
|
|
del This line of text is meant to be treated as deleted text.
|
|
p
|
|
s This line of text is meant to be treated as no longer accurate.
|
|
p
|
|
ins This line of text is meant to be treated as an addition to the document.
|
|
p
|
|
u This line of text will render as underlined
|
|
p
|
|
small This line of text is meant to be treated as fine print.
|
|
p
|
|
strong This line rendered as bold text.
|
|
p
|
|
em This line rendered as italicized text.
|
|
.col-sm-12.col-xl-6
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Text Color
|
|
span You can Give text color by using txt-* class
|
|
.card-body
|
|
p.txt-primary
|
|
| This is Primary text You can archive this adding
|
|
code .txt-primary
|
|
| class
|
|
p.txt-secondary
|
|
| This is Secondary text You can archive this adding
|
|
code .txt-secondary
|
|
| class
|
|
p.txt-success
|
|
| This is Success text You can archive this adding
|
|
code .txt-success
|
|
| class
|
|
p.txt-info
|
|
| This is Info text You can archive this adding
|
|
code .txt-info
|
|
| class
|
|
p.txt-warning
|
|
| This is Warning text You can archive this adding
|
|
code .txt-warning
|
|
| class
|
|
p.txt-danger
|
|
| This is Danger text You can archive this adding
|
|
code .txt-danger
|
|
| class
|
|
p.txt-dark
|
|
| This is Dark text You can archive this adding
|
|
code .txt-dark
|
|
| class
|
|
p.txt-primary
|
|
| This is Primary text You can archive this adding
|
|
code .txt-primary
|
|
| class
|
|
.col-sm-12.listing
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Listing Typography
|
|
.card-body
|
|
.row
|
|
.col-sm-12.col-xl-4
|
|
h6.sub-title Unorder list
|
|
ul
|
|
li Lorem ipsum dolor sit amet
|
|
li Lorem ipsum dolor sit amet
|
|
li Lorem ipsum dolor sit amet
|
|
li Lorem ipsum dolor sit amet
|
|
li Lorem ipsum dolor sit amet
|
|
li Lorem ipsum dolor sit amet
|
|
li Lorem ipsum dolor sit amet
|
|
li Lorem ipsum dolor sit amet
|
|
li Lorem ipsum dolor sit amet
|
|
li Lorem ipsum dolor sit amet
|
|
.col-sm-12.col-xl-4
|
|
h6.sub-title Order list
|
|
ol
|
|
li Lorem ipsum dolor sit amet
|
|
li Lorem ipsum dolor sit amet
|
|
li Lorem ipsum dolor sit amet
|
|
li
|
|
ol
|
|
li Lorem ipsum dolor sit amet
|
|
li Lorem ipsum dolor sit amet
|
|
li Lorem ipsum dolor sit amet
|
|
li Lorem ipsum dolor sit amet
|
|
li Lorem ipsum dolor sit amet
|
|
li Lorem ipsum dolor sit amet
|
|
li Lorem ipsum dolor sit amet
|
|
.col-sm-12.col-xl-4
|
|
h6.sub-title Order list
|
|
dl
|
|
dt Lorem ipsum dolor sit amet
|
|
dd - ipsum dolor sit amet
|
|
dt Lorem ipsum dolor sit amet
|
|
dd - ipsum dolor sit amet
|
|
dt Lorem ipsum dolor sit amet
|
|
dd - ipsum dolor sit amet
|
|
dt Lorem ipsum dolor sit amet
|
|
dd - ipsum dolor sit amet
|
|
dt Lorem ipsum dolor sit amet
|
|
dd - ipsum dolor sit amet
|
|
.col-sm-12.col-xl-4
|
|
h6.sub-title Fontawesome list
|
|
ul
|
|
li
|
|
i.fa.fa-angle-double-right.txt-primary.m-r-10
|
|
| Lorem ipsum dolor sit amet
|
|
li
|
|
i.fa.fa-angle-double-right.txt-primary.m-r-10
|
|
| Lorem ipsum dolor sit amet
|
|
li
|
|
i.fa.fa-angle-double-right.txt-primary.m-r-10
|
|
| Lorem ipsum dolor sit amet
|
|
li
|
|
i.fa.fa-angle-double-right.txt-primary.m-r-10
|
|
| Lorem ipsum dolor sit amet
|
|
li
|
|
i.fa.fa-angle-double-right.txt-primary.m-r-10
|
|
| Lorem ipsum dolor sit amet
|
|
li
|
|
i.fa.fa-angle-double-right.txt-primary.m-r-10
|
|
| Lorem ipsum dolor sit amet
|
|
li
|
|
i.fa.fa-angle-double-right.txt-primary.m-r-10
|
|
| Lorem ipsum dolor sit amet
|
|
li
|
|
i.fa.fa-angle-double-right.txt-primary.m-r-10
|
|
| Lorem ipsum dolor sit amet
|
|
.col-sm-12.col-xl-4
|
|
h6.sub-title ICO Icon list
|
|
ul
|
|
li
|
|
i.fa.fa-caret-right.txt-secondary.m-r-10
|
|
| Lorem ipsum dolor sit amet
|
|
li
|
|
i.fa.fa-caret-right.txt-secondary.m-r-10
|
|
| Lorem ipsum dolor sit amet
|
|
li
|
|
i.fa.fa-caret-right.txt-secondary.m-r-10
|
|
| Lorem ipsum dolor sit amet
|
|
li
|
|
i.fa.fa-caret-right.txt-secondary.m-r-10
|
|
| Lorem ipsum dolor sit amet
|
|
li
|
|
i.fa.fa-caret-right.txt-secondary.m-r-10
|
|
| Lorem ipsum dolor sit amet
|
|
li
|
|
i.fa.fa-caret-right.txt-secondary.m-r-10
|
|
| Lorem ipsum dolor sit amet
|
|
li
|
|
i.fa.fa-caret-right.txt-secondary.m-r-10
|
|
| Lorem ipsum dolor sit amet
|
|
li
|
|
i.fa.fa-caret-right.txt-secondary.m-r-10
|
|
| Lorem ipsum dolor sit amet
|
|
.col-sm-12.col-xl-4
|
|
h6.sub-title Themfy list
|
|
ul
|
|
li
|
|
i.icofont.icofont-ui-rate-add.txt-success.m-r-10
|
|
| Lorem ipsum dolor sit amet
|
|
li
|
|
i.icofont.icofont-ui-rate-add.txt-success.m-r-10
|
|
| Lorem ipsum dolor sit amet
|
|
li
|
|
i.icofont.icofont-ui-rate-add.txt-success.m-r-10
|
|
| Lorem ipsum dolor sit amet
|
|
li
|
|
i.icofont.icofont-ui-rate-add.txt-success.m-r-10
|
|
| Lorem ipsum dolor sit amet
|
|
li
|
|
i.icofont.icofont-ui-rate-add.txt-success.m-r-10
|
|
| Lorem ipsum dolor sit amet
|
|
li
|
|
i.icofont.icofont-ui-rate-add.txt-success.m-r-10
|
|
| Lorem ipsum dolor sit amet
|
|
li
|
|
i.icofont.icofont-ui-rate-add.txt-success.m-r-10
|
|
| Lorem ipsum dolor sit amet
|
|
li
|
|
i.icofont.icofont-ui-rate-add.txt-success.m-r-10
|
|
| Lorem ipsum dolor sit amet
|
|
.col-sm-12
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Blockquotes
|
|
span
|
|
| Add a
|
|
code <footer class="blockquote-footer">
|
|
| for identifying the source. Wrap the name of the source work in
|
|
code <cite>
|
|
| .
|
|
.card-body
|
|
p.sub-title Naming a source
|
|
.figure.d-block
|
|
blockquote.blockquote
|
|
p.mb-0
|
|
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
|
|
.blockquote-footer
|
|
| Someone famous in
|
|
cite(title='Source Title') Source Title
|
|
p.sub-title Alignment Center
|
|
.figure.text-center.d-block
|
|
blockquote.blockquote
|
|
p.mb-0
|
|
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
|
|
.blockquote-footer
|
|
| Someone famous in
|
|
cite(title='Source Title') Source Title
|
|
p.sub-title Alignment Right
|
|
.figure.text-end.d-block
|
|
blockquote.blockquote
|
|
p.mb-0
|
|
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
|
|
.blockquote-footer
|
|
| Someone famous in
|
|
cite(title='Source Title') Source Title
|
|
// Container-fluid Ends
|
|
include ../../components/footer
|
|
include ../../components/footer-files
|