Login page using flexbox
Tags: webdev, html, css, beginners
Published: 2023-03-12 14:57:20

In this post we will be creating the following login page in pure html and css. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ia75y8wrrax8ew5yt83w.png)

This post is intended for beginners.

## The HTML

```
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>
    <div class="container">
        <img src="https://images.pexels.com/photos/3585089/pexels-photo-3585089.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="image" />
        <div>
            
        </div>
        <div class="inputs">
            <div class="email_cont">
                <input type="text" placeholder="email" />
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25" />
                  </svg>
            </div>
            <div class="pass_cont">
                <input type="password" placeholder="password" />
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
                  </svg>                  
            </div>
            <button> Sign In</button>
            <a href="./singup.html">Don't have an account? Sign up</a>
        </div>
    </div>
</body>
</html>
```

## And the CSS part
`
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container img {
    width: 300px;
    height: 70%;
    border-radius: 20px;
}

.container svg {
    width: 15px;
    height: 100%;
    position: absolute;
    right: 5px;
}

.inputs {
    position: relative;
    display: flex;
    flex-flow: column wrap;
    gap: 20px;
    margin-left: 10px;
}

.email_cont, .pass_cont {
    position: relative;
}

.inputs input {
    width: 100%;
    border: none;
    outline: none;
    background-color: aliceblue;
    padding: 7px 6px;
    border-radius: 10px;
}


button {
    border: none;
    outline: none;
    padding: 5px 8px;
    border-radius: 10px;
    transition: all 0.1s ease;
}

button:hover {
    transform: translateY(-1px);
    cursor: pointer;
}

a {
    text-decoration: none;
    color: black;
    transition: all 0.1s ease-in;
}

a:hover {
    color:blue;
}

@media screen and (max-width: 480px) {
    .container {
        flex-flow: column wrap;
    }
    .inputs {
        margin-top: 10px;;
    }
}
`

## The final result

This login page is responsive.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbngn5f4nqcc3wxx6wo9.png)

You can get the code from github: https://github.com/AliSinaYOusofi/Youtube_Codes/tree/main/html_css_js/login_page