Google Login Form Design using HTML & CSS

Google Login Form Design using HTML and CSS (Source Code)

Google Login Form Design using HTML and CSS Code

 
Google Login Form Design using HTML & CSS
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 Using Html Code. We use HTML and CSS for Google Login Form. we use 2 placeholders and 1 image logo in the center of the google login form to look like a google clone Form, use 2 buttons in the footer of the form Login and Create Account, and a button also included for forgetting passwords.

s0 create a google login page using Html and Css Code.

50+ HTML, CSS &; JavaScript Projects With Source Code

Code byAshton
Project DownloadLink Available Below
Language usedHTML and CSS
External link / DependenciesYes
ResponsiveYes
Google Login Form Design Table

I 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.

Portfolio Website Using HTML ,CSS ,Bootstrap and JavaScript

Only Html Code Output

 
Google Login Form Design using HTML & CSS
Google Login Form Design using HTML & CSS

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.

Create Todo List Template Using HTML, CSS & JavaScript

Final Output Of Google Login Form Design Using Html and Css

 
Google Login Form Design using HTML & CSS
Google Login Form Design using HTML & 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

Which code editor do you use for this Google Login Form Design coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this is a responsive project

Do you use any external links to create this project?

Yes!



Leave a Reply