Skip to main content

Archive

Show more

Simple Login Form Design | HTML And CSS

Simple-Login-Form-Design-HTML-And-CSS

Simple Login Form Design Using HTML And CSS

All website front-end developers should know how to design a login form as it is a very basic element. So today through this article, we will teach you how to design a login form that is designed in a very simple way, there is no animation so that even new developers can easily implement it. We have also designed a similar login form before, you can read that article. We hope you like it.

So let's know, how this login form works. The design of this login form is very simple and it has been validated a bit with the help of some HTML attributes, but there is still a lot of form validation left, which can be done with the help of Javascript or Jquery. Which we will understand in detail in another article.

You can read interesting articles on web development. The link is given below.

If you want to learn animation using javascript and jsplugins, We have already created a lot of animation using various plugins of javascript, check out the playlist. We hope you like it.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Simple Login Form Design | Rustcode</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

<!DOCTYPE html>
<html>
<head>
 <title>Simple Login Form Design | Rustcode</title>
 <link rel="stylesheet" href="style.css">
</head>

<body>

 <div class="container">
   <form class="login-form">
     <div class="heading-container">
       <h2>Welcome back!</h2>
       <p>Please enter your login details</p>
     </div>
     <div class="group login-input">
       <input type="email" placeholder="Email" required>
     </div>
     <div class="group login-input">
       <input type="password" placeholder="Password" required>
     </div>
     <div class="group form-link">
       <span>
         <input type="checkbox">Remember Me
       </span>
       <a href="#">Forgot Password</a>
     </div>
     <div class="group">
       <button class="btn" type="submit">LOGIN</button>
     </div>
   </form>
 </div>

</body>
</html>



03. CSS

@import url(https://fonts.googleapis.com/css?family=Poppins);
*{
  box-sizing: border-box;
}

body{
  margin: 0px;
  padding: 0px;
  font-family: "Poppins", sans-serif;
}

.container{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.heading-container{
  text-align: center;
  margin-bottom: 40px;
  padding: 0px;
}

.heading-container > *{
  margin: 0px;
  padding: 5px;
}

.login-form{
  width: 380px;
  border-radius: 4px;
  margin: 2em auto;
  padding: 3em 2em 2em 3em;
  background: #fafafa;
  border: 1px solid #ebebeb;
  color: black !important;
  box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 1px 0px, rgba(0, 0, 0, 0.09804) 0px 1px 2px 0px;
}

.group{
  margin-bottom: 30px;
}

.login-input{
  font-size: 18px;
  width: 100%;
}

.form-link{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.login-form a{
  font-size: 11px;
  font-weight: 500;
  color: black;
}

input[type="email"],
input[type="password"]{
  width: 100%;
  border: 2px solid #7768AE;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 12px;
}

.btn{
  width: 100%;
  padding: 10px 0px;
  background: #7768AE;
  cursor: pointer;
  font-size: 16px;
  font-family: inherit;
  color: #fff;
  border: none;
  font-weight: 600;
}



04. 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.




05. SOURCE CODE

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






Comments