-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
132 lines (120 loc) · 4.13 KB
/
index.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" />
<meta http-equiv="X-UA-Compaptible" content="ie=edge" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700"
rel="stylesheet"
/>
<link rel="shortcut icon" href="src/img/favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="index.css" />
<title>Plant selection over 100 plants</title>
</head>
<body>
<!-- container -->
<div class="container align-items-center" id="body">
<!-- nav -->
<div id="topNav" class="container ">
<div id="topBar" class="align-items-center d-flex justify-content-between">
<!-- logo -->
<div >
<a href="#" class="navbar-brand"
><img id="logo" src="src/img/logo.png" alt="logo" />
</a>
</div>
<!-- search -->
<div id="searchBar">
<form
action="#"
name="searchForm"
id="searchForm"
>
<input
class="form"
type="search"
placeholder="Search plant "
aria-label="Search"
id="searchText"
name="query"
/>
<button
class="btn btn-outline-secondary"
id="searchButton"
type="submit"
>
Search
</button>
</form>
</div>
</div>
</div>
<!-- category -->
<div class="container" id="categoryBar">
<hr class="mt-0" />
<!-- category button -->
<div class="align-items-center d-flex justify-content-around flex-wrap mb-5">
<button class="categoryButton" id="largeTreeCategory">
<img class="imageCategory" src="src/img/largeTree.png" />
<br />Large Plants
</button>
<button class="categoryButton" id="smallTreeCategory">
<img class="imageCategory" src="src/img/smallTree.png" />
<br />Small Plants
</button>
<button class="categoryButton" id="flowerCategory">
<img class="imageCategory" src="src/img/flower.png" />
<br />Flower
</button>
<button class="categoryButton" id="vineCategory">
<img class="imageCategory" src="src/img/vine.png" />
<br />Vine Plants
</button>
<button class="categoryButton" id="fastGrowPlantCategory">
<img class="imageCategory" src="src/img/fastGrowPlant.png" />
<br />Fast Grow
</button>
</div>
</div>
<!-- content -->
<div id="mainContainer" class="container">
<!-- result number -->
<div class="resultNumber badge fw-lighter">
<span id="resultList">0</span> results
</div>
<!-- <div id="main">
<button class="openbtn" onclick="openNav()">></button>
</div> -->
<!-- spinner -->
<div
class="spinner-border text-secondary spinnerHidden"
role="status"
></div>
<!-- content -->
<div class="align-items-start d-flex inforContainer">
<!-- side bar -->
<div
id="sideContainer"
class="btn-group-vertical sideButton"
>
</div>
<!-- information -->
<div id="contentContainer" class="nav">
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"
></script>
<script src="index.js"></script>
</body>
</html>