Name- Suraj Mete
Class- BCS (SY) DITMS (2022-23)
HTML Code <input type="text" required>
<label>Enrollment/PRN No.</label></div>
<!DOCTYPE html><html><head> <div class="field">
<title>Login Form Design with CSS</title> <input type="text" required>
<link rel="stylesheet" <label>Aadhar Number</label></div>
href="C:\Users\Dell\Desktop\style.css"> <div class="field">
<style>*{ margin: 0; padding: 0; <input type="password" required>
box-sizing: border-box; <label>Password</label></div>
font-family: 'Poppins', sans-serif;} <div class="content">
</style></head><body> <div class="checkbox">
<div class="wrapper"> <input type="checkbox" id="remember-me">
<div class="title">Student Login Form</div> <label for="remember-me">Save
<form><div class="field"> Information</label></div></div>
<input type="text" required> <div class="field">
<label>Name</label></div> <input type="submit" value="Login" Style="font-
<div class="field"> weight:bold;"></div>
<input type="text" required> <div class="signup-link">Not a Student of DITMS?
<label>Email Address</label></div> <a href="#">Signup now</a></div></form>
<div class="field"> </div></body></html>
CSS Code .wrapper form .field input{ height: 50px; font-size: 16px; align-
height: 100%;width: 100%; items: center;
html,body{display: grid;
outline: none; justify-content: space-around;}
height: 100%;
font-size: 17px; form .content .checkbox{ display: flex;
width: 100%;
padding-left: 20px; align-items: center; justify-content:
place-items: center;
border: 1px solid lightgrey; center;}
background: #f2f2f2;
border-radius: 25px; form .content input{width: 15px;
background: linear-gradient(-
transition: all 0.3s ease;} height: 15px;
135deg, #c850c0, #4158d0);}
.wrapper form .field input:focus, background: red;}
.wrapper{width: 380px;
form .field input:valid{ form .content label{color: #262626;
background: #fff;
border-color: #4158d0;} user-select: none;
border-radius: 15px;
.wrapper form .field label{ padding-left: 5px;}
box-shadow: 0px 15px 20px
position: absolute; top: 50%; form .field input[type="submit"]{
rgba(0,0,0,0.1);}
left: 20px;color: #999999; color: #fff;
.wrapper .title{font-size: 35px;
font-weight: 400; border: none;
font-weight: 600;
font-size: 17px; padding-left: 0;
text-align: center;
pointer-events: none; margin-top: -10px;
line-height: 100px;color: #fff;
transform: translateY(-50%); font-size: 20px;
user-select: none;
transition: all 0.3s ease;} font-weight: 500;
border-radius: 15px 15px 0 0;
form .field input:focus ~ label, cursor: pointer;
background: linear-gradient(-
form .field input:valid ~ background: linear-gradient(-135deg,
135deg, #c850c0, #4158d0);}
label{top: 0%; #c850c0, #4158d0);
.wrapper form{
font-size: 16px; color: #4158d0; transition: all 0.3s ease;}
padding: 10px 30px 50px 30px;}
background: #fff; form .signup-link{
.wrapper form .field{height:
transform: translateY(-50%);} color: #262626;
50px;width: 100%;
form .content{display: flex; margin-top: 20px;
margin-top: 20px;
width: 100%; text-align: center;}
position: relative;}
