Merge pull request #94 from ROHITTTTZ/rohittttz

Karamraj · Oct 4, 2023 · 6ead624 · 6ead624
2 parents 2381090 + f50d64e
commit 6ead624
Show file tree

Hide file tree

Showing 2 changed files with 166 additions and 0 deletions.
diff --git a/Login/login.css b/Login/login.css
@@ -0,0 +1,133 @@
+body{
+    background-color: black;
+}
+.content{
+    position: absolute;
+    top:0;
+    right: 0;
+    width: 42%;
+    height: 100%;
+    background: transparent;
+}
+.content .formbox{
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+    background: transparent;
+    color: white;
+    backdrop-filter: blur(5px);
+}
+.icon{
+    color: white;
+}
+.formbox h2{
+    text-align: center;
+    font-size: 30px;
+    font-family: 'Kanit', sans-serif;
+}
+.formbox .input1{
+    padding: 0px;
+    width: 263px;
+    height: 41px;
+    border-bottom: 1px solid white;
+    margin: 20px 0px 24px 12px;
+}
+.formbox img{
+    position: absolute;
+    margin: -2px 29px -8px 0px;
+    right: 136px;
+
+
+}
+.formbox{
+    position: relative;
+}
+
+.formbox .input1{
+    width: 202px;
+    height: 25px;
+}
+.formbox label{
+    position: relative;
+    top: -40px;
+    pointer-events: none;
+    transition: 0.4s ease;
+    font-family: 'Kanit', sans-serif;
+    font-size: 18px;
+    font-weight: 500;
+}
+.formbox input{
+    background: transparent;
+    font-size: 15px;
+    color: #f0f8ff96;
+    font-weight: lighter;
+    border: none;
+    outline: none;
+}
+.input1 input:focus~label{
+    top: -45px;
+}
+
+
+.formbox .rem{
+    margin: 10px;
+}
+
+.wow{
+    display: flex;
+    font-size: 17px;
+    font-weight: 500;  
+    font-family: 'Kanit', sans-serif;
+    margin: -8px 0px 15px;
+    color: white;
+    padding: 0px 0px 1px 10px;
+    justify-content: space-between;
+}
+.forg a{
+    padding: 13px;
+    font-family: 'Kanit', sans-serif;
+    font-size: 17px;
+    color: rgb(94 179 255);
+    text-decoration: none;
+}
+.forg a:hover{
+    text-decoration: underline;
+}
+
+.btn{
+    width: 100%;
+    height: 30px;
+    font-weight: 500;
+    font-size: 16px;
+    color: white;
+    background-color: #0202cf;
+    border-radius: 5px;
+    border: none;
+    outline: none;
+    box-shadow: 0px 0px 10px #3835fb;
+}
+.btn:hover{
+    cursor: pointer;
+    border-radius:6px ;
+    background-color: #0c0cdd;
+}
+.hein{
+    display: flex;
+    justify-content: space-between;
+    margin-top: 12px;
+    font-size: 17px;
+    color: white;
+    font-family: 'Kanit', sans-serif;
+}
+.hein a{
+
+    text-decoration: none;
+    color:rgb(94 179 255) ;
+}
+.hein a:hover{
+    text-decoration: underline;
+}
diff --git a/Login/login.html b/Login/login.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="LoginForm.css">
+    <title>Document</title>
+</head>
+<body>
+    <div class="content">
+        <div class="formbox">
+            <form action="#" class="form">
+                <h2>Sign In</h2>
+                <div class="input1">
+                    <span class="icon"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAU5JREFUSEtjZKAxYKSx+QzDyIL///+HAIOrBYjVKQy2m0D9NYyMjGtA5sCDCGjBVSBfi0LDYdqvAS3QRrfgP1R2OpDOJNMiuF6gBWDHI/sAbAFIAugbDyBzPhBLEGnRC6C6RKDWHUC9cHNw+YAXqPALUJ0gUMEMIA4jYMkqoHwGUM97oB4eIPszzKG4LHgMlIgDajgAUgDUFAGkpgKxEJpF74D8bKC6FVB1DkB6ERDLErIAZs4cIKMIaMBnoCWgoAIFGSjoQGAHNEheAOV4gew+IE5BdgDOOEBz5TMgPxWoeBvUlRlQ14GCDuQ7LyA1G4il0PSB4xKsFiYBixx0hVD+EiCdD9QDChaQwaDgmgjEMTjUk2wByJzXSMEACj5RXIZDfUmSD/CZhVWO1CAatQCcMmhe2IGK63YgViE5wFE1YC+uKTQUp/ZhVGXSKogAcq2HGcamB5kAAAAASUVORK5CYII="/></span>
+                    <input type="email" class="email" placeholder="[email protected]" required>
+                    <label for="email" class="l1">email</label>
+                </div>
+                <div class="input1">
+                    <span class="icon"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAATRJREFUSEtjZKAxYKSx+QxEWfD///8QoEMygdgJ6qC9QHoqIyPjekIOJGgB0PBuoCElOAxqAFrSiM8SvBYADQ8Dal4JNaAZSE+DsnOAdDWU7Q60ZBcuSwhZcA6o0RCIi4CG9CMbArQcZEELEO8EynmQa8FfoEYmIBYFGvIGzQJJIP8ZEL8DygmTa8F/kEagAVh9CvQFXnmwXnwRRMgAQvIDYwE0zYMiT51QGkeTvwnk1wBDcw2yOEYQAS24ClSgRaLhMOXXgBZoE7IAHHHkAvQEgc0HA2bBCqCvsqE+AxUfSdh8SYkPFIGaH4AMBcaTMpC6Q20LJIEWvIBaoASk71LbgrVAC0DFNsgHe4CUM7UtgBcZsBw8aC2geUYDhXM7EKuQmNmIKypINJSgcoJ1MkETCCgAAAyNjRlmobS2AAAAAElFTkSuQmCC"/></span>
+                    <input type="password" class="password" required>
+                    <label for="password" class="l2">password</label>
+                </div>
+                <div class="wow">
+                    <span class="check"><input type="checkbox" class="remember">  Remember me</span>
+                    <span class="forg"><a href="#">Forget Password?</a></span>
+                </div>
+                    <div><button class="btn" type="submit">Sign In</button></div>
+                <div class="hein">Don't have an account?<span><a href="#">Sign up</a></span></div>
+
+            </form>
+</body>
+</html>