Skip to content

Commit 78e91a9

Browse files
JimmiJanJimmiJan
authored
Add files via upload
Simple Form using html css and js
0 parents  commit 78e91a9

File tree

6 files changed

+216
-0
lines changed

6 files changed

+216
-0
lines changed

‎html css js form/README.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Login & Signup Form
2+
A responsive Login & Signup form using HTML, CSS and JavaScript.
3+
4+
# Features
5+
* Responsive UI
6+
* Form validation
7+
* Modern & simple design
8+
* No library used
9+
10+
# Sample Link
11+
https://yonghee9106.github.io/login-signup-form/
12+
13+
# Screen Capture
14+
![login](https://user-images.githubusercontent.com/79752787/126039471-ac2f44be-3ee6-436c-b680-c343e59eea04.JPG)

‎html css js form/app.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
function doToggle(){
2+
var container = document.querySelector('.container');
3+
container.classList.toggle('active')
4+
}

‎html css js form/img/signinIMG.jpg

101 KB
Loading

‎html css js form/img/signupIMG.jpg

99.6 KB
Loading

‎html css js form/index.html

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Login & Signup Form</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<section>
12+
<div class="container">
13+
<div class="user signinBox">
14+
<div class="imgBox">
15+
<img src="img/signinIMG.jpg" alt="">
16+
</div>
17+
<div class="formBox">
18+
<form action="">
19+
<h2>Login</h2>
20+
<input type="email" name="" placeholder="Enter Email" id="">
21+
<input type="password" name="" placeholder="Enter Password" id="">
22+
<input type="submit" value="Login">
23+
<p class="signup">Don't have an Account? <a href="#" onclick="doToggle();">Sign Up</a></p>
24+
</form>
25+
</div>
26+
</div>
27+
<div class="user signupBox">
28+
<div class="formBox">
29+
<form action="">
30+
<h2>Create An Account</h2>
31+
<input type="text" name="" placeholder="Enter Username" id="">
32+
<input type="email" name="" placeholder="Enter Email" id="">
33+
<input type="password" name="" placeholder="Enter Password" id="">
34+
<input type="password" name="" placeholder="Confirm Password" id="">
35+
<input type="submit" value="Sign Up">
36+
<p class="signup">Already have an Account? <a href="#" onclick="doToggle();">Login</a></p>
37+
</form>
38+
</div>
39+
<div class="imgBox">
40+
<img src="img/signupIMG.jpg" alt="">
41+
</div>
42+
</div>
43+
</div>
44+
</section>
45+
<script src="app.js">
46+
47+
</script>
48+
</body>
49+
</html>

‎html css js form/style.css

+149
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
@import url(https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic);
2+
*{
3+
margin:0;
4+
padding:0;
5+
box-sizing:border-box;
6+
font-family: 'Poppins', sans-serif;
7+
}
8+
section{
9+
position: relative;
10+
min-height: 100vh;
11+
background-color: #e79907;
12+
padding:20px;
13+
display:flex;
14+
justify-content: center;
15+
align-items: center;
16+
}
17+
section .container{
18+
position: relative;
19+
width:800px;
20+
height:500px;
21+
background:white;
22+
box-shadow: 0 15px 50px rgba(0, 0, 0, .5);
23+
overflow: hidden;
24+
}
25+
section .container .user{
26+
position:absolute;
27+
top:0;
28+
left:0;
29+
width: 100%;
30+
height: 100%;
31+
display:flex;
32+
}
33+
section .container .user .imgBox{
34+
position:relative;
35+
width:50%;
36+
height:100%;
37+
background-color: white;
38+
transition: 0.5s;
39+
}
40+
section .container .user .imgBox img{
41+
position: absolute;
42+
top:0;
43+
left:0;
44+
width:100%;
45+
height:100%;
46+
object-fit: cover;
47+
}
48+
section .container .user .formBox{
49+
position: relative;
50+
width:50%;
51+
height:100;
52+
background-color: white;
53+
display: flex;
54+
justify-content: center;
55+
align-items: center;
56+
padding:40px;
57+
transition: 0.5s;
58+
}
59+
section .container .user .formBox h2{
60+
font-size: 18px;
61+
font-weight: 600;
62+
text-transform: uppercase;
63+
letter-spacing: 2px;
64+
text-align: center;
65+
width:100%;
66+
margin-bottom: 10px;
67+
color:gray;
68+
}
69+
section .container .user .formBox input{
70+
width:100%;
71+
font-weight: 600;
72+
background-color: #f5f5f5;
73+
padding: 10px;
74+
color:#333;
75+
border:none;
76+
outline:none;
77+
font-size: 14px;
78+
margin: 8px 0;
79+
letter-spacing: 2px;
80+
}
81+
section .container .user .formBox form input[type="submit"]{
82+
max-width:100%;
83+
background-color: #677eff;
84+
color: white;
85+
cursor:pointer;
86+
font-size: 14px;
87+
font-weight: 600;
88+
letter-spacing: 2px;
89+
transition: 0.5s;
90+
}
91+
section .container.active .user .formBox form input[type="submit"]{
92+
background-color: #e73e49;
93+
}
94+
section .container .user .formBox form .signup{
95+
position:relative;
96+
margin-top:20px;
97+
font-size: 12px;
98+
letter-spacing: 2px;
99+
color:gray;
100+
text-transform: uppercase;
101+
}
102+
section .container .user .formBox form .signup a{
103+
font-weight: 600;
104+
text-decoration: none;
105+
color:#677eff
106+
}
107+
section .container .signupBox{
108+
pointer-events: none;
109+
}
110+
section .container.active .signupBox{
111+
pointer-events: initial;
112+
}
113+
section .container .signupBox .formBox{
114+
left:100%;
115+
}
116+
section .container.active .signupBox .formBox{
117+
left:0;
118+
}
119+
section .container .signupBox .imgBox{
120+
left:-100%;
121+
}
122+
section .container.active .signupBox .imgBox{
123+
left:0;
124+
}
125+
126+
section .container .signinBox .formBox{
127+
left:0;
128+
}
129+
section .container.active .signinBox .formBox{
130+
left:-100%;
131+
}
132+
section .container .signinBox .imgBox{
133+
left:0;
134+
}
135+
section .container.active .signinBox .imgBox{
136+
left:100%;
137+
}
138+
139+
@media(max-width:991px){
140+
section .container{
141+
max-width: 400px;
142+
}
143+
section .container .imgBox{
144+
display: none;
145+
}
146+
section .container .user .formBox{
147+
width:100%;
148+
}
149+
}

0 commit comments

Comments
 (0)