| Current File : /home/tradevaly/demo.tradevaly.com.bd/content/Tradevaley Bootstrap project/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 href="css/responsive.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link href="css/single-style.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/owl.carousel.min.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-->
<div class="container-fluid px-md-5 py-4">
<div class = "col-md-12">
<div class = "card">
<!-- card left -->
<div class = "product-imgs col-md-5">
<div class = "img-display">
<div class = "img-showcase">
<img src = "images/shoe_1.jpg" alt = "shoe image">
<img src = "images/shoe_2.jpg" alt = "shoe image">
<img src = "images/shoe_3.jpg" alt = "shoe image">
<img src = "images/shoe_4.jpg" alt = "shoe image">
</div>
</div>
<div class = "img-select">
<div class = "img-item">
<a href = "#" data-id = "1">
<img src = "images/shoe_1.jpg" alt = "shoe image">
</a>
</div>
<div class = "img-item">
<a href = "#" data-id = "2">
<img src = "images/shoe_2.jpg" alt = "shoe image">
</a>
</div>
<div class = "img-item">
<a href = "#" data-id = "3">
<img src = "images/shoe_3.jpg" alt = "shoe image">
</a>
</div>
<div class = "img-item">
<a href = "#" data-id = "4">
<img src = "images/shoe_4.jpg" alt = "shoe image">
</a>
</div>
</div>
</div>
<!-- card right -->
<div class = "product-content col-md-7">
<h4 class = "product-title">nike shoes</h4>
<a>Review</a>
<div class = "product-rating">
<i class = "fas fa-star"></i>
<i class = "fas fa-star"></i>
<i class = "fas fa-star"></i>
<i class = "fas fa-star"></i>
<i class = "fas fa-star-half-alt"></i>
<span>4.7(21)</span>
</div>
<p>Category: <span>Mechanical</span></p>
<div class="row"><span>Country of Origin: </span><img src = "images/bangladesh.png" alt = "shoe image" class="brand-logo"></div>
<div class="row"><span>Brand: </span><img src = "images/fb.png" alt = "shoe image" class="brand-logo"><span> Apple</span></div>
<div class="row">
<button class="btn-primary">blue</button>
<button class="btn-success">green</button>
<button class="btn-danger">red</button>
<button class="btn-disabled">disabled</button>
<button class="btn-dark">black</button>
<button class="btn-default">white</button>
<button class="btn-primary">blue</button>
<button class="btn-primary">blue</button>
</div>
<ul>
<li>Color: <span>Black</span></li>
<li>Available: <span>in stock</span></li>
<li>Shipping Area: <span>All over the world</span></li>
<li>Shipping Fee: <span>Free</span></li>
</ul>
<p>Video link: <button type = "button" class = "btn">play video</button></p>
<div class = "product-price">
<p class = "last-price">Regular Price: <span>$257.00</span></p>
<p class = "new-price">Offer Price: <span>$249.00 (5%)</span></p>
<p> Quantity: <input type = "number" min = "0" value = "1"></p>
</div>
<div class = "product-detail">
<h4>About products: </h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo eveniet veniam tempora fuga tenetur placeat sapiente architecto illum soluta consequuntur, aspernatur quidem at sequi ipsa!</p>
</div>
<div class = "purchase-info">
<button type = "button" class = "btn">
<i class = "fas fa-shopping-cart"></i> Buy Now
</button>
<button type = "button" class = "btn">Send Query</button>
<button type = "button" class = "btn">Download Catalog File</button>
<button type = "button" class = "btn">Download TDS File</button>
</div>
<div class = "social-links">
<p>Share At: </p>
<a href = "#">
<i class = "fab fa-facebook-f"></i>
</a>
<a href = "#">
<i class = "fab fa-twitter"></i>
</a>
<a href = "#">
<i class = "fab fa-instagram"></i>
</a>
<a href = "#">
<i class = "fab fa-whatsapp"></i>
</a>
<a href = "#">
<i class = "fab fa-pinterest"></i>
</a>
</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">Feedback</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>
<div class="rate">
<input type="radio" id="star5" name="rate" value="5" />
<label for="star5" title="text">5 stars</label>
<input type="radio" id="star4" name="rate" value="4" />
<label for="star4" title="text">4 stars</label>
<input type="radio" id="star3" name="rate" value="3" />
<label for="star3" title="text">3 stars</label>
<input type="radio" id="star2" name="rate" value="2" />
<label for="star2" title="text">2 stars</label>
<input type="radio" id="star1" name="rate" value="1" />
<label for="star1" title="text">1 star</label>
</div>
<textarea class="form-control" name="txtarea" cols="30" rows="5" 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 text-center">
<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>
<button class ="btn btn-relate"> Buy Now</button>
</div>
</div>
</div><!-- End Toptrend Item-->
<!-- Start Toptrend Item-->
<div class="toptrend-item">
<div class="col-3">
<div class="item-box text-center">
<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>
<button class ="btn btn-relate"> Buy Now</button>
</div>
</div>
</div><!-- End Toptrend Item-->
<!-- Start Toptrend Item-->
<div class="toptrend-item">
<div class="col-3">
<div class="item-box text-center">
<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>
<button class ="btn btn-relate"> Buy Now</button>
</div>
</div>
</div><!-- End Toptrend Item-->
<!-- Start Toptrend Item-->
<div class="toptrend-item">
<div class="col-3">
<div class="item-box text-center">
<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>
<button class ="btn btn-relate"> Buy Now</button>
</div>
</div>
</div><!-- End Toptrend Item-->
<!-- Start Toptrend Item-->
<div class="toptrend-item">
<div class="col-3">
<div class="item-box text-center">
<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>
<button class ="btn btn-relate"> Buy Now</button>
</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="social-links">
<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>
<script src="js/single-script.js"></script>
<!--========= JS ==========-->
</body>
</html>