Login Page

Simple Login Page

A simple login page that I made using only HTML and CSS. I’ll probably continue updating this page when I add more things.

To create it I used w3schools and cssdeck. How the page works is, when you click the username or the password boxes, it’ll automatically remove the words inside and overwrite it with your input. If there’s no values/input inside the box a message will pop up reminding you to fill it out. Once you press ‘login’ it’ll direct you to your page.

Here’s the code I used to make it:

HTML

<!DOCTYPE html>

<html>

<head>
<link rel=”stylesheet” href=”login.css”>
</head>

<body>

<div class=”form”>
<h1> Welcome! </h1>
<hr>
<form action=”index.html”>
<br>
<input type=”text” placeholder=”Username” required=”” id=”username” />
<br>
<br>
<input type=”password” placeholder=”Password” required=”” id=”password” />

<br><br>

<input type=”submit” value=”Log in”>

</form>
<br>
<hr>
</div>

</body>

</html>

CSS

.form {

position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: 200px;
height: 350px;
margin: auto;

}

input[type=”text”]{
color:gray;
padding:5px;
}

hr {
border: 0;
height: 1px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s