Register
Login
Home
Home - Default
Home - Portfolio
Home - Basic
One Page
Blog
Blog Full Width
Blog Large Image
Blog Medium Image
Blog Timeline
Single Post
Shop
Shop - Full Width
Shop - Sidebar
Shop - Product Full Width
Shop - Product Sidebar
Shop - Cart
Shop - Login
Shop - Checkout
Shortcodes
Shortcodes 1
Accordion & Toggle
Tabs
Icons
Carousel
Forms & Pagination
Shortcodes 2
Buttons
Images & Thumbnails
Animations
Typography
Modal & Lightbox
Shortcodes 3
Pricing Tables
Content Boxes
Video
Progress Bar & Dividers
Tooltips & Alerts
Features
Module Themes
Live Accordion
Live Articles
Live Content
Live Blog
Live Campaign
Live Forms
Live Tabs
Headers
Header 1
Header 2
Navigations
Colors
Vertical
Layouts
Wide
Boxed
Background Image
Background Pattern
Pane Layout
Footers
Footer Version 1
Footer Version 2
Footer Version 3
<style type="text/css"> .features #header nav.mega-menu ul.nav-main li[data-col="0"].mega-menu-item ul.dropdown-menu { background-color: #fff !important; border: 1px solid #ccc; } .features section.call-to-action { position: relative; clear: both; overflow: hidden; border: 0; padding: 40px 0 30px; background-color: transparent; } .features section.call-to-action h3 { margin-bottom: 10px; } .features em.icon-featured { font-size: 30px; background: #E36159; } .features .icon-featured { border-radius: 100%; color: #FFF; line-height: 80px; display: inline-block; width: 80px; height: 80px; margin: 0 !important; } .features .box-content h5 { padding: 5px; margin: 0 !important; } .features span.thumb-info-caption-text.text-justify { font-size: .9em; line-height: 20px; padding: 0; display: block; color: #777; } .features .thumb-info-caption { padding: 0; } .features .img-circle { width: 125px; margin: 10px; border: 2px solid #e36159; } .features .thumb-info { border-bottom: none; } .features .col-md-1 { width: 13.333333%; padding: 0; } .features .col-md-3 { padding: 0; } .features .col-md-2 { width: 19.666667%; } .features a { display: inline-block !important; text-decoration: none; padding: 10px !important; } .features .thumb-info-wrapper { position: relative; } .features .thumb-info-action { left: 0; width: 100%; position: absolute; top: 50%; margin-top: -35px; } .features .thumb-info-action-icon em { position: static; font-size: 50px; } .features { margin-bottom: -45px; } .features h5 { color: #e36159 !important; } .features .btn-primary { border-color: #e36159 !important; background-color: #e36159 !important; } .features .thumb-info-action-icon em { color: #e36159; } #header .features ul.nav.nav-tabs.nav-justified li a.text-center { display: block !important; color: #e36159 !important; font-size: 15px; margin: 0px !important; } .features ul.nav.nav-tabs.nav-justified li:hover a.text-center { background: transparent !important; } .features ul.nav.nav-tabs.nav-justified li a.text-center { padding-left: 0px !important; padding-right: 0px !important; } .features ul.nav.nav-tabs.nav-justified li:last-child a.text-center { border-bottom: 1px solid #DDD !important; } #header .features ul.nav.nav-tabs.nav-justified li:last-child.active a.text-center { border-bottom: 0px !important; } .features .tabs ul.nav-tabs.nav-justified a:hover { border-top-color: #e36159 !important; } .features .tabs ul.nav-tabs li.active a { border-top-color:#e36159 !important; } </style> <div class="features center"> <div class="tabs"> <ul class="nav nav-tabs nav-justified"> <li class="active"> <a href="#moduleThemes" data-toggle="tab" class="text-center"> Module Themes </a> </li> <li><a href="#menuOptions" data-toggle="tab" class="text-center">Menu Options</a> </li> <li><a href="#headersFooters" data-toggle="tab" class="text-center">Headers & Footers</a> </li> <li><a href="#layouts" data-toggle="tab" class="text-center">Layouts</a> </li> </ul> <div class="tab-content"> <div id="moduleThemes" class="tab-pane active"> <div class="row"> <section class="call-to-action" style="padding: 0px;"> <div class="center"> <h3>Tucson includes matching <strong>module themes</strong> to create an <strong>awesome</strong> website!</h3> <h6>Fast-Track design & development with <strong>enterprise functionality</strong> in just a few clicks</h6> </div> </section> <div class="row" style="padding-top: 30px;"> <div class="col-md-1" style="margin-left: 3.49%;"> <a href="/features/module-themes/live-accordion.aspx"> <div class="box-content"> <em class="icon-featured fa fa-bars"></em> <h5>Live Accordion</h5> </div> </a> </div> <div class="col-md-1"> <a href="/features/module-themes/live-articles.aspx"> <div class="box-content"> <em class="icon-featured fa fa-file-text-o"></em> <h5>Live Articles</h5> </div> </a> </div> <div class="col-md-1"> <a href="/features/module-themes/live-blog.aspx"> <div class="box-content"> <em class="icon-featured fa fa-file-o"></em> <h5>Live Blog</h5> </div> </a> </div> <div class="col-md-1"> <a href="/features/module-themes/live-campaign.aspx"> <div class="box-content"> <em class="icon-featured fa fa-envelope-o"></em> <h5>Live Campaign</h5> </div> </a> </div> <div class="col-md-1"> <a href="/features/module-themes/live-content.aspx"> <div class="box-content"> <em class="icon-featured fa fa-desktop"></em> <h5>Live Content</h5> </div> </a> </div> <div class="col-md-1"> <a href="/features/module-themes/live-forms.aspx"> <div class="box-content"> <em class="icon-featured fa fa-check-square-o"></em> <h5>Live Forms</h5> </div> </a> </div> <div class="col-md-1"> <a href="/features/module-themes/live-tabs.aspx"> <div class="box-content"> <em class="icon-featured fa fa-folder"></em> <h5>Live Tabs</h5> </div> </a> </div> </div> <br /> <div class="row center"> <div class="col-md-12" style="font-style: italic; color: black;"> <small> <sup>*</sup>These modules are sold separately - either individually or as part of our <a href="http://www.mandeeps.com/products/dnn-essentials.aspx" style="padding: 0px;">DNN Essentials</a> collection. </small> </div> </div> </div> </div> <div id="menuOptions" class="tab-pane"> <div class="row"> <div class="col-md-2"> <div class="thumb-info-wrapper"> <img alt="" src="http://tucson.mandeeps.com/portals/21/img/Hamburger.jpg" class="img-circle" /> <span class="thumb-info-action"> <a href="https://www.youtube.com/watch?v=m0nGzjL_WI0" target="_blank"><span class="thumb-info-action-icon thumb-info-action-icon-light"><em class="fa fa-play-circle"></em></span></a> </span> </div> <div class="thumb-info-caption"> <h5>Hamburger Menu</h5> <span class="thumb-info-caption-text text-justify">Resize and reduce your screen width or view this page in a mobile or table device</span> </div> </div> <div class="col-md-2"> <div class="thumb-info-wrapper"> <img alt="Dropdown Menu" src="http://tucson.mandeeps.com/portals/21/img/Dropdown.jpg" class="img-circle" /> <span class="thumb-info-action"> <a href="https://www.youtube.com/watch?v=m0nGzjL_WI0" target="_blank"><span class="thumb-info-action-icon thumb-info-action-icon-light"><em class="fa fa-play-circle"></em></span></a> </span> </div> <div class="thumb-info-caption"> <h5>Dropdown Menu</h5> <span class="thumb-info-caption-text text-justify">Ideal for pages with few navigation links and sub menus.</span> </div> </div> <div class="col-md-2"> <div class="thumb-info-wrapper"> <img alt="Mega Menu" src="http://tucson.mandeeps.com/portals/21/img/Mega-munu.jpg" class="img-circle" /> <span class="thumb-info-action"> <a href="https://www.youtube.com/watch?v=m0nGzjL_WI0" target="_blank"><span class="thumb-info-action-icon thumb-info-action-icon-light"><em class="fa fa-play-circle"></em></span></a> </span> </div> <div class="thumb-info-caption"> <h5>Mega Menu</h5> <span class="thumb-info-caption-text text-justify">Best for menus with many navigational links grouped across 2, 3, or 4 columns.</span> </div> </div> <div class="col-md-2"> <div class="thumb-info-wrapper"> <img alt="Custom Menu" src="http://tucson.mandeeps.com/portals/21/img/Custom-menu.jpg" class="img-circle" /> <span class="thumb-info-action"> <a href="https://www.youtube.com/watch?v=m0nGzjL_WI0" target="_blank"><span class="thumb-info-action-icon thumb-info-action-icon-light"><em class="fa fa-play-circle"></em></span></a> </span> </div> <div class="thumb-info-caption"> <h5>Custom Menu</h5> <span class="thumb-info-caption-text text-justify">Unleash your creativity with HTML 5, CSS, and JavaScript to create interactive menus.</span> </div> </div> <div class="col-md-2"> <div class="thumb-info-wrapper"> <img alt="Vertical Menu" src="http://tucson.mandeeps.com/portals/21/img/vertical-menu.jpg" class="img-circle" /> <span class="thumb-info-action"> <a href="/features/navigations/vertical.aspx" target="_blank"><span class="thumb-info-action-icon thumb-info-action-icon-light"><em class="fa fa-link"></em></span></a> </span> </div> <div class="thumb-info-caption"> <h5>Vertical Menu</h5> <span class="thumb-info-caption-text text-justify">The menu can be displayed vertically by adding DDR Menu on any of the page.</span> </div> </div> </div> <br /> <a href="/features/navigations/colors.aspx"> <button class="btn btn-primary mr-xs mb-sm" type="button">Individual Navigation Colors</button> </a> </div> <div id="headersFooters" class="tab-pane"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="row"> <div class="col-md-2"> <a href="/home/classic/classic-default.aspx"> <div class="thumb-info thumb-info-no-zoom thumb-info-lighten thumb-info-centered-info"> <span class="thumb-info-wrapper"> <img alt="Layouts-1" src="http://tucson.mandeeps.com/portals/21/img/header-1.jpg" class="img-circle" /> </span> </div> <div class="thumb-info-caption"> <h5>Header 1</h5> </div> </a> </div> <div class="col-md-2"> <a href="/features/headers/header-2.aspx"> <div class="thumb-info thumb-info-no-zoom thumb-info-lighten thumb-info-centered-info"> <span class="thumb-info-wrapper"> <img alt="Layouts-2" src="http://tucson.mandeeps.com/portals/21/img/header-2.jpg" class="img-circle" /> </span> </div> <div class="thumb-info-caption"> <h5>Header 2</h5> </div> </a> </div> <div class="col-md-2"> <a href="/features/footers/footer-version-1.aspx#footer"> <div class="thumb-info thumb-info-no-zoom thumb-info-lighten thumb-info-centered-info"> <span class="thumb-info-wrapper"> <img alt="Layouts-1" src="http://tucson.mandeeps.com/portals/21/img/footer-basic.jpg" class="img-circle" /> </span> </div> <div class="thumb-info-caption"> <h5>Footer 1</h5> </div> </a> </div> <div class="col-md-2"> <a href="/features/footers/footer-version-2.aspx#footer"> <div class="thumb-info thumb-info-no-zoom thumb-info-lighten thumb-info-centered-info"> <span class="thumb-info-wrapper"> <img alt="Layouts-2" src="http://tucson.mandeeps.com/portals/21/img/footer-Advance.jpg" class="img-circle" /> </span> </div> <div class="thumb-info-caption"> <h5>Footer 2</h5> </div> </a> </div> <div class="col-md-2"> <a href="/features/footers/footer-version-3.aspx#footer"> <div class="thumb-info thumb-info-no-zoom thumb-info-lighten thumb-info-centered-info"> <span class="thumb-info-wrapper"> <img alt="Layouts-3" src="http://tucson.mandeeps.com/portals/21/img/footer-simple.jpg" class="img-circle" /> </span> </div> <div class="thumb-info-caption"> <h5>Footer 3</h5> </div> </a> </div> </div> </div> </div> </div> <div id="layouts" class="tab-pane"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="row"> <div class="col-md-3"> <a href="http://tucson.mandeeps.com"> <div class="thumb-info thumb-info-no-zoom thumb-info-lighten thumb-info-centered-info"> <span class="thumb-info-wrapper"> <img alt="Layouts-1" src="http://tucson.mandeeps.com/portals/21/img/Wide.jpg" class="img-circle" /> </span> </div> <div class="thumb-info-caption"> <h5>Wide</h5> </div> </a> </div> <div class="col-md-3"> <a href="/features/layouts/boxed.aspx"> <div class="thumb-info thumb-info-no-zoom thumb-info-lighten thumb-info-centered-info"> <span class="thumb-info-wrapper"> <img alt="Layouts-2" src="http://tucson.mandeeps.com/portals/21/img/boxed.jpg" class="img-circle" /> </span> </div> <div class="thumb-info-caption"> <h5>Boxed</h5> </div> </a> </div> <div class="col-md-3"> <a href="/features/layouts/background-image.aspx"> <div class="thumb-info thumb-info-no-zoom thumb-info-lighten thumb-info-centered-info"> <span class="thumb-info-wrapper"> <img alt="Layouts-4" src="http://tucson.mandeeps.com/portals/21/img/Images.jpg" class="img-circle" /> </span> </div> <div class="thumb-info-caption"> <h5>Background-Images</h5> </div> </a> </div> <div class="col-md-3"> <a href="/features/layouts/background-pattern.aspx"> <div class="thumb-info thumb-info-no-zoom thumb-info-lighten thumb-info-centered-info"> <span class="thumb-info-wrapper"> <img alt="Layouts-5" src="http://tucson.mandeeps.com/portals/21/img/pattern.jpg" class="img-circle" /> </span> </div> <div class="thumb-info-caption"> <h5>Background-Patterns</h5> </div> </a> </div> </div> </div> </div> <a href="/features/pane-layout/home-layout.aspx"> <button class="btn btn-primary mr-xs mb-sm" type="button">Panes Layout</button> </a> </div> </div> </div> </div>
Portfolio
4 Columns
3 Columns
2 Columns
Portfolio Lightbox
Portfolio Timeline
Portfolio Full Width
Single - Basic
Single - Extended
Single - Sidebar
Pages
About Us
About Me
Left Sidebar
Right Sidebar
Custom Header
Product Header
Overlay Header
404 Error
Team
Services
Careers
FAQ
Login
Sitemap Page
Contact Us
Features
/
Pane Layout
Pane Layout
ContentPaneFull
ContentPane
TopPaneFull
TopPane
TopRightSidebarOuter
TopLeftSidebarOuter
TopLeft
TopRight
TopLeftPane
TopCenterPane
TopRightPane
TopLeftOuter
TopLeftInner
TopRightInner
TopRightOuter
MiddlePaneFull
MiddlePane
RightSidebarOuter
RightSiderbar
LeftSiderbar
TopLeftSiderbarOuter
LeftPane
RightPane
BottomLeftPane
BottomCenterPane
BottomRightPane
BottomLeftOuter
BottomLeftInner
BottomRightInner
BottomRightOuter
BottomPane
BottomPaneFull