Webpage Code Example: A Simple Fully Responsive Login Page Using CSS & HTML

on
This Login Page is created with minimum HTML & CSS Code and hence it can be used as a reference for a beginner to understand how to write a webpage.

HTML & CSS are one of the most easy languages out there. But along with these two languages, JavaScript is also needed for more functionality of the webpage. So it is necessary to learn JavaScript too. Dont worry you can learn it with time. Initially learn to build simple webpages and later on learn and add the JavaScript functionalities. 


As a beginner it is easy to code a webpage. But it takes Practice and Time to design the webpage to make it look neat and to write Optimized code.

The Body of this page has a seperate division for login box. Because of that, you can add more to the body of the page without disturbing the login box.

In depth explainations for these code will be uploaded here soon.

The Image path in the CSS Sheet need to be modified to your Image.

HTML CODE:

<html>

<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
<div class="login">
<h1>Login</h1>
<p>User ID</p>
<input type="text" placeholder="User ID">
<p>Password</p>
<input type="password" placeholder="Password">
<p>
<button>Login</button>
</p>
</div>
</body>

</html>



CSS StyleSheet:

body{
   background-image: url(back.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   padding:0;
   margin:0;
}

.login{
   padding-top: 2em;
   margin:0em;
   width:20em;
   height:35em;
   position: relative;
   top:2em;
   left:2em;
   text-align: center;
   background-color:rgba(0, 0, 0, 0.8);
   color:whitesmoke;
   border-radius: 1em;
}

h1{
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   font-size: 3em;
   padding-bottom: 1em;
   margin:0px;
}

p{
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 
   font-size: 1.5em;
   padding:0.5em;
   padding-top:1em;
   margin:0px;
}

input{
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   font-size: 15px;
   margin:0px;
   padding:0;
   padding-left:10px;
   border-radius: 0.5em;
   width:17em;
   height: 3em;
   border:0px;
   background-color: rgba(255, 255, 255, 0.8)
}

button{
   padding:0;
   margin-top:9em;
   font-size:15px;
   color:black;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   width:17em;
   height: 3em;
   background-color:rgba(0, 220, 255, 0.4);
   border-radius: 0.5em;
   border:0px;
}                                                                                     

Comments

Post a Comment