Gmail style login page design using HMTL and CSS.

POSTED

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.
Now i am going to display the output of our Gmail style Login page.

Gmail style Login Page Output:

Here is the output of the gmail style login page .

gmail-style-homepage


download download


Implementation of code:


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 - coder Glass</title>
	<head>
		<link type="text/css" rel="stylesheet" href="style.css" />
		
        <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
		<link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
		<meta name="Description" content="Gmail Style Login page Design using HTML and CSS - coder Glass"/>
		
        <meta name="Keywords" content="free, tutorial, on, Java programming, jsp, ejb, html, css, xml, java script, jquery, ajax, php, sql, mysql, database,
	    jdbc, odbc, spring, struts, hibernate, array, ANT, servlet, awt, code, programe, gmail, programming, Latest,facebook script, google script, 
	    twitter script,ecommerce,  Technologies, Free,  Tutorials, References, Examples,  coder glass, coderglas, coder"/>

<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="fb:app_id" content="933988933316672" />
<meta property="og:site_name" content="www.coderglass.com" />
<meta name="author" content="coderglass.com">
	</head>
	<body>
	<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-73364464-1', 'auto');
  ga('send', 'pageview');

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

The End:

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, Google + and Twitter. I need your support to continue.


Advertise Here

Comments: