fanicabobeica
/
E-Commerce
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
E-Commerce/product-single.html

352 lines
12 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Mono - Product Single</title>
<!-- Favicon -->
<link href="assets/images/favicon.png" rel="shortcut icon">
<!-- CSS -->
<link href="assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
<link href="assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
<link href="assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
<link href="assets/plugins/sal/sal.min.css" rel="stylesheet">
<link href="assets/css/theme.css" rel="stylesheet">
<!-- Fonts/Icons -->
<link href="assets/plugins/font-awesome/css/all.css" rel="stylesheet">
<link href="assets/plugins/themify/themify-icons.min.css" rel="stylesheet">
<link href="assets/plugins/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
</head>
<body data-preloader="1">
<!-- Header -->
<div class="header right border-bottom">
<div class="container">
<!-- Logo -->
<div class="header-logo">
<h3><a href="#">mono</a></h3>
<!--
<img class="logo-dark" src="assets/images/your-logo-dark.png" alt="">
<img class="logo-light" src="assets/images/your-logo-light.png" alt="">
-->
</div>
<!-- Menu -->
<div class="header-menu">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Link Only</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dropdown</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Subdropdown</a>
</li>
</ul>
</div>
<!-- Menu Extra -->
<div class="header-menu-extra">
<ul class="list-inline">
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<!-- Menu Toggle -->
<button class="header-toggle">
<span></span>
</button>
</div><!-- end container -->
</div>
<!-- end Header -->
<div class="section">
<div class="container">
<div class="row col-spacing-50">
<div class="col-12 col-lg-7">
<div class="owl-carousel product-carousel owl-dots-overlay-right">
<div data-hash="1">
<img src="assets/images/col-1-square.jpg" alt="">
</div>
<div data-hash="2">
<img src="assets/images/col-1-square.jpg" alt="">
</div>
<div data-hash="3">
<img src="assets/images/col-1-square.jpg" alt="">
</div>
</div>
<ul class="product-carousel-thumbnails">
<li><a href="#1"><img src="assets/images/col-2-square.jpg" alt=""></a></li>
<li><a href="#2"><img src="assets/images/col-2-square.jpg" alt=""></a></li>
<li><a href="#3"><img src="assets/images/col-2-square.jpg" alt=""></a></li>
</ul>
</div>
<div class="col-12 col-lg-5">
<ul class="list-inline-slash font-small margin-bottom-10">
<li><a href="#">Technology</a></li>
<li><a href="#">Smart Watch</a></li>
</ul>
<h3 class="font-weight-normal margin-0">Product Title</h3>
<div class="product-price">
<h5 class="font-weight-light"><del>$399</del><ins>$360</ins></h5>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<form class="product-quantity margin-top-30">
<div class="qnt">
<input type="number" id="quantity" name="quantity" min="1" max="10" value="1">
</div>
<button class="button button-md button-dark" type="submit">Add to Cart</button>
</form>
<div class="margin-top-30">
<p>SKU: 7777</p>
<a class="button-text-1 margin-top-10" href="#">Add to Wishlist</a>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<div class="container">
<div class="product-info-box">
<ul class="nav margin-bottom-20">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#specs">Specifications</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#additional-info">Additional Info</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="specs">
<table class="table">
<tbody>
<tr>
<th scope="row">Weight</th>
<td>25 g</td>
</tr>
<tr>
<th scope="row">Dimension</th>
<td>38.6 x 33.3 x 10.5 mm</td>
</tr>
<tr>
<th scope="row">Color</th>
<td>Space Gray, Rose, White</td>
</tr>
<tr>
<th scope="row">Care</th>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane fade" id="additional-info">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
</div>
</div>
</div>
</div><!-- end container -->
<!-- Related Products -->
<div class="section">
<div class="container">
<div class="margin-bottom-70 text-center">
<h3 class="font-weight-normal">Related Products</h3>
</div>
<div class="owl-carousel" data-owl-dots="false" data-owl-autoplay="true" data-owl-margin="30" data-owl-xs="1" data-owl-sm="2" data-owl-md="3" data-owl-lg="3" data-owl-xl="3">
<!-- Carousel Item 1 -->
<div class="product-box">
<div class="product-img">
<!-- Product IMG -->
<a class="product-img-link" href="#">
<img src="assets/images/col-2-tall.jpg" alt="">
</a>
<!-- Badge (left) -->
<div class="product-badge-left"><!-- you can add: 'red/green' -->
<span>New</span>
</div>
<!-- Badge (right) -->
<div class="product-badge-right red"><!-- you can add: 'red/green' -->
<span>-50%</span>
</div>
<!-- Add to Cart -->
<div class="add-to-cart">
<a href="#">Add to Cart</a>
</div>
</div>
<div class="product-title">
<!-- Product Title -->
<h6 class="font-weight-medium"><a href="#">Product title</a></h6>
<!-- Product Price -->
<div class="price">
<del>$98</del>
<span>$49</span>
</div>
</div>
</div>
<!-- Carousel Item 2 -->
<div class="product-box">
<div class="product-img">
<!-- Product IMG -->
<a class="product-img-link" href="#">
<img src="assets/images/col-2-tall.jpg" alt="">
</a>
<!-- Badge (left) -->
<div class="product-badge-left"><!-- you can add: 'red/green' -->
<span>New</span>
</div>
<!-- Badge (right) -->
<div class="product-badge-right red"><!-- you can add: 'red/green' -->
<span>-50%</span>
</div>
<!-- Add to Cart -->
<div class="add-to-cart">
<a href="#">Add to Cart</a>
</div>
</div>
<div class="product-title">
<!-- Product Title -->
<h6 class="font-weight-medium"><a href="#">Product title</a></h6>
<!-- Product Price -->
<div class="price">
<del>$98</del>
<span>$49</span>
</div>
</div>
</div>
<!-- Carousel Item 3 -->
<div class="product-box">
<div class="product-img">
<!-- Product IMG -->
<a class="product-img-link" href="#">
<img src="assets/images/col-2-tall.jpg" alt="">
</a>
<!-- Badge (left) -->
<div class="product-badge-left"><!-- you can add: 'red/green' -->
<span>New</span>
</div>
<!-- Badge (right) -->
<div class="product-badge-right red"><!-- you can add: 'red/green' -->
<span>-50%</span>
</div>
<!-- Add to Cart -->
<div class="add-to-cart">
<a href="#">Add to Cart</a>
</div>
</div>
<div class="product-title">
<!-- Product Title -->
<h6 class="font-weight-medium"><a href="#">Product title</a></h6>
<!-- Product Price -->
<div class="price">
<del>$98</del>
<span>$49</span>
</div>
</div>
</div>
<!-- Carousel Item 4 -->
<div class="product-box">
<div class="product-img">
<!-- Product IMG -->
<a class="product-img-link" href="#">
<img src="assets/images/col-2-tall.jpg" alt="">
</a>
<!-- Badge (left) -->
<div class="product-badge-left"><!-- you can add: 'red/green' -->
<span>New</span>
</div>
<!-- Badge (right) -->
<div class="product-badge-right red"><!-- you can add: 'red/green' -->
<span>-50%</span>
</div>
<!-- Add to Cart -->
<div class="add-to-cart">
<a href="#">Add to Cart</a>
</div>
</div>
<div class="product-title">
<!-- Product Title -->
<h6 class="font-weight-medium"><a href="#">Product title</a></h6>
<!-- Product Price -->
<div class="price">
<del>$98</del>
<span>$49</span>
</div>
</div>
</div>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div>
<!-- end Related Products -->
<footer>
<div class="section-sm bg-dark">
<div class="container">
<div class="row col-spacing-20">
<div class="col-6 col-sm-6 col-lg-3">
<h3>mono</h3>
</div>
<div class="col-6 col-sm-6 col-lg-3">
<h6 class="font-small font-weight-normal uppercase">Useful Links</h6>
<ul class="list-dash">
<li><a href="#">About us</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Prices</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="col-6 col-sm-6 col-lg-3">
<h6 class="font-small font-weight-normal uppercase">Additional Links</h6>
<ul class="list-dash">
<li><a href="#">Services</a></li>
<li><a href="#">Process</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<div class="col-6 col-sm-6 col-lg-3">
<h6 class="font-small font-weight-normal uppercase">Contact Info</h6>
<ul class="list-unstyled">
<li>121 King St, Melbourne VIC 3000</li>
<li>contact@example.com</li>
<li>+(123) 456 789 01</li>
</ul>
</div>
</div><!-- end row(1) -->
<hr class="margin-top-30 margin-bottom-30">
<div class="row col-spacing-10">
<div class="col-12 col-md-6 text-center text-md-left">
<p>&copy; 2021 FlaTheme, All Rights Reserved.</p>
</div>
<div class="col-12 col-md-6 text-center text-md-right">
<ul class="list-inline">
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-pinterest"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
</ul>
</div>
</div><!-- end row(2) -->
</div><!-- end container -->
</div>
</footer>
<!-- Scroll to top button -->
<div class="scrolltotop">
<a class="button-circle button-circle-sm button-circle-dark" href="#"><i class="ti-arrow-up"></i></a>
</div>
<!-- end Scroll to top button -->
<!-- ***** JAVASCRIPTS ***** -->
<script src="assets/plugins/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>
<script src="assets/plugins/plugins.js"></script>
<script src="assets/js/functions.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink