2.5/5 - (4 votes)

Creating a login form that is both functional and visually appealing is essential for any web application. In this blog, we’ll dive into the intricacies of designing a clean and modern login form using HTML and CSS. The form we’ll explore is styled to be simple yet effective, featuring a Twitter-inspired design. This guide will cover the essential elements of the form, including layout, styling, and responsive design considerations.

Table of Contents

The HTML Structure for layout of login form

Let’s start with the HTML code, which forms the backbone of our login form. The HTML structure is straightforward and provides a solid foundation for the CSS styling. Here’s a breakdown of each part:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>designing form to login</title>
</head>
<style>
    /* CSS code goes here */
</style>
<body>
    <div class="container">
        <div class="brand-logo"></div>
        <div class="brand-title">TWITTER</div>
        <div class="inputs">
            <label>EMAIL</label>
            <input type="email" placeholder="xyz@gmail.com"/>
            <label>PASSWORD</label>
            <input type="password" placeholder="min 6 character long"/>
            <button type="submit">LOGIN</button>
        </div>
        <a href="https://twitter.com/prathkum">MADE BY CODERSHOT</a>
    </div>
</body>
</html>

In this HTML structure:

<div class="container"> serves as the main wrapper for our form.
<div class="brand-logo"> is used to display the Twitter logo.
<div class="brand-title"> contains the title of the form.
<div class="inputs"> holds the input fields for email and password along with the login button.
<a href="https://twitter.com/prathkum"> is a link for crediting the designer.

Styling with CSS

The real magic happens in the CSS, where we define the look and feel of the form. Let’s dissect the CSS code and understand how it contributes to the form’s design:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;900&display=swap');

input {
    caret-color: red;
}

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    background: #ecf0f3;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    place-items: center;
    overflow: hidden;
    font-family: Poppins, sans-serif;
}

.container {
    position: relative;
    width: 350px;
    height: 500px;
    border-radius: 20px;
    padding: 40px;
    box-sizing: border-box;
    background: #ecf0f3;
    box-shadow: 14px 14px 20px #cbced1, -14px -14px 20px white;
}

.brand-logo {
    height: 100px;
    width: 100px;
    background: url("https://img.icons8.com/color/100/000000/twitter--v2.png");
    margin: auto;
    border-radius: 50%;
    box-sizing: border-box;
    box-shadow: 7px 7px 10px #cbced1, -7px -7px 10px white;
}

.brand-title {
    margin-top: 10px;
    font-weight: 900;
    font-size: 1.8rem;
    color: #1da1f2;
    letter-spacing: 1px;
}

.inputs {
    text-align: left;
    margin-top: 30px;
}

label, input, button {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    outline: none;
    box-sizing: border-box;
}

label {
    margin-bottom: 4px;
}

label:nth-of-type(2) {
    margin-top: 12px;
}

input::placeholder {
    color: gray;
}

input {
    background: #ecf0f3;
    padding: 10px;
    padding-left: 20px;
    height: 50px;
    font-size: 14px;
    border-radius: 50px;
    box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
}

button {
    color: white;
    margin-top: 20px;
    background: #1DA1F2;
    height: 40px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 900;
    box-shadow: 6px 6px 6px #cbced1, -6px -6px 6px white;
    transition: 0.5s;
}

button:hover {
    box-shadow: none;
}

a {
    position: absolute;
    font-size: 8px;
    bottom: 4px;
    right: 4px;
    text-decoration: none;
    color: black;
    background: yellow;
    border-radius: 10px;
    padding: 2px;
}

h1 {
    position: absolute;
    top: 0;
    left: 0;
}

Key Elements of the CSS Design

Font and Body Styling:
- We import the Poppins font from Google Fonts for a modern look.
- The body is styled to fill the viewport with a flexbox layout, centering the form both horizontally and vertically.
Container Design:
- The .container class defines the form’s overall box, including dimensions, border radius, padding, and background. The shadow effects create a subtle 3D effect, enhancing the form’s visual appeal.
Brand Logo and Title:
- The .brand-logo uses a circular Twitter logo, which is centrally aligned and styled with shadows to give it depth.
- The .brand-title is styled to match Twitter’s brand colors and uses bold text for emphasis.
Input Fields and Button:
- Inputs are styled with rounded corners and an inset shadow effect for a subtle 3D appearance.
- The button is designed with a striking blue background, rounded corners, and a hover effect that removes the shadow to indicate interactivity.
Additional Elements:
- The link in the bottom corner provides credit to the creator, styled with a small font size and a bright yellow background to stand out.

Also keep learning with us !

Conclusion

This login form demonstrates how simple HTML and CSS can be combined to create a visually appealing and functional design. By leveraging modern styling techniques and a well-thought-out layout, you can build forms that not only look good but also enhance user experience. Whether you’re designing a login form for a personal project or a professional application, the principles demonstrated here will serve as a strong foundation for creating effective and attractive web forms.

0 0 votes

Course Rating