| Current File : /home/tradevaly/demo.tradevaly.com.bd/content/Tradevaley Bootstrap project2/single-product.html |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Tradevaly</title>
<!--========= Font ==========-->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="css/all.min.css" rel="stylesheet" type="text/css" />
<!--========= Font ==========-->
<!--========= CSS ==========-->
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/owl.carousel.min.css" rel="stylesheet" type="text/css" />
<link href="css/responsive.css" rel="stylesheet" type="text/css" />
<!--========= CSS ==========-->
</head>
<body>
<!--Start Top Bar Area-->
<div class="container-fluid top-bar dsply-mobile px-md-4">
<div class="row">
<div class="col-md-9 pl-md-3">
<!-- <nav class="top-nav"> -->
<nav class="nav top-nav">
<a class="nav-link" href="#"><i class="fa fa-user-circle"></i> About us</a>
<a class="nav-link" href="#"><i class="fa fa-envelope"></i> Contact us</a>
<a class="nav-link" href="#"><i class="fa fa-headset"></i> Customer Support</a>
<a class="nav-link" href="#"><i class="fa fa-download"></i> Download App</a>
<a class="nav-link" href="#"><i class="fa fa-rss-square"></i> Blog</a>
<a class="nav-link" href="#"><i class="fa fa-briefcase"></i> Career</a>
</nav>
<!-- </nav> -->
</div>
<div class="col-md-3">
<div class="text-center">
<a class="btn btn-sm login-btn" href="#" role="button">Login</a>
<a class="btn btn-sm login-btn" href="#" role="button">Sign Up</a>
</div>
</div>
</div>
</div>
<!--Start Header Area-->
<div class="container-fluid px-md-4 mainnav sticky-top">
<div class="row">
<div class="col-9 col-md-2 col-lg-3 hdrimage">
<a href="#"><img src="images/logo.png" alt=""></a>
</div>
<div class="col-3 col-md-10 col-lg-9 dsplay-all">
<nav class="navbar navbar-expand-md navbar-light">
<!--Start Menu Area-->
<div class="collapse navbar-collapse"> <!-- mobileNav -->
<ul class="navbar-nav main_menu">
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-search pr-md-2"></i>Search by Company</a>
</li>
<li class="nav-item">
<a class="nav-link" href="buy-sell.html" target="_blank"><i class="fa fa-shopping-cart pr-md-2"></i>Buying/Selling</a>
</li>
<li class="nav-item">
<a class="nav-link" href="recommends.html" target="_blank"><i class="far fa-bell pr-md-2"></i><blink>Recommends</blink></a>
</li>
<li class="nav-item">
<a class="nav-link" href="advetise.html" target="_blank"><i class="fas fa-ad pr-md-2"></i>Advertise</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="far fa-address-book pr-md-2"></i>Add Company</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-newspaper pr-md-2"></i>Latest News</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="col-3 col-xl-9 dsplay-hide">
<nav class="navbar navbar-light">
<!--Start Mobile Menu Button Area-->
<button class="navbar-toggler mt-4" type="button" data-toggle="collapse" data-target="#tradevaleymenubar" aria-controls="tradevaleymenubar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon text-right"></span>
</button>
<!--Start Menu Area-->
<div class="collapse navbar-collaps mobileNav" id="tradevaleymenubar">
<ul class="navbar-nav mobilemenu">
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-search pr-2"></i>Search by Company</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-shopping-cart pr-2"></i>Buying/Selling</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="far fa-bell pr-2"></i><blink>Recommended</blink></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-ad pr-2"></i>Advertise</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="far fa-address-book pr-2"></i>Add Company</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-newspaper pr-2"></i>Latest News</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<!--End Header Area-->
<!--Start Search Area-->
<div class="container-fluid px-md-4 py-5 search-area">
<div class="row">
<div class="col-md-1"></div>
<div class="col-12 col-md-10">
<form>
<div class="input-group search-bar">
<div class="input-group-prepend">
<select class="custom-select slct-area">
<option selected>All</option>
<option>Products</option>
<option>Company</option>
</select>
</div>
<input type="text" class="form-control inpt-01" placeholder="what do you looking..">
<div class="input-group-append">
<input class="srch-btn" type="submit" value="Search" />
</div>
</div>
</form>
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
<!--End Search Area-->
<div class="container-fluid px-md-5 py-4">
<div class="row ">
<div class="col-12">
<h5>Product Name</h5>
<hr style="border-color: #000; margin: 0;">
</div>
</div>
<div class="row pt-4">
<div class="col-12 col-md-4 offset-lg-1">
<div class="prdimg"><img src="images/prod1.webp" alt=""></div>
<!-- Product Gallery Start-->
<div class="row pr-5">
<div class="col-3">
<img src="images/wallet2.jpg" alt="" width="70" height="70">
</div>
<div class="col-3">
<img src="images/wallet2.jpg" alt="" width="70" height="70">
</div>
<div class="col-3">
<img src="images/wallet4.jpg" alt="" width="70" height="70">
</div>
<div class="col-3">
<img src="images/wallet4.jpg" alt="" width="70" height="70">
</div>
</div>
<!-- Product Gallery Start-->
</div>
<div class="col-md-6 col-sm-12">
<h4 class="prodname">Product Name</h4>
<div class="row">
<div class="col-12 col-md-6">
Ratings :
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
</div>
</div>
<div class="row">
<div class="col-12">
Category :
</div>
</div>
<div class="row">
<div class="col-12">
Brand :
</div>
</div>
<div class="row py-3 amount">
<div class="col-12">
<h4>৳ 400</h4>
<del>৳ 120</del> <span>-30%</span>
</div>
</div>
<div class="row py-3 amount">
<div class="col-12">
<form class="form-inline">
<label class="mr-3" for="inlineFormCustomSelectPref">Colors : </label>
<select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref" style="width: 130px;">
<option selected>Current</option>
<option value="1">Red</option>
<option value="2">Black</option>
<option value="3">Brown</option>
</select>
</form>
</div>
</div>
<div class="row py-3 amount">
<div class="col-6">
<button class="prodbtn btn-primary">Buy Now</button>
</div>
<div class="col-6">
<button class="prodbtn btn-danger">Send Query</button>
</div>
</div>
<div class="row">
<div class="col-6">
<button class="dwnbtn btn-success">Download Catalog File</button>
</div>
<div class="col-6">
<button class="dwnbtn btn-dark">Download TDS File</button>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid px-md-5">
<div class="row">
<div class="col-12">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Description</a>
<a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Specification</a>
<a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Leave a Reply</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<div class="row px-4 trade_field">
<div class="col-12 py-5">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing, elit. Voluptatem nam voluptates ratione sapiente quos a, velit distinctio atque minus recusandae quo reiciendis natus fugit. Maiores aut odit asperiores sunt provident repudiandae libero animi, cumque ratione temporibus numquam excepturi qui expedita necessitatibus, perferendis fugiat autem tempora, itaque facilis possimus! Magnam unde atque totam. Repellat, labore, dolores! Officia iusto eligendi, at tempora culpa facilis, suscipit unde ipsa nulla, quas ea ad dolor. Amet, recusandae. Rerum, quidem. Ipsa error enim eveniet reprehenderit eos consequatur, aspernatur cupiditate soluta officia aliquam voluptate asperiores. Quae, tempore? Earum temporibus numquam quibusdam perferendis a cum provident, commodi fuga mollitia rerum neque magni eligendi quas eveniet quisquam aspernatur tempore quasi nisi corporis vero quia. Corporis eum accusamus ab maxime, alias, quo nostrum ex expedita, et pariatur vel nisi saepe molestias cupiditate illo consequatur id vero unde eaque, error adipisci. Delectus explicabo magni nobis ipsa dolore asperiores minima a eius!</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
<div class="row px-4 trade_field">
<div class="col-12 py-5">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus nam distinctio adipisci quae eum tempora, et fugiat, minima inventore, doloribus facilis alias in laboriosam totam nisi sequi! Quam nam, voluptates libero consectetur quod numquam tenetur architecto blanditiis quia omnis ipsam adipisci cumque recusandae, suscipit molestiae vel amet, officia, atque minima! Iusto eligendi, totam animi quasi minima. Quibusdam exercitationem ad aperiam. Ea suscipit harum doloremque, neque culpa inventore cumque debitis voluptatibus consequuntur modi praesentium adipisci, esse molestias exercitationem repellat ipsa quasi officia officiis numquam unde deserunt totam quidem! Corrupti, quod, reprehenderit praesentium modi animi quis sequi illum impedit labore illo cum.
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
<div class="row px-4 trade_field">
<div class="col-12 py-5">
<form>
<textarea class="form-control" name="txtarea" cols="30" rows="10" placeholder="Write Here....."></textarea><br>
<button type="submit" class="btn">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Start Related Company Area -->
<div class="toptrend-area2 fix">
<div class="container">
<div class="row">
<div class="hdng-04"><b>Related Product</b></div>
<div class="toptrend-active owl-carousel">
<!-- Start Toptrend Item-->
<div class="toptrend-item">
<div class="col-3">
<div class="item-box">
<img src="images/wallet2.jpg" alt="" width="200" height="250">
<div class="view-btn-03">
<h5 class="hdng-comp">Product Name</h5>
<p>৳ 250</p>
</div>
</div>
</div>
</div><!-- End Toptrend Item-->
<!-- Start Toptrend Item-->
<div class="toptrend-item">
<div class="col-3">
<div class="item-box">
<img src="images/wallet2.jpg" alt="" width="200" height="250">
<div class="view-btn-03">
<h5 class="hdng-comp">Product Name</h5>
<p>৳ 250</p>
</div>
</div>
</div>
</div><!-- End Toptrend Item-->
<!-- Start Toptrend Item-->
<div class="toptrend-item">
<div class="col-3">
<div class="item-box">
<img src="images/wallet2.jpg" alt="" width="200" height="250">
<div class="view-btn-03">
<h5 class="hdng-comp">Product Name</h5>
<p>৳ 250</p>
</div>
</div>
</div>
</div><!-- End Toptrend Item-->
<!-- Start Toptrend Item-->
<div class="toptrend-item">
<div class="col-3">
<div class="item-box">
<img src="images/wallet2.jpg" alt="" width="200" height="250">
<div class="view-btn-03">
<h5 class="hdng-comp">Product Name</h5>
<p>৳ 250</p>
</div>
</div>
</div>
</div><!-- End Toptrend Item-->
<!-- Start Toptrend Item-->
<div class="toptrend-item">
<div class="col-3">
<div class="item-box">
<img src="images/wallet2.jpg" alt="" width="200" height="250">
<div class="view-btn-03">
<h5 class="hdng-comp">Product Name</h5>
<p>৳ 250</p>
</div>
</div>
</div>
</div><!-- End Toptrend Item-->
</div>
</div>
</div>
</div><!--End Toptrend Sell Offer-->
<div class="pagination-area">
<div class="container">
<div class="row">
<div class="col-12">
<div class="hdng-05"><b>Search Product Alphabetically</b></div>
<ul>
<li><a class="selected" href="#">a</a></li>
<li><a href="#">b</a></li>
<li><a href="#">c</a></li>
<li><a href="#">d</a></li>
<li><a href="#">e</a></li>
<li><a href="#">f</a></li>
<li><a href="#">g</a></li>
<li><a href="#">h</a></li>
<li><a href="#">i</a></li>
<li><a href="#">j</a></li>
<li><a href="#">k</a></li>
<li><a href="#">l</a></li>
<li><a href="#">m</a></li>
<li><a href="#">n</a></li>
<li><a href="#">o</a></li>
<li><a href="#">p</a></li>
<li><a href="#">q</a></li>
<li><a href="#">r</a></li>
<li><a href="#">s</a></li>
<li><a href="#">t</a></li>
<li><a href="#">u</a></li>
<li><a href="#">v</a></li>
<li><a href="#">w</a></li>
<li><a href="#">x</a></li>
<li><a href="#">y</a></li>
<li><a href="#">z</a></li>
</ul>
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid px-md-4 pt-5" style="background-color: #1d262d;">
<div class="row">
<div class="col-12 col-md-6 col-lg-3">
<div class="footer-nav">
<h6 class="h6 text-light">REGIONAL DIRECTORIES</h6>
<ul class="list-group list-group-flush">
<a href="#" class="list-group-item-action active" aria-current="true">
The current link item
</a>
<a href="#" class="list-group-item-action">A second link item</a>
<a href="#" class="list-group-item-action">A third link item</a>
<a href="#" class="list-group-item-action">A fourth link item</a>
<a href="#" class="list-group-item-action">A disabled link item</a>
</ul>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="footer-nav">
<h6 class="h6 text-light">REGIONAL DIRECTORIES</h6>
<ul class="list-group list-group-flush">
<a href="#" class="list-group-item-action active" aria-current="true">
The current link item
</a>
<a href="#" class="list-group-item-action">A second link item</a>
<a href="#" class="list-group-item-action">A third link item</a>
<a href="#" class="list-group-item-action">A fourth link item</a>
<a href="#" class="list-group-item-action">A disabled link item</a>
</ul>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="footer-nav">
<h6 class="h6 text-light">REGIONAL DIRECTORIES</h6>
<ul class="list-group list-group-flush">
<a href="#" class="list-group-item-action active" aria-current="true">
The current link item
</a>
<a href="#" class="list-group-item-action">A second link item</a>
<a href="#" class="list-group-item-action">A third link item</a>
<a href="#" class="list-group-item-action">A fourth link item</a>
<a href="#" class="list-group-item-action">A disabled link item</a>
</ul>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="footer-nav-4">
<a href="#"><img src="images/footer-logo.png" class="pt-2" alt="Footer Logo" width="100%"></a>
<h6 class="h6 text-light pt-3">FOLLOW US ON</h6>
<ul class="footerSocial">
<a href="#"><img src="images/fb.png" alt="Facebook" /></a>
<a href="#"><img src="images/gp.png" alt="Google Plus" /></a>
<a href="#"><img src="images/in.png" alt="Linkdin" /></a>
<a href="#"><img src="images/twtr.png" alt="Tweeter" /></a>
<a href="#"><img src="images/insta.png" alt="Instagram" /></a>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row copyWright">
<div class="col-12">
<p>Copyright ©2021 | tradevaly.com | All rights reserved.</p>
</div>
</div>
</div>
</footer>
<!--========= JS ==========-->
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/active.js"></script>
<!--========= JS ==========-->
</body>
</html>