-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathpage-one.html
More file actions
128 lines (99 loc) · 5.01 KB
/
page-one.html
File metadata and controls
128 lines (99 loc) · 5.01 KB
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
<!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">
<title>DVD Hut</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<header class="header">
<div class="container header__top">
<div class="header__logo">
<h1 class="header__title">
DVD
<span class="header__subtitle">HUT</span>
</h1>
</div>
<div class="wrapper">
<div id="search-container">
<input
type="search"
id="search-input"
placeholder="Search product name here.."
/>
<button id="search">Search</button>
</div>
<div id="buttons">
<button class="button-value" onclick="filterProduct('All')">All</button>
<button class="button-value" onclick="filterProduct('Drama')">Drama</button>
<button class="button-value" onclick="filterProduct('Crime,')">Crime,</button>
<button class="button-value" onclick="filterProduct('Action,')">Action,</button>
<button class="button-value" onclick="filterProduct('Biography,')">Biography,</button>
</div>
</div>
<div class="header__cart">
<ul>
<li class="header__submenu" id="submenu">
<button class="header__cart-btn" id="toggle-cart-btn"><svg class="cart" width="24" height="24" viewBox="0 0 24 24">
<path d="M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z"></path>
</svg> My Cart</button>
<div id="shopping-cart" class="shopping-cart-container">
<table id="cart-content">
<thead>
<tr>
<th>DVD</th>
<th>Movie-Name</th>
<th>£</th>
<th></th>
</tr>
</thead>
<tbody></tbody>
</table>
<p class="total-container" id="total-price"></p>
<a href="#" id="checkout-btn" class="cart-btn">Checkout</a>
<a href="#" id="clear-cart" class="cart-btn">Clear Cart</a>
</div>
</li>
</ul>
</div>
</div>
</header>
<main class="container page-content">
<h2 class="page-title">Movie Selection</h2>
<div>
<label for="cars">Sort Selection:</label>
<select name="cars" id="cars">
<option value="pricehtolo" onselect ="sortProduct('ascending')">Price High-Low</option>
<option value="priceltoh">Price Low-High</option>
<option value="alphatoz">Alphabetical A-Z</option>
<option value="alphztoa">Alphabetical Z-A</option>
</select>
</div>
<div class="page-count"><a href="./index.html" >Page-1</a>
<a href="./page-one.html">Page-2</a>
</div>
<div class="grid" id="grid">
<div class="products__movies card">
</div>
</div>
</main>
<footer class="footer">
<div class="container footer__container">
<div class="footer__links">
<ul class="footer__list">
<li class="footer__list-item"><a class="footer__link-item" href="#">About us</a></li>
<li class="footer__list-item"><a class="footer__link-item" href="#">Contact Us</a></li>
<li class="footer__list-item"><a class="footer__link-item" href="#"></a></li>
</ul>
</div>
<div class="credits">
<p class="credits__small-text">©2022 Tony Arora Productions</p>
</div>
</div>
</footer>
<script src="./script-search.js"></script>
</body>
</html>