Scribd
Upload
20 views

singleProductView HTML

Uploaded by

raviduramesh11
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
20 views

singleProductView HTML

Uploaded by

raviduramesh11
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

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">&copy; 2024 Mobile Zone. All Right Reserved</p>
</footer>

<script src="bootstrap.bundle.js"></script>
</body>

</html>

You might also like