Scribd
Upload
7 views

Css Code

Uploaded by

rupeshtalwade47
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Css Code

Uploaded by

rupeshtalwade47
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

3.

Creating a Login Page Using CSS

Source Code :

<!DOCTYPE html>
<html lang="english">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>MSBTE Login</title>
<style>
body, html {
height: 100%;
font-family: Arial, Helvetica, sans-serif;
}

*{
box-sizing: border-box;
}

.bg-img {
background-image: url("csmss.jpg");
min-height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

.container {
position: relative;
margin: 20px auto;
max-width: 550px;
padding: 16px;
background-color: white;
border-radius: 8px;
}

input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
border-radius: 4px;
}

input[type=text]:focus, input[type=password]:focus {
background-color: #e8f0fe;
outline: none;
}

.btn {
background-color: #04AA6D;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
border-radius: 4px;
}
.btn:hover {
opacity: 1;
}
</style>
</head>

<body>
<div class="bg-img">
<form name="myForm" action="https://msbte.ac.in/"
class="container" onsubmit="return validateUser()">
<h1>MSBTE Login</h1>

<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email"
name="email" required>

<label for="password"><b>Password</b></label>
<input type="password" placeholder="Enter Password"
name="password" required>

<input type="submit" class="btn" value="MSBTE Login">


</form>
</div>

<script>
function validateUser()
{
var email = document.forms["myForm"]["email"].value;
var password =
document.forms["myForm"]["password"].value;
var atpos = email.indexOf("@");
var dotpos = email.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >=
email.length) {
alert("Not a valid e-mail address or password");
return false;
}

var uppercase = password.match(/[A-Z]/);


var lowercase = password.match(/[a-z]/);
var number = password.match(/[0-9]/);

if (!uppercase || !lowercase || !number ||


password.length < 8&& password.length <= 15 )
{
alert("Password must contain at least 8 characters,
including uppercase, lowercase, and a number.");
return false;
}

alert("Valid Email Address and Password");


return true;
}
</script>
</body>

</html>
Output of Code

You might also like