-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
54 lines (49 loc) · 3.3 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
<!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-Compatible" content="ie=edge" />
<title>Rosmarin</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="input.css" />
</head>
<body>
<div class="centerContainer">
<h1 class="heading">Rosmarin</h1>
<form action="/aplace/wherewewanttoprocessthisdata" method="GET">
<div id="searchContainer">
<input id="inputBox" list="plant_names" name="plants" placeholder="search" aria-label="This is the autocomplete box for plant names. Suggestions will generate while you type">
<datalist class="plant_names" id="plant_names">
<option value="search">search for plants here</option>
</datalist>
<a class="button" href="#">
<svg id="icons" class="button-icons" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="485.213px" height="485.213px" viewBox="0 0 485.213 485.213" style="enable-background:new 0 0 485.213 485.213;"
xml:space="preserve">
<path class="magnify" class="icon" d="M363.909,181.955C363.909,81.473,282.44,0,181.956,0C81.474,0,0.001,81.473,0.001,181.955s81.473,181.951,181.955,181.951
C282.44,363.906,363.909,282.437,363.909,181.955z M181.956,318.416c-75.252,0-136.465-61.208-136.465-136.46
c0-75.252,61.213-136.465,136.465-136.465c75.25,0,136.468,61.213,136.468,136.465
C318.424,257.208,257.206,318.416,181.956,318.416z"/>
<path class="magnify" class="icon" d="M471.882,407.567L360.567,296.243c-16.586,25.795-38.536,47.734-64.331,64.321l111.324,111.324
c17.772,17.768,46.587,17.768,64.321,0C489.654,454.149,489.654,425.334,471.882,407.567z"/>
<path class="plant" class="icon" style="fill:#4CAF50;" d="M188.864,67.349C147.819,26.325,67.499,21.568,10.667,21.568C4.776,21.568,0,26.344,0,32.235
c0,56.853,4.757,137.173,45.781,178.219c19.261,17.154,44.438,26.143,70.208,25.067c26.571,1.047,52.57-7.896,72.875-25.067
C219.435,179.861,225.045,103.531,188.864,67.349z"/>
<path class="plant" class="icon" style="fill:#4CAF50;" d="M459.136,63.765c-56.853,0-137.173,4.757-178.219,45.781c-36.267,36.267-30.571,112.491,0,143.083
c20.311,17.174,46.318,26.117,72.896,25.067c25.769,1.074,50.946-7.915,70.208-25.067c41.045-41.045,45.781-121.365,45.781-178.219
C469.791,68.528,465.019,63.765,459.136,63.765z"/>
</g>
<path class="plant" class="icon" style="fill:#388E3C;" d="M224,448.235c-5.891,0-10.667-4.776-10.667-10.667c0-226.24-82.965-283.008-114.197-304.363
c-3.767-2.405-7.334-5.109-10.667-8.085c-4.093-4.237-3.975-10.99,0.262-15.083c4.134-3.993,10.687-3.993,14.821,0
c2.409,2.037,4.961,3.898,7.637,5.568c27.733,18.965,93.056,63.659,115.648,210.261c17.459-76.645,69.213-140.995,140.331-174.485
c5.446-2.562,11.946-0.51,14.933,4.715c2.698,4.755,1.032,10.796-3.723,13.495c-0.178,0.101-0.36,0.197-0.544,0.287l-1.728,0.811
c-116.949,54.976-141.504,175.467-141.504,266.88C234.603,443.434,229.866,448.199,224,448.235z"/>
</svg></a>
</div>
</form>
</div>
<script src="script.js"></script>
</body>
</html>