In this post we will be creating the following login page in pure html and css.
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.
You can get the code from github: https://github.com/AliSinaYOusofi/Youtube_Codes/tree/main/html_css_js/login_page
Top comments (0)