forked from Rohit27698/carver_Clone
-
Notifications
You must be signed in to change notification settings - Fork 0
/
product.html
138 lines (112 loc) · 4.92 KB
/
product.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="product.css">
<title>Document</title>
<link rel="stylesheet" href="./carver_Clone/css/navbar.css">
</head>
<body>
<div class="navbar">
<div id="slide">
<div class="slide-menu">
<a href="#" class="close-button"> <img style="height: 3vh;" src="../images/menu.png" alt=""></a>
<input type="text" oninput="Debounce(main,1000)" placeholder="Search..." style="background-color: rgb(89, 89, 89) ;width: 97% ;height: 40px;">
<a href="surfscates.html">SURFSCATS</a>
<a href="extras.html">EXTRAS</a>
<a href="clothsAndAccesories">CLOTHS AND ACCESSORIES</a>
<a href="sale.html">SALE</a>
<a href="wishlist.html">WHSHLIST</a>
</div>
<button class="open-button" onclick="hideButton()"><img src="../images/menu.png" alt=""></button>
</div>
<div id="navlogo">
<a href="index.html">
<img src="https://cdn11.bigcommerce.com/s-icfw6t6sn3/stencil/91c54d50-3507-013a-2f0b-6ad5f58f6a49/e/1e6d1790-c81c-013b-f8e2-56f5867ab34b/img/carver-logo-header.png"
alt="logo"></a>
</div>
<div id="navmid">
<a href="surfscates.html">SURFSCATS</a>
<a href="extras.html">EXTRAS</a>
<a href="clothsAndAccesories">CLOTHS AND ACCESSORIES</a>
<a href="sale.html">SALE</a>
</div>
<div id="navlast">
<a href="login.html"><img id="useri" width="32" height="32" src="./carver_Clone/images/user.svg" alt="user"></a>
<div class="search-dropdown">
<button class="search-button" onclick="toggleSearchInput()">SEARCH</button>
<input type="text" class="search-input" oninput="Debounce(main,1000)" placeholder="Search..." />
</div>
<a href="cart.html">BAG</a>
</div>
<div id="Sml">
<a href="login.html"><img width="32" height="32" src="../images/user.svg" alt="user"></a>
<a href="cart.html">BAG</a>
</div>
</div>
<!-- NAVABR HTML ENDS -->
<div id="mainbox">
<div id = "backcolor">
<h1>ALL SURFSKATES</h1>
<h3>
Carver has always been about surfing, and of capturing that joyous feeling of flow on a skateboard. The original since 1996, Carver has led the modern surfskate movement forward with its innovative truck systems, like the dual-axis C7 for a smooth and flowing ride, the reverse-kingpin CX for a quick and snappy ride, or the lower, lighter C5 for tricks and parks. And with a variety of surf-inspired shapes and concaves, along with our fast and grippy Roundhouse wheels, Carver delivers speed, power and flow so you can truly ‘Surf your Skate’.</h3>
<div id="partone">
<!-- SORT BY PRICE -->
<select name="" id="sorting" onchange="sortPrice()" >
<option value="" >Select for Sorting</option>
<option value="lth" >Price -- Low to High</option>
<option value="htl" >Price -- High to low</option>
</select>
<!-- SORT BY DISCOUNT-->
<select name="" id="SortbyDiscount">
<option value="">DISCOUNT</option>
<option value="10%off" >10% Discount</option>
<option value="20%off" >20% Discount</option>
<option value="30%off">30% Discount</option>
</select>
</div>
</div>
<br>,
<div id = "container"></div>
</div>
<div id = "pagi">
<button id = "prev"> PREVIOUS </button>
<h3 id = pageNo>1</h3>
<button id = "next"> NEXT </button>
</div>
</div>
<div id="footer">
</div>
</body>
<script type="module" src="footer1.js"></script>
</html>
<script src = "./product.js"></script>
<!-- NAVBAR SCRIPT -->
<script>
const openButton = document.querySelector('.open-button');
const closeButton = document.querySelector('.close-button');
const slideMenu = document.querySelector('.slide-menu');
openButton.addEventListener('click', () => {
slideMenu.style.left = '0';
});
closeButton.addEventListener('click', () => {
slideMenu.style.left = '-300px';
});
function hideButton() {
const openButton = document.querySelector('.open-button');
openButton.style.display = 'none';
const closeButton = document.querySelector('.close-button');
closeButton.addEventListener('click', showButton);
}
function showButton() {
const openButton = document.querySelector('.open-button');
openButton.style.display = 'block';
}
function toggleSearchInput() {
const searchInput = document.querySelector('.search-input');
searchInput.classList.toggle('active');
searchInput.focus();
}
</script>