1502 lines
74 KiB
HTML
1502 lines
74 KiB
HTML
<!doctype html>
|
||
<html class="no-js" lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||
<title>Hurst Furniture Template</title>
|
||
<meta name="description" content="Hurst – Furniture Store eCommerce HTML Template is a clean and elegant design – suitable for selling flower, cookery, accessories, fashion, high fashion, accessories, digital, kids, watches, jewelries, shoes, kids, furniture, sports….. It has a fully responsive width adjusts automatically to any screen size or resolution.">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
||
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
|
||
<!-- Place favicon.ico in the root directory -->
|
||
|
||
<!-- Google Font -->
|
||
<link href='https://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
|
||
<link href='https://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
|
||
|
||
<!-- all css here -->
|
||
<!-- bootstrap v5 css -->
|
||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||
<!-- animate css -->
|
||
<link rel="stylesheet" href="css/animate.min.css">
|
||
<!-- jquery-ui.min css -->
|
||
<link rel="stylesheet" href="css/jquery-ui.min.css">
|
||
<!-- meanmenu css -->
|
||
<link rel="stylesheet" href="css/meanmenu.min.css">
|
||
<!-- nivo-slider css -->
|
||
<link rel="stylesheet" href="lib/css/nivo-slider.css">
|
||
<link rel="stylesheet" href="lib/css/preview.css">
|
||
<!-- slick css -->
|
||
<link rel="stylesheet" href="css/slick.min.css">
|
||
<!-- lightbox css -->
|
||
<link rel="stylesheet" href="css/lightbox.min.css">
|
||
<!-- material-design-iconic-font css -->
|
||
<link rel="stylesheet" href="css/material-design-iconic-font.css">
|
||
<!-- All common css of theme -->
|
||
<link rel="stylesheet" href="css/default.css">
|
||
<!-- style css -->
|
||
<link rel="stylesheet" href="style.css">
|
||
<!-- shortcode css -->
|
||
<link rel="stylesheet" href="css/shortcode.css">
|
||
<!-- responsive css -->
|
||
<link rel="stylesheet" href="css/responsive.css">
|
||
<!-- modernizr css -->
|
||
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
|
||
</head>
|
||
<body>
|
||
<!-- WRAPPER START -->
|
||
<div class="wrapper bg-white">
|
||
|
||
<!-- HEADER-AREA START -->
|
||
<header id="sticky-menu" class="header header-2">
|
||
<div class="header-area">
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-md-4 offset-md-4 col-7">
|
||
<div class="logo text-md-center">
|
||
<a href="index.html"><img src="img/logo/logo.png" alt="" /></a>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 col-5">
|
||
<div class="mini-cart text-end">
|
||
<ul>
|
||
<li>
|
||
<a class="cart-icon" href="#">
|
||
<i class="zmdi zmdi-shopping-cart"></i>
|
||
<span>3</span>
|
||
</a>
|
||
<div class="mini-cart-brief text-left">
|
||
<div class="cart-items">
|
||
<p class="mb-0">You have <span>03 items</span> in your shopping bag</p>
|
||
</div>
|
||
<div class="all-cart-product clearfix">
|
||
<div class="single-cart clearfix">
|
||
<div class="cart-photo">
|
||
<a href="#"><img src="img/cart/1.jpg" alt="" /></a>
|
||
</div>
|
||
<div class="cart-info">
|
||
<h5><a href="#">dummy product name</a></h5>
|
||
<p class="mb-0">Price : $ 100.00</p>
|
||
<p class="mb-0">Qty : 02 </p>
|
||
<span class="cart-delete"><a href="#"><i class="zmdi zmdi-close"></i></a></span>
|
||
</div>
|
||
</div>
|
||
<div class="single-cart clearfix">
|
||
<div class="cart-photo">
|
||
<a href="#"><img src="img/cart/2.jpg" alt="" /></a>
|
||
</div>
|
||
<div class="cart-info">
|
||
<h5><a href="#">dummy product name</a></h5>
|
||
<p class="mb-0">Price : $ 300.00</p>
|
||
<p class="mb-0">Qty : 01 </p>
|
||
<span class="cart-delete"><a href="#"><i class="zmdi zmdi-close"></i></a></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cart-totals">
|
||
<h5 class="mb-0">Total <span class="floatright">$500.00</span></h5>
|
||
</div>
|
||
<div class="cart-bottom clearfix">
|
||
<a href="cart.html" class="button-one floatleft text-uppercase" data-text="View cart">View cart</a>
|
||
<a href="checkout.html" class="button-one floatright text-uppercase" data-text="Check out">Check out</a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- MAIN-MENU START -->
|
||
<div class="menu-toggle menu-toggle-2 hamburger hamburger--emphatic d-none d-md-block">
|
||
<div class="hamburger-box">
|
||
<div class="hamburger-inner"></div>
|
||
</div>
|
||
</div>
|
||
<div class="main-menu d-none d-md-block">
|
||
<nav>
|
||
<ul>
|
||
<li><a href="index.html">home</a>
|
||
<div class="sub-menu menu-scroll">
|
||
<ul>
|
||
<li class="menu-title">Page's</li>
|
||
<li><a href="index.html">Home Version 1</a></li>
|
||
<li><a href="index-2.html">Home Version 2</a></li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li><a href="shop.html">products</a>
|
||
<div class="mega-menu menu-scroll">
|
||
<div class="table">
|
||
<div class="table-cell">
|
||
<div class="half-width">
|
||
<ul>
|
||
<li class="menu-title">best brands</li>
|
||
<li><a href="#">henning koppel</a></li>
|
||
<li><a href="#">jehs + Laub</a></li>
|
||
<li><a href="#">vicke lindstrand</a></li>
|
||
<li><a href="#">don chadwick</a></li>
|
||
<li><a href="#">akiko kuwahata</a></li>
|
||
<li><a href="#">barbro berlin</a></li>
|
||
<li><a href="#">cecilia hall</a></li>
|
||
<li><a href="#">don chadwick</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="half-width">
|
||
<ul>
|
||
<li class="menu-title">popular brands</li>
|
||
<li><a href="#">akiko kuwahata</a></li>
|
||
<li><a href="#">barbro berlin</a></li>
|
||
<li><a href="#">cecilia hall</a></li>
|
||
<li><a href="#">don chadwick</a></li>
|
||
<li><a href="#">henning koppel</a></li>
|
||
<li><a href="#">jehs + Laub</a></li>
|
||
<li><a href="#">vicke lindstrand</a></li>
|
||
<li><a href="#">don chadwick</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="full-width">
|
||
<div class="mega-menu-img">
|
||
<a href="single-product.html"><img src="img/megamenu/1.jpg" alt="" /></a>
|
||
</div>
|
||
</div>
|
||
<div class="pb-80"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li><a href="#">Shortcodes</a>
|
||
<div class="sub-menu menu-scroll">
|
||
<ul>
|
||
<li class="menu-title">Shortcodes</li>
|
||
<li><a href="elements-accordions.html">Accordion</a></li>
|
||
<li><a href="elements-toggles.html">Toggles</a></li>
|
||
<li><a href="elements-tab.html">Tab</a></li>
|
||
<li><a href="elements-product-tab.html">Product Tab</a></li>
|
||
<li><a href="elements-product-tab-2.html">Product Tab 2</a></li>
|
||
<li><a href="elements-carousel.html">product carousel</a></li>
|
||
<li><a href="elements-carousel-2.html">product carousel 2</a></li>
|
||
<li><a href="elements-featured-product.html">Featured Product</a></li>
|
||
<li><a href="elements-featured-product-2.html">Featured Product 2</a></li>
|
||
<li><a href="elements-button.html">Button</a></li>
|
||
<li><a href="elements-table.html">Table</a></li>
|
||
<li><a href="elements-progress-bars.html">Progress Bar</a></li>
|
||
<li><a href="elements-blog.html">Blog</a></li>
|
||
<li><a href="elements-blog-2.html">Blog - 2</a></li>
|
||
<li><a href="elements-team.html">Team</a></li>
|
||
<li><a href="elements-footer.html">Footer</a></li>
|
||
<li><a href="elements-footer-2.html">Footer 2</a></li>
|
||
<li><a href="elements-map.html">Map</a></li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li><a href="shop-sidebar.html">accesories</a></li>
|
||
<li><a href="shop-list.html">lookbook</a></li>
|
||
<li><a href="blog.html">blog</a></li>
|
||
<li><a href="#">pages</a>
|
||
<div class="sub-menu menu-scroll">
|
||
<ul>
|
||
<li class="menu-title">Page's</li>
|
||
<li><a href="shop.html">Shop</a></li>
|
||
<li><a href="shop-sidebar.html">Shop Sidebar</a></li>
|
||
<li><a href="shop-grid-right-sidebar.html">Shop Right Sidebar</a></li>
|
||
<li><a href="shop-list.html">Shop List</a></li>
|
||
<li><a href="shop-list-right-sidebar.html">Shop List right sidebar</a></li>
|
||
<li><a href="single-product.html">Single Product</a></li>
|
||
<li><a href="single-product-sidebar.html">Single Product Sidebar</a></li>
|
||
<li><a href="cart.html">Shopping Cart</a></li>
|
||
<li><a href="wishlist.html">Wishlist</a></li>
|
||
<li><a href="checkout.html">Checkout</a></li>
|
||
<li><a href="order.html">Order</a></li>
|
||
<li><a href="login.html">login / Registration</a></li>
|
||
<li><a href="my-account.html">My Account</a></li>
|
||
<li><a href="404.html">404</a></li>
|
||
<li><a href="blog.html">Blog</a></li>
|
||
<li><a href="single-blog.html">Single Blog</a></li>
|
||
<li><a href="single-blog-sidebar.html">Single Blog Sidebar</a></li>
|
||
<li><a href="about.html">About Us</a></li>
|
||
<li><a href="contact.html">Contact</a></li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li><a href="about.html">about us</a></li>
|
||
<li><a href="contact.html">contact</a></li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
<!-- MAIN-MENU END -->
|
||
</header>
|
||
<!-- HEADER-AREA END -->
|
||
<!-- Mobile-menu start -->
|
||
<div class="mobile-menu-area">
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-xs-12 d-block d-md-none">
|
||
<div class="mobile-menu">
|
||
<nav id="dropdown">
|
||
<ul>
|
||
<li><a href="index.html">home</a>
|
||
<ul>
|
||
<li><a href="index.html">Home Version 1</a></li>
|
||
<li><a href="index-2.html">Home Version 2</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="shop.html">products</a></li>
|
||
<li><a href="shop-sidebar.html">accesories</a></li>
|
||
<li><a href="shop-list.html">lookbook</a></li>
|
||
<li><a href="blog.html">blog</a></li>
|
||
<li><a href="#">pages</a>
|
||
<ul>
|
||
<li><a href="shop.html">Shop</a></li>
|
||
<li><a href="shop-sidebar.html">Shop Sidebar</a></li>
|
||
<li><a href="shop-list.html">Shop List</a></li>
|
||
<li><a href="single-product.html">Single Product</a></li>
|
||
<li><a href="single-product-sidebar.html">Single Product Sidebar</a></li>
|
||
<li><a href="cart.html">Shopping Cart</a></li>
|
||
<li><a href="wishlist.html">Wishlist</a></li>
|
||
<li><a href="checkout.html">Checkout</a></li>
|
||
<li><a href="order.html">Order</a></li>
|
||
<li><a href="login.html">login / Registration</a></li>
|
||
<li><a href="my-account.html">My Account</a></li>
|
||
<li><a href="404.html">404</a></li>
|
||
<li><a href="blog.html">Blog</a></li>
|
||
<li><a href="single-blog.html">Single Blog</a></li>
|
||
<li><a href="single-blog-sidebar.html">Single Blog Sidebar</a></li>
|
||
<li><a href="about.html">About Us</a></li>
|
||
<li><a href="contact.html">Contact</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="about.html">about us</a></li>
|
||
<li><a href="contact.html">contact</a></li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Mobile-menu end -->
|
||
<!-- HEADING-BANNER START -->
|
||
<div class="heading-banner-area overlay-bg">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<div class="heading-banner">
|
||
<div class="heading-banner-title">
|
||
<h2>Tab</h2>
|
||
</div>
|
||
<div class="breadcumbs pb-15">
|
||
<ul>
|
||
<li><a href="index.html">Home</a></li>
|
||
<li><a href="#">Shortcodes</a></li>
|
||
<li>Tab</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- HEADING-BANNER END -->
|
||
<!-- ELEMENTS-TAB START -->
|
||
<div class="elements-tab pt-80 pb-80">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="elements-section-title mb-30 mt-20">
|
||
<h2>Tab style 1 </h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<!-- element menu start -->
|
||
<div class="pb-30">
|
||
<!-- Nav tabs -->
|
||
<ul class="elements-menu nav">
|
||
<li><a class="active" href="#elements-preview-1" data-bs-toggle="tab">PREVIEW</a></li>
|
||
<li><a href="#elements-html-1" data-bs-toggle="tab">HTML</a></li>
|
||
<li><a href="#elements-css-1" data-bs-toggle="tab">CSS</a></li>
|
||
<li><a href="#elements-js-1" data-bs-toggle="tab">JS</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- element menu end -->
|
||
<!-- Tab panes -->
|
||
<div class="tab-content row">
|
||
<div class="tab-pane active" id="elements-preview-1">
|
||
<div class="elements-tab-3">
|
||
<!-- Nav tabs -->
|
||
<div class="text-left">
|
||
<ul class="elements-tab-menu nav clearfix">
|
||
<li><a class="active" href="#home3" data-bs-toggle="tab">Home</a></li>
|
||
<li><a href="#profile3" data-bs-toggle="tab">Profile</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- Tab panes -->
|
||
<div class="tab-content">
|
||
<div class="tab-pane active" id="home3">
|
||
<p>Home</p>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
|
||
</div>
|
||
<div class="tab-pane" id="profile3">
|
||
<p>Profile</p>
|
||
<p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-pane" id="elements-html-1">
|
||
<figure class="highlight">
|
||
<pre>
|
||
<code>
|
||
<div class="elements-tab-3">
|
||
<!-- Nav tabs -->
|
||
<div class="text-left">
|
||
<ul class="elements-tab-menu nav clearfix">
|
||
<li class="active"><a href="#home3" data-bs-toggle="tab">Home</a></li>
|
||
<li><a href="#profile3" data-bs-toggle="tab">Profile</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- Tab panes -->
|
||
<div class="tab-content">
|
||
<div class="tab-pane active" id="home3">
|
||
<p>Home</p>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
|
||
</div>
|
||
<div class="tab-pane" id="profile3">
|
||
<p>Profile</p>
|
||
<p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</code>
|
||
</pre>
|
||
</figure>
|
||
</div>
|
||
<div class="tab-pane" id="elements-css-1">
|
||
<figure class="highlight">
|
||
<pre>
|
||
<code>
|
||
.elements-tab .tab-content {
|
||
padding: 15px;
|
||
}
|
||
.elements-tab-1 .tab-content, .elements-tab-2 .tab-content {
|
||
border: 1px solid #ddd;
|
||
border-top: 0;
|
||
}
|
||
.elements-tab .nav-tabs > li {
|
||
display: inline-block;
|
||
float: none;
|
||
}
|
||
.elements-tab .nav-tabs li a {
|
||
border-radius: 5px 5px 0 0;
|
||
font-size: 16px;
|
||
margin-right: 1px;
|
||
}
|
||
.elements-tab .nav-tabs li.active a {
|
||
color: #C8A165;
|
||
}
|
||
|
||
/* elements-tab-3 */
|
||
.elements-tab-menu {
|
||
display: inline-block;
|
||
}
|
||
.elements-tab-menu li {
|
||
display: block;
|
||
float: left;
|
||
margin: 0 2px;
|
||
}
|
||
.elements-tab-menu li a {
|
||
background: #ddd none repeat scroll 0 0;
|
||
display: block;
|
||
font-size: 16px;
|
||
padding: 10px 20px;
|
||
}
|
||
.elements-tab-menu li.active a {
|
||
background: #C8A165 none repeat scroll 0 0;
|
||
color: #fff;
|
||
}
|
||
</code>
|
||
</pre>
|
||
</figure>
|
||
</div>
|
||
<div class="tab-pane" id="elements-js-1">
|
||
<figure class="highlight">
|
||
<pre>
|
||
<code>
|
||
|
||
</code>
|
||
</pre>
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<!-- element menu start -->
|
||
<div class="pb-30">
|
||
<!-- Nav tabs -->
|
||
<ul class="elements-menu nav">
|
||
<li><a class="active" href="#elements-preview-2" data-bs-toggle="tab">PREVIEW</a></li>
|
||
<li><a href="#elements-html-2" data-bs-toggle="tab">HTML</a></li>
|
||
<li><a href="#elements-css-2" data-bs-toggle="tab">CSS</a></li>
|
||
<li><a href="#elements-js-2" data-bs-toggle="tab">JS</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- element menu end -->
|
||
<!-- Tab panes -->
|
||
<div class="tab-content row">
|
||
<div class="tab-pane active" id="elements-preview-2">
|
||
<div class="elements-tab-4">
|
||
<!-- Nav tabs -->
|
||
<div class="text-end">
|
||
<ul class="elements-tab-menu nav clearfix">
|
||
<li><a class="active" href="#home4" data-bs-toggle="tab">Home</a></li>
|
||
<li><a href="#profile4" data-bs-toggle="tab">Profile</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- Tab panes -->
|
||
<div class="tab-content">
|
||
<div class="tab-pane active" id="home4">
|
||
<p>Home</p>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
|
||
</div>
|
||
<div class="tab-pane" id="profile4">
|
||
<p>Profile</p>
|
||
<p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-pane" id="elements-html-2">
|
||
<figure class="highlight">
|
||
<pre>
|
||
<code>
|
||
<div class="elements-tab-4">
|
||
<!-- Nav tabs -->
|
||
<div class="text-end">
|
||
<ul class="elements-tab-menu nav clearfix">
|
||
<li class="active"><a href="#home4" data-bs-toggle="tab">Home</a></li>
|
||
<li><a href="#profile4" data-bs-toggle="tab">Profile</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- Tab panes -->
|
||
<div class="tab-content">
|
||
<div class="tab-pane active" id="home4">
|
||
<p>Home</p>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
|
||
</div>
|
||
<div class="tab-pane" id="profile4">
|
||
<p>Profile</p>
|
||
<p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</code>
|
||
</pre>
|
||
</figure>
|
||
</div>
|
||
<div class="tab-pane" id="elements-css-2">
|
||
<figure class="highlight">
|
||
<pre>
|
||
<code>
|
||
.elements-tab .tab-content {
|
||
padding: 15px;
|
||
}
|
||
.elements-tab-1 .tab-content, .elements-tab-2 .tab-content {
|
||
border: 1px solid #ddd;
|
||
border-top: 0;
|
||
}
|
||
.elements-tab .nav-tabs > li {
|
||
display: inline-block;
|
||
float: none;
|
||
}
|
||
.elements-tab .nav-tabs li a {
|
||
border-radius: 5px 5px 0 0;
|
||
font-size: 16px;
|
||
margin-right: 1px;
|
||
}
|
||
.elements-tab .nav-tabs li.active a {
|
||
color: #C8A165;
|
||
}
|
||
|
||
/* elements-tab-3 */
|
||
.elements-tab-menu {
|
||
display: inline-block;
|
||
}
|
||
.elements-tab-menu li {
|
||
display: block;
|
||
float: left;
|
||
margin: 0 2px;
|
||
}
|
||
.elements-tab-menu li a {
|
||
background: #ddd none repeat scroll 0 0;
|
||
display: block;
|
||
font-size: 16px;
|
||
padding: 10px 20px;
|
||
}
|
||
.elements-tab-menu li.active a {
|
||
background: #C8A165 none repeat scroll 0 0;
|
||
color: #fff;
|
||
}
|
||
</code>
|
||
</pre>
|
||
</figure>
|
||
</div>
|
||
<div class="tab-pane" id="elements-js-2">
|
||
<figure class="highlight">
|
||
<pre>
|
||
<code>
|
||
|
||
</code>
|
||
</pre>
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<hr class="tall"> <!-- border -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="elements-section-title mb-30 mt-20">
|
||
<h2>Tab style 2 </h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<!-- element menu start -->
|
||
<div class="pb-30">
|
||
<!-- Nav tabs -->
|
||
<ul class="elements-menu nav">
|
||
<li><a class="active" href="#elements-preview-3" data-bs-toggle="tab">PREVIEW</a></li>
|
||
<li><a href="#elements-html-3" data-bs-toggle="tab">HTML</a></li>
|
||
<li><a href="#elements-css-3" data-bs-toggle="tab">CSS</a></li>
|
||
<li><a href="#elements-js-3" data-bs-toggle="tab">JS</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- element menu end -->
|
||
<!-- Tab panes -->
|
||
<div class="tab-content row">
|
||
<div class="tab-pane active" id="elements-preview-3">
|
||
<div class="elements-tab-3">
|
||
<!-- Tab panes -->
|
||
<div class="tab-content">
|
||
<div class="tab-pane active" id="home5">
|
||
<p>Home</p>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
|
||
</div>
|
||
<div class="tab-pane" id="profile5">
|
||
<p>Profile</p>
|
||
<p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
|
||
</div>
|
||
</div>
|
||
<!-- Nav tabs -->
|
||
<div class="text-left">
|
||
<ul class="elements-tab-menu nav clearfix">
|
||
<li><a class="active" href="#home5" data-bs-toggle="tab">Home</a></li>
|
||
<li><a href="#profile5" data-bs-toggle="tab">Profile</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-pane" id="elements-html-3">
|
||
<figure class="highlight">
|
||
<pre>
|
||
<code>
|
||
<div class="elements-tab-3">
|
||
<!-- Tab panes -->
|
||
<div class="tab-content">
|
||
<div class="tab-pane active" id="home5">
|
||
<p>Home</p>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
|
||
</div>
|
||
<div class="tab-pane" id="profile5">
|
||
<p>Profile</p>
|
||
<p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
|
||
</div>
|
||
</div>
|
||
<!-- Nav tabs -->
|
||
<div class="text-left">
|
||
<ul class="elements-tab-menu nav clearfix">
|
||
<li class="active"><a href="#home5" data-bs-toggle="tab">Home</a></li>
|
||
<li><a href="#profile5" data-bs-toggle="tab">Profile</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</code>
|
||
</pre>
|
||
</figure>
|
||
</div>
|
||
<div class="tab-pane" id="elements-css-3">
|
||
<figure class="highlight">
|
||
<pre>
|
||
<code>
|
||
.elements-tab .tab-content {
|
||
padding: 15px;
|
||
}
|
||
.elements-tab-1 .tab-content, .elements-tab-2 .tab-content {
|
||
border: 1px solid #ddd;
|
||
border-top: 0;
|
||
}
|
||
.elements-tab .nav-tabs > li {
|
||
display: inline-block;
|
||
float: none;
|
||
}
|
||
.elements-tab .nav-tabs li a {
|
||
border-radius: 5px 5px 0 0;
|
||
font-size: 16px;
|
||
margin-right: 1px;
|
||
}
|
||
.elements-tab .nav-tabs li.active a {
|
||
color: #C8A165;
|
||
}
|
||
|
||
/* elements-tab-3 */
|
||
.elements-tab-menu {
|
||
display: inline-block;
|
||
}
|
||
.elements-tab-menu li {
|
||
display: block;
|
||
float: left;
|
||
margin: 0 2px;
|
||
}
|
||
.elements-tab-menu li a {
|
||
background: #ddd none repeat scroll 0 0;
|
||
display: block;
|
||
font-size: 16px;
|
||
padding: 10px 20px;
|
||
}
|
||
.elements-tab-menu li.active a {
|
||
background: #C8A165 none repeat scroll 0 0;
|
||
color: #fff;
|
||
}
|
||
</code>
|
||
</pre>
|
||
</figure>
|
||
</div>
|
||
<div class="tab-pane" id="elements-js-3">
|
||
<figure class="highlight">
|
||
<pre>
|
||
<code>
|
||
|
||
</code>
|
||
</pre>
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<!-- element menu start -->
|
||
<div class="pb-30">
|
||
<!-- Nav tabs -->
|
||
<ul class="elements-menu nav">
|
||
<li><a class="active" href="#elements-preview-4" data-bs-toggle="tab">PREVIEW</a></li>
|
||
<li><a href="#elements-html-4" data-bs-toggle="tab">HTML</a></li>
|
||
<li><a href="#elements-css-4" data-bs-toggle="tab">CSS</a></li>
|
||
<li><a href="#elements-js-4" data-bs-toggle="tab">JS</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- element menu end -->
|
||
<!-- Tab panes -->
|
||
<div class="tab-content row">
|
||
<div class="tab-pane active" id="elements-preview-4">
|
||
<div class="elements-tab-4">
|
||
<!-- Tab panes -->
|
||
<div class="tab-content">
|
||
<div class="tab-pane active" id="home6">
|
||
<p>Home</p>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
|
||
</div>
|
||
<div class="tab-pane" id="profile6">
|
||
<p>Profile</p>
|
||
<p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
|
||
</div>
|
||
</div>
|
||
<!-- Nav tabs -->
|
||
<div class="text-end">
|
||
<ul class="elements-tab-menu nav clearfix">
|
||
<li><a class="active" href="#home6" data-bs-toggle="tab">Home</a></li>
|
||
<li><a href="#profile6" data-bs-toggle="tab">Profile</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-pane" id="elements-html-4">
|
||
<figure class="highlight">
|
||
<pre>
|
||
<code>
|
||
<div class="elements-tab-4">
|
||
<!-- Tab panes -->
|
||
<div class="tab-content">
|
||
<div class="tab-pane active" id="home6">
|
||
<p>Home</p>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
|
||
</div>
|
||
<div class="tab-pane" id="profile6">
|
||
<p>Profile</p>
|
||
<p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
|
||
</div>
|
||
</div>
|
||
<!-- Nav tabs -->
|
||
<div class="text-end">
|
||
<ul class="elements-tab-menu nav clearfix">
|
||
<li class="active"><a href="#home6" data-bs-toggle="tab">Home</a></li>
|
||
<li><a href="#profile6" data-bs-toggle="tab">Profile</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</code>
|
||
</pre>
|
||
</figure>
|
||
</div>
|
||
<div class="tab-pane" id="elements-css-4">
|
||
<figure class="highlight">
|
||
<pre>
|
||
<code>
|
||
.elements-tab .tab-content {
|
||
padding: 15px;
|
||
}
|
||
.elements-tab-1 .tab-content, .elements-tab-2 .tab-content {
|
||
border: 1px solid #ddd;
|
||
border-top: 0;
|
||
}
|
||
.elements-tab .nav-tabs > li {
|
||
display: inline-block;
|
||
float: none;
|
||
}
|
||
.elements-tab .nav-tabs li a {
|
||
border-radius: 5px 5px 0 0;
|
||
font-size: 16px;
|
||
margin-right: 1px;
|
||
}
|
||
.elements-tab .nav-tabs li.active a {
|
||
color: #C8A165;
|
||
}
|
||
|
||
/* elements-tab-3 */
|
||
.elements-tab-menu {
|
||
display: inline-block;
|
||
}
|
||
.elements-tab-menu li {
|
||
display: block;
|
||
float: left;
|
||
margin: 0 2px;
|
||
}
|
||
.elements-tab-menu li a {
|
||
background: #ddd none repeat scroll 0 0;
|
||
display: block;
|
||
font-size: 16px;
|
||
padding: 10px 20px;
|
||
}
|
||
.elements-tab-menu li.active a {
|
||
background: #C8A165 none repeat scroll 0 0;
|
||
color: #fff;
|
||
}
|
||
</code>
|
||
</pre>
|
||
</figure>
|
||
</div>
|
||
<div class="tab-pane" id="elements-js-4">
|
||
<figure class="highlight">
|
||
<pre>
|
||
<code>
|
||
|
||
</code>
|
||
</pre>
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<hr class="tall"> <!-- border -->
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="elements-section-title mb-30 mt-20">
|
||
<h2>Tab style 3 </h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<!-- element menu start -->
|
||
<div class="pb-30">
|
||
<!-- Nav tabs -->
|
||
<ul class="elements-menu nav">
|
||
<li><a class="active" href="#elements-preview-5" data-bs-toggle="tab">PREVIEW</a></li>
|
||
<li><a href="#elements-html-5" data-bs-toggle="tab">HTML</a></li>
|
||
<li><a href="#elements-css-5" data-bs-toggle="tab">CSS</a></li>
|
||
<li><a href="#elements-js-5" data-bs-toggle="tab">JS</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- element menu end -->
|
||
<!-- Tab panes -->
|
||
<div class="tab-content row">
|
||
<div class="tab-pane active" id="elements-preview-5">
|
||
<div class="elements-tab-1">
|
||
<!-- Nav tabs -->
|
||
<ul class="nav nav-tabs" role="tablist">
|
||
<li role="presentation" class="nav-item"><a class="active nav-link" href="#home" aria-controls="home" role="tab" data-bs-toggle="tab">Home</a></li>
|
||
<li role="presentation" class="nav-item"><a class="nav-link" href="#profile" aria-controls="profile" role="tab" data-bs-toggle="tab">Profile</a></li>
|
||
</ul>
|
||
<!-- Tab panes -->
|
||
<div class="tab-content">
|
||
<div role="tabpanel" class="tab-pane active" id="home">
|
||
<p>Popular</p>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
|
||
</div>
|
||
<div role="tabpanel" class="tab-pane" id="profile">
|
||
<p>Profile</p>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-pane" id="elements-html-5">
|
||
<figure class="highlight">
|
||
<pre>
|
||
<code>
|
||
<div class="elements-tab-1">
|
||
<!-- Nav tabs -->
|
||
<ul class="nav nav-tabs" role="tablist">
|
||
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-bs-toggle="tab">Home</a></li>
|
||
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-bs-toggle="tab">Profile</a></li>
|
||
</ul>
|
||
<!-- Tab panes -->
|
||
<div class="tab-content">
|
||
<div role="tabpanel" class="tab-pane active" id="home">
|
||
<p>Popular</p>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
|
||
</div>
|
||
<div role="tabpanel" class="tab-pane" id="profile">
|
||
<p>Profile</p>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</code>
|
||
</pre>
|
||
</figure>
|
||
</div>
|
||
<div class="tab-pane" id="elements-css-5">
|
||
<figure class="highlight">
|
||
<pre>
|
||
<code>
|
||
.elements-tab .tab-content {
|
||
padding: 15px;
|
||
}
|
||
.elements-tab-1 .tab-content, .elements-tab-2 .tab-content {
|
||
border: 1px solid #ddd;
|
||
border-top: 0;
|
||
}
|
||
.elements-tab .nav-tabs > li {
|
||
display: inline-block;
|
||
float: none;
|
||
}
|
||
.elements-tab .nav-tabs li a {
|
||
border-radius: 5px 5px 0 0;
|
||
font-size: 16px;
|
||
margin-right: 1px;
|
||
}
|
||
.elements-tab .nav-tabs li.active a {
|
||
color: #C8A165;
|
||
}
|
||
|
||
/* elements-tab-3 */
|
||
.elements-tab-menu {
|
||
display: inline-block;
|
||
}
|
||
.elements-tab-menu li {
|
||
display: block;
|
||
float: left;
|
||
margin: 0 2px;
|
||
}
|
||
.elements-tab-menu li a {
|
||
background: #ddd none repeat scroll 0 0;
|
||
display: block;
|
||
font-size: 16px;
|
||
padding: 10px 20px;
|
||
}
|
||
.elements-tab-menu li.active a {
|
||
background: #C8A165 none repeat scroll 0 0;
|
||
color: #fff;
|
||
}
|
||
</code>
|
||
</pre>
|
||
</figure>
|
||
</div>
|
||
<div class="tab-pane" id="elements-js-5">
|
||
<figure class="highlight">
|
||
<pre>
|
||
<code>
|
||
|
||
</code>
|
||
</pre>
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<!-- element menu start -->
|
||
<div class="pb-30">
|
||
<!-- Nav tabs -->
|
||
<ul class="elements-menu nav">
|
||
<li><a class="active" href="#elements-preview-6" data-bs-toggle="tab">PREVIEW</a></li>
|
||
<li><a href="#elements-html-6" data-bs-toggle="tab">HTML</a></li>
|
||
<li><a href="#elements-css-6" data-bs-toggle="tab">CSS</a></li>
|
||
<li><a href="#elements-js-6" data-bs-toggle="tab">JS</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- element menu end -->
|
||
<!-- Tab panes -->
|
||
<div class="tab-content row">
|
||
<div class="tab-pane active" id="elements-preview-6">
|
||
<div class="elements-tab-2">
|
||
<!-- Nav tabs -->
|
||
<ul class="nav nav-tabs justify-content-end" role="tablist">
|
||
<li role="presentation" class="nav-item"><a class="active nav-link" href="#home2" aria-controls="home2" role="tab" data-bs-toggle="tab">Home</a></li>
|
||
<li role="presentation" class="nav-item"><a class="nav-link" href="#profile2" aria-controls="profile2" role="tab" data-bs-toggle="tab">Profile</a></li>
|
||
</ul>
|
||
<!-- Tab panes -->
|
||
<div class="tab-content">
|
||
<div role="tabpanel" class="tab-pane active" id="home2">
|
||
<p>Popular</p>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
|
||
</div>
|
||
<div role="tabpanel" class="tab-pane" id="profile2">
|
||
<p>Profile</p>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-pane" id="elements-html-6">
|
||
<figure class="highlight">
|
||
<pre>
|
||
<code>
|
||
<div class="elements-tab-2">
|
||
<!-- Nav tabs -->
|
||
<ul class="nav nav-tabs text-end" role="tablist">
|
||
<li role="presentation" class="active"><a href="#home2" aria-controls="home2" role="tab" data-bs-toggle="tab">Home</a></li>
|
||
<li role="presentation"><a href="#profile2" aria-controls="profile2" role="tab" data-bs-toggle="tab">Profile</a></li>
|
||
</ul>
|
||
<!-- Tab panes -->
|
||
<div class="tab-content">
|
||
<div role="tabpanel" class="tab-pane active" id="home2">
|
||
<p>Popular</p>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
|
||
</div>
|
||
<div role="tabpanel" class="tab-pane" id="profile2">
|
||
<p>Profile</p>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</code>
|
||
</pre>
|
||
</figure>
|
||
</div>
|
||
<div class="tab-pane" id="elements-css-6">
|
||
<figure class="highlight">
|
||
<pre>
|
||
<code>
|
||
.elements-tab .tab-content {
|
||
padding: 15px;
|
||
}
|
||
.elements-tab-1 .tab-content, .elements-tab-2 .tab-content {
|
||
border: 1px solid #ddd;
|
||
border-top: 0;
|
||
}
|
||
.elements-tab .nav-tabs > li {
|
||
display: inline-block;
|
||
float: none;
|
||
}
|
||
.elements-tab .nav-tabs li a {
|
||
border-radius: 5px 5px 0 0;
|
||
font-size: 16px;
|
||
margin-right: 1px;
|
||
}
|
||
.elements-tab .nav-tabs li.active a {
|
||
color: #C8A165;
|
||
}
|
||
|
||
/* elements-tab-3 */
|
||
.elements-tab-menu {
|
||
display: inline-block;
|
||
}
|
||
.elements-tab-menu li {
|
||
display: block;
|
||
float: left;
|
||
margin: 0 2px;
|
||
}
|
||
.elements-tab-menu li a {
|
||
background: #ddd none repeat scroll 0 0;
|
||
display: block;
|
||
font-size: 16px;
|
||
padding: 10px 20px;
|
||
}
|
||
.elements-tab-menu li.active a {
|
||
background: #C8A165 none repeat scroll 0 0;
|
||
color: #fff;
|
||
}
|
||
</code>
|
||
</pre>
|
||
</figure>
|
||
</div>
|
||
<div class="tab-pane" id="elements-js-6">
|
||
<figure class="highlight">
|
||
<pre>
|
||
<code>
|
||
|
||
</code>
|
||
</pre>
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<hr class="tall"> <!-- border -->
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="elements-section-title mb-30 mt-20">
|
||
<h2>Tab style 4 </h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<!-- element menu start -->
|
||
<div class="pb-30">
|
||
<!-- Nav tabs -->
|
||
<ul class="elements-menu nav">
|
||
<li><a class="active" href="#elements-preview-7" data-bs-toggle="tab">PREVIEW</a></li>
|
||
<li><a href="#elements-html-7" data-bs-toggle="tab">HTML</a></li>
|
||
<li><a href="#elements-css-7" data-bs-toggle="tab">CSS</a></li>
|
||
<li><a href="#elements-js-7" data-bs-toggle="tab">JS</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- element menu end -->
|
||
<!-- Tab panes -->
|
||
<div class="tab-content row">
|
||
<div class="tab-pane active" id="elements-preview-7">
|
||
<div class="elements-tab-7">
|
||
<!-- Nav tabs -->
|
||
<div class="text-left">
|
||
<ul class="nav nav-pills elements-tab-menu element-line-btm clearfix">
|
||
<li class="nav-item"><a class="nav-link active p-2" href="#home7" data-bs-toggle="tab">Home</a></li>
|
||
<li class="nav-item"><a class="nav-link p-2" href="#profile7" data-bs-toggle="tab">Profile</a></li>
|
||
<li class="nav-item"><a class="nav-link p-2" href="#message7" data-bs-toggle="tab">Message</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- Tab panes -->
|
||
<div class="tab-content">
|
||
<div class="tab-pane active" id="home7">
|
||
<p>Home</p>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
|
||
</div>
|
||
<div class="tab-pane" id="profile7">
|
||
<p>Profile</p>
|
||
<p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
|
||
</div>
|
||
<div class="tab-pane" id="message7">
|
||
<p>Message</p>
|
||
<p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-pane" id="elements-html-7">
|
||
<figure class="highlight">
|
||
<pre>
|
||
<code>
|
||
<div class="elements-tab-7">
|
||
<!-- Nav tabs -->
|
||
<div class="text-left">
|
||
<ul class="nav elements-tab-menu element-line-btm clearfix">
|
||
<li class="active"><a href="#home7" data-bs-toggle="tab">Home</a></li>
|
||
<li><a href="#profile7" data-bs-toggle="tab">Profile</a></li>
|
||
<li><a href="#message7" data-bs-toggle="tab">Message</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- Tab panes -->
|
||
<div class="tab-content">
|
||
<div class="tab-pane active" id="home7">
|
||
<p>Home</p>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
|
||
</div>
|
||
<div class="tab-pane" id="profile7">
|
||
<p>Profile</p>
|
||
<p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
|
||
</div>
|
||
<div class="tab-pane" id="message7">
|
||
<p>Message</p>
|
||
<p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</code>
|
||
</pre>
|
||
</figure>
|
||
</div>
|
||
<div class="tab-pane" id="elements-css-7">
|
||
<figure class="highlight">
|
||
<pre>
|
||
<code>
|
||
.elements-tab .tab-content {
|
||
padding: 15px;
|
||
}
|
||
.elements-tab-1 .tab-content, .elements-tab-2 .tab-content {
|
||
border: 1px solid #ddd;
|
||
border-top: 0;
|
||
}
|
||
.elements-tab .nav-tabs > li {
|
||
display: inline-block;
|
||
float: none;
|
||
}
|
||
.elements-tab .nav-tabs li a {
|
||
border-radius: 5px 5px 0 0;
|
||
font-size: 16px;
|
||
margin-right: 1px;
|
||
}
|
||
.elements-tab .nav-tabs li.active a {
|
||
color: #C8A165;
|
||
}
|
||
|
||
/* elements-tab-3 */
|
||
.elements-tab-menu {
|
||
display: inline-block;
|
||
}
|
||
.elements-tab-menu li {
|
||
display: block;
|
||
float: left;
|
||
margin: 0 2px;
|
||
}
|
||
.elements-tab-menu li a {
|
||
background: #ddd none repeat scroll 0 0;
|
||
display: block;
|
||
font-size: 16px;
|
||
padding: 10px 20px;
|
||
}
|
||
.elements-tab-menu li.active a {
|
||
background: #C8A165 none repeat scroll 0 0;
|
||
color: #fff;
|
||
}
|
||
/*elements-tab-7*/
|
||
.elements-tab-7 .elements-tab-menu li {
|
||
margin: 0 20px 0 0;
|
||
}
|
||
.elements-tab-7 .elements-tab-menu li a {
|
||
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
|
||
padding: 5px 0px;
|
||
}
|
||
.elements-tab-7 .elements-tab-menu li.active a {
|
||
color: #C8A165;
|
||
}
|
||
|
||
.element-line-btm li.active {
|
||
position: relative;
|
||
}
|
||
.element-line-btm li.active::before {
|
||
background: #d3b484 none repeat scroll 0 0;
|
||
bottom: 0;
|
||
content: "";
|
||
height: 2px;
|
||
left: 0;
|
||
position: absolute;
|
||
width: 40px;
|
||
}
|
||
.elements-tab-7 .element-line-btm li.active::before {
|
||
left: 0;
|
||
}
|
||
</code>
|
||
</pre>
|
||
</figure>
|
||
</div>
|
||
<div class="tab-pane" id="elements-js-7">
|
||
<figure class="highlight">
|
||
<pre>
|
||
<code>
|
||
|
||
</code>
|
||
</pre>
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<!-- element menu start -->
|
||
<div class="pb-30">
|
||
<!-- Nav tabs -->
|
||
<ul class="elements-menu nav">
|
||
<li><a class="active" href="#elements-preview-8" data-bs-toggle="tab">PREVIEW</a></li>
|
||
<li><a href="#elements-html-8" data-bs-toggle="tab">HTML</a></li>
|
||
<li><a href="#elements-css-8" data-bs-toggle="tab">CSS</a></li>
|
||
<li><a href="#elements-js-8" data-bs-toggle="tab">JS</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- element menu end -->
|
||
<!-- Tab panes -->
|
||
<div class="tab-content row">
|
||
<div class="tab-pane active" id="elements-preview-8">
|
||
<div class="elements-tab-8">
|
||
<!-- Nav tabs -->
|
||
<ul class="nav nav-pills d-flex justify-content-end elements-tab-menu element-line-btm clearfix">
|
||
<li class="nav-item"><a class="nav-link active p-2" href="#home8" data-bs-toggle="tab">Home</a></li>
|
||
<li class="nav-item"><a class="nav-link p-2" href="#profile8" data-bs-toggle="tab">Profile</a></li>
|
||
<li class="nav-item"><a class="nav-link p-2" href="#message8" data-bs-toggle="tab">Message</a></li>
|
||
</ul>
|
||
<!-- Tab panes -->
|
||
<div class="tab-content">
|
||
<div class="tab-pane active" id="home8">
|
||
<p>Home</p>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
|
||
</div>
|
||
<div class="tab-pane" id="profile8">
|
||
<p>Profile</p>
|
||
<p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
|
||
</div>
|
||
<div class="tab-pane" id="message8">
|
||
<p>Message</p>
|
||
<p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-pane" id="elements-html-8">
|
||
<figure class="highlight">
|
||
<pre>
|
||
<code>
|
||
<div class="elements-tab-8">
|
||
<!-- Nav tabs -->
|
||
<div class="text-end">
|
||
<ul class="nav elements-tab-menu element-line-btm clearfix">
|
||
<li class="active"><a href="#home8" data-bs-toggle="tab">Home</a></li>
|
||
<li><a href="#profile8" data-bs-toggle="tab">Profile</a></li>
|
||
<li><a href="#message8" data-bs-toggle="tab">Message</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- Tab panes -->
|
||
<div class="tab-content">
|
||
<div class="tab-pane active" id="home8">
|
||
<p>Home</p>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
|
||
</div>
|
||
<div class="tab-pane" id="profile8">
|
||
<p>Profile</p>
|
||
<p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
|
||
</div>
|
||
<div class="tab-pane" id="message8">
|
||
<p>Message</p>
|
||
<p>Accumsan per. Porttitor consectetuer a, ultrices parturient. Natoque suspendisse mollis ante lacus praesent, risus placerat pede elit, a a dolor nam orci blandit lectus.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</code>
|
||
</pre>
|
||
</figure>
|
||
</div>
|
||
<div class="tab-pane" id="elements-css-8">
|
||
<figure class="highlight">
|
||
<pre>
|
||
<code>
|
||
.elements-tab .tab-content {
|
||
padding: 15px;
|
||
}
|
||
.elements-tab-1 .tab-content, .elements-tab-2 .tab-content {
|
||
border: 1px solid #ddd;
|
||
border-top: 0;
|
||
}
|
||
.elements-tab .nav-tabs > li {
|
||
display: inline-block;
|
||
float: none;
|
||
}
|
||
.elements-tab .nav-tabs li a {
|
||
border-radius: 5px 5px 0 0;
|
||
font-size: 16px;
|
||
margin-right: 1px;
|
||
}
|
||
.elements-tab .nav-tabs li.active a {
|
||
color: #C8A165;
|
||
}
|
||
|
||
/* elements-tab-3 */
|
||
.elements-tab-menu {
|
||
display: inline-block;
|
||
}
|
||
.elements-tab-menu li {
|
||
display: block;
|
||
float: left;
|
||
margin: 0 2px;
|
||
}
|
||
.elements-tab-menu li a {
|
||
background: #ddd none repeat scroll 0 0;
|
||
display: block;
|
||
font-size: 16px;
|
||
padding: 10px 20px;
|
||
}
|
||
.elements-tab-menu li.active a {
|
||
background: #C8A165 none repeat scroll 0 0;
|
||
color: #fff;
|
||
}
|
||
|
||
/*elements-tab-8*/
|
||
.elements-tab-8 .elements-tab-menu li {
|
||
margin: 0 20px 0 0;
|
||
}
|
||
.elements-tab-8 .elements-tab-menu li a {
|
||
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
|
||
padding: 5px 0px;
|
||
}
|
||
.elements-tab-8 .elements-tab-menu li.active a {
|
||
color: #C8A165;
|
||
}
|
||
.elements-tab-8 .element-line-btm li.active::before {
|
||
right: 0;
|
||
left: auto;
|
||
}
|
||
</code>
|
||
</pre>
|
||
</figure>
|
||
</div>
|
||
<div class="tab-pane" id="elements-js-8">
|
||
<figure class="highlight">
|
||
<pre>
|
||
<code>
|
||
|
||
</code>
|
||
</pre>
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- ELEMENTS-TAB END -->
|
||
<!-- FOOTER START -->
|
||
<footer>
|
||
<!-- Footer-area start -->
|
||
<div class="footer-area footer-2">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-4 col-md-6">
|
||
<div class="single-footer">
|
||
<h3 class="footer-title title-border">Contact Us</h3>
|
||
<ul class="footer-contact">
|
||
<li><span>Address :</span>28 Green Tower, Street Name,<br>New York City, USA</li>
|
||
<li><span>Cell-Phone :</span>012345 - 123456789</li>
|
||
<li><span>Email :</span>your-email@gmail.com</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-2 col-md-3 col-sm-6">
|
||
<div class="single-footer">
|
||
<h3 class="footer-title title-border">accounts</h3>
|
||
<ul class="footer-menu">
|
||
<li><a href="my-account.html"><i class="zmdi zmdi-dot-circle"></i>My Account</a></li>
|
||
<li><a href="wishlist.html"><i class="zmdi zmdi-dot-circle"></i>My Wishlist</a></li>
|
||
<li><a href="cart.html"><i class="zmdi zmdi-dot-circle"></i>My Cart</a></li>
|
||
<li><a href="login.html"><i class="zmdi zmdi-dot-circle"></i>Sign In</a></li>
|
||
<li><a href="checkout.html"><i class="zmdi zmdi-dot-circle"></i>Check out</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-2 col-md-3 col-sm-6">
|
||
<div class="single-footer">
|
||
<h3 class="footer-title title-border">shipping</h3>
|
||
<ul class="footer-menu">
|
||
<li><a href="#"><i class="zmdi zmdi-dot-circle"></i>New Products</a></li>
|
||
<li><a href="#"><i class="zmdi zmdi-dot-circle"></i>Top Sellers</a></li>
|
||
<li><a href="#"><i class="zmdi zmdi-dot-circle"></i>Manufactirers</a></li>
|
||
<li><a href="#"><i class="zmdi zmdi-dot-circle"></i>Suppliers</a></li>
|
||
<li><a href="#"><i class="zmdi zmdi-dot-circle"></i>Specials</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 col-md-6">
|
||
<div class="single-footer newsletter-item">
|
||
<h3 class="footer-title title-border">Email Newsletters</h3>
|
||
<div class="footer-subscribe">
|
||
<form action="#">
|
||
<input type="text" name="email" placeholder="Email Address..." />
|
||
<button class="button-one submit-btn-4" type="submit" data-text="Subscribe">Subscribe</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Footer-area end -->
|
||
<!-- Copyright-area start -->
|
||
<div class="copyright-area copyright-2">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="copyright">
|
||
<p class="mb-0">© <a href="https://themeforest.net/user/codecarnival/portfolio" target="_blank">CodeCarnival </a> 2021. All Rights Reserved.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="payment text-md-end">
|
||
<a href="#"><img src="img/payment/1.png" alt="" /></a>
|
||
<a href="#"><img src="img/payment/2.png" alt="" /></a>
|
||
<a href="#"><img src="img/payment/3.png" alt="" /></a>
|
||
<a href="#"><img src="img/payment/4.png" alt="" /></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Copyright-area start -->
|
||
</footer>
|
||
<!-- FOOTER END -->
|
||
|
||
</div>
|
||
<!-- WRAPPER END -->
|
||
|
||
<!-- all js here -->
|
||
<!-- jquery latest version -->
|
||
<script src="js/vendor/jquery-3.6.0.min.js"></script>
|
||
<script src="js/vendor/jquery-migrate-3.3.2.min.js"></script>
|
||
<!-- bootstrap js -->
|
||
<script src="js/bootstrap.bundle.min.js"></script>
|
||
<!-- jquery.meanmenu js -->
|
||
<script src="js/jquery.meanmenu.js"></script>
|
||
<!-- slick.min js -->
|
||
<script src="js/slick.min.js"></script>
|
||
<!-- jquery.treeview js -->
|
||
<script src="js/jquery.treeview.js"></script>
|
||
<!-- lightbox.min js -->
|
||
<script src="js/lightbox.min.js"></script>
|
||
<!-- jquery-ui js -->
|
||
<script src="js/jquery-ui.min.js"></script>
|
||
<!-- jquery.nivo.slider js -->
|
||
<script src="lib/js/jquery.nivo.slider.js"></script>
|
||
<script src="lib/home.js"></script>
|
||
<!-- jquery.nicescroll.min js -->
|
||
<script src="js/jquery.nicescroll.min.js"></script>
|
||
<!-- countdon.min js -->
|
||
<script src="js/countdon.min.js"></script>
|
||
<!-- wow js -->
|
||
<script src="js/wow.min.js"></script>
|
||
<!-- plugins js -->
|
||
<script src="js/plugins.js"></script>
|
||
<!-- main js -->
|
||
<script src="js/main.js"></script>
|
||
</body>
|
||
</html>
|