HOW TO CREATE RESPONSIVE LOG IN PAGE USING HTML AND CSS

In this tutorial we will show you how to create responsive login form using HTML and CSS. So that it will be easy to do login for user. A responsive web design will automatically adjust for different screen sizes and viewports.

To create responsive Login form takes only two steps:-

Make a HTML file and define
Make a CSS file and define CSS styling

index.html

<!DOCTYPE html>
        
        <!-- Created By Sagar Developer -- >


   <div class="login_box">
       <img src="user.png" class="avatar_img" alt="" srcset="">
       <h1>SIGN IN</h1>
       <P>UserName</P>
       <input type="text" placeholder="Enter UserName" required>
       <P>Password</P>
       <input type="password" placeholder="Enter Password" required>
       <input type="submit" value="Login"><br>
       <a href="#">Lost Your Password</a><br>
       <a href="#">Don't have an Account? SIGN UP</a>
   </div>

style.css

<!DOCTYPE html>
        
        <!-- Created By Sagar Developer -- >

body {
    margin: 0;
    padding: 0;
    background: url(image.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: monospace;
    width: 100%;
    height: 100vh;
}

.login_box {
    width: 320px;
    height: 420px;
    background: #494646;
    color: #fff;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: 70px 30px;
}

.avatar_img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    top: -50px;
    left: calc(50% - 50px);
    border: 3px solid #020344;
}

h1 {
    margin: 0;
    padding: 0 0 8px;
    text-align: center;
    font-size: 22px;
}

.login_box p {
    margin: 0;
    padding: 0;
    font-weight: bold;
}

.login_box input {
    width: 100%;
    margin-bottom: 20px;
}

.login_box input[type="text"], input[type="password"] {
    border: none;
    border-bottom: 1px solid #fff;
    background: transparent;
    outline: none;
    height: 40px;
    color: #fff;
    font-size: 16px;
}

.login_box input[type="submit"] {
    border: none;
    outline: none;
    height: 40px;
    background: #ffc107;
    color: #222;
    font-size: 18px;
    border: 1px solid #ff7f50;
    border-radius: 20px;
    width: 100px;
}

.login_box input[type="submit"]:hover {
    cursor: pointer;
    background: #ff7f50;
    color: #fff;
    transition: 0.5s;
}
.login_box a{
    text-decoration: none;
    font-size: 12px;
    line-height: 20px;
    color: #a9a9a9;
}
.login_box a:hover{
    color: #ffc107;
}

Sagar Developer

HOW TO CREATE RESPONSIVE LOG IN PAGE USING HTML AND CSS

To create responsive Login form takes only two steps:-

Make a HTML file and define
Make a CSS file and define CSS styling

1/Post a Comment/Comments

Post a Comment

About Us

Contact Form

HOW TO CREATE RESPONSIVE LOG IN PAGE USING HTML AND CSS

To create responsive Login form takes only two steps:-

Make a HTML file and defineMake a CSS file and define CSS styling

Related Posts

1/Post a Comment/Comments

Post a Comment

Contact Form

Make a HTML file and define
Make a CSS file and define CSS styling