Scribd
Upload
24 views3 pages

Google Account Sign-In Page

This document is an HTML template for a Google Accounts sign-in page. It includes a login form with fields for email and password, as well as links for forgotten email and account creation. The design features a clean layout with responsive styling for a user-friendly experience.

Uploaded by

Shubhr Gunjan
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
24 views3 pages

Google Account Sign-In Page

This document is an HTML template for a Google Accounts sign-in page. It includes a login form with fields for email and password, as well as links for forgotten email and account creation. The design features a clean layout with responsive styling for a user-friendly experience.

Uploaded by

Shubhr Gunjan
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sign in – Google Accounts</title>
<style>
* {
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
}

body {
background-color: #f2f2f2;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}

.login-container {
background-color: #fff;
max-width: 400px;
width: 100%;
padding: 40px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
border-radius: 8px;
text-align: center;
}

.login-container img {
width: 75px;
margin-bottom: 20px;
}

h1 {
font-size: 24px;
font-weight: 500;
margin-bottom: 8px;
}

p {
color: #5f6368;
font-size: 14px;
margin-bottom: 25px;
}

input[type="email"],
input[type="password"] {
width: 100%;
padding: 14px 12px;
margin-bottom: 10px;
border: 1px solid #dadce0;
border-radius: 4px;
font-size: 16px;
}
input[type="email"]:focus,
input[type="password"]:focus {
outline: none;
border: 2px solid #4285f4;
}

.forgot-email {
text-align: left;
margin-bottom: 30px;
}

.forgot-email a {
font-size: 14px;
color: #1a73e8;
text-decoration: none;
}

.actions {
display: flex;
justify-content: space-between;
align-items: center;
}

.actions a {
font-size: 14px;
color: #1a73e8;
text-decoration: none;
}

.next-btn {
background-color: #1a73e8;
color: white;
border: none;
padding: 10px 24px;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
}

.next-btn:hover {
background-color: #1669c1;
}

.footer {
text-align: center;
margin-top: 20px;
font-size: 12px;
color: #777;
}
</style>
</head>
<body>
<div class="login-container">
<img
src="[Link]
png" alt="Google">
<h1>Sign in</h1>
<p>to continue to Gmail</p>
<form>
<input type="email" placeholder="Email or phone" required>
<div class="forgot-email">
<a href="#">Forgot email?</a>
</div>

<input type="password" placeholder="Enter your password" required>


<div class="actions">
<a href="#">Create account</a>
<button type="submit" class="next-btn">Next</button>
</div>
</form>
</div>
</body>
</html>

You might also like