trent_larson
/
kickstarter-for-time
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Search screen

master
Jose Olarte III 2 years ago
commit
e2fe0e0f20
2 changed files with 114 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      css/main.css
  2. 103
      search.html

11
css/main.css
View File

@ -0,0 +1,11 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
@layer base {
html {
font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif !important;
}
}

103
search.html
View File

@ -0,0 +1,103 @@
<!doctype html>
<html class="text-slate-700">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Tailwind -->
<script src="https://cdn.tailwindcss.com?plugins=forms"></script>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/2396c18fde.js" crossorigin="anonymous"></script>
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<!-- QUICK NAV -->
<nav id="QuickNav" class="absolute bottom-0 left-0 right-0 bg-slate-200">
<ul class="flex text-2xl p-2 gap-2">
<li class="basis-1/5 rounded-md text-slate-500"><a href="" class="block text-center py-3 px-1"><i class="fa-solid fa-house-chimney"></i></a></li>
<li class="basis-1/5 rounded-md bg-slate-400 text-white"><a href="" class="block text-center py-3 px-1"><i class="fa-solid fa-magnifying-glass"></i></a></li>
<li class="basis-1/5 rounded-md text-slate-500"><a href="" class="block text-center py-3 px-1"><i class="fa-solid fa-folder-open"></i></a></li>
<li class="basis-1/5 rounded-md text-slate-500"><a href="" class="block text-center py-3 px-1"><i class="fa-solid fa-hand"></i></a></li>
<li class="basis-1/5 rounded-md text-slate-500"><a href="" class="block text-center py-3 px-1"><i class="fa-solid fa-user-group"></i></a></li>
</ul>
</nav>
<!-- CONTENT -->
<section id="Content" class="p-6">
<!-- Heading -->
<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">Discover</h1>
<!-- Quick Search -->
<form id="QuickSearch" class="mb-4">
<input type="text" placeholder="Search…" class="block w-full rounded border-slate-400" />
</form>
<!-- Result Tabs -->
<div class="text-center text-slate-500 border-b border-slate-300">
<ul class="flex flex-wrap justify-center gap-4 -mb-px">
<li>
<a href="#" class="inline-block py-3 rounded-t-lg border-b-2 active text-blue-600 border-blue-600 font-semibold">
Nearby <span class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md">20+</span>
</a>
</li>
<li>
<a href="#" class="inline-block py-3 rounded-t-lg border-b-2 border-transparent hover:text-slate-600 hover:border-slate-300">
Remote <span class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md">13</span>
</a>
</li>
<li>
<a href="#" class="inline-block py-3 rounded-t-lg border-b-2 border-transparent hover:text-slate-600 hover:border-slate-300">
Contacts <span class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md">2</span>
</a>
</li>
</ul>
</div>
<!-- Results List -->
<ul class="">
<li class="border-b border-slate-300">
<a href="" class="block py-4 flex gap-4">
<div class="w-12">
<img src="https://picsum.photos/200/200?random=1" class="w-full rounded" />
</div>
<div class="grow">
<h2 class="text-base font-semibold">Canyon cleanup</h2>
<div class="text-sm"><i class="fa-solid fa-user text-slate-400"></i> Rotary</div>
</div>
</a>
</li>
<li class="border-b border-slate-300">
<a href="" class="block py-4 flex gap-4">
<div class="w-12">
<img src="https://picsum.photos/200/200?random=2" class="w-full rounded" />
</div>
<div class="grow">
<h2 class="text-base font-semibold">Potluck with neighbors</h2>
<div class="text-sm"><i class="fa-solid fa-user text-slate-400"></i> Andrew A.</div>
</div>
</a>
</li>
<li class="border-b border-slate-300">
<a href="" class="block py-4 flex gap-4">
<div class="w-12">
<img src="https://picsum.photos/200/200?random=3" class="w-full rounded" />
</div>
<div class="grow">
<h2 class="text-base font-semibold">Historical site</h2>
<div class="text-sm"><i class="fa-solid fa-user text-slate-400"></i> <em>Unknown</em></div>
</div>
</a>
</li>
</ul>
</section>
</body>
</html>
Write Preview
Loading…
Cancel
Save