CSS Login Mockup

Posted on

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.

HTML + CSS (DEMO)

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:

Leave a Reply

Your email address will not be published. Required fields are marked *