css-frameworks/index.html at main · idatold/css-frameworks · 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
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
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="icon" type="icon" sizes="16x16" href="/favicon.ico" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Log in to your account to access personalized features, explore content, and stay connected with the community at Plantio!"
    />
    <title>Plantio login</title>
    <link rel="stylesheet" href="./css/style.css" />
    <script src="./js/main.mjs" type="module" defer></script>
  </head>
  <body>
    <header class="relative">
      <div
        class="absolute top-0 left-0 w-full flex justify-between items-center p-4 z-10"
      >
        <button
          id="menuToggle"
          class="p-2 absolute top-4 right-4 bg-teal-800 rounded focus:outline-none hover:bg-teal-700"
          aria-label="Open Menu"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewbox="0 0 24 24"
            stroke="currentcolor"
            class="w-6 h-6 text-white"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4 6h16M4 12h16M4 18h16"
            ></path>
          </svg>
        </button>
      </div>
      <div
        id="menu"
        class="fixed inset-0 bg-teal-950 bg-opacity-95 hidden flex flex-col justify-center items-center z-20"
      >
        <button
          id="menuClose"
          class="absolute top-4 right-4 p-2 bg-teal-950 rounded focus:outline-none hover:bg-teal-700"
          aria-label="Close Menu"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewbox="0 0 24 24"
            stroke="currentcolor"
            class="w-6 h-6 text-white"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M6 18L18 6M6 6l12 12"
            ></path>
          </svg>
        </button>
        <nav class="text-center space-y-10 text-white text-2xl flex flex-col">
          <a href="./register/index.html" class="hover:underline">Register</a>
        </nav>
      </div>
    </header>
    <main class="flex flex-col items-center">
      <div class="w-full flex justify-center items-center h-2/4">
        <video
          class="w-96 h-auto hover: transition-transform duration-300 cursor-pointer"
          src="assets/PLANTIO.mp4"
          muted
          preload="metadata"
          onmouseover="this.play()"
          alt="plantio logo with growing seedling"
        ></video>
      </div>
      <div
        id="loginCard"
        class="w-full flex justify-center items-center h-64 bg-teal-800"
      >
        <form
          action="/profile"
          method="post"
          id="loginForm"
          class="max-w-md mx-auto p-6 bg-gray-100 rounded shadow mb-10"
          name="loginForm"
        >
          <h1 class="text-2xl font-roboto mb-4">Login</h1>
          <label for="email" class="block text-gray-700 mb-2 font-roboto"
            >Email</label
          >
          <input
            type="email"
            id="email"
            name="email"
            class="border border-gray-300 p-2 rounded w-full mb-4"
            required=""
          />
          <label for="password" class="block font-roboto text-gray-700 mb-2"
            >Password</label
          >
          <input
            type="password"
            id="password"
            name="password"
            minlength="8"
            class="border border-gray-300 p-2 rounded w-full mb-4"
            required=""
          />
          <button
            id="loginButton"
            type="submit"
            class="bg-teal-800 text-white py-2 px-4 rounded w-full font-roboto hover:bg-teal-700"
          >
            Login
          </button>
          <p class="text-sm text-center mt-4 font-roboto">
            Don't have an account?
            <a href="/register/" class="text-blue-500">Register</a>
          </p>
        </form>
      </div>
    </main>
  </body>
</html>