The-Weather-App/index.html at main · MSB-s-Projects/The-Weather-App · GitHub

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Meta tags  -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- tailwind css  -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- CSS  -->
    <link rel="stylesheet" href="/css/styles.css">

    <!-- title  -->
    <title>Weather App</title>
  </head>
  <body>

    <!-- Page Heading  -->
    <h1 class="page-heading">Welcome to our Weather App!</h1>

    <!-- Input Form  -->
    <form action="/" method="post">
      <label class="block">

        <!-- Label for the input  -->
        <span class="text-lg font-medium text-slate-700 lbl"
          >Enter the City :</span
        >

        <!-- Input the name of the city  -->
        <input
          type="text"
          class="mt-1 inp px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500 disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none invalid:border-pink-500 invalid:text-pink-600 focus:invalid:border-pink-500 focus:invalid:ring-pink-500"
          name="city"
          id="enterCity"
        />

        <!-- Go button  -->
        <button
          class="inline-block px-6 py-2.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded-full shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out"
          type="submit"
        >
          Go
        </button>
      </label>
    </form>
  </body>
</html>