In this tutorial, we will be creating a simple login page using Tripline CSS. Okay, Let's get started...
1. Creating the Login Page
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Login Page</title>
<link rel="stylesheet" href="Tripline/tripline.css">
<style>
.tln-hero-image {
background-image: url(photo.jpg);
height:70%;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="tln-card tln-red">
<div class="tln-container">
<center><h1><b>LOGIN FORM</b></h1></center>
</div>
</div>
<div class="tln-hero-image">
<div class="tln-hero-text">
<form>
<div class="tln-form">
<label for="form1">Username</label>
<input class="tln-input"/>
</div>
<div class="tln-form">
<label for="pass">Password</label>
<input class="tln-input" type="password"/>
</div>
<div class="tln-form">
<input class="tln-checkbox" type="checkbox"/>Remember Me
</div>
<div class="tln-form">
<input class="tln-red" type="submit"/>
</div>
</form>
</div>
</div>
</body>
</html>
The following code creates a login page. All the codes are self explanatory. Save the above code as login.html and open it. You will see the following site created. The Login page is fully responsive.
No comments:
Post a Comment