Welcome to this tutorial where we’ll going to create a beautiful login page with fullscreen background using just HTML and CSS.
Did you know the concept of “logging in” dates back to the early 1960s? Computer scientists used time-sharing systems where multiple users shared a single machine, and they had to “log in” to access their files!
Some of the quirkiest login pages belong to games and entertainment sites. Netflix, for example, famously keeps its design minimal so users can jump straight into binge-watching mode without distractions.
The page we’re building will be very simple with just the essential elements. So, let’s begin!
Want to Save this Article?
Image Preview and Demo
Here’s the final result, you can view a live preview here: VIEW DEMO
You can also download all the tutorial files at the end of this tutorial as a handy template that you can customize yourself.
And here’s an image preview:
The File and Folder Structure
Here you can see the file and folder structure of our page. It’s pretty simple. We’re going to reference it in various parts of the tutorial. So I created this helpful tree diagram:
The HTML code will go inside the file “index.html”. The CSS code will go inside the “style.css” file. We’ll use the “assets” folder for other resources needed in our page, in this case, for the background image and the “favicon” image, the small icon in the browser tab.
Let’s Set Up Our HTML file
Now we’ll get into the actual coding of the page. We’ll start with HTML. So open your favorite text editor and let’s get started. You can just use Notepad or Notepad++, or any editor you like, Google can give you a lot of suggestions. I, for example, use Eclipse.
Let’s create the “head” and “body” sections:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login Page Tutorial</title>
</head>
<body>
<!-- Here will go our page content -->
</body>
</html>
We have used three HTML tags: html, head, and body. In the head we have added the charset and viewport set up. We’ve also added the page title.
Now we’ll include some useful resources in the head part:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login Page Tutorial</title>
<!-- CSS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="icon" href="assets/images/favicon.ico" sizes="32x32">
</head>
<body>
<!-- Here will go our page content -->
</body>
</html>
We’ve imported the Roboto Google font, a modern font that will make our page look beautiful. The code above is provided directly by Google, after a simple configuration where you choose the font styles you need.
Next, we include the “style.css” file: here will go all our CSS code. And lastly, we add the favicon image.
We begin creating our login form
Now that our initial structure is ready, we begin adding the actual page content. From now on, I’ll show only the “body” part of the HTML code. We add a “container” div tag.
<body>
<div class="container">
</div>
</body>
We add the page title and description line:
<body>
<div class="container">
<div class="page-title">
<h1>Our Beautiful Login Page</h1>
<p>
We have been working very hard to create the new version of our product. It comes with a lot of new features. Log in below and give it a try:
</p>
</div>
</div>
</body>
We’ve added a “page-title” div tag that will contain the actual title and description. We add the title in a “h1” tag and the description in a “p” tag. H1 means “Heading 1” in HTML, and it’s used for text headings and goes from H1 to H6. The main title of a page is usually created using H1. Then sub-titles use H2, sub-sub-titles H3, and so on.
Next we add our login form:
<body>
<div class="container">
<div class="page-title">
<h1>Our Beautiful Login Page</h1>
<p>
We have been working very hard to create the new version of our product. It comes with a lot of new features. Log in below and give it a try:
</p>
</div>
<form class="login-form" action="" method="post">
<h2>Fill in the form below to get instant access!</h2>
<div>
<label for="login-email">Email:</label>
<input type="text" id="login-email" name="login-email" placeholder="your email...">
</div>
<div>
<label for="login-password">Password:</label>
<input type="password" id="login-password" name="login-password" placeholder="your password...">
</div>
<div>
<button type="submit">Log in</button>
</div>
</form>
</div>
</body>
We add the form using the “form” HTML tag. You can see that we’ve added to the “form” tag the following attributes:
- a “login-form” class, so we can style the form later with CSS
- an “action” attribute, this is used when you implement the server-side validation of the form, where you check if the login and password is valid. We’ll not cover it in this tutorial.
- the method “post” attribute, this is used to specify how you’ll send the form data. Not covered in this tutorial.
Next we add a form title with the “h2” tag.
<!-- ... --> <h2>Fill in the form below to get instant access!</h2> <!-- ... -->
Then we add the input field for the user’s email:
<!-- ... --> <div> <label for="login-email">Email:</label> <input type="text" id="login-email" name="login-email" placeholder="your email..."> </div> <!-- ... -->
We use the “input” HTML tag for the input field and the “label” tag to label the field. We can see some attributes in these tags. Let’s explain them:
- The type=”text” attribute in the input field means that it’s, indeed, a text field. The password field will have a type=”password” attribute.
- The id=”login-email” is the id of this tag and it must be the same as the for=”login-email” of the “label” tag.
- The name=”login-email” is needed when we send the data to the server, it’s not part of this tutorial.
- And the placeholder=”your email…” attribute is a placeholder for this field, the text message that appears in the input field when it’s empty.
Next, the password input field is the same logic as the email field, you can see the code above.
As you may notice, we wrap these fields and their labels in “div” tags for easy styling if needed later.
Lastly, we add the submit button:
<!-- ... --> <div> <button type="submit">Log in</button> </div> <!-- ... -->
Pretty simple, it explains itself.
To conclude, we add a page footer:
<!-- ... -->
</form>
<footer>Beautiful Login Page Tutorial by <a href="https://azmind.com">AZMIND</a></footer>
</div>
</body>
</html>
A simple message with a link, in this case to the Azmind website.
Styling our page
Now that the HTML code is completed, our form looks like this:
We need to style it, otherwise it’s not beautiful like our tutorial intro suggests 🙂
Open the “style.css” file, or create it if you already haven’t. It’s in the same folder as the “index.html” file, you can refer to the folder structure diagram above.
We start by adding a CSS Reset to make the page look consistent among (almost) all browsers. Various browsers interpret CSS code in slightly different ways and add their own styles to HTML elements, so we need to reset these styles.
You can find a CSS Reset code on Google, below is the one I’m using here, taken from here if you need the full explanation of the code. We add it at the start of our “style.css” file:
*, *::before, *::after {
box-sizing: border-box;
}
* {
margin: 0;
}
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
input, button, textarea, select {
font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
p {
text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}
#root, #__next {
isolation: isolate;
}
We style the text selection: it’s the color and style of the text when you select it with the mouse, like this:
Here’s the code:
::selection { background: #42bfc2; color: #fff; text-shadow: none; }
Next we style the “body” and “html” tags, the headings “h1”, “h2”, “h3”, and the links:
body, html {
height: 100%;
}
/* Fonts */
body {
font-family: 'Roboto', sans-serif;
font-weight: 300;
color: #fff;
text-align: center;
}
h1 {
font-weight: 100;
font-size: 42px;
}
h2 {
font-weight: 100;
font-size: 28px;
}
h3 {
font-weight: 300;
font-size: 24px;
}
/* Links */
a {
color: #42bfc2;
border-bottom: 1px dashed;
text-decoration: none;
transition: all .15s ease-in-out;
}
a:hover,
a:focus { color: #00aaae; border: none; }
The rules are quite self-explanatory. The “transition” rule defines the transition between two states of an element, like when we hover over a link and it changes color.
Next, we style the page content, starting with the “container” class. Here we add the fullscreen background, by specifying the background image URL and its position and behaviour. We also add some padding to the “container”:
.container {
padding: 60px 20px 60px 20px;
background-image: url(assets/images/background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
We continue with styling the text under the page title, we make it slightly transparent by using a RGBA value for the “color” rule:
.page-title p {
margin-top: 20px;
color: rgba(255, 255, 255, 0.75);
}
Next we style the login form, we set its width, margins, padding, we add a transparent background (RGBA), and we add rounded corners (“border-radius” rule):
.login-form {
width: 600px;
margin: 40px auto 0 auto;
padding: 40px 20px 20px 20px;
background: #444;
background: rgba(0, 0, 0, 0.3);
border-radius: 6px;
}
We style the form title, div tags (that contain the input fields), and input field labels:
.login-form h2 {
margin-bottom: 20px;
}
.login-form div {
margin-bottom: 20px;
}
.login-form label {
display: block;
text-align: left;
}
We continue with the input fields, we style their normal and on-focus states, and their palceholders:
.login-form input {
width: 100%;
margin-top: 5px;
padding: 5px 10px;
background-color: #fff;
border: 3px solid #fff;
color: #666;
font-weight: 300;
border-radius: 6px;
transition: all .15s ease-in-out;
}
.login-form input:focus {
box-shadow: none;
background-color: #fff;
border: 3px solid #42bfc2;
color: #666;
font-weight: 300;
outline: 0;
}
.login-form input::placeholder { color: #888; font-style: italic; font-weight: 300; }
Next we style the submit button, its normal and focus / hover / active states:
.login-form button {
width: 100%;
margin-top: 5px;
padding: 8px 10px;
background-color: #42bfc2;
border: 0;
color: #fff;
font-weight: 300;
cursor: pointer;
border-radius: 6px;
transition: all .15s ease-in-out;
}
.login-form button:hover,
.login-form button:active,
.login-form button:focus,
.login-form button:focus-visible,
.login-form button:active:focus {
background-color: #00aaae;
}
We conclude with the page footer:
footer {
margin-top: 40px;
color: rgba(255, 255, 255, 0.75);
}
We’re Done. What’s Next?
And that’s it. We’re done. Our form now looks beautiful, like this:
You can see a LIVE PREVIEW HERE
and DOWNLOAD the template here:
I hope the tutorial was clear and helpful. If you have any questions, let me know.
In the next tutorial we can:
- make it responsive;
- add a “remember me” button and a “terms and conditions” link;
- change it’s style to light.
Thanks for reading,
Anli