(Source Code) Google Login Page With HTML & CSS
Hello! Frontend Web Developers. In this blog post, we will make a Google Login Page with pure HTML & CSS.
Creating a clone of a Google login page or login pages of popular websites is one of the best ways to practice our frontend web skills. This helps us to understand how we can use HTML structure and CSS styles to create modern web pages.
Also Read: Instagram Login Page With HTML & CSS
We will also see key concepts used in to make google login page that will boost your confidence to use these fundamental technologies more efficiently.
Key Concepts Used To Make Google Login Page:
- HTML Select & Option Property
- CSS Margin & Padding
- Language Selector & Input Feilds
- CSS Button & Link Styling
HTML Structure Of Google Login Page
Google Sign-In Form Section
The main section of the HTML has a class google-signin-form and text-center. This section centers its content.
<section class="google-signin-form text-center">Mid Content
Inside the section, there is a div with class mid-content. This div contains the main content of the form.
<div class="mid-content">Logo and Text
Within mid-content, there is a div with class logo. It contains an image, a heading, and a paragraph.
<div class="logo">
<img src="https://i.ibb.co/ryD8Bdt/g-logo.png" alt="g-logo">
<h2>Sign in</h2>
<p>Use your Google Account</p>
</div>Form
Below the logo, there is another div with class form. It contains the form element.
<div class="form">
<form action="#">
<input type="text" class="default-input" placeholder="Email or phone">Link and Bottom Section
Inside the form, there is a div with class link. This div contains a link for forgotten email and a paragraph with another link. Below this is the div with class bottom that contains links for creating an account and a button for the next step.
<div class="link text-left">
<a href="#">Forgot email?</a>
<p>Not your computer? Use a Private Window to sign in.<br>
<a href="#">Learn more</a></p>
<div class="bottom">
<a class="account" href="#">Create account</a>
<button type="submit" class="btn">
<a href="#">Next</a>
</button>
</div>
</div>
</form>
</div>Footer Section
Below the main section, there is a footer element with class footer and clearfix. This section has language selection and footer menu links.
<footer class="footer clearfix">
<div class="">
<div class="language left text-left">
<select name="language" id="">
<option value="1">Afrikaans</option>
<!-- other options -->
</select>
</div>
<div class="footer-menu right text-right">
<ul>
<li><a href="#">Help</a></li>
<!-- other menu items -->
</ul>
</div>
</div>
</footer>Understanding CSS Styling Of Google Login Page
Global Styles
The * selector resets the margin and padding for all elements.
* {
margin: 0;
padding: 0;
}Text Alignment
Classes for text alignment: .text-center centers text, .text-left left-aligns text, and .text-right right-aligns text.
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}Mid Content Container
The .mid-content the class centers its content and limits the maximum width.
.mid-content {
max-width: 720px;
margin: auto;
}Link Styles
The a tag styles link with no text decoration and a specific color.
a {
text-decoration: none;
color: #1a72e8;
}Image Styles
The img tag sets the maximum width of images to 100% to make them responsive.
img {
max-width: 100%;
}Clearfix
The .clearfix class clears floats.
.clearfix::after {
content: "";
display: block;
clear: both;
}Float Helpers
Classes for floating elements left or right: .left floats left, and .right floats right.
.right {
float: right;
}
.left {
float: left;
}Main Body Styles
The body, h2, p, and a elements use the “Roboto” font.
body, h2, p, a {
font-family: 'Roboto', sans-serif;
}Google Sign-In Form Styles
The .google-signin-form class sets height, width, border, margin, and border-radius.
.google-signin-form {
height: 980px;
width: 835px;
border: 1px solid #ddd;
margin: auto;
margin-top: 250px;
border-radius: 15px;
}Logo Styles
The .logo img sets the height of the logo image. It also sets the top and bottom margins.
.logo img {
height: 55px;
margin-top: 100px;
margin-bottom: 23px;
}Heading and Paragraph Styles
The h2 tag styles the heading with font size, weight, and margin. The p tag styles the paragraph with font size and weight.
h2 {
font-size: 50px;
font-weight: 400;
margin-bottom: 20px;
}
p {
margin-top: 0;
font-size: 32px;
font-weight: 400;
}Form Styles
The form class adds a margin at the top. The .form p sets the text color. The .default-input sets the width, padding, font size, border radius, and border. The default-input:focus sets the border color on focus.
form {
margin-top: 70px;
}
.form p {
color: #5f626f;
}
.default-input {
width: 650px;
padding: 30px 30px;
font-size: 33px;
border-radius: 6px;
border: 2px solid #ddd;
}
.default-input:focus {
border: 2px solid #1a72e8;
}Link Styles
The .link class positions the element, and sets font size, margin, and weight. The link a sets styles for the link. The link p sets margin, font size, and weight.
.link {
position: relative;
left: 15px;
top: 0;
font-size: 30px;
margin-top: 15px;
font-weight: 400;
}
.link a {
}
.link p {
margin-top: 90px;
font-size: 28px;
font-weight: 400;
}Bottom Section Styles
The .bottom class sets the top margin. The .bottom .btn sets the position, background, padding, font size, weight, and border radius. The .bottom .btn a sets the link color. The .bottom .account sets padding, border radius, position, and weight.
.bottom {
margin-top: 90px;
}
.bottom .btn {
position: relative;
left: 265px;
background: #1a72e8;
padding: 15px 60px;
font-size: 30px;
font-weight: 500;
border-radius: 7px;
}
.bottom .btn a {
color: #fff;
}
.bottom .account {
padding: 15px 20px;
border-radius: 8px;
position: relative;
right: 22px;
font-weight: 400;
}Footer Styles
The .footer class styles the footer section. The .language class sets the width. The .language select sets margin, border, font size, padding, and weight. The .footer-menu class sets the width. The .footer-menu ul sets margin. The .footer-menu ul li styles list items. The .footer-menu ul li a styles links.
.footer {
}
.language {
width: 48%;
}
.language select {
margin-left: 60px;
border: none;
font-size: 24px;
margin-top: 35px;
padding: 10px 16px;
font-weight: 400;
}
.footer-menu {
width: 48%;
}
.footer-menu ul {
margin-right: 72px;
margin-top: 45px;
}
.footer-menu ul li {
display: inline-block;
}
.footer-menu ul li a {
display: block;
font-size: 24px;
line-height: 1.5em;
color: #363b3f;
font-weight: 400;
margin-left: 30px;
padding: 0px 10px;
}Source Code Of Google Login Page ( HTML & CSS )
HTML:
<section class="google-signin-form text-center">
<div class="mid-content">
<div class="logo">
<img src="https://i.ibb.co/ryD8Bdt/g-logo.png" alt="g-logo">
<h2>Sign in</h2>
<p>Use your Google Account</p>
</div>
<div class="form">
<form action="#">
<input type="text" class="default-input" placeholder="Email or phone">
<div class="link text-left">
<a href="#">Forgot email?</a>
<p>Not your computer? Use a Private Window to sign in.<br>
<a href="#">Learn more</a>
</p>
<div class="bottom">
<a class="account" href="#">Create account</a>
<button type="submit" class="btn">
<a href="#">Next</a>
</button>
</div>
</div>
</form>
</div>
</div>
</section>
<footer class="footer clearfix">
<div class="">
<div class="language left text-left">
<select name="language" id="">
<option value="1">Afrikanns</option>
<option value="2">azarbaycan</option>
<option value="3">català</option>
<option value="4">Čeština</option>
<option value="5">Dansk</option>
<option value="6">Deutsch</option>
<option value="7">eesti</option>
<option value="8">English (United Kingdom)</option>
<option selected>English (United States)</option>
<option value="10">Español (España)</option>
<option value="11">বাংলা</option>
</select>
</div>
<div class="footer-menu right text-right">
<ul>
<li><a href="#">Help</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
</ul>
</div>
</div>
</footer>
Also Read: Facebook Login Page With HTML & CSS
CSS:
<style>
*{
margin: 0;
padding: 0;
}
.text-center{
text-align: center;
}
.text-left{
text-align: left;
}
.text-right{
text-align: right;
}
.mid-content{
max-width: 720px;
margin: auto;
}
a{
text-decoration: none;
color: #1a72e8;
}
img{
max-width:100%;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
.right{
float: right;
}
.left{
float: left;
}
/* Begin Main Css */
body,h2,p,a{
font-family: 'Roboto', sans-serif;
}
.google-signin-form{
height: 980px;
width: 835px;
border: 1px solid #ddd;
margin: auto;
margin-top: 250px;
border-radius: 15px;
}
.logo img{
height: 55px;
margin-top: 100px;
margin-bottom: 23px;
}
h2{
font-size: 50px;
font-weight: 400;
margin-bottom: 20px;
}
p{
margin-top: 0;
font-size: 32px;
font-weight: 400;
}
/* Form */
form{
margin-top: 70px;
}
.form p{
color: #5f626f;
}
.default-input{
width: 650px;
padding: 30px 30px;
font-size: 33px;
border-radius: 6px;
border: 2px solid #ddd;
}
.default-input:focus{
border: 2px solid #1a72e8;
}
.link{
position: relative;
left: 15px;
top: 0;
font-size: 30px;
margin-top: 15px;
font-weight: 400;
}
.link a{
}
.link p{
margin-top: 90px;
font-size: 28px;
font-weight: 400;
}
.bottom{
margin-top: 90px;
}
.bottom .btn{
position: relative;
left: 265px;
background: #1a72e8;
padding: 15px 60px;
font-size: 30px;
font-weight: 500;
border-radius: 7px;
}
.bottom .btn a{
color: #fff;
}
.bottom .account{
padding: 15px 20px;
border-radius: 8px;
position: relative;
right: 22px;
font-weight: 400;
}
/* Footer */
.footer{
}
.language{
width: 48%;
}
.language select{
margin-left: 60px;
border: none;
font-size: 24px;
margin-top: 35px;
padding: 10px 16px;
font-weight: 400;
}
.footer-menu{
width: 48%;
}
.footer-menu ul{
margin-right: 72px;
margin-top: 45px;
}
.footer-menu ul li{
display: inline-block;
}
.footer-menu ul li a{
display: block;
font-size: 24px;
line-height: 1.5em;
color: #363b3f;
font-weight: 400;
margin-left: 30px;
padding: 0px 10px;
}
</style>Last Updated: June 18, 2024
About Author
