-
Notifications
You must be signed in to change notification settings - Fork 74
/
Copy pathproducts.html
132 lines (123 loc) · 4.77 KB
/
products.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Products Page</title>
<link rel="stylesheet" href="/CSS/product.css">
</head>
<body>
<div class="container">
<!-- Navbar (reuse from index.html) -->
<div class="navbar">
<div class="toggle-button-and-logo">
<div class="toggle-button" onclick="toggleMenu()">☰</div>
<div class="logo">
<img src="images/logo.png" alt="LOGO" width="125px">
</div>
</div>
<nav>
<ul>
<li><a href="/">HOME</a></li>
<li><a href="/products.html">PRODUCT</a></li>
<li><a href="/About.html">ABOUT</a></li>
<li><a href="/Contactus.html">CONTACT</a></li>
<li><a href="/Account.html">ACCOUNT</a></li>
</ul>
</nav>
</div>
<!-- Product Showcase -->
<div class="products-section">
<h1>Explore Our Latest Products</h1>
<div class="slider-container">
<!-- Left Arrow -->
<button class="slider-btn left" id="slideLeft"><</button>
<!-- Product Slider -->
<div class="product-slider" id="productSlider">
<!-- Product Card 1 -->
<div class="product-card">
<img src="images/product-1.jpg" alt="Product 1">
<h3>Product Name 1</h3>
<p>$49.99</p>
<button class="btn">Add to Cart</button>
</div>
<!-- Product Card 2 -->
<div class="product-card">
<img src="images/product-2.jpg" alt="Product 2">
<h3>Product Name 2</h3>
<p>$59.99</p>
<button class="btn">Add to Cart</button>
</div>
<!-- Product Card 3 -->
<div class="product-card">
<img src="images/product-3.jpg" alt="Product 3">
<h3>Product Name 3</h3>
<p>$69.99</p>
<button class="btn">Add to Cart</button>
</div>
<!-- Product Card 4 -->
<div class="product-card">
<img src="images/product-4.jpg" alt="Product 4">
<h3>Product Name 4</h3>
<p>$79.99</p>
<button class="btn">Add to Cart</button>
</div>
<!-- Add more product cards as needed -->
<div class="product-card">
<img src="images/product-5.jpg" alt="Product 5">
<h3>Product Name 5</h3>
<p>$89.99</p>
<button class="btn">Add to Cart</button>
</div>
<div class="product-card">
<img src="images/product-6.jpg" alt="Product 6">
<h3>Product Name 6</h3>
<p>$99.99</p>
<button class="btn">Add to Cart</button>
</div>
</div>
<!-- Right Arrow -->
<button class="slider-btn right" id="slideRight">></button>
</div>
</div>
<!-- Pagination (Optional) -->
<div class="pagination">
<a href="#">«</a>
<a href="#" class="active">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">»</a>
</div>
</div>
<!-- Footer (reuse from index.html) -->
<div class="footer">
<div class="container">
<!-- Footer content here -->
</div>
<hr>
<div class="copyright">
<p>© 2024 All Rights Reserved</p>
</div>
</div>
<!-- JavaScript to enable smooth scrolling -->
<script>
const slider = document.getElementById('productSlider');
const slideLeft = document.getElementById('slideLeft');
const slideRight = document.getElementById('slideRight');
slideLeft.onclick = function() {
slider.scrollBy({
left: -300, // Adjust scroll distance
behavior: 'smooth'
});
}
slideRight.onclick = function() {
slider.scrollBy({
left: 300, // Adjust scroll distance
behavior: 'smooth'
});
}
</script>
</body>
</html>