We use cookies to ensure that we give you the best experience on our website.

Beautiful HTML & CSS login page template

Beautiful HTML & CSS login page template

In this tutorial, we are going to create a Beautiful login page template using HTML & CSS. And if you want to see the live demo of this CSS login page template, click on the following button.

📡 Live Demo

Follow the below to create this HTML & CSS login page template

To create this login page template We have to create two files – 1) index.html, 2) style.css

✍ Creating files & folders

So, go to your desktop & create a new folder and name it whatever you want, this is our main folder. After that, go inside this folder and here we will create our files, but before creating the files let’s take a look at the folder structure –

HTML & CSS login page template folder structure

Now we have to create the index.html file at the root of the main folder to make the layout of the component. The following HTML code is for the index.html file –

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Login Page Template - W3jar.Com</title>
    <link href="https://fonts.googleapis.com/css2?family=Muli:[email protected];700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>

    <div class="main-container">
        <div class="form-container">

            <div class="form-body">

                <h2 class="title">Log in with</h2>

                <div class="social-login">
                    <ul>
                        <li class="google"><a href="#">Google</a></li>
                        <li class="fb"><a href="#">Facebook</a></li>
                    </ul>
                </div><!-- SOCIAL LOGIN -->

                <div class="_or">or</div>

                <form action="" class="the-form">

                    <label for="email">Email</label>
                    <input type="email" name="email" id="email" placeholder="Enter your email">

                    <label for="password">Password</label>
                    <input type="password" name="password" id="password" placeholder="Enter your password">

                    <input type="submit" value="Log In">

                </form>

            </div><!-- FORM BODY-->

            <div class="form-footer">
                <div>
                    <span>Don't have an account?</span> <a href="">Sign Up</a>
                </div>
            </div><!-- FORM FOOTER -->

        </div><!-- FORM CONTAINER -->
    </div>

</body>
</html>

After creating the index.html file, now time to create the style.css file. But in the CSS file we will use some images, so, before moving further download the images from the following given links –

After that in the root of the main folder, create a new folder called 📁assets, and inside assets folder, we have to create two folders –

  • Inside the assets folder –
    • 📁css – here we have to create the style.css file
    • 📁images – place the downloaded images here.

The following CSS code for style.css –

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  color: #222222;
  background-color: #f2f2f0;
  background-color: #56385a;
  background-image: url("../images/cover.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  padding: 20px;
  overflow-x: hidden;
}

body,
input,
button {
  font-family: 'Muli', sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
  outline: none;
}

.main-container {
  max-width: 900px;
  margin: 0 auto;
}

