Skip to content

Instantly share code, notes, and snippets.

@fredriccliver

fredriccliver/weather.html

Created September 29, 2021 07:02
Show Gist options
  • Save fredriccliver/053816ca78bc154f0347a48e2978eb19 to your computer and use it in GitHub Desktop.
Save fredriccliver/053816ca78bc154f0347a48e2978eb19 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
weather.html
<html>
<head>
<link
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="">
<img
class="absolute w-screen h-screen object-cover"
src="https://images.unsplash.com/photo-1587736891536-beb1e48bb22b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2669&q=80"
alt=""
/>
<div class="absolute w-screen h-screen bg-black bg-opacity-25"></div>
</div>
<div class="absolute w-full pt-28 text-center">
<input
id="search_box"
class="text-center w-80 p-4 rounded-full opacity-80 outline-none"
type="text"
placeholder="Input a city name"
/>
<div id="result_box" class="text-white mt-20 text-7xl font-serif hidden">
<p id="cityname_box" class="text-3xl italic opacity-80">London</p>
<p id="status_box" class="mt-8 font-extrabold">Heavy Rain</p>
<p id="temperature_box" class="mt-8 text-4xl font-bold">14℃</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment