A user interface element called a login form is used to allow a user to grant access to a restricted area of a website. Only authorized users can access privileged information or perform certain actions by providing certain information directed at the login form. Today we will create a Responsive CSS Flexbox form layout that looks great on small devices too. The video below shows how to code this CSS Flexbox Responsive Layout.
Login forms play an important role in securing certain sections of any website or application. In any login form, users have to give some common credentials, and that is username and password. Through this, users' privacy can be maintained and user accounts and sensitive data can be kept secure.
You May Also Like:
- Zoom an Image on Page Scroll
- Responsive Layout with Typing Text Effect
- Custom Tabs HTML CSS JavaScript
Responsive web design techniques are adopted to make the web pages of a website render well on different devices and window or screen sizes. This web design approach provides the best viewing experience on devices ranging from desktop computers to smartphones.
One of the layout models of CSS is CSSGrid and another is CSS Flexbox. Today we will design our login form using CSS Flexbox, or Flexible Box Layout. CSS Flexbox is an ideal layout model for the efficient arrangement of items within a container. The CSS Flexbox layout model plays an effective role in making a login form responsive by adjusting and aligning elements appropriately based on the screen size. Designers or developers design forms using CSS Flexbox or another layout model to prevent issues like overflow or cramped layouts on small screens.
<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Login Form Design using flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="form-box">
<div class="wrapper">
<div class="img-area">
<img src="1.png" alt="">
</div>
<div class="form-area">
<h3>Login Form</h3>
<form>
<div class="single-form">
<input type="text" placeholder="Username" />
</div>
<div class="single-form">
<input type="password" placeholder="Password" />
</div>
<input type="submit" value="Login"/>
</form>
</div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: poppins;
background: #88a9f0;
}
.form-box {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
background: #fff;
padding: 20px;
width: 800px;
height: 500px;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}
.img-area {
flex: 1;
padding: 20px;
text-align: center;
}
.img-area img {
max-width: 100%;
height: auto;
}
.form-area {
flex: 1;
padding: 20px;
background-color: #fff;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.form-area h3 {
font-size: 24px;
margin-bottom: 20px;
}
.single-form {
margin-bottom: 20px;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="submit"] {
background-color: #007BFF;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
@media (max-width: 768px) {
.wrapper {
flex-direction: column
text-align: center;
height: auto;
width: auto;
}
.img-area, .form-area {
flex: none;
}
.img-area {
margin-bottom: 20px;
}
}
For the Original Post CLICK HERE
Top comments (0)