Create Mobile Login App with HTML and CSS

Hello friends, in this blog, you will learn how to create Mobile login app using only HTML and CSS.I have shared another snippet based on how to create a simple Sign in form. In this tutorial, I have created a Mobile login app design using HTML and CSS, If you like this article, please also subscribe my channel - Code Info

HTML form is created with the help of <form> </form> tag and within this tag you will have all the input elements for taking user input. Web Form or HTML form is very flexible and it can have many input fields of different types such as text field, password filed, radio button, combo box etc.

Login page is very not unusual amongst any kind of secured applications and its extensively used on the net for authenticating the consumer before providing the secured pages of the net packages. As an instance to use Facebook you need to get authenticated via the Facebook earlier than they come up with get right of entry to to their platform. The consumer authentication is accomplished through a unique net web page called login web page. The login web page asks you to enter your credentials that is then established via the application and after successful validation you are provided with the secured a part of the utility.

Logo Png:

Forms contain unique factors known as controls like inputbox, checkboxes, radio-buttons, submit buttons, and so on. Customers normally complete a form through enhancing its controls e.g. Entering textual content, choosing gadgets, and so forth. and submitting this form to a web server for further processing.

Source Code:

If you like this Mobile Login App design, then feel free to use it in your project. Copy the code by clicking on Copy button provided below.

First, you have to create two files. One of them is HTML, and the other one is CSS. After creating the files, paste the code provided below.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mobile App Login | By Code Info</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="mobile">
      <div class="top"></div>
      <div class="bottom"></div>
      <img src="logo.png" class="png1" />
      <h1>Code Info</h1>
      <h6>Start your online journey</h6>
    </div>
    <div class="mobile2">
      <div class="top"></div>
      <div class="bottom"></div>
      <h2>< Back</h2>
      <br />
      <img src="logo.png" class="png2" />
      <h3>Proceed with your Account</h3>
      <h4>Login</h4>
      <form>
        <label> Username</label>
        <input type="text" name="" placeholder="Username" />
        <label> Password</label>
        <input type="password" name="" placeholder="Password" />
        <label>
          <input type="submit" name="" value="Login" />
        </label>
      </form>
    </div>
  </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you have to create a file with .css extension.

CSS CODE:

body {
  background: gray;
  margin: 65px 0 0 300px;
  font-family: monospace;
  display: inline-flex;
}

.mobile {
  position: relative;
  width: 320px;
  height: 500px;
  background: red;
}
.top {
  position: absolute;
  top: -50px;
  width: 100%;
  height: 50px;
  background: #efefef;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
}

.top:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  background: #ccc;
  border: 2px solid #aaa;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #999;
}
.top:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 3px;
  background: #333;
  border: 2px solid #aaa;
  border-radius: 3px;
  box-shadow: 0 0 0 1px #999;
}

.bottom {
  position: absolute;
  bottom: -50px;
  width: 100%;
  height: 50px;
  background: #efefef;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
}

.bottom:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  border: 2px solid #999;
  border-radius: 30px;
}

.png1 {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 50% 0 0 30%;
  background-color: white;
}

h1 {
  color: white;
  font-size: 40px;
  padding-top: 10px;
  text-align: center;
}

h6 {
  color: white;
  font-size: 10px;
  text-align: center;
}

.mobile2 {
  position: relative;
  width: 320px;
  height: 500px;
  background: white;
  margin-left: 50px;
}
h2 {
  margin-left: 10px;
  color: #6f7180;
}
h3 {
  margin-top: 10px;
  color: #6f7180;
  text-align: center;
}

.png2 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-left: 35%;
  background-color: white;
}

h4 {
  font-size: 28px;
  text-align: center;
  font-weight: bold;
}

form {
  margin: 10px 0 0 10%;
}

label {
  display: flex;
  margin: 10px 0;
}

input {
  width: 80%;
  border: none;
  outline: none;
  padding: 10px;
  font-size: 15px;
  border-bottom: 1px solid black;
}

input[type="submit"] {
  width: 252px;
  color: white;
  border: none;
  background: red;
}

I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for visiting.

Logo Png:

You may like this:

Source Code:

2 Comments

Post a Comment

About Us

Contact Form