Hot Posts

Google Sign up form Using html and css

 


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


Post a Comment

0 Comments