Scribd
Upload
2 views

log-in page

Uploaded by

cortac constantin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

log-in page

Uploaded by

cortac constantin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

html file : login-pag.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="static/styles/index.css">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css'
rel='stylesheet'>
<title>web application for planning weekly meals</title>
</head>
<body>
<div class="wrapper">
<form action="">
<h1>Log in</h1>
<div class="input_box">
<input type="text" placeholder="Username" required>
<i class='bx bx-user'></i>
</div>
<div class="input_box password-container">
<input type="password" placeholder="Password" required pattern="(?
=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}">
<i class='bx bxs-lock-alt password-toggle'></i>
</div>
<div class="remember">
<label for=""><input type="checkbox">remember your password</label>
<a href="#"> forgot your password?</a>
</div>
<div class="register-link">
<button type="submit" class="subbtn">Log in <a
href="menu.html"></a></button>
<p>Don't have an account <a
href="register-page.html">Register</a></p>
</div>
</form>
</div>

<script>
// Get the password input
const inputPass = document.querySelector('input[type="password"]');
// Get the lock icon (which will be clicked to toggle password visibility)
const passwordToggle = document.querySelector('.password-toggle');

// Add click event listener


passwordToggle.addEventListener('click', () => {
if(inputPass.getAttribute('type') === "password") {
// Show password
inputPass.setAttribute('type', 'text');
// Change to open lock icon
passwordToggle.classList.remove('bxs-lock-alt');
passwordToggle.classList.add('bxs-lock-open-alt');
} else {
// Hide password
inputPass.setAttribute('type', 'password');
// Change back to closed lock icon
passwordToggle.classList.remove('bxs-lock-open-alt');
passwordToggle.classList.add('bxs-lock-alt');
}
});
</script>
</body>
</html>

css file:

@import url('https://fonts.googleapis.com/css2?
family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,10
0;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,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:url('digital-environment-scene.jpg') no-repeat;
background-size: cover;
background-position: center ;

.wrapper{
width: 420px;
background: transparent;
color:white;
border-radius: 10px;
padding: 30px 40px;
}

.wrapper h1{
font-size: 36px;
text-align: center;
}

.wrapper .input_box{
width: 100%;
height: 50px;
margin: 30px 0;
position: relative;
}

.input_box input{
width:100%;
height: 100%;
background: transparent;
border:none;
outline: none;
border: 2px solid rgb(255, 255, 255, .2);
border-radius: 40px;
font-size: 16px;
color: white;
padding: 20px 45px 20px 20px;

.input_box input::placeholder{
color:white;
}

.input_box i{
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
}
.wrapper .remember{
display: flex;
justify-content: space-between;
font-size: 14.5px;
margin: -15px, 0 15px;
}

.remember label input{


accent-color: white;
margin-right: 3px;
}

.remember a{
color: white;
text-decoration: none;
}
.remember a:hover{
text-decoration: underline;
}
.wrapper .subbtn{
width:100%;
height: 45px;
background:white;
border:none;
outline: none;
border-radius: 40px;
box-shadow: 0 0 10px rgb(0, 0, 0, .1);
cursor:pointer;
color: #333;
font-weight: 600;
}

.wrapper .reigster-link{
font-size: 14.5px;
text-decoration: none;
font-weight: 600;
}

.reigster-link>p>a{
color:white;
text-decoration: none;
font-weight: 600;
}
.reigster-link>p>a{
text-decoration: underline;
color: green;
}

.pass_icon{
position: absolute;
right: -45px;
top: 30%;
cursor: pointer;
}

You might also like