changes to login.html

Anjaliavv51#247
Amulya-B28 · Oct 6, 2024 · 124c2d8 · 124c2d8
1 parent 4072d45
commit 124c2d8
Showing 1 changed file with 77 additions and 6 deletions.
diff --git a/Html-files/login.html b/Html-files/login.html
@@ -13,9 +13,82 @@
     <link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&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" rel="stylesheet">
-    <link rel="stylesheet" href="../Css-files/login.css">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&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" rel="stylesheet">
+    <style>
+
+      .circle{
+      z-index: 998;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      pointer-events: none;
+      animation: colors 5s infinite;
+      position: fixed;
+      transform: translate(-50%,-50%);
+      }
+      .circle::before {
+      content: "";
+      position: fixed;
+      width: 50px;
+      height: 50px;
+      opacity: 0.2;
+      transform: translate(-30%,-30%);
+      border-radius: 50%;
+      }
+      </style>
+      <style>
+        .container {
+        width: 350px;
+        height: 500px;
+        perspective: 800px;
+      }
+
+      .container:hover > .card {
+        cursor: pointer;
+        transform: rotateY(180deg);
+      }
+
+      .card {
+        height: 100%;
+        width: 100%;
+        position: relative;
+        transition: transform 1500ms;
+        transform-style: preserve-3d;
+        border-radius: 40px;
+      }
+
+      .front,
+      .back {
+        height: 100%;
+        width: 100%;
+        border-radius: 2rem;
+        box-shadow: 0 0 5px 2px rgba(50, 50, 50, 0.25);
+        position: absolute;
+        backface-visibility: hidden;
+      }
+
+      .front {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .back {
+        background-color: #3a3a3a;
+        transform: rotateY(180deg);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 5rem;
+      }
+      :root{
+                  --ff-philosopher: "Philosopher", sans-serif;
+                  --ff-poppins: "Poppins", sans-serif;
+              }
+      </style>
 </head>
 <body>
   <div class="circle-container">
@@ -66,10 +139,8 @@ <h1 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">LOGIN</
           <label required for="password" style="color: black;font-family:var(--ff-poppins);">Password</label>
           <input required type="password" name="password" placeholder="Enter Password" style="font-family:var(--ff-poppins);">
         </div>
-        <div class="btnNext">
-          <button class="btn-login" style="color: black;font-family:var(--ff-poppins);"><a style="text-decoration: none;color: black;" href="logged.html">Login</a></button>
+        <button class="btn-login" style="color: black;font-family:var(--ff-poppins);"><a style="text-decoration: none;color: black;" href="logged.html">Login</a></button>
         <button id="google-login" style="color: black;font-family:var(--ff-poppins);">Login with google</button>
-        </div>
       </div>
     </div>
 </form>