-
Notifications
You must be signed in to change notification settings - Fork 0
/
product.html
149 lines (129 loc) · 5.5 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
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<nav class="bg-green-100 p-3 flex justify-between items-center shadow-xl sticky top-0">
<h1 class="text-2xl font-medium">Greenden</h1>
<svg id="menuicon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 md:hidden">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<ul class="flex gap-5 text-gray-600 hidden md:flex">
<li>
<a href="index.html" class="hover:underline hover:text-black">Home</a>
</li>
<li>
<a href="product.html" class="hover:underline hover:text-black">Product</a>
</li>
<li>
<a href="contact.html" class="hover:underline hover:text-black">Contact</a>
</li>
</ul>
</nav>
<section id="sidenav" class="bg-green-100 fixed z-20 top-0 " style="width: 50%; height: 100vh; right: -50% ;">
<div class="text-right mt-5 mr-4 ">
<p id="closenav" class="inline cursor-pointer font-semibold " >X</p>
</div>
<ul class="flex flex-col gap-10 text-gray-600 items-center">
<li>
<a href="index.html" class="hover:underline hover:text-black">Home</a>
</li>
<li>
<a href="product.html" class="hover:underline hover:text-black"
>Product</a
>
</li>
<li>
<a href="contact.html" class="hover:underline hover:text-black"
>Contact</a
>
</li>
</ul>
</section>
<section class="p-4 text-center grid mt-5 ">
<h1 class="font-bold text-3xl">Our Products</h1>
<input id="search" type="text" placeholder="Enter your Product" class="container grid mt-2 border border-black p-2 m-1 ">
</section>
<section class="p-4 text-center">
<div id="search-container" class="grid grid-cols-2 md:grid-cols-4 mt-5 gap-5">
<div class="">
<img src="./Images/1.jpg" alt="" class="inline hover:shadow-xl hover:transform hover:-translate-y-2 ">
<h1>Rose Plant</h1>
<p>$200</p>
</div>
<div>
<img src="./Images/2.jpg" alt="" class="inline hover:shadow-xl hover:transform hover:-translate-y-2">
<h1>Monk Plant</h1>
<p>$20</p>
</div>
<div>
<img src="./Images/3.jpg" alt="" class="inline hover:shadow-xl hover:transform hover:-translate-y-2">
<h1>Leaf Plant</h1>
<p>$77</p>
</div>
<div>
<img src="./Images/4.jpg" alt="" class="inline hover:shadow-xl hover:transform hover:-translate-y-2" >
<h1>My Plant</h1>
<p>$20</p>
</div>
<div class="">
<img src="./Images/5.jpg" alt="" class="inline hover:shadow-xl hover:transform hover:-translate-y-2 ">
<h1>Life Plant</h1>
<p>$10</p>
</div>
<div>
<img src="./Images/6.jpg" alt="" class="inline hover:shadow-xl hover:transform hover:-translate-y-2">
<h1>Poison Plant</h1>
<p>$0</p>
</div>
<div>
<img src="./Images/1.jpg" alt="" class="inline hover:shadow-xl hover:transform hover:-translate-y-2">
<h1>Medicine Plant</h1>
<p>$999</p>
</div>
<div>
<img src="./Images/2.jpg" alt="" class="inline hover:shadow-xl hover:transform hover:-translate-y-2" >
<h1>tyfoon Plant</h1>
<p>$2</p>
</div>
</div>
</section>
<section class="bg-green-100 p-10 flex flex-col gap-5 mt-5">
<h1 class="font-bold text-4xl">Greenden</h1>
<p>The standard chunk of Lorem ipsum used the 1500s is reproduced below for those interest</p>
<p>@ 2021 Greenden.com</p>
</section>
<!-- <script src="product.js"></script>
-->
<script>
var side = document.getElementById("sidenav");
var menu = document.getElementById("menuicon");
var closeicon = document.getElementById("closenav");
menu.addEventListener("click", function () {
side.style.right = 0;
});
closeicon.addEventListener("click", function () {
side.style.right = "-50%";
});
// search function
var productcontainer = document.getElementById("search-container");
var search = document.getElementById("search");
var productlist = Array.from(productcontainer.querySelectorAll("div"));
search.addEventListener("keyup", function (event) {
var enteredvalue = event.target.value.toUpperCase();
for (count = 0; count < productlist.length; count = count + 1) {
var productname = productlist[count].querySelector("h1").textContent.toUpperCase();
if (productname.indexOf(enteredvalue) < 0) {
productlist[count].style.display = "none";
} else {
productlist[count].style.display = "block";
}
}
});
</script>
</body>
</html>