DEV Community

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

Posted on • Edited on

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

#html #css #tutorial #beginners

Making a Responsive Login Form with HTML & CSS

What will we come up with? 💚

Login Form - dev.to/koustav

Responsive Login Form - dev.to/koustav

Let's create it🎯🔥

🎯 Body Structure

dev.to/koustav - Login Form

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>
Enter fullscreen mode Exit fullscreen mode

📢 Tip💡

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

Login Form dev.to/koustav
use - <sup>*</sup>

CSS

Some fixed values.

* { padding: 0; margin: 0; box-sizing: border-box; }
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

📢 Tip 💡

To make the form look cool💚 use-

::selection { color: #003300; background-color: #e6ffe6; }
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode
  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; }
Enter fullscreen mode Exit fullscreen mode

Now comes the label

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

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; }
Enter fullscreen mode Exit fullscreen mode

🎯 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); }
Enter fullscreen mode Exit fullscreen mode

The placeholder

::placeholder { color: #e5e5e5; }
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

🎯 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) }
Enter fullscreen mode Exit fullscreen mode

CONGRATULATIONS✨ WE MADE

A Responsive Login Form

Now it's your turn 🎯

🎯 Task of the Day🔥
1.
Login Form Task - dev.to/koustav

Try this

Sign Up Form

2.
Sign Up Form - dev.to/koustav

Credits
Images - Unsplash
Fonts - Google Fonts

Check out the whole series!
Share it💚 with someone who may benefit from this
❤️ Happy Coding!
Follow for more!

Top comments (2)

Collapse
 
koustav profile image
devkoustav •

Want to contribute?
Put your suggestions in comments 😄

I'll be happy to add your suggestions!

Collapse
 
koustav profile image
devkoustav •

Did this post help you?
Save it for later..

lets_code_together