353 lines
19 KiB
Plaintext
353 lines
19 KiB
Plaintext
- var theme_customizer = true;
|
|
- var sidebar = true;
|
|
- var slick = true;
|
|
- var header_slider = true;
|
|
- var animate = true;
|
|
- var scrollbar = true;
|
|
- var prism = true;
|
|
- var clipboard = true;
|
|
- var customcard = 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
|
|
| Avatars
|
|
.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 Avatars
|
|
// Container-fluid starts
|
|
.container-fluid
|
|
.user-profile
|
|
.row
|
|
.col-xl-4.col-md-6
|
|
.card.height-equal
|
|
.card-header
|
|
h4.mb-0 Sizes
|
|
p.mb-0.mt-1
|
|
| You can change the size of avatar using
|
|
code .img- * (70/80/90/100)
|
|
| class.
|
|
.card-header-right
|
|
ul.list-unstyled.card-option
|
|
li
|
|
i.fa.fa-spin.fa-cog
|
|
li
|
|
i.view-html.fa.fa-code
|
|
li
|
|
i.icofont.icofont-maximize.full-card
|
|
li
|
|
i.icofont.icofont-minus.minimize-card
|
|
li
|
|
i.icofont.icofont-refresh.reload-card
|
|
li
|
|
i.icofont.icofont-error.close-card
|
|
.card-body.avatar-showcase
|
|
.avatars
|
|
div.avatar
|
|
img.img-100.rounded-circle(src='../assets/images/avtar/3.jpg', alt='#')
|
|
div.avatar
|
|
img.img-90.rounded-circle(src='../assets/images/avtar/4.jpg', alt='#')
|
|
div.avatar
|
|
img.img-80.rounded-circle(src='../assets/images/avtar/7.jpg', alt='#')
|
|
div.avatar
|
|
img.img-70.rounded-circle(src='../assets/images/avtar/11.jpg', alt='#')
|
|
.code-box-copy
|
|
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#avatar-size', title='Copy')
|
|
i.icofont.icofont-copy-alt
|
|
pre
|
|
code.language-html#avatar-size
|
|
| <!--You can use img-* class through change the size of avatar (70/80/90/100).-->
|
|
|<div class="avatar">
|
|
|<img class="img-100 rounded-circle" src="../assets/images/avtar/3.jpg" alt="#">
|
|
|</div>
|
|
|<div class="avatar">
|
|
|<img class="img-90 rounded-circle" src="../assets/images/avtar/4.jpg" alt="#">
|
|
|</div>
|
|
|<div class="avatar">
|
|
|<img class="img-80 rounded-circle" src="../assets/images/avtar/7.jpg" alt="#">
|
|
|</div>
|
|
|<div class="avatar">
|
|
|<img class="img-70 rounded-circle" src="../assets/images/avtar/11.jpg" alt="#">
|
|
|</div>
|
|
.col-xl-4.col-md-6
|
|
.card.height-equal
|
|
.card-header
|
|
h4.mb-0 Status Indicator
|
|
p.mb-0.mt-1
|
|
| Using
|
|
code .status-* (online/offline/dnd)
|
|
| class you can set the status of avatar.
|
|
.card-header-right
|
|
ul.list-unstyled.card-option
|
|
li
|
|
i.fa.fa-spin.fa-cog
|
|
li
|
|
i.view-html.fa.fa-code
|
|
li
|
|
i.icofont.icofont-maximize.full-card
|
|
li
|
|
i.icofont.icofont-minus.minimize-card
|
|
li
|
|
i.icofont.icofont-refresh.reload-card
|
|
li
|
|
i.icofont.icofont-error.close-card
|
|
.card-body.avatar-showcase
|
|
.avatars
|
|
div.avatar
|
|
img.img-100.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
|
|
.status.status-online
|
|
div.avatar
|
|
img.img-90.rounded-circle(src='../assets/images/avtar/16.jpg', alt='#')
|
|
.status.status-dnd
|
|
div.avatar
|
|
img.img-80.rounded-circle(src='../assets/images/avtar/7.jpg', alt='#')
|
|
.status.status-offline
|
|
div.avatar
|
|
img.img-70.rounded-circle(src='../assets/images/avtar/3.jpg', alt='#')
|
|
.status.status-online
|
|
.code-box-copy
|
|
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#avatar-indicator', title='Copy')
|
|
i.icofont.icofont-copy-alt
|
|
pre
|
|
code.language-html#avatar-indicator
|
|
|<!-- You can use status-* class through the set status (online/offline/dnd). -->
|
|
|<div class="avatar">
|
|
|<img class="img-100 rounded-circle" src="../assets/images/user/1.jpg" alt="#">
|
|
|<div class="status status-online"></div>
|
|
|</div>
|
|
|<div class="avatar">
|
|
|<img class="img-90 rounded-circle" src="../assets/images/avtar/16.jpg" alt="#">
|
|
|<div class="status status-dnd"></div>
|
|
|</div>
|
|
|<div class="avatar"><img class="img-80 rounded-circle" src="../assets/images/avtar/7.jpg" alt="#">
|
|
|<div class="status status-offline"></div>
|
|
|</div>
|
|
|<div class="avatar"><img class="img-70 rounded-circle" src="../assets/images/avtar/3.jpg" alt="#">
|
|
|<div class="status status-online"></div>
|
|
|</div>
|
|
.col-xl-4.col-md-6
|
|
.card.height-equal
|
|
.card-header
|
|
h4 Shapes
|
|
p.mb-0.mt-1
|
|
| Using the
|
|
code .b-r-* (8/30/35/25)
|
|
| class you can set the shapes of avatar.
|
|
.card-header-right
|
|
ul.list-unstyled.card-option
|
|
li
|
|
i.fa.fa-spin.fa-cog
|
|
li
|
|
i.view-html.fa.fa-code
|
|
li
|
|
i.icofont.icofont-maximize.full-card
|
|
li
|
|
i.icofont.icofont-minus.minimize-card
|
|
li
|
|
i.icofont.icofont-refresh.reload-card
|
|
li
|
|
i.icofont.icofont-error.close-card
|
|
.card-body.avatar-showcase
|
|
.avatars
|
|
div.avatar
|
|
img.img-100.b-r-8(src='../assets/images/avtar/4.jpg', alt='#')
|
|
div.avatar
|
|
img.img-90.b-r-30(src='../assets/images/avtar/16.jpg', alt='#')
|
|
div.avatar
|
|
img.img-80.b-r-35(src='../assets/images/avtar/3.jpg', alt='#')
|
|
div.avatar
|
|
img.img-70.rounded-circle(src='../assets/images/avtar/11.jpg', alt='#')
|
|
.code-box-copy
|
|
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#avatar-shapes', title='Copy')
|
|
i.icofont.icofont-copy-alt
|
|
pre
|
|
code.language-html#avatar-shapes
|
|
|<!-- Give the shape to avatar using .b-r-* class. (8/25/30/35). -->
|
|
|<div class="avatar">
|
|
|<img class="img-100 b-r-8" src="../assets/images/avtar/4.jpg" alt="#">
|
|
|</div>
|
|
|<div class="avatar">
|
|
|<img class="img-90 b-r-30" src="../assets/images/avtar/16.jpg" alt="#">
|
|
|</div>
|
|
|<div class="avatar">
|
|
|<img class="img-80 b-r-35" src="../assets/images/avtar/3.jpg" alt="#">
|
|
|</div>
|
|
|<div class="avatar">
|
|
|<img class="img-70 rounded-circle" src="../assets/images/avtar/11.jpg" alt="#">
|
|
|</div>
|
|
.col-md-6
|
|
.card.height-equal
|
|
.card-header
|
|
h4 Ratio
|
|
p.mb-0.mt-1
|
|
| Give the shape to avatar using
|
|
code .ratio
|
|
| and
|
|
code img-* (50/70/80/90/100)
|
|
| class.
|
|
.card-header-right
|
|
ul.list-unstyled.card-option
|
|
li
|
|
i.fa.fa-spin.fa-cog
|
|
li
|
|
i.view-html.fa.fa-code
|
|
li
|
|
i.icofont.icofont-maximize.full-card
|
|
li
|
|
i.icofont.icofont-minus.minimize-card
|
|
li
|
|
i.icofont.icofont-refresh.reload-card
|
|
li
|
|
i.icofont.icofont-error.close-card
|
|
.card-body.avatar-showcase
|
|
.avatars
|
|
div.avatar.ratio
|
|
img.b-r-8.img-100(src='../assets/images/avtar/11.jpg', alt='#')
|
|
div.avatar.ratio
|
|
img.b-r-8.img-90(src='../assets/images/avtar/4.jpg', alt='#')
|
|
div.avatar.ratio
|
|
img.b-r-8.img-80(src='../assets/images/user/1.jpg', alt='#')
|
|
div.avatar.ratio
|
|
img.b-r-8.img-70(src='../assets/images/avtar/16.jpg', alt='#')
|
|
div.avatar.ratio
|
|
img.b-r-8.img-50(src='../assets/images/avtar/7.jpg', alt='#')
|
|
.code-box-copy
|
|
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#avatar-ratio', title='Copy')
|
|
i.icofont.icofont-copy-alt
|
|
pre
|
|
code.language-html#avatar-ratio
|
|
|<!-- You can use b-r-* class through the set status (100/90/80/70/50). -->
|
|
|<div class="avatars">
|
|
|<div class="avatar ratio">
|
|
|<img class="b-r-8 img-100" src="../assets/images/avtar/11.jpg" alt="#">
|
|
|</div>
|
|
|<div class="avatar ratio">
|
|
|<img class="b-r-8 img-90" src="../assets/images/avtar/4.jpg" alt="#">
|
|
|</div>
|
|
|<div class="avatar ratio">
|
|
|<img class="b-r-8 img-80" src="../assets/images/user/1.jpg" alt="#">
|
|
|</div>
|
|
|<div class="avatar ratio">
|
|
|<img class="b-r-8 img-70" src="../assets/images/avtar/16.jpg" alt="#">
|
|
|</div>
|
|
|<div class="avatar ratio">
|
|
|<img class="b-r-8 img-50" src="../assets/images/avtar/7.jpg" alt="#">
|
|
|</div>
|
|
.col-xl-6
|
|
.card.height-equal
|
|
.card-header
|
|
h4 Grouping
|
|
p.mb-0.mt-1
|
|
| You can set the group of avatars like
|
|
code .img-* (40/50/60/80/100)
|
|
| and
|
|
code .b-r-* (8/30/35)
|
|
| .
|
|
.card-header-right
|
|
ul.list-unstyled.card-option
|
|
li
|
|
i.fa.fa-spin.fa-cog
|
|
li
|
|
i.view-html.fa.fa-code
|
|
li
|
|
i.icofont.icofont-maximize.full-card
|
|
li
|
|
i.icofont.icofont-minus.minimize-card
|
|
li
|
|
i.icofont.icofont-refresh.reload-card
|
|
li
|
|
i.icofont.icofont-error.close-card
|
|
.card-body.avatar-showcase
|
|
.avatars
|
|
.customers.d-inline-block.avatar-group
|
|
ul
|
|
li.d-inline-block
|
|
img.img-100.b-r-8(src='../assets/images/avtar/4.jpg', alt='#')
|
|
li.d-inline-block
|
|
img.img-80.b-r-30(src='../assets/images/avtar/16.jpg', alt='#')
|
|
li.d-inline-block
|
|
img.img-50.b-r-35(src='../assets/images/avtar/3.jpg', alt='#')
|
|
.customers.d-inline-block.avatar-group
|
|
ul
|
|
li.d-inline-block
|
|
img.img-60.rounded-circle(src='../assets/images/avtar/16.jpg', alt='#')
|
|
li.d-inline-block
|
|
img.b-r-8.img-80(src='../assets/images/user/1.jpg', alt='#')
|
|
li.d-inline-block
|
|
img.img-60.rounded-circle(src='../assets/images/avtar/16.jpg', alt='#')
|
|
.customers.d-inline-block.avatar-group
|
|
ul
|
|
li.d-inline-block
|
|
img.img-40.rounded-circle(src='../assets/images/user/3.jpg', alt='')
|
|
li.d-inline-block
|
|
img.img-40.rounded-circle(src='../assets/images/user/5.jpg', alt='')
|
|
li.d-inline-block
|
|
img.img-40.rounded-circle(src='../assets/images/user/1.jpg', alt='')
|
|
.code-box-copy
|
|
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#avatar-grouping', title='Copy')
|
|
i.icofont.icofont-copy-alt
|
|
pre
|
|
code.language-html#avatar-grouping
|
|
|<!-- You can set the group of avatars use img-* and .b-r-* class (40/50/60/80/100) and (8/30/35). -->
|
|
|<div class="customers d-inline-block avatar-group">
|
|
|<ul>
|
|
|<li class="d-inline-block">
|
|
|<img class="img-100 b-r-8" src="../assets/images/avtar/4.jpg" alt="#">
|
|
|</li>
|
|
|<li class="d-inline-block">
|
|
|<img class="img-80 b-r-30" src="../assets/images/avtar/16.jpg" alt="#">
|
|
|</li>
|
|
|<li class="d-inline-block">
|
|
|</li><img class="img-50 b-r-35" src="../assets/images/avtar/3.jpg" alt="#">
|
|
|</ul>
|
|
|</div>
|
|
|<div class="customers d-inline-block avatar-group">
|
|
|<ul>
|
|
|<li class="d-inline-block">
|
|
|<img class="img-60 rounded-circle" src="../assets/images/avtar/16.jpg" alt="#">
|
|
|</li>
|
|
|<li class="d-inline-block">
|
|
|<img class="b-r-8 img-80" src="../assets/images/user/1.jpg" alt="#">
|
|
|</li>
|
|
|<li class="d-inline-block">
|
|
|<img class="img-60 rounded-circle" src="../assets/images/avtar/16.jpg" alt="#">
|
|
|</li>
|
|
|</ul>
|
|
|</div>
|
|
|<div class="customers d-inline-block avatar-group">
|
|
|<ul>
|
|
|<li class="d-inline-block">
|
|
|<img class="img-40 rounded-circle" src="../assets/images/user/3.jpg" alt="">
|
|
|</li>
|
|
|<li class="d-inline-block">
|
|
|<img class="img-40 rounded-circle" src="../assets/images/user/5.jpg" alt="">
|
|
|</li>
|
|
|<li class="d-inline-block">
|
|
|<img class="img-40 rounded-circle" src="../assets/images/user/1.jpg" alt="">
|
|
|</li>
|
|
|</ul>
|
|
// Container-fluid Ends
|
|
include ../../components/footer
|
|
include ../../components/footer-files
|