Login page structure

src/app/app.component.html

@@ -1,3 +1,6 @@
-<h1 class="text-3xl font-bold underline">
+<!-- <h1 class="text-3xl font-bold underline">
   Hello world! Testing Tailwind CSS
-</h1>
+</h1> -->
+<main>
+  <router-outlet></router-outlet>
+</main>

src/app/components/authentication/login/login.component.html

@@ -1 +1,68 @@
-<p>login works!</p>
+<section class="flex flex-col md:flex-row h-screen items-center">
+
+  <div class="bg-indigo-600 hidden lg:block w-full md:w-1/2 xl:w-2/4 h-screen">
+    <!-- <img [src]="imageLoginURL" alt="Login Photo" class="w-full h-full object-cover"> -->
+    <div
+      class="w-full h-full hidden md:flex flex-auto items-center justify-center p-10 overflow-hidden bg-gray-400 text-white bg-no-repeat bg-cover relative"
+      style="background-image: url({{imageLoginURL}});">
+      <div class="absolute inset-0 bg-gray-400 opacity-50"></div>
+      <div class="w-full z-10 max-w-xs mt-96 ml-60">
+        <div class="sm:text-4xl xl:text-5xl leading-tight mb-6 font-gayathri text-white">“</div>
+        <div class="sm:text-sm xl:text-md text-white font-normal"> In the realm of quiz games, those who adeptly
+          tackle challenges and consistently seek innovative solutions will emerge as the true champions of tomorrow
+        </div>
+        <div class="sm:text-sm xl:text-md text-white font-normal my-6">Jason Medina</div>
+        <div class="flex justify-end"><img [src]="vectorIconLogin" alt="" class="w-5 h-5"></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="bg-white w-full md:max-w-md lg:max-w-full md:mx-auto md:w-1/2 xl:w-1/3 h-screen px-6 lg:px-16 xl:px-12
+        flex items-center justify-center">
+
+    <div class="w-full h-100">
+
+      <div>
+        <h1 class="text-xl md:text-3xl font-bold leading-tight mt-12">Log in to your account</h1>
+        <p class="text-lg text-gray-500">with your registered E-mail Address</p>
+      </div>
+
+      <hr class="my-6 border-gray-300 w-full">
+
+      <form class="mt-6" action="#" method="POST">
+        <div>
+          <label class="block text-gray-700" for="email">E-mail address</label>
+          <input type="email" name="email" id="email" placeholder="Enter e-mail address"
+            class="w-full px-4 py-3 rounded-lg bg-white mt-2 border focus:border-blue-500 focus:bg-white focus:outline-none"
+            autofocus autocomplete required>
+        </div>
+
+        <div class="mt-4">
+          <label class="block text-gray-700" for="password">Enter password</label>
+          <input type="password" name="password" id="password" placeholder="Password" minlength="6" class="w-full px-4 py-3 rounded-lg bg-white mt-2 border focus:border-blue-500
+                focus:bg-white focus:outline-none" required>
+        </div>
+
+        <div class="text-right mt-2">
+          <a href="#" class="text-sm font-semibold text-gray-700 hover:text-blue-700 focus:text-blue-700">Oops! I forgot
+            my password</a>
+        </div>
+
+        <button type="submit" class="w-full block bg-gray-500 hover:bg-gray-400 focus:bg-gray-400 text-white font-semibold rounded-lg
+              px-4 py-3 mt-6">Log In</button>
+      </form>
+
+      <div class="flex items-center justify-center space-x-4 my-8">
+        <span class="h-px w-1/2 bg-gray-200"></span>
+        <span class="text-base text-gray-300 font-normal whitespace-nowrap">Still not a Player?</span>
+        <span class="h-px w-1/2 bg-gray-200"></span>
+      </div>
+
+      <p class="mt-8 text-center">Join Us Today! <a href="#"
+          class="text-blue-500 hover:text-blue-700 font-semibold">Create
+          Account</a></p>
+
+    </div>
+  </div>
+
+</section>

src/app/components/authentication/login/login.component.ts

@@ -8,5 +8,7 @@ import { Component } from '@angular/core';
   styleUrl: './login.component.css'
 })
 export class LoginComponent {
+  imageLoginURL: string = "assets/auth/login.jpg";
+  vectorIconLogin: string = "assets/auth/login-vector.png"
 
 }

src/styles.css

@@ -1,4 +1,6 @@
-/* You can add global styles to this file, and also import other style files */
+@import url('https://fonts.googleapis.com/css2?family=Gayathri:wght@100;400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

tailwind.config.js

@@ -4,6 +4,10 @@ module.exports = {
     "./src/**/*.{html,ts}",
   ],
   theme: {
+    fontFamily: {
+      gayathri: ['Gayathri'],
+      poppins: ['Poppins']
+    },
     extend: {},
   },
   plugins: [],