-
Notifications
You must be signed in to change notification settings - Fork 0
/
detail.html
161 lines (149 loc) · 6.37 KB
/
detail.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="en">
<head>
<title>Product Details</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="navbar">
<a class="navbar-brand" href="ecommerce.html">
<img src="images/logo/xiaomi_logo.jpg" alt="Xiaomi" class="width40px">
</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link mi-home primary-color" href="ecommerce.html">Mi Home</a>
</li>
</ul>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nav">
<ul class="navbar-nav bg-dark m-0 ml-lg-auto p-3 p-lg-0">
<li class="nav-item hover-blue">
<a class="nav-link text-truncate" href="products.html">All Products</a>
</li>
<li class="nav-item hover-blue">
<a class="nav-link text-truncate" href="ecommerce.html#Smartphones">Smartphones</a>
</li>
<li class="nav-item hover-blue">
<a class="nav-link text-truncate" href="ecommerce.html#TVs">TVs</a>
</li>
<li class="nav-item hover-blue">
<a class="nav-link text-truncate" href="ecommerce.html#Laptops">Laptops</a>
</li>
<li class="nav-item hover-blue">
<a class="nav-link text-truncate" href="ecommerce.html#Audio">Audio</a>
</li>
<li class="nav-item hover-blue">
<a class="nav-link text-truncate" href="cart.html">
Go to Cart <i class="fa fa-shopping-cart"></i>
</a>
</li>
</ul>
</div>
</nav>
<!-- Main content-->
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-lg-2 row-cols-xl-2 margin-lr-zero margin-top">
<!-- Left column -->
<div class="col mb-4">
<img src="images/smartphones/note10.png" class="img-fluid float-right" alt="Note10">
</div>
<!-- Right column -->
<div class="col mb-4 details-margin">
<div class="product-details">
<h2>Redmi Note 10 Pro Max</h2>
<div class="price primary-color">₹19,999<del class="color-grey price-margin">₹25,999</del></div>
<div class="form-group quantity-align">
<label for="sel1" class="label-align color-grey">Quantity:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div>
<p class="color-grey highlight-margin">Highlights:</p>
<ul>
<li>
6 GB RAM | 128 GB ROM | Expandable Upto 512 GB
</li>
<li>
16.94 cm (6.67 inch) Full HD+ Display
</li>
<li>
108MP + 8MP + 5MP + 2MP | 16MP Front Camera
</li>
<li>
5020 mAh Li-Polymer Battery
</li>
<li>
Qualcomm Snapdragon 732G Processor
</li>
</ul>
</div>
<p class="color-grey highlight-margin">Warranty:</p>
<ul>
<li>
1 Year Manufacturer Warranty for Device.
</li>
<li>
6 Months Manufacturer Warranty for Accessories.
</li>
</ul>
<br>
<a href="cart.html" class="btn btn-primary">
Add to Cart <i class="fa fa-shopping-cart"></i>
</a>
</div>
</div>
</div>
</div>
<br>
<br>
<!-- Footer-->
<footer>
<p class="color-grey mb-1">
Made by jithendra
</p>
<p>
<i class="fa fa-copyright mr-1"></i>copyright 2021
</p>
</footer>
<!-- navbar top adjust-->
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function () {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-66px";
}
prevScrollpos = currentScrollPos;
}
</script>
<!-- close navbar when click on anywhere-->
<script>
$(document).ready(function () {
$(document).click(function (event) {
var click = $(event.target);
var _open = $(".navbar-collapse").hasClass("show");
if (_open === true && !click.hasClass("navbar-toggler")) {
$(".navbar-toggler").click();
}
});
});
</script>
</body>
</html>