How to make login page fast HTML& CSS new Look | Awesome look design create by techno Sunita
html source code
CSS source code
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
body {
font-family: 'Open Sans', sans-serif;
color: #292929;
}
.bg {
background-attachment: fixed;
background-repeat: no-repeat;
position: relative;
background-position: center center;
background-size: cover;
height: 100vh;
}
.bg::before {
content: "";
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: 0;
}
.loginPage {
background-color: #fff;
padding: 60px;
border-bottom: 8px solid blue;
width: 460px;
margin: 40px auto;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
border-radius: 4px;
}
.loginPage h3 {
text-align: center;
font-size: 35px;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 30px;
}
.loginPage input {
width: 100%;
height: 45px;
display: block;
border: 2px solid #ccc;
border-radius: 2px;
margin-bottom: 20px;
padding: 10px 15px;
transition: ease-in all 0.3s;
}
.loginPage input:hover {
border: 2px solid blue;
}
.loginPage ul {
margin: 30px 0px 0px 0px;
padding: 0px;
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
.loginPage ul>li {
flex: 1;
}
.loginPage ul>li>input {
width: 20px;
display: inline-block;
margin-bottom: 0;
padding: 0px;
height: auto;
}
.loginBtn {
width: 100%;
display: block;
padding: 12px 10px;
text-align: center;
background-color: blue;
color: #fff;
text-transform: uppercase;
border: 2px solid blue;
margin-bottom: 20px;
cursor: pointer;
margin-top: 55px;
}
.ragisterBtn {
width: 100%;
display: block;
padding: 12px 10px;
text-align: center;
text-transform: uppercase;
color: blue;
border: 2px solid blue;
cursor: pointer;
background-color: #fff;
}
.emailIcon, .passwordIcon {
position: relative;
}
.emailIcon::before, .passwordIcon::before {
position: absolute;
right: 20px;
top: 10px;
font-family: 'FontAwesome';
font-size: 18px;
}
.emailIcon::before {
content: '\f003';
}
.passwordIcon::before {
content: '\f084';
}
No comments:
Post a Comment