Skip to main content

Login Page Design | Login Form Design | Rustcode

by Rustcode
Login-Form Design-html-and-css-rustcode


Different types of forms are used in websites such as contact forms, membership forms, login forms, etc. In this article, we will discuss the login form as it is very important for any website to collect users data.

This will be a very simple login form in which we use only basic HTML and CSS. This login page (form) is completely transparent and very attractive. I hope you'll like it.


1. HTML STRUCTURE

This is basic HTML structure which is ready for us, now let's include the font-family link in this HTML document. You can download font-family from here
<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" type="text/css" href="style.css">
 <link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet'>
</head>

<body>

   main content.

</body>
</html>


2. HTML

We are also including an image in the html body so that the background looks good. You can download the image from here.

<body>

  <div class="container">
    <h2>LOGIN FORM</h2>
    <div class="form-container">
      <form>
        <label><b>Username</b></label>
        <input type="text" placeholder="Enter Username" required>
        <br>
        <label><b>Password</b></label>
        <input type="password" placeholder="Enter Password" required>
        <br><br>
        <button type="submit">LOGIN</button>
      </form>
    </div>
  </div>

</body>


3. CSS

body{
padding: 0px;
margin: 0px;
font-family: Abel;
background-image: url(bg.jpg);
background-repeat: no-repeat;;
background-size: cover;
background-attachment: fixed;
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 28%;
margin: auto;
background-color: rgba(0, 0, 0, 0.1);
color: white;
padding: 30px;
box-shadow: 0px 2px 8px 2px #555;
border-radius: 6px;
box-sizing: border-box;
}
.container h2{
padding: 10px 15px;
letter-spacing: 1px;
}
.form-container{
padding: 16px;
}
.form-container label{
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
}
input[type=text], input[type=password], button{
width: 100%;
padding: 8px 12px;
margin: 8px 0px;
display: inline-block;
box-sizing: border-box;
color: white;
background-color: transparent;
border: 1px solid white;
}
input[type=text]:focus, input[type=password]:focus{
outline: none;
}
button{
padding: 12px 20px;
cursor: pointer;
font-family: Abel;
font-size: 14px;
letter-spacing: 1px;
}
button:hover{
background: rgba(0, 0, 0, 0.5);
}


4. YouTube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also learn about web development from there.


5. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download source code, you can download from here and change this according to your need.


RELATED POST:

Comments

Post a Comment