Archana P. answered • 05/08/23
Tutor
New to Wyzant
I am a tutor for Doubt solving
Now, link the HTML and CSS to the HTML file you just copied and paste this code in the heading tag:
<head><link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
Next, create a structure for the login page using HTML, Username, and Password.
<!DOCTYPE html>
<html>
<head><title>Login Form</title><link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body><h2>Login Page</h2><br><div class="login"><form id="login" method="get" action="login.php"><label><b>User Name
</b></label><input type="text" name="Uname" id="Uname" placeholder="Username"><br><br><label><b>Password
</b></label><input type="Password" name="Pass" id="Pass" placeholder="Password"><br><br><input type="button" name="log" id="log" value="Log In Here"><br><br><input type="checkbox" id="check"><span>Remember me</span><br><br>
Forgot <a href="#">Password</a></form>
</div>
</body>
</html>
Next, write code in CSS to apply some style to the HTML so you can change the look of the login page.
body
{
margin: 0;
padding: 0;
background-color:#6abadeba;
font-family: 'Arial';
}
.login{
width: 382px;
overflow: hidden;
margin: auto;
margin: 20 0 0 450px;
padding: 80px;
background: #23463f;
border-radius: 15px ;
}
h2{
text-align: center;
color: #277582;
padding: 20px;
}
label{
color: #08ffd1;
font-size: 17px;
}
#Uname{
width: 300px;
height: 30px;
border: none;
border-radius: 3px;
padding-left: 8px;
}
#Pass{
width: 300px;
height: 30px;
border: none;
border-radius: 3px;
padding-left: 8px;
}
#log{
width: 300px;
height: 30px;
border: none;
border-radius: 17px;
padding-left: 7px;
color: blue;
}
span{
color: white;
font-size: 17px;
}
a{
float: right;
background-color: grey;
}
