Table of Contents
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
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
