So, here is the example of the login page using custom CSS. You can check on the demo how it look. I included here the CSS.
CSS
body {
margin: 0px;
font-family: Roboto, sans-serif;
}
.triangle {
border-top: 50vh solid transparent;
border-bottom: 50vh solid transparent;
border-right:100vh solid #ffffffd1;
}
.container {
background-image: url('http://photos.iium.edu.my/flagship/river_of_life.jpg');
background-size: cover;
width: 100%;
height: 100vh;
position: absolute;
z-index: -1;
}
.logo {
top:20px;
right:20px;
position: absolute;
}
.logo img {
width:200px;
}
.form {
left: 10%;
top:100px;
position: absolute;
}
.form a {
color:#000;
}
.form {
max-width: 350px;
padding: 50px;
background-color: #ffffffab;
}
.form h2 {
display: inline-block;
padding: 10px;
font-size: 1.5em;
}
.active {
border-bottom: 2px solid #00918e;
}
.form input {
display: block;
padding: 10px;
margin: 5px;
width:300px;
}
.form .check{
display: inline-block;
padding-right:0px;
width:20px;
}
.form .login {
width:325px;
}
.footer {
bottom: 30%;
right:20px;
position: absolute;
width: 300px;
}
.footer ul {
padding: 0px;
}
.footer ul li {
display: inline-block;
padding: 5px;
font-size: 0.8em;
}
.footer ul li a {
text-decoration: none;
color:#00918e;
}
Please follow and like us: