362 lines
16 KiB
Plaintext
362 lines
16 KiB
Plaintext
- var theme_customizer = true;
|
|
- var sidebar = true;
|
|
- var slick = true;
|
|
- var header_slider = true;
|
|
- var animate = true;
|
|
- var scrollbar = true;
|
|
- var height_equal = true;
|
|
doctype html
|
|
html(lang='en')
|
|
include ../../components/header-files
|
|
body
|
|
include ../../components/loader
|
|
include ../../components/taptop
|
|
// page-wrapper Start
|
|
#pageWrapper.page-wrapper.compact-wrapper
|
|
include ../../components/header
|
|
// Page Body Start
|
|
.page-body-wrapper
|
|
include ../../components/sidebar
|
|
.page-body
|
|
.container-fluid
|
|
.page-title
|
|
.row
|
|
.col-6
|
|
h4
|
|
| Typography
|
|
.col-6
|
|
ol.breadcrumb
|
|
li.breadcrumb-item
|
|
a(href='index.html')
|
|
svg.stroke-icon
|
|
use(href='../assets/svg/icon-sprite.svg#stroke-home')
|
|
li.breadcrumb-item Ui Kits
|
|
li.breadcrumb-item.active Typography
|
|
// Container-fluid starts
|
|
.container-fluid
|
|
.row
|
|
.col-xxl-6
|
|
.card.height-equal
|
|
.card-header
|
|
h4.mb-0 Headings
|
|
p.f-m-light.mt-1
|
|
| All HTML headings,
|
|
code <h1>
|
|
| through
|
|
code <h6>
|
|
| , are available.
|
|
.card-body
|
|
.table-responsive
|
|
table.table.mb-0.typography-table
|
|
thead
|
|
tr
|
|
th.pt-0 Code
|
|
th.pt-0 Font-Size
|
|
th.pt-0 Heading
|
|
tbody
|
|
tr
|
|
td
|
|
code <h1></h1>
|
|
td
|
|
h1.mb-0 2.5rem
|
|
td
|
|
h1
|
|
span Heading 1 (MEGA)
|
|
tr
|
|
td
|
|
code <h2></h2>
|
|
td
|
|
h2.mb-0 2rem
|
|
td
|
|
h2
|
|
span Heading 2 (XL)
|
|
tr
|
|
td
|
|
code <h3></h3>
|
|
td
|
|
h3.mb-0 1.75rem
|
|
td
|
|
h3
|
|
span Heading 3 (LARGE)
|
|
tr
|
|
td
|
|
code <h4></h4>
|
|
td
|
|
h4.mb-0 1.5rem
|
|
td
|
|
h4
|
|
span Heading 4 (MEDIUM)
|
|
tr
|
|
td
|
|
code <h5></h5>
|
|
td
|
|
h5.mb-0 1.25rem
|
|
td
|
|
h5
|
|
span Heading 5 (SMALL)
|
|
tr
|
|
td.pb-0
|
|
code <h6></h6>
|
|
td.pb-0
|
|
h6.mb-0 1rem
|
|
td.pb-0
|
|
h5
|
|
span Heading 6
|
|
.col-xxl-6
|
|
.card.height-equal
|
|
.card-header
|
|
h4.mb-0 Colored Headings
|
|
p.f-m-light.mt-1
|
|
| All HTML headings,
|
|
code <h1>
|
|
| through
|
|
code <h6>
|
|
| , are available.
|
|
.card-body
|
|
.table-responsive
|
|
table.table.mb-0.typography-table
|
|
thead
|
|
tr
|
|
th.pt-0 Code
|
|
th.pt-0 Heading
|
|
tbody
|
|
tr
|
|
td
|
|
code <h1></h1>
|
|
td
|
|
h1
|
|
span.txt-primary Heading 1
|
|
| Sub Heading
|
|
tr
|
|
td
|
|
code <h2></h2>
|
|
td
|
|
h2
|
|
span.txt-secondary Heading 1
|
|
| Sub Heading
|
|
tr
|
|
td
|
|
code <h3></h3>
|
|
td
|
|
h3
|
|
span.txt-success Heading 1
|
|
| Sub Heading
|
|
tr
|
|
td
|
|
code <h4></h4>
|
|
td
|
|
h4
|
|
span.txt-info Heading 1
|
|
| Sub Heading
|
|
tr
|
|
td
|
|
code <h5></h5>
|
|
td
|
|
h5
|
|
span.txt-warning Heading 1
|
|
| Sub Heading
|
|
tr
|
|
td.pb-0
|
|
code <h6></h6>
|
|
td.pb-0
|
|
h5
|
|
span.txt-danger Heading 1
|
|
| Sub Heading
|
|
.col-12
|
|
.card
|
|
.card-header
|
|
h4.mb-0 Font Weight
|
|
p.f-m-light.mt-1
|
|
| Using
|
|
code f-w-*
|
|
| class, you can change the font weight.
|
|
.card-body.d-flex.flex-column.gap-3
|
|
h1.f-w-700
|
|
| You can set bolder font weight Heading 1 using
|
|
code f-w-700
|
|
h2.f-w-600
|
|
| You can set bold font weight Heading 2 using
|
|
code f-w-600
|
|
h3.f-w-500
|
|
| You can set medium font weight Heading 3 using
|
|
code f-w-500
|
|
h4.f-w-400
|
|
| You can set normal font weight Heading 4 using
|
|
code f-w-400
|
|
h5.f-w-300
|
|
| You can set light font weight Heading 5 using
|
|
code f-w-300
|
|
.col-sm-12.listing
|
|
.card
|
|
.card-header
|
|
h4.mb-0 Listing Typography
|
|
p.f-m-light.mt-1
|
|
| All typography list:-
|
|
code <ul>
|
|
| ,
|
|
code <ol>
|
|
| &
|
|
code <dl>
|
|
.card-body
|
|
.row.g-3
|
|
.col-md-6.col-xxl-4
|
|
.card-wrapper.border.rounded-3
|
|
h6.sub-title.fw-bold Unorder list
|
|
ul
|
|
li One who looks on the bright side of things
|
|
li One who does something not professionally but for pleasure
|
|
li A person who knows everything
|
|
li A handwriting that cannot be read
|
|
li One who looks on the bright side of things
|
|
li A sound that cannot be heard
|
|
li The study of ancient writing and scriptures
|
|
li The study of rocks and soil
|
|
li creates more sophisticated capabilities for a web page to use coding language.
|
|
li Maintaining contact and communicating clearly are also essential. possess abilities for a designer
|
|
.col-md-6.col-xxl-4
|
|
.card-wrapper.border.rounded-3.h-100
|
|
h6.sub-title.fw-bold Order list
|
|
ol
|
|
li UI Kits
|
|
li Bonus Ui
|
|
li Animations
|
|
li
|
|
ol
|
|
li Typography
|
|
li Avatars
|
|
li Grid
|
|
li Tag & pills
|
|
li Alert
|
|
li Dropdown
|
|
li Tabs
|
|
li Accordion
|
|
.col-md-12.col-xxl-4
|
|
.card-wrapper.border.rounded-3
|
|
h6.sub-title.fw-bold Order list
|
|
dl
|
|
dt The way to get started is to quit talking and begin doing.
|
|
dd -Walt Disney
|
|
dt Life is what happens when you're busy making other plans.
|
|
dd -John Lennon
|
|
dt Whoever is happy will make others happy too.
|
|
dd -Anne Frank
|
|
dt Life is either a daring adventure or nothing at all.
|
|
dd -Helen Keller
|
|
dt The purpose of our lives is to be happy.
|
|
dd.mb-0 -Dalai Lama
|
|
.col-12
|
|
.card
|
|
.card-header
|
|
h4.mb-0 Display headings
|
|
p.f-m-light.mt-1
|
|
| 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
|
|
mark display heading
|
|
| —a
|
|
| larger, slightly more opinionated heading style.
|
|
.card-body.d-flex.flex-column.gap-2
|
|
h1.display-1 Display 1
|
|
h1.display-2 Display 2
|
|
h1.display-3 Display 3
|
|
h1.display-4 Display 4
|
|
.col-sm-12.col-xl-6
|
|
.card
|
|
.card-header
|
|
h4 Inline text elements
|
|
p.f-m-light.mt-1 Styling for common inline HTML5 elements.
|
|
.card-body
|
|
.d-flex.flex-column.gap-2
|
|
p.mb-0
|
|
| You can use the mark tag to
|
|
mark highlight
|
|
| text.
|
|
p.mb-0
|
|
del This line of text is meant to be treated as deleted text.
|
|
p.mb-0
|
|
s This line of text is meant to be treated as no longer accurate.
|
|
p.mb-0
|
|
ins
|
|
| This line of text is meant to be treated as an addition to the
|
|
| document.
|
|
p.mb-0
|
|
u This line of text will render as underlined
|
|
p.mb-0
|
|
small This line of text is meant to be treated as fine print.
|
|
p.mb-0
|
|
strong This line rendered as bold text.
|
|
p.mb-0
|
|
em This line rendered as italicized text.
|
|
.col-sm-12.col-xl-6
|
|
.card
|
|
.card-header
|
|
h4.mb-0 Text Color
|
|
p.f-m-light.mt-1
|
|
| You can Give text color by using
|
|
code txt-*
|
|
| class
|
|
.card-body
|
|
.d-flex.flex-column.gap-2
|
|
p.txt-primary.mb-0
|
|
| This is Primary text You can archive this adding
|
|
code .txt-primary
|
|
| class
|
|
p.txt-secondary.mb-0
|
|
| This is Secondary text You can archive this adding
|
|
code .txt-secondary
|
|
| class
|
|
p.txt-success.mb-0
|
|
| This is Success text You can archive this adding
|
|
code .txt-success
|
|
| class
|
|
p.txt-info.mb-0
|
|
| This is Info text You can archive this adding
|
|
code .txt-info
|
|
| class
|
|
p.txt-warning.mb-0
|
|
| This is Warning text You can archive this adding
|
|
code .txt-warning
|
|
| class
|
|
p.txt-danger.mb-0
|
|
| This is Danger text You can archive this adding
|
|
code .txt-danger
|
|
| class
|
|
p.txt-dark.mb-0
|
|
| This is Dark text You can archive this adding
|
|
code .txt-dark
|
|
| class
|
|
p.txt-primary.mb-0
|
|
| This is Primary text You can archive this adding
|
|
code .txt-primary
|
|
| class
|
|
.col-sm-12
|
|
.card.overflow-hidden
|
|
.card-header
|
|
h4.mb-0 Blockquotes
|
|
p.f-m-light.mt-1
|
|
| The
|
|
code <blockquote>
|
|
| tag specifies a section that is quoted from another source.
|
|
.card-body
|
|
.figure.d-block.dark-blockquote
|
|
blockquote.blockquote.light-card.mb-2
|
|
p.mb-0.txt-dark
|
|
| The only impossible journey is the one you never begin.
|
|
figcaption.blockquote-footer.pt-3
|
|
| Tony Robbins
|
|
.figure.text-center.d-block.dark-blockquote
|
|
blockquote.blockquote.light-card.mb-2
|
|
p.mb-0.txt-dark
|
|
| In this life we cannot do great things. We can only do small things with great love.
|
|
figcaption.blockquote-footer.pt-3
|
|
| Mother Teresa
|
|
.figure.text-end.d-block.dark-blockquote
|
|
blockquote.blockquote.mb-0.light-card.mb-2
|
|
p.mb-0.txt-dark
|
|
| Live in the sunshine, swim the sea, drink the wild air.
|
|
figcaption.blockquote-footer.pt-3
|
|
| Ralph Waldo Emerson
|
|
// Container-fluid Ends
|
|
include ../../components/footer
|
|
include ../../components/footer-files
|