Gmail style login page design using HTML and CSS.

  • 34223

Gmail is one the top and best email service provider in the world. Almost every internet users of the world use GMAIL for their email services. Almost every web developer wanted to know how to design Gmail style login page with very easy steps. In this tutorial todays i am going to explain a simple HTML and CSS coding for creating Gmail style Login page . This example can help you to build a clone of Gmail login page.

Gmail style Login Page Output:

gmail-login-page-html

index.html:

This is the html file for front-end design. Here is the code of this file.

<html>
<title>Gmail Style Login page Design using HTML and CSS by</title>
<head>
	<link type="text/css" rel="stylesheet" href="style.css" />
	</head>
	<body>
	<center>
	<div class="base">
	<div id="logo">
	<img src="logo.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="profile-img.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="info3"><a href="#"/>Need help?</a></div>
	</div>
	<div id="info4"> <a href="#"/>Create account</a></div>
	<div id="info5">One Google Account for everything Google</div>
	div><img src="footer-logo.png" id="logo2" /></div>
	<div id="bottom">
	<ul >
	<li>&copy; www.coderglass.com</li>
		<li>Designed by Varun Singh </li>
		</ul>
	</div>
		
	</div>
	</center>
	</body>
	
</html>

style.css:

This file is used to set the every body part and other things on perfect postion.

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:17px;
	font-family: 'Open Sans', sans-serif;
	font-size:18px;
	font-weight:bold;
	color:#555557;
	
}
#form1{
	margin-top:17px;
	width:355px;
	height:280px;
    padding-top:40px;
	background:#f7f7f7;
	box-shadow: 0px 1px 1px 1px #c6c1c1;

}
#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;
     
	
}
Tags:
Varun Singh
Varun Singh

Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section. We will be very happy to hear that.

If you like my tutorial, please follow us on facebook, Insta, LinkedIn and Twitter.
I need your support to continue.