-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.html
130 lines (116 loc) · 5.5 KB
/
search.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
<!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="./css/main.css">
<!-- custom google font poppins -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<!-- custom google font Fredoka -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<title>Dictionory</title>
<style type="text/tailwindcss">
@layer base {
body{
font-family: 'Poppins', sans-serif;
}
}
</style>
</head>
<body class="flex flex-col justify-center items-center bg-gray-900">
<div class="app glass min-h-screen w-full lg:w-380 md:w-380 mx-5 max-w-sm lg:max-w-md">
<div class="container-sm">
<div class="px-6 content py-4">
<div class="flex justify-between items-center">
<h2 class="text-gradient text-3xl brand font-semibold mb-2">Incriaysc</h2>
<div class="relative inline-block text-left dropdown">
<span class="rounded-md shadow-sm"
><button class="inline-flex justify-center w-full py-3 text-sm font-medium leading-5 text-gray-400 transition duration-150 ease-in-out borderrounded-md hover:text-gray-500 focus:outline-none focus:text-sky-500 focus:shadow-outline-blue active:text-gray-800"
type="button" aria-haspopup="true" aria-expanded="true" aria-controls="headlessui-menu-items-117">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
<path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</svg>
</button
></span>
<div class="opacity-0 invisible dropdown-menu transition-all duration-300 transform origin-top-right -translate-y-2 scale-95">
<div class="absolute right-0 w-56 mt-2 option origin-top-right border border-sky-400/25 divide-y rounded-md shadow-lg outline-none" aria-labelledby="headlessui-menu-button-1" id="headlessui-menu-items-117" role="menu">
<div class="py-2">
<a href="about.html" tabindex="0" class="text-gradient flex justify-between w-full px-4 py-2 text-sm leading-5 text-left" role="menuitem" >About Us</a>
<a href="support.html" tabindex="1" class="text-gradient flex justify-between w-full px-4 py-2 text-sm leading-5 text-left" role="menuitem" >Support</a>
</div>
</div>
</div>
</div>
</div>
<div class="">
<form id="form" class="w-full flex items-center">
<div class="search-input flex justify-between items-center w-full glass-white py-65 px-3 my-4 rounded-tl-lg rounded-bl-lg">
<input type="text" id="search" class="text-white w-full break-words text-base lg:text-15 outline-none bg-transparent" placeholder="Search.."/>
</div>
<button id="btnsearch" class="bg-sky-400 h-12 w-14 rounded-r-lg"><i class="bi bi-search"></i></button>
</form>
</div>
<main class="mb-20">
<div class="container-dictionory mb-4" id="main"></div>
<div class="container-dictionory mb-4" id="main2"></div>
<div class="container-dictionory mb-4" id="main3"></div>
<div class="container-dictionory mb-4" id="main4"></div>
</main>
</div>
</div>
</div>
<!-- Content Selesai-->
<!-- Navbar Section -->
<div class="navbar background-gradient py-4 lg:py-5 fixed bottom-0 lg:pr-0" style="padding-right: 0.1rem;">
<ul class="flex text-center items-center justify-around mx-navbar text-white text-10 lg:text-base md:text-md">
<li class="px-3 flex-col">
<a href="/"><i class="bi bi-house-fill"></i> Home</a>
</li>
<li class="px-3 black">
<a href="search"><i class="bi bi-compass"></i> Search</a>
</li>
<li class="px-3">
<a href="about"><i class="bi bi-layout-text-window"></i> About</a>
</li>
</ul>
</div>
<!-- Navbar Section Selesai -->
</div>
</div>
</body>
<script>
tailwind.config = {
theme: {
extend: {
width: {
'380': '381px',
'68': '66rem',
},
paddingRight: {
'2': '0.30rem',
},
fontSize: {
'26': '26px',
'15': '15.4px',
'10': '7px',
},
padding: {
'65': '0.65rem',
},
margin: {
'navbar': '2.97rem',
},
}
}
}
</script>
<script src="/js/search.js"></script>
<script src="https://kit.fontawesome.com/1c1fe6136b.js" crossorigin="anonymous"></script>
</html>