58 lines
2.0 KiB
HTML
58 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html class="no-js" lang="">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
|
<title>Exploring countries</title>
|
|
<meta name="description" content="" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link href="../public/output.css" th:href=@{~/public/output.css}
|
|
rel="stylesheet" />
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
|
<!-- Place favicon.ico in the root directory -->
|
|
</head>
|
|
<body class="bg-very-light-gray">
|
|
<!--[if lt IE 8]>
|
|
<p class="browserupgrade">
|
|
You are using an <strong>outdated</strong> browser. Please
|
|
<a href="http://browsehappy.com/">upgrade your browser</a> to improve
|
|
your experience.
|
|
</p>
|
|
<![endif]-->
|
|
<main>
|
|
<header
|
|
class="bg-white h-20 flex flex-row justify-between items-center px-4 shadow-md"
|
|
>
|
|
<h1 class="font-bold">Where in the world?</h1>
|
|
<p>Dark Mode</p>
|
|
</header>
|
|
<nav class="flex flex-col px-4 justify-around h-48">
|
|
<form method="post" id="search-country" action="">
|
|
<div class="flex flex-row bg-white shadow-md h-14 rounded-lg">
|
|
<p class="w-16 grid place-content-center">IC</p>
|
|
<input
|
|
class="appearance-none flex-grow focus:outline-none mr-2"
|
|
type="text"
|
|
name="country-name"
|
|
placeholder="Search for a country..."
|
|
/>
|
|
</div>
|
|
</form>
|
|
<form>
|
|
<select
|
|
class="block w-full mt-1 h-12 w-64 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none"
|
|
>
|
|
<option value="" selected disabled>Filter by Region</option>
|
|
<option value="option1">Option 1</option>
|
|
<option value="option2">Option 2</option>
|
|
<option value="option3">Option 3</option>
|
|
</select>
|
|
</form>
|
|
</nav>
|
|
<article>
|
|
<h1 class="text-3xl">Hello!</h1>
|
|
</article>
|
|
</main>
|
|
</body>
|
|
</html>
|