error

login.html

@@ -24,8 +24,9 @@
                     <input type="text" placeholder="e.g [email protected]">
                 </div>
             </div>
+            <p class="error">Invalid Username/Email</p>
 
-            <div class="inp" style="margin-top: 10px;">
+            <div class="inp" style="margin-top: 10px; background-image: linear-gradient(135deg,hsl(0deg 0% 23%) 53%,hsl(328deg 54% 47%) 99%,hsl(328deg 100% 50%) 101%,hsl(338deg 100% 50%) 100%);">
                 <p>PASSWORD</p>
                 <div>
                     <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512" style="fill:#FC00A0">
@@ -34,6 +35,7 @@
                     <input type="password" placeholder="Enter password">
                 </div>
             </div>
+            <p class="error">Wrong Password</p>
 
             <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 640 512" class="eye">
                 <path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z"/>

public/fonts.css

@@ -23,6 +23,11 @@
     src: url(fonts/Helvetica-Bold-Italic.otf);
 }
 
+@font-face {
+    font-family: helvetica-light-italic;
+    src: url(fonts/Helvetica-Light-Italic.otf);
+}
+
 @font-face {
     font-family: poppins-reg;
     src: url(fonts/poppins.regular.ttf);

public/login.css

@@ -82,7 +82,7 @@ body
     display:flex;
     flex-direction: column;
     background-color: #3a3a3a;
-    padding:20px;
+    padding:20px 20px 25px 20px;
     border-radius:20px;
     margin:0;
     background-image: linear-gradient(
@@ -94,17 +94,6 @@ body
     );
 }
 
-.inp:nth-child(2)
-{
-    background-image: linear-gradient(
-        135deg,
-        hsl(0deg 0% 23%) 53%,
-        hsl(328deg 54% 47%) 99%,
-        hsl(328deg 100% 50%) 101%,
-        hsl(338deg 100% 50%) 100%
-    );
-}
-
 .inp p 
 {
     display:flex;
@@ -161,19 +150,27 @@ body
     margin:0px 20px 0px auto;
     fill:#3a3a3a;
     position:relative;
-    bottom:45px;
+    bottom:50px; /*When error occours, bottom = 65px*/
 }
 
 .submit
 {
     display:flex;
-    margin:20px auto 0px auto;
+    margin:0px auto 0px auto;
     font-size:17px;
     font-family: helvetica-med;
     color:white;
     background-color: blueviolet;
     border-radius: 50px;
-    padding:10px 70px 10px 70px;
+    padding:7px 150px 7px 150px;
     text-decoration: none;
-    user-select: none;
+}
+
+.error
+{
+    display: none;
+    font-family: helvetica-light-italic;
+    font-size:13px;
+    color:red;
+    margin:0px auto 0px 10px;
 }