Input:-
<html>
<title>Gmail Style Login page Design using HTML and CSS by</title>
<link rel="shortcut icon" href="https://www.cyclonis.com/images/2020/06/gmail-small-logo-765x402.png" />
<head>
</head>
<body>
<center>
<br><br><h3>This Page Created By Priyanshu Kumar</h3><br>
<div id="logo">
<img src="https://www.freepnglogos.com/uploads/google-logo-png/file-google-logo-svg-wikimedia-commons-23.png" width="118" height="38" />
</div>
<div id="info1">One account. All of Google.</div>
<div id="info2">Sign in to continue to Gmail</div>
<div id="form1">
<div id="form-img">
<img src="http://www.pngall.com/wp-content/uploads/5/Profile-PNG-Clipart.png" width="99" height="99" />
</div>
<div id="mailbox">
<input placeholder="Enter your email" type="mail" name="name"
style="width:270px; height:42px; border: solid 1px #c2c4c6;
font-size:16px; padding-left:8px;" />
</div>
<div><input type="submit" id="button2" value="Next" /></div>
<div id="info4"> <a href="#"/>Create account</a></div>
<div id="info5">One Google Account for everything Google</div>
</div>
</center>
<style>
body{
background:white;
height:700px;
margin:0px;
padding:0px;
}
.base{
position:absolute;
width:100%;
top:0px;
left:0px;
color:gray;
}
#logo{
margin-top:20px;
height:38px;
width:500px;
}
#info1{
width:500px;
margin-top:25px;
font-family: 'Open Sans', sans-serif;
font-size:38px;
color:#555557;
}
#info2{
width:500px;
margin-top:13px;
font-family: 'Open Sans', sans-serif;
font-size:18px;
font-weight:bold;
color:#555557;
}
#form-img{
width:99px;
height:99px;
}
#mailbox{
width:270px;
height:42px;
border-radius:5px 5px 5px 5px;
background:white;
font-size:18px;
margin-top:20px;
border-width: 0px;
border-style:solid;
border-color: blue;
}
#button2{
width:270px;
height:35px;
margin-top:10px;
background:#498af2;
font-family:verdana;
font-size:14px;
color:white;
border-radius:5px 5px 5px 5px;
border-width: 1px;
border-style:solid;
border-color: gray;
cursor:pointer;
outline:none;
}
#info3{
float:right;
margin-top:10px;
font-size:13px;
font-family: 'Open Sans', sans-serif;
color:#498af2;
padding-right:42px;
font-weight:bold;
}
#info3 a{
color:#498af2;
text-decoration:none;
}
#info4{
margin-top:25px;
font-size:13px;
font-family: 'Open Sans', sans-serif;
font-weight:bold;
}
#info4 a{
color:#498af2;
text-decoration:none;
}
#info5{
margin-top:30px;
font-size:13px;
font-family: 'Open Sans', sans-serif;
color:#87898b;
font-weight:bold;
}
#logo2{
margin-top:10px;
height:27px;
width:243px;
}
#bottom {
float:left;
padding:0px;
margin:0px;
}
#bottom ul{
list-style: none;
}
#bottom ul li{
float:left;
margin-left:20px;
}
</style>
</body>
</html>
0 Comments