Responsive Log In + Sign Up Form | Day 4 | 50 Days of Intermediate HTML and CSS Projects

Making a Responsive Login Form with HTML & CSS

What will we come up with? 💚

Let's create it🎯🔥

🎯 Body Structure

HTML

<form>

    <h2>Login Here</h2>

    <label for="username">Username</label>
    <input type="text" placeholder="Enter your User " id="username">
    <label for="password">Password</label>
    <input type="password" placeholder="Enter a 8+ character password" id="password">

    <button>Log In</button>

    <div class="sociallogin">
      <div class="go"><b class="fab fa-google"></b> Google</div>
      <div class="fb"><b class="fab fa-facebook"></b> Facebook</div>
    </div>

  </form>

📢 Tip💡

If you want to put the * mark to show required -

use - <sup>*</sup>

CSS

Some fixed values.

* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

Styling the body....🔥

body {
    background-image: url("https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0bo50etkr3xgjgjcp4z8.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    font-family: 'Nunito', sans-serif;
  }

📢 Tip 💡

To make the form look cool💚 use-

::selection {
    color: #003300;
    background-color: #e6ffe6;
  }

By the way I have covered this ::selection in Day 2. If you haven't read it yet...give it a look...!

Let's style the form..💚

form {
    height: 520px;
    width: 400px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
    padding: 50px 35px;
  }

  form * {
    color: #ffffff;
    letter-spacing: 0.5px;
    outline: none;
    border: none;
  }

transform: translate(-50%, -50%); is used to bring the form in center
blur is used to give the frosted glass effect over the background image.
We will use position: absolute;

Let's style Login Here 💚

form h2 {
    font-size: 32px;
    font-weight: 500;
    line-height: 42px;
    text-align: center;
    font-family: 'Playfair Display', serif;
  }

Now comes the label

label {
    display: block;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 500;
  }

Now input💚

input {
    display: block;
    height: 50px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.07);
    border-radius: 3px;
    padding: 0 10px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 300;
  }

🎯 Tip 💡

Use the :focus for cool look...
The style will be shown when user clicks on the input section to type.

input:focus {
    border-style: solid;
    border-color: rgb(0, 179, 0);
    border-width: 1px;
    box-shadow: 0 4px 8px 0 rgb(0, 179, 0, 0.3),
      0 6px 20px 0 rgb(0, 179, 0, 0.2);
  }

The placeholder

::placeholder {
   color: #e5e5e5;
 }

Here's the Log In button💚

button {
    margin-top: 50px;
    width: 100%;
    background-color: #ffffff;
    color: #080710;
    padding: 15px 0;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
  }

Styling the social icons - Google & Facebook

.social {
    margin-top: 30px;
    display: flex;
  }
.social .fb{
  margin-left: 25px;
}
.social b{
  margin-right: 4px;
}
.social div {
   background: red;
   width: 150px;
   border-radius: 3px;
   padding: 5px 10px 10px 5px;
   background-color: rgba(255, 255, 255, 0.27);
   color: #eaf0fb;
   text-align: center;
}

🎯 Tip 💡

To give some cool look let's use-

:hover - when mouse is placed over the
:active - when the div is clicked

. button div:hover {
    background-color: rgba(255, 255, 255, 0.47);
  }
.button div:active {
    background-color: rgba(255, 255, 255, 0.60)
.social div:hover {
    background-color: rgba(255, 255, 255, 0.47);
  }
.social div:active {
    background-color: rgba(255, 255, 255, 0.60)
  }

CONGRATULATIONS✨ WE MADE