Responsive Log In + Sign Up Form | Day 4 | 50 Days of Intermediate HTML and CSS Projects
Tags: html, css, tutorial, beginners
Published: 2022-09-01 14:45:01

##Making a Responsive Login Form with HTML & CSS

---

_What will we come up with?_ 💚

![Login Form - dev.to/koustav](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5c0m936u5zprfnmmkj1k.jpg)

![Responsive Login Form - dev.to/koustav](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0on5k1hlhchscrkvjqzb.jpg)

---

Let's create it🎯🔥

---

**🎯 Body Structure** 

![dev.to/koustav - Login Form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/juxs56083moph0x0ioql.png)

---

###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 -

![Login Form dev.to/koustav](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6xoer5en7qush219dsu.png)
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...!_](https://dev.to/koustav/50-days-of-intermediate-html-css-projects-day-2-text-selection-css-effects-color-background-shadow-prevent-selection-2e9l)

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;
  }
```

1. `transform: translate(-50%, -50%);` is used to bring the form in center
2. `blur` is used to give the frosted glass effect over the background image.
3. 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- 

1. `:hover` - when mouse is placed over the 
2. `: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**
###A Responsive Login Form

Now it's your turn 🎯

---

🎯 Task of the Day🔥
1.
![Login Form Task - dev.to/koustav](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jfuo7abv3krakiwunvoj.png)

Try this
###Sign Up Form
2.
![Sign Up Form - dev.to/koustav](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jctlxug4t4pivattw5yp.png)

---

**Credits**
_Images_ - [Unsplash](Unsplash.com)
_Fonts_ - [Google Fonts](fonts.google.com)

---

_Check out the whole series!_
_**Share it💚** with someone who may benefit from this_
❤️ Happy Coding!
_Follow for more!_