Do you want to create a page like the Google login page or do you want to copy it to the Google login page?
You want to design a page like Google login form but you don't know how to design with HTML CSS or bootstrap.This article is for them only.
No matter what design you want to create, you need to have a good idea about HTML and CSS.
Now the question is whether HTML is a hypertext markup language and CSS is cascading style syte.
You can easily create any design using HTML and CSS but those who do not know how to design or have no knowledge of HTML and CSS but want to design will be given a source code soon.
Whether you are designing a Google form or not, you need to have an idea about the form tag input and also the concept of CSS. It is possible to create an attractive form with a good combination of CSS with these forms.
Have a good idea about CSS values and properties like width, height, font size, background color, color, margin, padding, hover transaction, transform, before, after, etc.
just copy and paste this code you will get a better output form.so you need 3 page first one is "index.html" 2nd one is "style.css" and 3rd is "index.js".
index.html page 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>login your google account</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>
<body>
<center>
<div class="container ">
<div class="shadow-lg w-50 mt-3 p-5" id="divs">
<img src="google.jpg" width="100px"><br>
<h4>Sign in</h4>
<p>Use your Google Account</p>
<form action="" method="post">
<input
type="email"
name="email"
id="email"
placeholder="enter your email"
class="form-control"
/><br />
<input
type="text"
name="password"
id="password"
placeholder="enter your password"
class="form-control"
/>
<br />
<p ><a href="https://accounts.google.com/signin/v2/usernamerecovery?service=searchandassistant&continue=https%3A%2F%2Fwww.google.com%2Fsearch%3Fq%3Dgoogle%2Blog%2Bin%26rlz%3D1C1BNSD_enBD968BD968%26sxsrf%3DAOaemvKamNHuFCVGXk921MsdufZTxPYdmA%3A1640761889673%26source%3Dlnms%26tbm%3Disch%26sa%3DX%26ved%3D2ahUKEwiG2uCsuoj1AhW5yzgGHclWC5EQ_AUoAnoECAEQBA%26biw%3D1366%26bih%3D625%26dpr%3D1%26sfr%3Dvfe&ec=GAlAAg&flowName=GlifWebSignIn&flowEntry=AddSession">forgot email?</a></p>
<br>
<p>Not your computer? Use Guest mode to sign in privately.</p>
<p><a class="text-left"href="https://support.google.com/chrome/answer/6130773?hl=en">Learn more</a></p>
<br>
<div class="row">
<div class="col"><a href="https://accounts.google.com/signup/v2/webcreateaccount?service=searchandassistant&continue=https%3A%2F%2Fwww.google.com%2Fsearch%3Fq%3Dgoogle%2Blog%2Bin%26rlz%3D1C1BNSD_enBD968BD968%26sxsrf%3DAOaemvKamNHuFCVGXk921MsdufZTxPYdmA%3A1640761889673%26source%3Dlnms%26tbm%3Disch%26sa%3DX%26ved%3D2ahUKEwiG2uCsuoj1AhW5yzgGHclWC5EQ_AUoAnoECAEQBA%26biw%3D1366%26bih%3D625%26dpr%3D1%26sfr%3Dvfe&dsh=S-1777953306%3A1640762214646393&biz=false&flowName=GlifWebSignIn&flowEntry=SignUp">Create account</a></p>
</div>
<div class="col">
<input type="submit" value="Next" name="next" id="next" class="bg-primary rounded text-white border-0" /><br>
</div>
</form>
</div>
</div>
</center>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
style.css code :
#email,#password{
width: 300px;
height: 40px;
color: black;
padding: 10px
}
@media screen and (max-width: 993px) {
#email,#password{
width: 300px;
height: 40px;
color: black;
padding: 10px
}
#divs{
width: 600px!important;
}
}
@media screen and (max-width: 768px) {
#divs{
width: 400px!important;
}
}
index.js code:
let next = document.getElementById('next');
next.addEventListener("click",function(e){
e.preventDefault();
let email = document.getElementById('email').value;
let password = document.getElementById('password').value;
console.log(email)
if (email=='') {
swal({
title: "Email warning!",
text: "please enter your email !",
icon: "warning", //note you can write here error or warning or info
button: "ok",
})
}else if(password==""){
swal({
title: "Password warning!",
text: "please enter your password !",
icon: "warning", //note you can write here error or warning or info
button: "ok",
})
}else if(password=="12345678"){
swal({
title: "normal password!",
text: "please provide a strong password !",
icon: "warning", //note you can write here error or warning or info
button: "ok",
})
}else if(password.length<8){
swal({
title: "password issue!",
text: "password should be at last 8 charckter!",
icon: "warning", //note you can write here error or warning or info
button: "ok",
})
}else{
swal({
title: "Good job!",
text: "congratulation!",
icon: "success", //note you can write here error or warning or info
button: "ok",
})
}
})
No comments