Google Login Form Design using HTML & CSS
Welcome to Code With Random blog. In this blog, we learn how to create a Google Login Form. We use HTM and CSS for Google Login Form.
Hope you enjoy our blog so let’s start with a basic HTML structure for the Google Login Form.
HTML Code For Google Login Form
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Google</title> <link rel="stylesheet" href="style.css" /> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" /> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </head> <body> <div class="login-div"> <div class="row"> <div class="logo"></div> </div> <div class="row center"> <h5>Sign in</h5> <h6>Use your codewith_random account</h6> </div> <div class="row"> <div class="input-field col s12"> <input id="email_input" type="email" class="validate" /> <label for="email_input">Email</label> </div> </div> <div class="row"> <div class="input-field col s12"> <input id="password_input" type="password" class="validate" /> <label for="password_input">Password</label> <div> <a href="#"><b>Forgot Password</b></a> </div> </div> <div class="row"> <div class="col s12"> Not your computer? Ue a private window to sign in. <a href="#"><b>Learn more</b></a> </div> </div> <div class="row"></div> <div class="row"> <div class="col s6"><a href="#">Create account</a></div> <div class="col s6 right-align"> <a class="waves-effect waves-light btn" href="#">Login</a> </div> </div> </div> </div> </body> </html>
There is all the HTML Code for the Google Login Form Design. Now, you can see output without CSS, then we write CSS for the Google Login Form Design.
50+ Html ,Css & Javascript Projects With Source Code
Only Html Code Output
CSS Code For Google Login Form
body{
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.login-div{
max-width: 430px;
padding: 35px;
border: 1px solid #ddd;
border-radius: 8px;
}
.logo{
background: url(./circle-cropped (1).png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 50%;
}
Now we have completed our Google Login Form Design. Here is our final updated output With Html and Css.
Final Output Of Google Login Form Design Using Html and Css
10+ Javascript Projects For Beginners With Source Code
Now we have completed our Google Login Form Design. Here is our updated output with Html and Css. Hope you like the Google Login Form Design. you can see output project screenshots. See our other blogs and gain knowledge in front-end development.
Thank you
In this post, we learn how to create a Google Login Form Design Using Html and Css. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.
Written by – Code With Random/Anki
code by – Ashton
