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.
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%;
}