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

Commit8dc1ed7

Browse files
committed
Added Project 31 - Image Hover Effect & Project 32 - Registratopm Form
1 parentebaac6c commit8dc1ed7

File tree

10 files changed

+383
-0
lines changed

10 files changed

+383
-0
lines changed

‎31- Image Hover Effect/._index.html

4 KB
Binary file not shown.
4 KB
Loading

‎31- Image Hover Effect/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<htmllang="en">
3+
<head>
4+
<metacharset="UTF-8">
5+
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
6+
<metaname="viewport"content="width=device-width, initial-scale=1.0">
7+
<linkrel="stylesheet"href="style.css">
8+
<title>Document</title>
9+
</head>
10+
<body>
11+
<divclass="img">
12+
<ahref="#"class="btn-visit">Visit</a>
13+
</div>
14+
</body>
15+
</html>

‎31- Image Hover Effect/project-1.png

920 KB
Loading

‎31- Image Hover Effect/style.css

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
*,
2+
*::before,
3+
*::after {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen,
9+
Ubuntu, Cantarell,"Open Sans","Helvetica Neue", sans-serif;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
min-height:100vh;
14+
}
15+
16+
.btn-visit {
17+
position: absolute;
18+
bottom:-3rem;
19+
left:50%;
20+
transform:translateX(-50%);
21+
text-decoration: none;
22+
background-color:#343434;
23+
color:#f3f3f3;
24+
padding:0.5rem1.5rem;
25+
border-radius:.5rem;
26+
transition: bottom1s ease-in-out;
27+
z-index:10;
28+
}
29+
30+
.img {
31+
position: relative;
32+
width:430px;
33+
height:300px;
34+
border:1px solid#ccc;
35+
border-radius:0.5rem;
36+
background:url("./project-1.png") no-repeat;
37+
background-size: cover;
38+
background-position-y:0%;
39+
transition: background3s ease-in-out;
40+
cursor: pointer;
41+
overflow: hidden;
42+
}
43+
44+
.img::before {
45+
content:"";
46+
position: absolute;
47+
top:0;
48+
left:0;
49+
width:0%;
50+
height:4px;
51+
background:linear-gradient(to right,#fff,#343434);
52+
transition: all3s ease-in-out;
53+
}
54+
55+
.img::after {
56+
content:"";
57+
position: absolute;
58+
bottom:0;
59+
left:0;
60+
width:100%;
61+
height:100%;
62+
z-index:5;
63+
}
64+
65+
.img:hover {
66+
background-position-y:100%;
67+
}
68+
69+
.img:hover::before {
70+
width:100%;
71+
}
72+
73+
.img:hover::after {
74+
background:linear-gradient(to bottom, transparent70%,#3434349b);
75+
}
76+
77+
.img:hover .btn-visit{
78+
bottom:2rem;
79+
}

‎32- Multi Step Form/._.DS_Store

4 KB
Binary file not shown.

‎32- Multi Step Form/._index.html

4 KB
Binary file not shown.

‎32- Multi Step Form/index.html

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<!DOCTYPE html>
2+
<htmllang="en">
3+
<head>
4+
<metacharset="UTF-8"/>
5+
<metahttp-equiv="X-UA-Compatible"content="IE=edge"/>
6+
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
7+
<linkrel="stylesheet"href="style.css"/>
8+
<scriptsrc="script.js"defer></script>
9+
<title>Registraion Form</title>
10+
</head>
11+
<body>
12+
<formaction="#"class="form">
13+
<h1class="text-center">Registration Form</h1>
14+
<!-- Progress bar -->
15+
<divclass="progressbar">
16+
<divclass="progress"id="progress"></div>
17+
18+
<div
19+
class="progress-step progress-step-active"
20+
data-title="Intro"
21+
></div>
22+
<divclass="progress-step"data-title="Contact"></div>
23+
<divclass="progress-step"data-title="ID"></div>
24+
<divclass="progress-step"data-title="Password"></div>
25+
</div>
26+
27+
<!-- Steps -->
28+
<divclass="form-step form-step-active">
29+
<divclass="input-group">
30+
<labelfor="username">Username</label>
31+
<inputtype="text"name="username"id="username"/>
32+
</div>
33+
<divclass="input-group">
34+
<labelfor="position">Position</label>
35+
<inputtype="text"name="position"id="position"/>
36+
</div>
37+
<divclass="">
38+
<ahref="#"class="btn btn-next width-50 ml-auto">Next</a>
39+
</div>
40+
</div>
41+
<divclass="form-step">
42+
<divclass="input-group">
43+
<labelfor="phone">Phone</label>
44+
<inputtype="text"name="phone"id="phone"/>
45+
</div>
46+
<divclass="input-group">
47+
<labelfor="email">Email</label>
48+
<inputtype="text"name="email"id="email"/>
49+
</div>
50+
<divclass="btns-group">
51+
<ahref="#"class="btn btn-prev">Previous</a>
52+
<ahref="#"class="btn btn-next">Next</a>
53+
</div>
54+
</div>
55+
<divclass="form-step">
56+
<divclass="input-group">
57+
<labelfor="dob">Date of Birth</label>
58+
<inputtype="date"name="dob"id="dob"/>
59+
</div>
60+
<divclass="input-group">
61+
<labelfor="ID">National ID</label>
62+
<inputtype="number"name="ID"id="ID"/>
63+
</div>
64+
<divclass="btns-group">
65+
<ahref="#"class="btn btn-prev">Previous</a>
66+
<ahref="#"class="btn btn-next">Next</a>
67+
</div>
68+
</div>
69+
<divclass="form-step">
70+
<divclass="input-group">
71+
<labelfor="password">Password</label>
72+
<inputtype="password"name="password"id="password"/>
73+
</div>
74+
<divclass="input-group">
75+
<labelfor="confirmPassword">Confirm Password</label>
76+
<input
77+
type="password"
78+
name="confirmPassword"
79+
id="confirmPassword"
80+
/>
81+
</div>
82+
<divclass="btns-group">
83+
<ahref="#"class="btn btn-prev">Previous</a>
84+
<inputtype="submit"value="Submit"class="btn"/>
85+
</div>
86+
</div>
87+
</form>
88+
</body>
89+
</html>

‎32- Multi Step Form/script.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
constprevBtns=document.querySelectorAll(".btn-prev");
2+
constnextBtns=document.querySelectorAll(".btn-next");
3+
constprogress=document.getElementById("progress");
4+
constformSteps=document.querySelectorAll(".form-step");
5+
constprogressSteps=document.querySelectorAll(".progress-step");
6+
7+
letformStepsNum=0;
8+
9+
nextBtns.forEach((btn)=>{
10+
btn.addEventListener("click",()=>{
11+
formStepsNum++;
12+
updateFormSteps();
13+
updateProgressbar();
14+
});
15+
});
16+
17+
prevBtns.forEach((btn)=>{
18+
btn.addEventListener("click",()=>{
19+
formStepsNum--;
20+
updateFormSteps();
21+
updateProgressbar();
22+
});
23+
});
24+
25+
functionupdateFormSteps(){
26+
formSteps.forEach((formStep)=>{
27+
formStep.classList.contains("form-step-active")&&
28+
formStep.classList.remove("form-step-active");
29+
});
30+
31+
formSteps[formStepsNum].classList.add("form-step-active");
32+
}
33+
34+
functionupdateProgressbar(){
35+
progressSteps.forEach((progressStep,idx)=>{
36+
if(idx<formStepsNum+1){
37+
progressStep.classList.add("progress-step-active");
38+
}else{
39+
progressStep.classList.remove("progress-step-active");
40+
}
41+
});
42+
43+
constprogressActive=document.querySelectorAll(".progress-step-active");
44+
45+
progress.style.width=
46+
((progressActive.length-1)/(progressSteps.length-1))*100+"%";
47+
}

‎32- Multi Step Form/style.css

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
:root {
2+
--primary-color:rgb(11,78,179);
3+
}
4+
5+
*,
6+
*::before,
7+
*::after {
8+
box-sizing: border-box;
9+
}
10+
11+
body {
12+
font-family: Montserrat,"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
13+
margin:0;
14+
display: grid;
15+
place-items: center;
16+
min-height:100vh;
17+
}
18+
/* Global Stylings */
19+
label {
20+
display: block;
21+
margin-bottom:0.5rem;
22+
}
23+
24+
input {
25+
display: block;
26+
width:100%;
27+
padding:0.75rem;
28+
border:1px solid#ccc;
29+
border-radius:0.25rem;
30+
}
31+
32+
.width-50 {
33+
width:50%;
34+
}
35+
36+
.ml-auto {
37+
margin-left: auto;
38+
}
39+
40+
.text-center {
41+
text-align: center;
42+
}
43+
44+
/* Progressbar */
45+
.progressbar {
46+
position: relative;
47+
display: flex;
48+
justify-content: space-between;
49+
counter-reset: step;
50+
margin:2rem04rem;
51+
}
52+
53+
.progressbar::before,
54+
.progress {
55+
content:"";
56+
position: absolute;
57+
top:50%;
58+
transform:translateY(-50%);
59+
height:4px;
60+
width:100%;
61+
background-color:#dcdcdc;
62+
z-index:-1;
63+
}
64+
65+
.progress {
66+
background-color:var(--primary-color);
67+
width:0%;
68+
transition:0.3s;
69+
}
70+
71+
.progress-step {
72+
width:2.1875rem;
73+
height:2.1875rem;
74+
background-color:#dcdcdc;
75+
border-radius:50%;
76+
display: flex;
77+
justify-content: center;
78+
align-items: center;
79+
}
80+
81+
.progress-step::before {
82+
counter-increment: step;
83+
content:counter(step);
84+
}
85+
86+
.progress-step::after {
87+
content:attr(data-title);
88+
position: absolute;
89+
top:calc(100%+0.5rem);
90+
font-size:0.85rem;
91+
color:#666;
92+
}
93+
94+
.progress-step-active {
95+
background-color:var(--primary-color);
96+
color:#f3f3f3;
97+
}
98+
99+
/* Form */
100+
.form {
101+
width:clamp(320px,30%,430px);
102+
margin:0 auto;
103+
border:1px solid#ccc;
104+
border-radius:0.35rem;
105+
padding:1.5rem;
106+
}
107+
108+
.form-step {
109+
display: none;
110+
transform-origin: top;
111+
animation: animate0.5s;
112+
}
113+
114+
.form-step-active {
115+
display: block;
116+
}
117+
118+
.input-group {
119+
margin:2rem0;
120+
}
121+
122+
@keyframes animate {
123+
from {
124+
transform:scale(1,0);
125+
opacity:0;
126+
}
127+
to {
128+
transform:scale(1,1);
129+
opacity:1;
130+
}
131+
}
132+
133+
/* Button */
134+
.btns-group {
135+
display: grid;
136+
grid-template-columns:repeat(2,1fr);
137+
gap:1.5rem;
138+
}
139+
140+
.btn {
141+
padding:0.75rem;
142+
display: block;
143+
text-decoration: none;
144+
background-color:var(--primary-color);
145+
color:#f3f3f3;
146+
text-align: center;
147+
border-radius:0.25rem;
148+
cursor: pointer;
149+
transition:0.3s;
150+
}
151+
.btn:hover {
152+
box-shadow:0002px#fff,0003pxvar(--primary-color);
153+
}

0 commit comments

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