Google Clone Form Css | Google Sign Up Form Using Html Css







Google Clone Form Css | Google Sign Up Form Using Html Css

Welcome🎉 to Code With Random blog. In this blog, we learn how to create a Google Clone Form Css. We use HTML & CSS  for Google Clone Form Css. Hope you enjoy our blog so let’s start with a basic HTML structure for the Google Clone Form Css. 

HTML code

 <!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 HTML code for the Google Clone Form Css. Now, you can see output without CSS, then we write CSS for the Google Clone Form Css.

Output

Google Clone Form Css | Google Sign Up Form Using Html Css

CSS code

 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 CSS section,  Here is our final updated output CSS.

Final Output

Google Clone Form Css | Google Sign Up Form Using Html Css

Now we have completed our CSS section,  Here is our updated output with CSSHope you like the Google Clone Form Css, 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 Clone Form Css using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

code by – Ashton

Check out more…..



Share on:

Leave a Comment