Skip to content

Commit

Permalink
Created a login Form
Browse files Browse the repository at this point in the history
  • Loading branch information
ROHITTTTZ committed Oct 4, 2023
1 parent 7b08a67 commit f50d64e
Show file tree
Hide file tree
Showing 2 changed files with 166 additions and 0 deletions.
133 changes: 133 additions & 0 deletions Login/login.css
Original file line number Diff line number Diff line change
@@ -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;
}
33 changes: 33 additions & 0 deletions Login/login.html
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit f50d64e

Please sign in to comment.