code
Html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Material Icons' rel='stylesheet'>
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<form class="" action="">
<div class="head">
<img src="googlelogo.png" alt="" class="logo">
<h3>Create your Google Account</h3>
</div>
<div class="name">
<input type="name" required>
<label>First name</label>
</div>
<div class="name">
<input type="name" required>
<label>Last name</label>
</div>
<div class="user-name">
<input type="username" required>
<label>Username</label>
<span class="gmail">@gmail.com</span>
</div>
<a class="line1">You can use letters, numbers & periods</a>
<a href="" class="line2">Use my current email address instead</a>
<div class="pass">
<input type="password" class="password" id="pass1" required>
<label>Password</label>
</div>
<div class="pass">
<input type="password" class="password" id="pass2" required>
<label>Confirm</label>
</div>
<div class="iconeye">
<img src="eyehide.png" onclick="show();" id="eye">
</div>
<a class="line3">Use 8 or more characters with a mix of letters, numbers & symbols</a>
<a href="" class="line4">Sign in instead</a>
<input type="submit" value="Next">
</form>
<div class="side-image">
<img src="sideimage.png" alt="" class="side-logo">
</div>
</div>
<script type="text/javascript">
function show(){
var password= document.getElementById('pass1');
confirm= document.getElementById('pass2');
image= document.getElementById('eye');
if (password.type==="password",confirm.type==="password") {
password.type="text";
confirm.type="text";
image.setAttribute('src', 'eyeshow.png');
}else if (password.type==="text",confirm.type==="text"){
password.type="password";
confirm.type="password";
image.setAttribute('src', 'eyehide.png');
}
}
</script>
</body>
</html>
CSS
body{
margin: 0;
padding: 0;
background: #fff;
}
form{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border: 1px solid #9c9c9c;
border-radius: 10px;
width: 750px;
padding: 25px;
background: #fff;
}
.logo{
width: 100px;
padding: 5px 0;
margin: 0 0 0 -15px;
}
.head{
padding-left: 10px;
}
.head h3{
margin: 0;
font-size: 23px;
font-family: jost;
position: relative;
letter-spacing: 1px;
}
input{
outline: none;
border: 1px solid #9c9c9c;
border-radius: 5px;
padding: 0 10px;
height: 35px;
font-size: 15px;
}
input:focus{
border: 1.5px solid #1f52f9;
}
.name{
display: inline-block;
}
input[type="name"]{
display: block;
margin: 30px 0 0 10px;
}
input[type="username"]{
display: block;
width: 390px;
margin: 10px 0 0 10px;
}
.gmail{
position: relative;
display: block;
top: -47px;
left: 330px;
font-family:roboto;
color: #333;
font-size: 15px;
cursor: default;
}
.pass{
display: inline-block;
}
.password{
display: block;
width: 140px;
margin: 0 5px 0 10px;
}
label{
position: relative;
font-family:roboto;
color: #555;
font-size: 15px;
pointer-events: none;
left: 20px;
top: -28px;
transition: .2s all;
}
input:focus ~label,
input:valid ~ label{
top: -49px;
left: 15px;
background: #fff;
padding: 0 5px;
font-size: 10px;
color: #1f52f9;
}
a{
position: relative;
font-family: roboto;
text-decoration: none;
display: block;
}
.line1{
font-size: 12px;
margin: -30px 0 0 15px;
}
.line2{
color: #1144ed;
font-size: 15px;
margin: 20px 0 20px 15px;
}
.line3{
font-size: 12px;
margin: -10px 0 0 15px;
width: 310px;
}
.line4{
font-size: 15px;
margin: 20px 8px;
color: #4971f6;
display: inline-block;
font-family: arial rounded mt;
}
input[type="submit"]{
background: #4971f6;
color: #fff;
border: none;
padding:10px 30px;
border-radius: 5px;
margin: 40px 0 30px 180px;
cursor: pointer;
font-size: 15px;
}
input[type="submit"]:hover{
background: #254fdb;
}
.iconeye{
display: inline-block;
}
#eye{
display: block;
position: relative;
top: -18px;
width:27px;
cursor: pointer;
}
.side-image{
display: inline-block;
position: relative;
top: 50px;
left: 50%;
transform: translate(50%,50%);
}
.side-logo{
width: 230px;
}
0 Comments