Author: WittCode
Created: 3/17/2024
Create a login form using HTML and CSS. We will learn about flexbox, importing external CSS files, and more.
Project Structurecreate-a-login-form-using-html-and-css
index.html
styles.css
space.jpg
Below is what we are going to build using HTML and CSS.
First lets write the boilerplate HTML and CSS imports.
index.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Login Page</title><link rel="stylesheet" href="styles.css"><link rel="stylesheet" href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css'></head><body></body></html>
The first link element is for our stylesheet. The second link element is for an external library that allows us to use icons. We need to specify the rel attribute as stylesheet as these are stylesheets (rel is short for relationship).
Now lets write the HTML form. An HTML form is used to collect user input.
index.html<form action="YOUR_ENDPOINT" method="post"><div id="login-container"><!-- Title and Logo --><i style="font-size: xxx-large;" class='bx bxs-planet'></i><h1>Login</h1><!-- Username and password --><input class="login-input" type="text" placeholder="Username" name="username" required><input class="login-input" type="password" placeholder="Password" name="password" required><!-- Submit button --><button class="login-input" type="submit">Login</button><!-- Switch to register --><p>Don't have an account? <a href="#">Register</a></p></div></form>
Now lets style our login page. First lets import the font we will be using.
styles.css@import url('https://fonts.googleapis.com/css?family=Rubik+Moonrocks');
The @import rule allows us to import a style sheet into another style sheet. Here, we are using it to import a Google font. Now lets create some variables for the colors we will be using.
styles.css:root {--primary: white;--secondary: rgba(255, 255, 255, 0.5);--tertiary: black;}
Here we create 3 global CSS color variables by using the :root selector. Now lets create a simple CSS reset to standardize some element properties.
styles.css* {color: var(--primary);margin: 0;padding: 0;box-sizing: border-box;font-family: Rubik Moonrocks;}
Now lets style our body element. We will give it a background image and make it so all its children are centered horizontally and vertically on the screen.
styles.cssbody {display: flex;flex-direction: column;justify-content: center;align-items: center;min-height: 100vh;background-image: url('./space.jpg');background-repeat: no-repeat;background-size: cover;background-position-x: center;background-position-y: center;background-attachment: fixed;}
Now lets style our login container. We will give it a blurred background and position its child elements using flexbox.
styles.css#login-container {display: flex;flex-direction: column;justify-content: space-evenly;align-items: center;background-color: transparent;backdrop-filter: blur(10px);border: 1px solid var(--secondary);width: 450px;height: 550px;padding: 30px;margin: 20px;border-radius: 5px;}
Now lets style our input elements to have rounded edges, a border, and some padding.
styles.css.login-input {border-radius: 20px;border: 1px solid var(--secondary);width: 100%;padding: 10px;}
Lets give our username and password inputs some more specific styling. Including a different color, background color, and some transitions.
styles.cssinput[type=text], input[type=password] {color: var(--primary);background-color: transparent;transition: border-color .2s linear;}
Now lets change the color of the placeholder text inside the inputs. The placeholder text describes the value that the input field expects.
styles.cssinput::placeholder {color: var(--secondary)}
Now lets add some styles to our input elements when they are in focus or being hovered over.
styles.cssinput[type=text]:focus, input[type=text]:hover,input[type=password]:focus, input[type=password]:hover {outline: none;border-color: var(--primary);transition: border-color .2s linear;}
Finally, lets style our submit button. We will give it some coloring and transitions.
styles.cssbutton {color: var(--tertiary);transition: background-color .2s linear, color .2s linear;}button:hover {cursor: pointer;background-color: var(--secondary);color: white;transition: background-color .2s linear, color .2s linear;}
But there we go! If you enjoyed this article please consider supporting me by downloading my chrome extension WittCepter from the chrome web store or checking out my YouTube channel WittCode!