definicao de layout
This commit is contained in:
284
public/assets/pug/pages/template/tab-material.pug
Normal file
284
public/assets/pug/pages/template/tab-material.pug
Normal file
@@ -0,0 +1,284 @@
|
||||
- var theme_customizer = 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
|
||||
| Line Tabs
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Base
|
||||
li.breadcrumb-item Tabs
|
||||
li.breadcrumb-item.active Line Tabs
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12.col-xl-6.xl-100
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Simple Material style tab
|
||||
span
|
||||
| Add
|
||||
code .border-tab
|
||||
| class with nav class
|
||||
.card-body
|
||||
ul#top-tab.nav.nav-tabs.border-tab(role='tablist')
|
||||
li.nav-item
|
||||
a#top-home-tab.nav-link.active(data-bs-toggle='tab', href='#top-home', role='tab', aria-controls='top-home', aria-selected='true')
|
||||
i.icofont.icofont-ui-home
|
||||
| Home
|
||||
li.nav-item
|
||||
a#profile-top-tab.nav-link(data-bs-toggle='tab', href='#top-profile', role='tab', aria-controls='top-profile', aria-selected='false')
|
||||
i.icofont.icofont-man-in-glasses
|
||||
| Profile
|
||||
li.nav-item
|
||||
a#contact-top-tab.nav-link(data-bs-toggle='tab', href='#top-contact', role='tab', aria-controls='top-contact', aria-selected='false')
|
||||
i.icofont.icofont-contacts
|
||||
| Contact
|
||||
#top-tabContent.tab-content
|
||||
#top-home.tab-pane.fade.show.active(role='tabpanel', aria-labelledby='top-home-tab')
|
||||
p
|
||||
| We are a small yet highly-skilled group of creative brains with a vast experience. Our team of web designers, online marketing experts, content writers, graphic professionals have completed numerous projects.
|
||||
#top-profile.tab-pane.fade(role='tabpanel', aria-labelledby='profile-top-tab')
|
||||
p
|
||||
| Smart headphones — also called smart earbuds or hearable — are high-tech in-ear devices that do more than transmit audio. These headphones are usually wireless, and they can sync up with your phone, tablet, computer or other Bluetooth-enabled device. The main appeal of hearables is convenience, as they allow you to complete common tasks without directly accessing your phone or computer. Smart wireless headphones sync up to other devices using Bluetooth technology, and many of their features rely on data from your smartphone or computer.
|
||||
#top-contact.tab-pane.fade(role='tabpanel', aria-labelledby='contact-top-tab')
|
||||
p
|
||||
| This product is meant for educational purposes only. Any resemblance to real persons, living or dead is purely coincidental. Void where prohibited. Some assembly required. List each check separately by bank number. Batteries not included.Google Web Designer gives you the power to create beautiful and compelling videos, images and HTML5 ads.
|
||||
.col-sm-12.col-xl-6.xl-100
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Material style bottom tab
|
||||
span
|
||||
| Add
|
||||
code .border-tab
|
||||
| class with nav class
|
||||
.card-body
|
||||
#bottom-tabContent.tab-content
|
||||
#bottom-home.tab-pane.fade.show.active(role='tabpanel', aria-labelledby='bottom-home-tab')
|
||||
p
|
||||
| Not limited to any states, boundaries. All over India providing cutting-edge design and website development services for over 12 years. We provide end to end digital solutions, right from designing your website/application development: Domain, Web Hosting, Email Hosting Registration, Search Engine Optimization and other Internet Marketing, Renewal of Services timely and effectively.
|
||||
#bottom-profile.tab-pane.fade(role='tabpanel', aria-labelledby='profile-bottom-tab')
|
||||
p
|
||||
| Us Technology offers web & mobile development solutions for all industry verticals.Include a short form using fields that'll help your business understand who's contacting them.
|
||||
#bottom-contact.tab-pane.fade(role='tabpanel', aria-labelledby='contact-bottom-tab')
|
||||
p
|
||||
| Tabs have long been used to show alternative views of the same group of information tabs in software. Known as “module tabs”, these are still used today in web sites. For instance, airline companies such as Ryanair, easyJet and AirMalta use module tabs to enable the user to switch between bookings for flights, hotels and car hire.
|
||||
ul#bottom-tab.nav.nav-tabs.border-tab(role='tablist')
|
||||
li.nav-item
|
||||
a#bottom-home-tab.nav-link.active(data-bs-toggle='tab', href='#bottom-home', role='tab', aria-controls='bottom-home', aria-selected='true')
|
||||
i.icofont.icofont-ui-home
|
||||
| Home
|
||||
.material-border
|
||||
li.nav-item
|
||||
a#profile-bottom-tab.nav-link(data-bs-toggle='tab', href='#bottom-profile', role='tab', aria-controls='bottom-profile', aria-selected='false')
|
||||
i.icofont.icofont-man-in-glasses
|
||||
| Profile
|
||||
.material-border
|
||||
li.nav-item
|
||||
a#contact-bottom-tab.nav-link(data-bs-toggle='tab', href='#bottom-contact', role='tab', aria-controls='bottom-contact', aria-selected='false')
|
||||
i.icofont.icofont-contacts
|
||||
| Contact
|
||||
.col-sm-12.col-xl-6.xl-100
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Material style left tab
|
||||
span
|
||||
| Add
|
||||
code .border-tab
|
||||
| class with nav class
|
||||
.card-body
|
||||
.row
|
||||
.col-sm-3.tabs-responsive-side
|
||||
#v-pills-tab.nav.flex-column.nav-pills.border-tab.nav-left(role='tablist', aria-orientation='vertical')
|
||||
a#v-pills-home-tab.nav-link.active(data-bs-toggle='pill', href='#v-pills-home', role='tab', aria-controls='v-pills-home', aria-selected='true') Home
|
||||
a#v-pills-profile-tab.nav-link(data-bs-toggle='pill', href='#v-pills-profile', role='tab', aria-controls='v-pills-profile', aria-selected='false') Profile
|
||||
a#v-pills-messages-tab.nav-link(data-bs-toggle='pill', href='#v-pills-messages', role='tab', aria-controls='v-pills-messages', aria-selected='false') Inbox
|
||||
a#v-pills-settings-tab.nav-link(data-bs-toggle='pill', href='#v-pills-settings', role='tab', aria-controls='v-pills-settings', aria-selected='false') Settings
|
||||
.col-sm-9
|
||||
#v-pills-tabContent.tab-content
|
||||
#v-pills-home.tab-pane.fade.show.active(role='tabpanel', aria-labelledby='v-pills-home-tab')
|
||||
p
|
||||
| We are a small yet highly-skilled group of creative brains with a vast experience. Our team of web designers, online marketing experts, content writers, graphic professionals have completed numerous projects.
|
||||
#v-pills-profile.tab-pane.fade(role='tabpanel', aria-labelledby='v-pills-profile-tab')
|
||||
p
|
||||
| Smart headphones — also called smart earbuds or hearable — are high-tech in-ear devices that do more than transmit audio. These headphones are usually wireless, and they can sync up with your phone, tablet, computer or other Bluetooth-enabled device. The main appeal of hearables is convenience, as they allow you to complete common tasks without directly accessing your phone or computer. Smart wireless headphones sync up to other devices using Bluetooth technology, and many of their features rely on data from your smartphone or computer.
|
||||
#v-pills-messages.tab-pane.fade(role='tabpanel', aria-labelledby='v-pills-messages-tab')
|
||||
p
|
||||
| This product is meant for educational purposes only. Any resemblance to real persons, living or dead is purely coincidental. Void where prohibited. Some assembly required. List each check separately by bank number. Batteries not included.Google Web Designer gives you the power to create beautiful and compelling videos, images and HTML5 ads.
|
||||
#v-pills-settings.tab-pane.fade(role='tabpanel', aria-labelledby='v-pills-settings-tab')
|
||||
p
|
||||
| Not limited to any states, boundaries. All over India providing cutting-edge design and website development services for over 12 years. We provide end to end digital solutions, right from designing your website/application development: Domain, Web Hosting, Email Hosting Registration, Search Engine Optimization and other Internet Marketing, Renewal of Services timely and effectively.
|
||||
.col-sm-12.col-xl-6.xl-100
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Material style right tab
|
||||
span
|
||||
| Add
|
||||
code .border-tab
|
||||
| class with nav class
|
||||
.card-body
|
||||
.row
|
||||
.col-sm-9
|
||||
#v-pills-right-tabContent.tab-content.text-end
|
||||
#v-pills-right-home.tab-pane.fade.show.active(role='tabpanel', aria-labelledby='v-pills-right-home-tab')
|
||||
p
|
||||
| Not limited to any states, boundaries. All over India providing cutting-edge design and website development services for over 12 years. We provide end to end digital solutions, right from designing your website/application development: Domain, Web Hosting, Email Hosting Registration, Search Engine Optimization and other Internet Marketing, Renewal of Services timely and effectively.
|
||||
#v-pills-right-profile.tab-pane.fade(role='tabpanel', aria-labelledby='v-pills-right-profile-tab')
|
||||
p
|
||||
| Us Technology offers web & mobile development solutions for all industry verticals.Include a short form using fields that'll help your business understand who's contacting them.
|
||||
#v-pills-right-messages.tab-pane.fade(role='tabpanel', aria-labelledby='v-pills-right-messages-tab')
|
||||
p
|
||||
| Tabs have long been used to show alternative views of the same group of information tabs in software. Known as “module tabs”, these are still used today in web sites. For instance, airline companies such as Ryanair, easyJet and AirMalta use module tabs to enable the user to switch between bookings for flights, hotels and car hire.
|
||||
#v-pills-right-settings.tab-pane.fade(role='tabpanel', aria-labelledby='v-pills-right-settings-tab')
|
||||
p
|
||||
| Smart headphones — also called smart earbuds or hearable — are high-tech in-ear devices that do more than transmit audio. These headphones are usually wireless, and they can sync up with your phone, tablet, computer or other Bluetooth-enabled device. The main appeal of hearables is convenience, as they allow you to complete common tasks without directly accessing your phone or computer.
|
||||
.col-sm-3.tabs-responsive-side
|
||||
#v-pills-right-tab.nav.flex-column.border-tab.nav-right(role='tablist', aria-orientation='vertical')
|
||||
a#v-pills-right-home-tab.nav-link.active(data-bs-toggle='pill', href='#v-pills-right-home', role='tab', aria-controls='v-pills-right-home', aria-selected='true') Home
|
||||
a#v-pills-right-profile-tab.nav-link(data-bs-toggle='pill', href='#v-pills-right-profile', role='tab', aria-controls='v-pills-right-profile', aria-selected='false') Profile
|
||||
a#v-pills-right-messages-tab.nav-link(data-bs-toggle='pill', href='#v-pills-right-messages', role='tab', aria-controls='v-pills-right-messages', aria-selected='false') Inbox
|
||||
a#v-pills-right-settings-tab.nav-link(data-bs-toggle='pill', href='#v-pills-right-settings', role='tab', aria-controls='v-pills-right-settings', aria-selected='false') Settings
|
||||
.col-sm-12.col-xl-6.xl-100
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Material color tab
|
||||
span
|
||||
| Add
|
||||
code .nav-primary
|
||||
| class with nav class
|
||||
.card-body
|
||||
ul#info-tab.nav.nav-tabs.border-tab.nav-primary(role='tablist')
|
||||
li.nav-item
|
||||
a#info-home-tab.nav-link.active(data-bs-toggle='tab', href='#info-home', role='tab', aria-controls='info-home', aria-selected='true')
|
||||
i.icofont.icofont-ui-home
|
||||
| Home
|
||||
li.nav-item
|
||||
a#profile-info-tab.nav-link(data-bs-toggle='tab', href='#info-profile', role='tab', aria-controls='info-profile', aria-selected='false')
|
||||
i.icofont.icofont-man-in-glasses
|
||||
| Profile
|
||||
li.nav-item
|
||||
a#contact-info-tab.nav-link(data-bs-toggle='tab', href='#info-contact', role='tab', aria-controls='info-contact', aria-selected='false')
|
||||
i.icofont.icofont-contacts
|
||||
| Contact
|
||||
#info-tabContent.tab-content
|
||||
#info-home.tab-pane.fade.show.active(role='tabpanel', aria-labelledby='info-home-tab')
|
||||
p
|
||||
| We are a small yet highly-skilled group of creative brains with a vast experience. Our team of web designers, online marketing experts, content writers, graphic professionals have completed numerous projects.
|
||||
#info-profile.tab-pane.fade(role='tabpanel', aria-labelledby='profile-info-tab')
|
||||
p
|
||||
| Smart headphones — also called smart earbuds or hearable — are high-tech in-ear devices that do more than transmit audio. These headphones are usually wireless, and they can sync up with your phone, tablet, computer or other Bluetooth-enabled device. The main appeal of hearables is convenience, as they allow you to complete common tasks without directly accessing your phone or computer. Smart wireless headphones sync up to other devices using Bluetooth technology, and many of their features rely on data from your smartphone or computer.
|
||||
#info-contact.tab-pane.fade(role='tabpanel', aria-labelledby='contact-info-tab')
|
||||
p
|
||||
| This product is meant for educational purposes only. Any resemblance to real persons, living or dead is purely coincidental. Void where prohibited. Some assembly required. List each check separately by bank number. Batteries not included.Google Web Designer gives you the power to create beautiful and compelling videos, images and HTML5 ads.
|
||||
.col-sm-12.col-xl-6.xl-100
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Material color tab
|
||||
span
|
||||
| Add
|
||||
code .nav-secondary
|
||||
| class with nav class
|
||||
.card-body
|
||||
ul#danger-tab.nav.nav-tabs.border-tab.nav-secondary.nav-left(role='tablist')
|
||||
li.nav-item
|
||||
a#danger-home-tab.nav-link.active(data-bs-toggle='tab', href='#danger-home', role='tab', aria-controls='danger-home', aria-selected='true')
|
||||
i.icofont.icofont-ui-home
|
||||
| Home
|
||||
li.nav-item
|
||||
a#profile-danger-tab.nav-link(data-bs-toggle='tab', href='#danger-profile', role='tab', aria-controls='danger-profile', aria-selected='false')
|
||||
i.icofont.icofont-man-in-glasses
|
||||
| Profile
|
||||
li.nav-item
|
||||
a#contact-danger-tab.nav-link(data-bs-toggle='tab', href='#danger-contact', role='tab', aria-controls='danger-contact', aria-selected='false')
|
||||
i.icofont.icofont-contacts
|
||||
| Contact
|
||||
#danger-tabContent.tab-content
|
||||
#danger-home.tab-pane.fade.show.active(role='tabpanel', aria-labelledby='danger-home-tab')
|
||||
p
|
||||
| Not limited to any states, boundaries. All over India providing cutting-edge design and website development services for over 12 years. We provide end to end digital solutions, right from designing your website/application development: Domain, Web Hosting, Email Hosting Registration, Search Engine Optimization and other Internet Marketing, Renewal of Services timely and effectively.
|
||||
#danger-profile.tab-pane.fade(role='tabpanel', aria-labelledby='profile-danger-tab')
|
||||
p
|
||||
| Us Technology offers web & mobile development solutions for all industry verticals.Include a short form using fields that'll help your business understand who's contacting them.
|
||||
#danger-contact.tab-pane.fade(role='tabpanel', aria-labelledby='contact-danger-tab')
|
||||
p
|
||||
| Tabs have long been used to show alternative views of the same group of information tabs in software. Known as “module tabs”, these are still used today in web sites. For instance, airline companies such as Ryanair, easyJet and AirMalta use module tabs to enable the user to switch between bookings for flights, hotels and car hire.
|
||||
.col-sm-12.col-xl-6.xl-100
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Material style left tab
|
||||
span
|
||||
| Add
|
||||
code .nav-success
|
||||
| class with nav class
|
||||
.card-body
|
||||
.row
|
||||
.col-sm-3.tabs-responsive-side
|
||||
#v-pills-success-tab.nav.flex-column.nav-success.border-tab.nav-left(role='tablist', aria-orientation='vertical')
|
||||
a#v-pills-success-home-tab.nav-link.active(data-bs-toggle='pill', href='#v-pills-success-home', role='tab', aria-controls='v-pills-success-home', aria-selected='true') Home
|
||||
a#v-pills-success-profile-tab.nav-link(data-bs-toggle='pill', href='#v-pills-success-profile', role='tab', aria-controls='v-pills-success-profile', aria-selected='false') Profile
|
||||
a#v-pills-success-messages-tab.nav-link(data-bs-toggle='pill', href='#v-pills-success-messages', role='tab', aria-controls='v-pills-success-messages', aria-selected='false') Inbox
|
||||
a#v-pills-success-settings-tab.nav-link(data-bs-toggle='pill', href='#v-pills-success-settings', role='tab', aria-controls='v-pills-success-settings', aria-selected='false') Settings
|
||||
.col-sm-9
|
||||
#v-pills-success-tabContent.tab-content
|
||||
#v-pills-success-home.tab-pane.fade.show.active(role='tabpanel', aria-labelledby='v-pills-success-home-tab')
|
||||
p
|
||||
| We are a small yet highly-skilled group of creative brains with a vast experience. Our team of web designers, online marketing experts, content writers, graphic professionals have completed numerous projects.
|
||||
#v-pills-success-profile.tab-pane.fade(role='tabpanel', aria-labelledby='v-pills-success-profile-tab')
|
||||
p
|
||||
| Smart headphones — also called smart earbuds or hearable — are high-tech in-ear devices that do more than transmit audio. These headphones are usually wireless, and they can sync up with your phone, tablet, computer or other Bluetooth-enabled device. The main appeal of hearables is convenience, as they allow you to complete common tasks without directly accessing your phone or computer. Smart wireless headphones sync up to other devices using Bluetooth technology, and many of their features rely on data from your smartphone or computer.
|
||||
#v-pills-success-messages.tab-pane.fade(role='tabpanel', aria-labelledby='v-pills-success-messages-tab')
|
||||
p
|
||||
| This product is meant for educational purposes only. Any resemblance to real persons, living or dead is purely coincidental. Void where prohibited. Some assembly required. List each check separately by bank number. Batteries not included.Google Web Designer gives you the power to create beautiful and compelling videos, images and HTML5 ads.
|
||||
#v-pills-success-settings.tab-pane.fade(role='tabpanel', aria-labelledby='v-pills-success-settings-tab')
|
||||
p
|
||||
| Not limited to any states, boundaries. All over India providing cutting-edge design and website development services for over 12 years. We provide end to end digital solutions, right from designing your website/application development: Domain, Web Hosting, Email Hosting Registration, Search Engine Optimization and other Internet Marketing, Renewal of Services timely and effectively.
|
||||
.col-sm-12.col-xl-6.xl-100
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Material style Right tab
|
||||
span
|
||||
| Add
|
||||
code .nav-info
|
||||
| class with nav class
|
||||
.card-body
|
||||
.row
|
||||
.col-sm-9
|
||||
#v-pills-secondary-tabContent.tab-content.text-end
|
||||
#v-pills-secondary-home.tab-pane.fade.show.active(role='tabpanel', aria-labelledby='v-pills-secondary-home-tab')
|
||||
p
|
||||
| We are a small yet highly-skilled group of creative brains with a vast experience. Our team of web designers, online marketing experts, content writers, graphic professionals have completed numerous projects.
|
||||
#v-pills-secondary-profile.tab-pane.fade(role='tabpanel', aria-labelledby='v-pills-secondary-profile-tab')
|
||||
p
|
||||
| Smart headphones — also called smart earbuds or hearable — are high-tech in-ear devices that do more than transmit audio. These headphones are usually wireless, and they can sync up with your phone, tablet, computer or other Bluetooth-enabled device. The main appeal of hearables is convenience, as they allow you to complete common tasks without directly accessing your phone or computer. Smart wireless headphones sync up to other devices using Bluetooth technology, and many of their features rely on data from your smartphone or computer.
|
||||
#v-pills-secondary-messages.tab-pane.fade(role='tabpanel', aria-labelledby='v-pills-secondary-messages-tab')
|
||||
p
|
||||
| This product is meant for educational purposes only. Any resemblance to real persons, living or dead is purely coincidental. Void where prohibited. Some assembly required. List each check separately by bank number. Batteries not included.Google Web Designer gives you the power to create beautiful and compelling videos, images and HTML5 ads.
|
||||
#v-pills-secondary-settings.tab-pane.fade(role='tabpanel', aria-labelledby='v-pills-secondary-settings-tab')
|
||||
p
|
||||
| Not limited to any states, boundaries. All over India providing cutting-edge design and website development services for over 12 years. We provide end to end digital solutions, right from designing your website/application development: Domain, Web Hosting, Email Hosting Registration, Search Engine Optimization and other Internet Marketing, Renewal of Services timely and effectively.
|
||||
.col-sm-3.tabs-responsive-side
|
||||
#v-pills-secondary-tab.nav.flex-column.nav-info.border-tab.nav-right(role='tablist', aria-orientation='vertical')
|
||||
a#v-pills-secondary-home-tab.nav-link.active(data-bs-toggle='pill', href='#v-pills-secondary-home', role='tab', aria-controls='v-pills-secondary-home', aria-selected='true') Home
|
||||
a#v-pills-secondary-profile-tab.nav-link(data-bs-toggle='pill', href='#v-pills-secondary-profile', role='tab', aria-controls='v-pills-secondary-profile', aria-selected='false') Profile
|
||||
a#v-pills-secondary-messages-tab.nav-link(data-bs-toggle='pill', href='#v-pills-secondary-messages', role='tab', aria-controls='v-pills-secondary-messages', aria-selected='false') Inbox
|
||||
a#v-pills-secondary-settings-tab.nav-link(data-bs-toggle='pill', href='#v-pills-secondary-settings', role='tab', aria-controls='v-pills-secondary-settings', aria-selected='false') Settings
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
Reference in New Issue
Block a user