Skip to content

Commit 8086579

Browse files
712Kunal712Kunal
authored
Made Animated Login/Signup Form component responsive (#1430)
1 parent dc24425 commit 8086579

File tree

2 files changed

+208
-333
lines changed

2 files changed

+208
-333
lines changed

‎Components/Forms/Animated-Login-Signup-Form/index.html‎

Lines changed: 20 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,70 +11,67 @@
1111

1212
<body>
1313
<div class="main-container" id="main">
14-
<span class="circle1"><span class="circle1_child1"></span><span class="circle1_child2"></span></span>
14+
<span class="circle1"><span class="circle1_child1"></span>
15+
<span class="circle1_child2"></span></span>
1516
<div class="circle1_child3"></div>
16-
1717
<div class="form_container Sign_Up">
1818
<form action="#">
1919
<h2>Sign Up</h2>
2020
<div class="form-field">
2121
<input type="email" id="emailid2" required>
2222
<i class="fa-solid fa-envelope"></i>
23-
<label for="emailid" class="email_label">Email</label>
23+
<label for="emailid2" class="email_label">Email</label>
2424
</div>
2525
<div class="form-field">
2626
<input type="password" class="password" required>
2727
<i class="fa-solid fa-lock"></i>
28-
<label for="password">Password</label>
28+
<label for="password1">Password</label>
2929
</div>
3030
<div class="form-field">
3131
<input type="password" class="password" required>
3232
<i class="fa-solid fa-lock"></i>
33-
<label for="password"> Confirm Password</label>
33+
<label for="password2">Confirm Password</label>
3434
</div>
35-
3635
<button type="submit" class="Login_button">Sign Up</button>
3736
<div class="signup-link">
38-
<p> Already have an account ? <a href="#" class="Signinlink">Sign In</a></p>
37+
<p>Already have an account? <a href="#" class="Signinlink">Sign In</a></p>
3938
</div>
4039
</form>
4140
</div>
4241
<div class="form_container Login">
4342
<form action="#">
4443
<h2>Login</h2>
4544
<div class="form-field">
46-
<input type="email" required>
45+
<input type="email" id="emailid1" required>
4746
<i class="fa-solid fa-envelope"></i>
48-
<label for="emailid" class="email_label">Email</label>
47+
<label for="emailid1" class="email_label">Email</label>
4948
</div>
5049
<div class="form-field">
5150
<input type="password" id="password" required>
5251
<i class="fa-solid fa-lock"></i>
5352
<label for="password">Password</label>
5453
</div>
55-
<div class="show_password">
56-
<input type="checkbox" id="check">show password
57-
</div>
58-
59-
<div class="form-forget">
60-
<a href="#">Forgot password?</a>
54+
<div class="form-options">
55+
<div class="show_password">
56+
<input type="checkbox" id="check">
57+
<label for="check">Show password</label>
58+
</div>
59+
<div class="form-forget">
60+
<a href="#">Forgot password?</a>
61+
</div>
6162
</div>
6263
<button type="submit" class="Login_button">Login</button>
6364
<div class="signup-link">
64-
<p> Don't have an account ? <a href="#" class="signuplink">Signup</a></p>
65+
<p>Don't have an account? <a href="#" class="signuplink">Signup</a></p>
6566
</div>
6667
</form>
6768
</div>
6869
<span class="circle2"><span class="circle2_child1"></span><span class="circle2_child2"></span></span>
6970
<div class="circle2_child3"></div>
7071
</div>
71-
<!-- gsap plugin -->
72-
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"
73-
integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug=="
74-
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
75-
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"
76-
integrity="sha512-Ic9xkERjyZ1xgJ5svx3y0u3xrvfT/uPkV99LBwe68xjy/mGtO+4eURHZBW2xW4SZbFrF1Tf090XqB+EVgXnVjw=="
77-
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
72+
73+
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
74+
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
7875
<script src="script.js"></script>
7976
</body>
8077

0 commit comments

Comments
 (0)