<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Single Product</title>
<link rel="stylesheet" href="bootstrap.css" />
<link rel="stylesheet" href="style.css"/>
<link rel="icon" href="assets/logo.png" />
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="#">
<img src="assets/logo.png" alt="logo" height="40"/>
Mobile Zone
</a>
<button class="navbar-toggler color1" type="button" data-bs-
toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link text-secondary" aria-current="page"
href="#">Single Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cart.html">Cart</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown"
aria-expanded="false">
User
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Profile</a></li>
<li><a class="dropdown-item" href="#">Orders</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else
here</a></li>
</ul>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search"
placeholder="Search" aria-label="Search">
<button class="btn color1" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- body Section -->
<div class="container mt-5">
<div class="row">
<div class="col-md-6">
<img src="assets/img/v3.jpg" alt="Single Product" class="img-fluid
rounded shadow" />
</div>
<div class="col-md-6">
<h1 class="display-5">HONER Magic V3 5G</h1>
<p class="lead">The Slimmer The Stronger</p>
<p class="text-muted">category : Mobile Phone</p>
<p class="color2">LKR. 430,000.00</p>
<div class="d-flex align-items-center my-4">
<div class="input-group me-3" style="width: 120px;">
<button class="btn btn-outline-secondary">-</button>
<input type="text" class="form-control text-center" value="1"
disabled>
<button class="btn btn-outline-secondary">+</button>
</div>
<a href="#" class="btn color1">Add to Cart</a>
</div>
<div>
<h5>Product Details</h5>
<ul>
<li>Inner screen: 7.92 inches | Outer screen: 6.43 inches</li>
<li>Snapdragon 8 Gen 3 chipset</li>
<li>5150 mAh battery</li>
<li>1Tb Storage, 16Gb RAM</li>
</ul>
</div>
</div>
</div>
<div class="row mt-5 color3 p-5 rounded similar-products">
<h3 class="text-white mb-4">Similar Product</h3>
<div class="col-md-3 mb-4">
<div class="card h-100">
<img src="assets/img/1.jpg" class="card-img-top" alt="Similar Product">
<div class="card-body"></div>
<h5>Iphone 16 Pro Max</h5>
<p>LKR. 650,000.00</p>
<a href="#" class="btn color1 w-100">Buy Now</a>
</div>
</div>
<div class="col-md-3 mb-4">
<div class="card h-100">
<img src="assets/img/1.jpg" class="card-img-top" alt="Similar Product">
<div class="card-body"></div>
<h5>samsung Z Foold 2</h5>
<p>LKR. 550,000.00</p>
<a href="#" class="btn color1 w-100">Buy Now</a>
</div>
</div>
<div class="col-md-3 mb-4">
<div class="card h-100">
<img src="assets/img/1.jpg" class="card-img-top" alt="Similar Product">
<div class="card-body"></div>
<h5>Xiomi 14 Ultra</h5>
<p>LKR. 350,000.00</p>
<a href="#" class="btn color1 w-100">Buy Now</a>
</div>
</div>
<div class="col-md-3 mb-4">
<div class="card h-100">
<img src="assets/img/1.jpg" class="card-img-top" alt="Similar Product">
<div class="card-body"></div>
<h5>Pixel 9 Pro </h5>
<p>LKR. 470,000.00</p>
<a href="#" class="btn color1 w-100">Buy Now</a>
</div>
</div>
</div>
</div>
<!-- body Section -->
<footer class="footer text-center py-2 mt-5">
<p class="text-white">© 2024 Mobile Zone. All Right Reserved</p>
</footer>
<script src="bootstrap.bundle.js"></script>
</body>
</html>
