Scribd
Upload
76 views4 pages

HTML Lang en

The document is an HTML login page with CSS styling. It contains a header with navigation links, a login form inside a centered wrapper with fields for email and password, a remember me checkbox and submit button. The CSS styles the page layout, colors, fonts and adds visual effects like hover states and form field styling.

Uploaded by

Amar Sharma
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
76 views4 pages

HTML Lang en

The document is an HTML login page with CSS styling. It contains a header with navigation links, a login form inside a centered wrapper with fields for email and password, a remember me checkbox and submit button. The CSS styles the page layout, colors, fonts and adds visual effects like hover states and form field styling.

Uploaded by

Amar Sharma
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 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">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.13.0/css/all.min.css">

<title>Document</title>
</head>
<body>
<header>
<h2 class="logo">Logo</h2>
<nav class="navigation">
<a href="">Home</a>
<a href="">About</a>
<a href="">Services</a>
<a href="">Contact</a>
<button class="btnLogin-popup">Login</button>
</nav>
</header>
<div class="wrapper">
<div class="form-box">
<h2>Login</h2>
<form action="">
<div class="input-box">
<span class="icon">
<i class="fa fa-solid fa-envelope"></i>
</span>
<input type="email" required>

<label>Email</label>
</div>
<div class="input-box" style="margin-left: 2px;">
<span class="icon">
<i class="fa fa-solid fa-lock"></i>
</span>
<input type="password" required>
<label>Password</label>
</div>
<div class="remember-forgot">
<label><input type="checkbox"> Remember me</label>
<a href="#">Forgot Password</a>
</div>
<button type="submit" class="btn">Login</button>
<div class="login-register">
<p>Don't have an account? <a href="#" class="register-
link">Register</a></p>
</div>
</div>
</form>
</div>
</body>
</html>

csss
* {
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('background.jpg') no-repeat;
background-size: cover;
background-position: center;
}

header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 100px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 99;
}

.logo {
font-size: 2em;
color: #fff;
user-select: none;
}

.navigation a {
position: relative;
font-size: 1.1em;
color: #fff;
text-decoration: none;
font-weight: 500;
margin-left: 40px;
}

.navigation a::after{
content: '';
position: absolute;
left: 0;
bottom: -6px;
width: 100%;
height: 3px;
background: #fff;
border-radius: 5px;
transform: scaleX(0);
transition: transform .5s;
}

.navigation a:hover::after {
transform-origin: left;
transform: scaleX(1);
}

.navigation .btnLogin-popup {
width: 130px;
height: 50px;
background: transparent;
border: 2px solid #fff;
outline: none;
border-radius: 6px;
cursor: pointer;
font-size: 1.1em;
color: #fff;
font-weight: 500;
margin-left: 40px;
transition: .5s;
}

.navigation .btnLogin-popup:hover {
background: #fff;
color: #162938;
}

.wrapper {
position: relative;
width: 400px;
height: 440px;
background: transparent;
border: 2px solid rgba(255, 255, 255, .5);
border-radius: 20px;
backdrop-filter: blur(20px);
box-shadow: 0 0 30px rgba(0, 0, 0, .5);
display: flex;
justify-content: center;
align-items: center;
}

.wrapper .form-box {
width: 100%;
padding: 40px;
}

.form-box h2 {
font-size: 2em;
color: #162938;
text-align: center;
}

.input-box {
position: relative;
width: 100%;
height: 50px;
border-bottom: 2px solid #162938;
margin: 30px 0;
}

.input-box label {
position: relative;
top: 50%;
left: 5px;
transform: translateY(-50%);
font-size: 1em;
color: #162938;
font-weight: 500;
pointer-events: none;
}

.input-box input {
width: 100%;
height: 100%;
background: transparent;
border: none;
outline: none;
}

.input-box .icon {
position: absolute;
right: 8px;
font-size: 1.2em;
color: #162938;
line-height: 57px;
}

javascript

You might also like