Skip to content

Commit e63347e

Browse files
dpgaharwaldpgaharwal
authored
Made Torch Effect Login Form component responsive (#1433)
1 parent 8fd79a4 commit e63347e

File tree

2 files changed

+103
-26
lines changed

2 files changed

+103
-26
lines changed

‎Components/Forms/Torch-Effect-Login-Form/index.html‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,15 @@
1010
</head>
1111

1212
<body>
13-
1413
<div class="login-light"></div>
1514
<div class="login-box">
1615
<form action="#">
1716
<input type="checkbox" class="input-check" id="input-check">
1817
<label for="input-check" class="toggle">
19-
<span class="text off">off</span>
20-
<span class="text on">on</span>
18+
<span class="text off">off</span>
19+
<span class="text on">on</span>
2120
</label>
2221
<div class="light"></div>
23-
2422
<h2>Login</h2>
2523
<div class="input-box">
2624
<span class="icon">
@@ -48,9 +46,8 @@ <h2>Login</h2>
4846
</div>
4947
</form>
5048
</div>
51-
52-
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
5349
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
50+
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
5451
</body>
5552

5653
</html>

‎Components/Forms/Torch-Effect-Login-Form/style.css‎

Lines changed: 100 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,29 @@
55
padding: 0;
66
box-sizing: border-box;
77
font-family: 'Poppins', sans-serif;
8-
98
}
109

1110
body {
1211
display: flex;
1312
justify-content: center;
1413
align-items: center;
1514
min-height: 100vh;
15+
position: relative;
1616
background: linear-gradient(45deg, #360033, #0b8793);
17-
overflow: hidden;
18-
1917
}
2018

2119
.login-box {
2220
position: relative;
23-
width: 400px;
24-
height: 450px;
21+
width: 90%;
22+
max-width: 400px;
23+
height: auto;
2524
background: linear-gradient(45deg, #283c86, #45a247);
2625
border-radius: 20px;
2726
display: flex;
2827
justify-content: center;
2928
align-items: center;
29+
padding: 20px;
30+
box-sizing: border-box;
3031
}
3132

3233
h2 {
@@ -38,14 +39,12 @@ h2 {
3839

3940
.input-check:checked~h2 {
4041
color: #FFBF00;
41-
text-shadow:
42-
0 0 15px #FFBF00,
43-
0 0 30px #FFBF00;
42+
text-shadow: 0 0 15px #FFBF00, 0 0 30px #FFBF00;
4443
}
4544

4645
.input-box {
4746
position: relative;
48-
width: 310px;
47+
width: 100%;
4948
margin: 30px 0;
5049
}
5150

@@ -201,24 +200,30 @@ button {
201200
color: #FFBF00;
202201
}
203202

203+
/* The yellow bar at the top */
204204
.login-light {
205-
position: absolute;
206-
top: 0;
207-
left: 50%;
208-
transform: translateX(-50%);
209-
width: 500px;
210-
height: 10px;
211-
background: #FFBF00;
205+
position: fixed;
206+
top: 0; /* Center vertically relative to the body */
207+
left: 50%; /* Center horizontally */
208+
transform: translate(-50%, -50%); /* Adjust to stay at the center */
209+
width: 100%;
210+
max-width: 500px; /* Limit its size */
211+
height: 10px; /* Maintain the height of the yellow line */
212+
background: #FFBF00; /* Keep the yellow color */
212213
border-radius: 20px;
214+
z-index: -1; /* Keep it behind other elements */
213215
}
214216

217+
/* The “torch effect” overlay */
215218
.light {
216219
position: absolute;
217220
top: -200%;
218221
left: 0;
219222
width: 100%;
220-
height: 950px;
221-
background: linear-gradient(to bottom, rgba(255, 255, 255, .3) -50%, rgba(255, 255, 255, 0) 90%);
223+
height: 100vh;
224+
background: linear-gradient(to bottom,
225+
rgba(255, 255, 255, 0.3) -50%,
226+
rgba(255, 255, 255, 0) 90%);
222227
clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
223228
pointer-events: none;
224229
transition: .5s ease;
@@ -228,6 +233,7 @@ button {
228233
top: -90%;
229234
}
230235

236+
/* The toggle switch */
231237
.toggle {
232238
position: absolute;
233239
top: 20px;
@@ -236,6 +242,7 @@ button {
236242
height: 120px;
237243
background: #191919;
238244
border-radius: 10px;
245+
transition: right 0.3s ease;
239246
}
240247

241248
.toggle::before {
@@ -306,9 +313,82 @@ button {
306313
top: 76px;
307314
opacity: 1;
308315
color: #FFBF00;
309-
text-shadow:
310-
0 0 15px #FFBF00,
316+
text-shadow: 0 0 15px #FFBF00,
311317
0 0 30px #FFBF00,
312318
0 0 45px #FFBF00,
313319
0 0 60px #FFBF00;
320+
}
321+
322+
/* Media queries for responsiveness */
323+
@media (max-width: 1024px) {
324+
body {
325+
background: linear-gradient(45deg, #360033, #0b8793) fixed;
326+
background-size: cover;
327+
}
328+
329+
.toggle {
330+
right: -90px;
331+
}
332+
}
333+
334+
@media (max-width: 666px) {
335+
body {
336+
background: linear-gradient(45deg, #360033, #0b8793) fixed;
337+
background-size: cover;
338+
}
339+
340+
.toggle {
341+
right: -68px;
342+
}
343+
}
344+
345+
@media (max-width: 768px) {
346+
body {
347+
display: flex;
348+
justify-content: center;
349+
align-items: center;
350+
flex-direction: column;
351+
padding: 0 10px;
352+
}
353+
354+
355+
body {
356+
background: linear-gradient(45deg, #360033, #0b8793) fixed;
357+
background-size: cover;
358+
}
359+
360+
h2 {
361+
font-size: 1.8em;
362+
}
363+
364+
.input-box {
365+
margin: 20px 0;
366+
}
367+
}
368+
369+
@media (max-width: 480px) {
370+
body {
371+
display: flex;
372+
justify-content: center;
373+
align-items: center;
374+
flex-direction: column;
375+
padding: 0 10px;
376+
}
377+
378+
body {
379+
background: linear-gradient(45deg, #360033, #0b8793) fixed;
380+
background-size: cover;
381+
}
382+
383+
h2 {
384+
font-size: 1.5em;
385+
}
386+
387+
.input-box label {
388+
font-size: 0.9em;
389+
}
390+
391+
.toggle {
392+
right: -70px;
393+
}
314394
}

0 commit comments

Comments
 (0)