Responsive Card login page only HTML & CSS |Legenddocx Creation |
Responsive Card login page only HTML & CSS |Legenddocx Creation |
Follow the steps to create a responsive Login form using CSS.
Step 1 : Adding HTML
Add an image inside a container and add inputs with matching labels for each field. Wrap a “form” element around them to process the input.
Add an image inside a container and add inputs with matching labels for each field. Wrap a “form” element around them to process the input.
Step 2: Adding CSS
Add the required CSS to design the login page try to keep the design as simple as possible.
Add the required CSS to design the login page try to keep the design as simple as possible.
Program: This code will guide you through comments that how to design and which property is used for which design to create.
Code:---
<html>
<head>
<title>Login Page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="login-div">
<div class="logo"></div>
<div class="title">Virat Kohli</div>
<div class="sub-title">Indian Cricketer </div>
<div class="fields">
<div class="username"><input type="username" class="user-input" placeholder="Username"></div>
<div class="password"><input type="password" class="pass-input" placeholder="Password"></div>
</div>
<button class="signin-button">Login</button>
<div class="link">
<a href="#">Forgot Password</a> or <a href="#">Sign up</a>
</div>
</div>
</div>
</body>
</html>
<style>
.container {
display: flex;
justify-content: center;
flex-direction: row;
}
.login-div {
width: 430px;
height: 700px;
margin: 20px auto;
padding: 60px 35px 35px 35px;
border-radius: 40px;
background: #ecf0f3;
box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #ffffff;
}
.logo {
background: url("virat.png");
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
background-size: cover;
box-shadow: 0px 0px 2px #5f5f5f, 0px 0px 0px 5px #ecf0f3, 8px 8px 15px #a7aaaf, -8px -8px 15px #ffffff;
}
.title {
text-align: center;
font-size: 28px;
padding-top: 24px;
letter-spacing: 0.5px
}
.sub-title {
text-align: center;
font-size: 15px;
padding-top: 7px;
letter-spacing: 3px;
}
.fields {
width: 100%;
padding: 75px 5px 5px 5px;
}
.fields input {
border: none;
outline: none;
background: none;
font-size: 18px;
color: #555;
padding: 20px 10px 20px 5px;
}
.username,
.password {
margin-bottom: 30px;
border-radius: 25px;
box-shadow: inset 8px 8px 8px #cbced1,
inset -8px -8px 8px #ffffff;
}
.signin-button {
outline: none;
border: none;
cursor: pointer;
width: 100%;
height: 60px;
border-radius: 30px;
font-size: 20px;
font-weight: 700;
font-family: 'Loto', sans-serif;
color: #fff;
text-align: center;
background: blue;
box-shadow: 3px 3px 8px #b1b1b1,
-3px -3px 8px #fff;
transition: 0.5s;
}
.signin-button:hover {
background: chocolate;
}
.signin-button:active {
background: blue;
}
.link {
padding-top: 20px;
text-align: center;
}
.link a {
text-decoration: none;
color: chocolate;
font-size: 15px;
}
</style>
Post a Comment