Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commited05c0e

Browse files
committed
Project #14 - Responsive Registration Form
1 parent2550075 commited05c0e

File tree

3 files changed

+482
-0
lines changed

3 files changed

+482
-0
lines changed
Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<!DOCTYPE html>
2+
<htmllang="en">
3+
<head>
4+
<metacharset="UTF-8"/>
5+
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
6+
<link
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
9+
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
10+
crossorigin="anonymous"
11+
/>
12+
<linkrel="stylesheet"href="style.css"/>
13+
<title>Registraion Form</title>
14+
</head>
15+
<body>
16+
<divclass="registration-form">
17+
<divclass="header">
18+
<buttonclass="btn btn-tab btn-ripple active"data-target-tab="#signin">
19+
SIGN IN
20+
</button>
21+
<buttonclass="btn btn-tab btn-ripple"data-target-tab="#signup">
22+
SIGN UP
23+
</button>
24+
</div>
25+
<divclass="body">
26+
<divclass="content active"id="signin">
27+
<h1>Sign in to your acccount</h1>
28+
<pclass="gray">Sign in to access all free resources</p>
29+
30+
<divclass="flex justify-between">
31+
<buttonclass="btn btn-oauth">
32+
<iclass="fab fa-google"></i> Sign in with Google
33+
</button>
34+
<buttonclass="btn btn-oauth">
35+
<iclass="fab fa-twitter"></i> Sign in with Twitter
36+
</button>
37+
</div>
38+
39+
<divclass="bar"></div>
40+
41+
<formaction="#">
42+
<divclass="input-group">
43+
<input
44+
type="text"
45+
name=""
46+
id="name"
47+
class="input-elem"
48+
placeholder=""
49+
autocomplete="off"
50+
/>
51+
<labelfor="name">Name</label>
52+
</div>
53+
<divclass="input-group">
54+
<input
55+
type="password"
56+
name=""
57+
id="password"
58+
class="input-elem"
59+
placeholder=""
60+
autocomplete="off"
61+
/>
62+
<labelfor="password">Password</label>
63+
<iclass="fas fa-eye-slash eye"></i>
64+
</div>
65+
<divclass="agreements">
66+
<inputtype="checkbox"name=""id="rem_pass"/>
67+
<labelfor="rem_pass"class="gray">Remember Password</label>
68+
</div>
69+
<buttonclass="btn btn-register">Sign In</button>
70+
<ahref="#"class="reg_link">Forgot your password?</a>
71+
</form>
72+
</div>
73+
<divclass="content"id="signup">
74+
<h1>REGISTER</h1>
75+
<pclass="gray">
76+
You can use this account to log in to any of our products
77+
</p>
78+
79+
<divclass="flex justify-between">
80+
<buttonclass="btn btn-oauth">
81+
<iclass="fab fa-google"></i> Sign up with Google
82+
</button>
83+
<buttonclass="btn btn-oauth">
84+
<iclass="fab fa-twitter"></i> Sign up with Twitter
85+
</button>
86+
</div>
87+
88+
<divclass="bar"></div>
89+
90+
<formaction="#">
91+
<divclass="input-group">
92+
<input
93+
type="text"
94+
name=""
95+
id="name"
96+
class="input-elem"
97+
placeholder=""
98+
autocomplete="off"
99+
/>
100+
<labelfor="name">Name</label>
101+
</div>
102+
<divclass="input-group">
103+
<input
104+
type="email"
105+
name=""
106+
id="email"
107+
class="input-elem"
108+
placeholder=""
109+
autocomplete="off"
110+
/>
111+
<labelfor="email">Email</label>
112+
</div>
113+
<divclass="input-group">
114+
<input
115+
type="password"
116+
name=""
117+
id="password"
118+
class="input-elem"
119+
placeholder=""
120+
autocomplete="off"
121+
/>
122+
<labelfor="password">Password</label>
123+
<iclass="fas fa-eye-slash eye"></i>
124+
</div>
125+
<divclass="agreements">
126+
<inputtype="checkbox"name=""id="terms"/>
127+
<labelfor="terms"class="gray">Agree to our conditions</label>
128+
</div>
129+
<buttonclass="btn btn-register">Sign Up</button>
130+
</form>
131+
</div>
132+
</div>
133+
</div>
134+
<scriptsrc="script.js"defer></script>
135+
</body>
136+
</html>
Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
consttab_btns=document.querySelectorAll("[data-target-tab]");
2+
consttab_contents=document.querySelectorAll(".registration-form .content");
3+
4+
tab_btns.forEach((btn)=>{
5+
btn.addEventListener("click",()=>{
6+
tab_btns.forEach((btn)=>btn.classList.remove("active"));
7+
tab_contents.forEach((btn)=>btn.classList.remove("active"));
8+
9+
btn.classList.toggle("active");
10+
document.querySelector(btn.dataset.targetTab).classList.add("active");
11+
});
12+
});
13+
14+
/* rippple effect */
15+
constripple_btns=document.querySelectorAll(".btn-ripple");
16+
17+
ripple_btns.forEach((btn)=>{
18+
btn.addEventListener("click",function(e){
19+
letx_coord=e.clientX;
20+
lety_coord=e.clientY;
21+
22+
letbtn_pos_top=e.target.offsetTop;
23+
letbtn_pos_Left=e.target.offsetLeft;
24+
25+
letx=x_coord-btn_pos_Left;
26+
lety=y_coord-btn_pos_top;
27+
28+
constspan=document.createElement("span");
29+
span.classList.add("ripple");
30+
span.style.top=`${y}px`;
31+
span.style.left=`${x}px`;
32+
33+
this.appendChild(span);
34+
35+
setTimeout(()=>{
36+
this.removeChild(span);
37+
},400);
38+
});
39+
});
40+
41+
/* show and hide the password */
42+
constreg_eyes=document.querySelectorAll(".eye");
43+
44+
reg_eyes.forEach((eye)=>{
45+
eye.addEventListener("click",()=>{
46+
constpass_field=eye.previousElementSibling.previousElementSibling;
47+
if(pass_field.type==="password"){
48+
pass_field.setAttribute("type","text");
49+
eye.classList.replace("fa-eye-slash","fa-eye");
50+
}else{
51+
pass_field.setAttribute("type","password");
52+
eye.classList.replace("fa-eye","fa-eye-slash");
53+
}
54+
});
55+
});

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp