Skip to content

Commit

Permalink
Added Torch Effect Login Form (#610)
Browse files Browse the repository at this point in the history
  • Loading branch information
@AftabMankapure
AftabMankapure authored Feb 26, 2024
1 parent 705aed2 commit 02271c9
Show file tree
Hide file tree
Showing 3 changed files with 383 additions and 0 deletions.
56 changes: 56 additions & 0 deletions Components/Forms/Torch-Effect-Login-Form/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Torch Effect Login Form</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<div class="login-light"></div>
<div class="login-box">
<form action="#">
<input type="checkbox" class="input-check" id="input-check">
<label for="input-check" class="toggle">
<span class="text off">off</span>
<span class="text on">on</span>
</label>
<div class="light"></div>

<h2>Login</h2>
<div class="input-box">
<span class="icon">
<ion-icon name="mail"></ion-icon>
</span>
<input type="email" required>
<label>Email</label>
<div class="input-line"></div>
</div>
<div class="input-box">
<span class="icon">
<ion-icon name="lock-closed"></ion-icon>
</span>
<input type="password" required>
<label>Password</label>
<div class="input-line"></div>
</div>
<div class="remember-forgot">
<label><input type="checkbox"> Remember me</label>
<a href="#">Forgot Password?</a>
</div>
<button type="submit">Login</button>
<div class="register-link">
<p>Don't have an account? <a href="#">Register</a></p>
</div>
</form>
</div>

<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>

</html>
314 changes: 314 additions & 0 deletions Components/Forms/Torch-Effect-Login-Form/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,314 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;

}

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(45deg, #360033, #0b8793);
overflow: hidden;

}

.login-box {
position: relative;
width: 400px;
height: 450px;
background: linear-gradient(45deg, #283c86, #45a247);
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
}

h2 {
font-size: 2em;
color: #fff;
text-align: center;
transition: .5s ease;
}

.input-check:checked~h2 {
color: #FFBF00;
text-shadow:
0 0 15px #FFBF00,
0 0 30px #FFBF00;
}

.input-box {
position: relative;
width: 310px;
margin: 30px 0;
}

.input-box .input-line {
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2.5px;
background: #fff;
transition: .5s ease;
}

.input-check:checked~.input-box .input-line {
background: #FFBF00;
box-shadow: 0 0 10px #FFBF00;
}

.input-box label {
position: absolute;
top: 50%;
left: 5px;
transform: translateY(-50%);
font-size: 1em;
color: #fff;
pointer-events: none;
transition: .5s ease;
}

.input-box input:focus~label,
.input-box input:valid~label {
top: -5px;
}

.input-check:checked~.input-box label {
color: #FFBF00;
text-shadow: 0 0 10px #FFBF00;
}

.input-box input {
width: 100%;
height: 50px;
background: transparent;
border: none;
outline: none;
font-size: 1em;
color: #fff;
padding: 0 35px 0 5px;
transition: .5s ease;
}

.input-check:checked~.input-box input {
color: #FFBF00;
text-shadow: 0 0 5px #FFBF00;
}

.input-box .icon {
position: absolute;
right: 8px;
color: #fff;
font-size: 1.2em;
line-height: 57px;
transition: .5s ease;
}

.input-check:checked~.input-box .icon {
color: #FFBF00;
filter: drop-shadow(0 0 5px #FFBF00);
}

.remember-forgot {
color: #fff;
font-size: .9em;
margin: -15px 0 15px;
display: flex;
justify-content: space-between;
transition: .5s ease;
}

.input-check:checked~.remember-forgot {
color: #FFBF00;
text-shadow: 0 0 10px #FFBF00;
}

.remember-forgot label input {
accent-color: #fff;
margin-right: 3px;
transition: .5s ease;
}

.input-check:checked~.remember-forgot label input {
accent-color: #FFBF00;
}

.remember-forgot a {
color: #fff;
text-decoration: none;
transition: color .5s ease;
}

.remember-forgot a:hover {
text-decoration: underline;
}

.input-check:checked~.remember-forgot a {
color: #FFBF00;
}

button {
width: 100%;
height: 40px;
background: #fff;
border: none;
outline: none;
border-radius: 40px;
cursor: pointer;
font-size: 1em;
color: #191919;
font-weight: 500;
transition: .5s ease;
}

.input-check:checked~button {
background: #FFBF00;
box-shadow: 0 0 15px #FFBF00, 0 0 15px #FFBF00;
}

.register-link {
color: #fff;
font-size: .9em;
text-align: center;
margin: 25px 0 10px;
transition: .5s ease;
}

.input-check:checked~.register-link {
color: #FFBF00;
text-shadow: 0 0 10px #FFBF00;
}

.register-link p a {
color: #fff;
text-decoration: none;
font-weight: 600;
transition: color .5s ease;
}

.register-link p a:hover {
text-decoration: underline;
}

.input-check:checked~.register-link p a {
color: #FFBF00;
}

.login-light {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 500px;
height: 10px;
background: #FFBF00;
border-radius: 20px;
}

.light {
position: absolute;
top: -200%;
left: 0;
width: 100%;
height: 950px;
background: linear-gradient(to bottom, rgba(255, 255, 255, .3) -50%, rgba(255, 255, 255, 0) 90%);
clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
pointer-events: none;
transition: .5s ease;
}

.input-check:checked~.light {
top: -90%;
}

.toggle {
position: absolute;
top: 20px;
right: -70px;
width: 60px;
height: 120px;
background: #191919;
border-radius: 10px;
}

.toggle::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 80%;
background: #000;
}

.toggle::after {
content: '';
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
width: 45px;
height: 45px;
background: #333;
border: 2px solid #191919;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
transition: .5s ease;
}

.input-check:checked~.toggle::after {
top: 65px;
}

.input-check {
position: absolute;
right: -70px;
z-index: 1;
opacity: 0;
}

.toggle .text {
position: absolute;
top: 17px;
left: 50%;
transform: translateX(-50%);
color: #fff;
font-size: 1em;
z-index: 1;
text-transform: uppercase;
pointer-events: none;
transition: .5s ease;
}

.toggle .text.off {
opacity: 1;
}

.input-check:checked~.toggle .text.off {
top: 76px;
opacity: 0;
}

.toggle .text.on {
opacity: 0;
}

.input-check:checked~.toggle .text.on {
top: 76px;
opacity: 1;
color: #FFBF00;
text-shadow:
0 0 15px #FFBF00,
0 0 30px #FFBF00,
0 0 45px #FFBF00,
0 0 60px #FFBF00;
}
13 changes: 13 additions & 0 deletions assets/html_files/forms.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -352,6 +352,19 @@ <h1>QR Code Generator Form</h1>
</a>
</div>
</div>
<div class="box">
<h1>Torch Effect Login Form</h1>
<div class="preview">
<a href="../../Components/Forms/Torch-Effect-Login-Form/index.html" title="Live Preview" target="_blank">
<img src="../images/link.png">
</a>
</div>
<div class="source">
<a href="https://github.com/Rakesh9100/Beautiify/tree/main/Components/Forms/Torch-Effect-Login-Form" title="Source Code" target="_blank">
<img src="../images/github.png">
</a>
</div>
</div>
</div>
</section>

Expand Down

0 comments on commit 02271c9

Please sign in to comment.