a {
  color: inherit;
  outline: none;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.form-container {
  max-width: 450px;
  margin: 0 auto;
}

.form-body {
  background-color: #4a304d;
  padding: 50px;
  color: #ffffff;
  border-radius: 3px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

@media only screen and (max-width: 500px) {
  .form-body {
    padding: 50px 40px;
  }
}

@media only screen and (max-width: 455px) {
  .form-body {
    padding: 45px 30px;
  }
}

@media only screen and (max-width: 340px) {
  .form-body {
    padding: 30px 20px;
  }
}

.form-body .title {
  margin: 0;
  text-align: center;
  font-weight: normal;
}

.social-login ul {
  list-style-type: none;
  margin: 30px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.social-login ul li {
  flex: 1 auto;
}

.social-login ul li a {
  background-color: #56385a;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 15px;
  color: #e6e6e6;
  font-weight: bold;
  text-decoration: none;
  transition: background-color .3s;
}

.social-login ul li a::before {
  content: '';
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px;
  margin-right: 5px;
}

.social-login ul li a:hover {
  background-color: #fff199;
  color: #0e090e;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

li.google {
  margin-right: 10px;
}

li.google a::before {
  background-image: url("../images/google.png");
}

li.fb {
  margin-left: 10px;
}

li.fb a::before {
  margin: 0;
  background-image: url("../images/fb.png");
}

@media only screen and (max-width: 400px) {
  .social-login ul {
    flex-direction: column;
  }

  li.google,
  li.fb {
    margin: 0;
  }

  li.google {
    margin-bottom: 10px;
  }
}

._or {
  text-align: center;
  margin-bottom: 20px;
  color: #d9d9d9;
}

.the-form {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.the-form label {
  margin-bottom: 5px;
  color: #e6e6e6;
  font-weight: bold;
}

.the-form [type="email"],
.the-form [type="password"] {
  padding: 15px;
  font-size: 16px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  margin-bottom: 15px;
  transition: background .3s;
  color: #e6e6e6;
}

.the-form [type="email"]::placeholder,
.the-form [type="password"]::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.the-form [type="email"]:hover,
.the-form [type="password"]:hover {
  background: rgba(0, 0, 0, 0.1);
}

.the-form [type="email"]:focus,
.the-form [type="password"]:focus {
  background: #ffffff;
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  border-color: #4a304d;
  color: #222222;
}

.the-form [type="email"]:focus::placeholder,
.the-form [type="password"]:focus::placeholder {
  color: #666666;
}

.the-form [type="submit"] {
  background: #ffb37b;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 18px;
  font-size: 20px;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 20px;
  color: black;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.the-form [type="submit"]:hover {
  opacity: .9;
}

.form-footer div {
  text-align: center;
  padding: 25px 20px;
  font-size: 18px;
  color: #e6e6e6;
}

.form-footer div a {
  color: #ffb37b;
}

style.css with prefixes

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  color: #222222;
  background-color: #f2f2f0;
  background-color: #56385a;
  background-image: url("../images/cover.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  padding: 20px;
  overflow-x: hidden;
}

body,
input,
button {
  font-family: "Muli", sans-serif, -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Helvetica, sans-serif;
  outline: none;
}

.main-container {
  max-width: 900px;
  margin: 0 auto;
}

a {
  color: inherit;
  outline: none;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.form-container {
  max-width: 450px;
  margin: 0 auto;
}

.form-body {
  background-color: #4a304d;
  padding: 50px;
  color: #ffffff;
  border-radius: 3px;
  -webkit-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

@media only screen and (max-width: 500px) {
  .form-body {
    padding: 50px 40px;
  }
}

@media only screen and (max-width: 455px) {
  .form-body {
    padding: 45px 30px;
  }
}

@media only screen and (max-width: 340px) {
  .form-body {
    padding: 30px 20px;
  }
}

.form-body .title {
  margin: 0;
  text-align: center;
  font-weight: normal;
}

.social-login ul {
  list-style-type: none;
  margin: 30px 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.social-login ul li {
  -webkit-box-flex: 1;
  -ms-flex: 1 auto;
  flex: 1 auto;
}

.social-login ul li a {
  background-color: #56385a;
  border-radius: 3px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 15px;
  color: #e6e6e6;
  font-weight: bold;
  text-decoration: none;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}

.social-login ul li a::before {
  content: "";
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px;
  margin-right: 5px;
}

.social-login ul li a:hover {
  background-color: #fff199;
  color: #0e090e;
  -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

li.google {
  margin-right: 10px;
}

li.google a::before {
  background-image: url("../images/google.png");
}

li.fb {
  margin-left: 10px;
}

li.fb a::before {
  margin: 0;
  background-image: url("../images/fb.png");
}

@media only screen and (max-width: 400px) {
  .social-login ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  li.google,
  li.fb {
    margin: 0;
  }

  li.google {
    margin-bottom: 10px;
  }
}

._or {
  text-align: center;
  margin-bottom: 20px;
  color: #d9d9d9;
}

.the-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.the-form label {
  margin-bottom: 5px;
  color: #e6e6e6;
  font-weight: bold;
}

.the-form [type="email"],
.the-form [type="password"] {
  padding: 15px;
  font-size: 16px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  margin-bottom: 15px;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
  color: #e6e6e6;
}

.the-form [type="email"]::-webkit-input-placeholder,
.the-form [type="password"]::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.the-form [type="email"]::-moz-placeholder,
.the-form [type="password"]::-moz-placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.the-form [type="email"]:-ms-input-placeholder,
.form-container .form-body .the-form [type="password"]:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.the-form [type="email"]::-ms-input-placeholder,
.form-container .form-body .the-form [type="password"]::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.the-form [type="email"]::placeholder,
.form-container .form-body .the-form [type="password"]::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.the-form [type="email"]:hover,
.the-form [type="password"]:hover {
  background: rgba(0, 0, 0, 0.1);
}

.the-form [type="email"]:focus,
.the-form [type="password"]:focus {
  background: #ffffff;
  -webkit-box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  border-color: #4a304d;
  color: #222222;
}

.the-form [type="email"]:focus::-webkit-input-placeholder,
.form-container .form-body .the-form [type="password"]:focus::-webkit-input-placeholder {
  color: #666666;
}

.the-form [type="email"]:focus::-moz-placeholder,
.the-form [type="password"]:focus::-moz-placeholder {
  color: #666666;
}

.the-form [type="email"]:focus:-ms-input-placeholder,
.the-form [type="password"]:focus:-ms-input-placeholder {
  color: #666666;
}

.the-form [type="email"]:focus::-ms-input-placeholder,
.the-form [type="password"]:focus::-ms-input-placeholder {
  color: #666666;
}

.the-form [type="email"]:focus::placeholder,
.the-form [type="password"]:focus::placeholder {
  color: #666666;
}

.the-form [type="submit"] {
  background: #ffb37b;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 18px;
  font-size: 20px;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 20px;
  color: black;
  -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.the-form [type="submit"]:hover {
  opacity: 0.9;
}

.form-footer div {
  text-align: center;
  padding: 25px 20px;
  font-size: 18px;
  color: #e6e6e6;
}

.form-footer div a {
  color: #ffb37b;
}
📥 Download from GitHub

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *