How to create a login page using HTML and CSS

Oleh Admin

Pada September 01, 2020 September 02, 2020

আজ ওয়েব ডেভেলপমেন্ট এর একটি গুরুত্বপূর্ণ একটি পেইজ ডেভেলপমেন্ট করব।যেটি প্রায় সব ওয়েবসাইটেই থেকে থাকে।আজ তেমনিই নিচের মত করে একটি লগইন পেইজ ডিজাইন করব।

ডিজাইনের জন্য CSS ও Bootstarp ব্যবহার করব। বেশীরভাগ ক্ষেত্রেই আমরা বুটস্ট্রাপ ব্যবহার করে পেইজের লে-আউট ডিজাইন করব।

বুটস্ট্রাপ হচ্ছে CSS এর একটি ফ্রেমওয়ার্ক। বুটস্ট্রাপ ব্যবহার করে খুবই সুন্দর ডিজাইন করা যায়। এটি দিয়ে ডিজাইনের কাজ অনেক সহজভাবে করা যায়।

এজন্য প্রথমে Bootstarp ডাইউনলোড করব। নিচের লিংক থেকে Bootstarp ডাইউনলোড করে index.html ফাইলের Header Tag এর মধ্যে এ্যাড করে নিতে হবে।

নিচের মত করে ফাইল লিংক করি

    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" href="assets/fonts/ionicons.min.css">

    <link rel="stylesheet" href="assets/css/Login-Form-Clean.css">

    <link rel="stylesheet" href="assets/css/styles.css">

Folder Structure:

login-form - folder_name
               //index.html
              //assets
                           //bootstrap
                                         //css
-bootstrap.min.css -file_name
                                           //js
                                               -bootstrap.min.js
//js
   -jquery.min.js
   //css
-styles.css
   //fonts
      -ionicons.min.css

সুতরাং index.html নামে একটি ফাইল তৈরি করি।

এর Header Tag এর মধ্যে link Tag ব্যবহার করে bootstrap.min.css ফাইল,ও আমাদের কিছু কাস্টম ডিজাইন এর জন্য আলাদা একটি styles.css ফাইল তৈরি করে ডিজাইন করব।

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0,

 shrink-to-fit=no">

    <title>Login Form</title>

    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" href="assets/fonts/ionicons.min.css">

    <link rel="stylesheet" href="assets/css/styles.css">

</head>

আমদের লগইন ফরমের জন্য যা যা করা লাগবে সবকিছু আমরা body ট্যাগের মধ্যে করব। নিচের মত করে body ট্যাগের মধ্যে HTML কোড লিখি।

<body>

    <div class="login-clean">

        <form method="">

            <h2 class="sr-only">Login Form</h2>

            <div class="illustration"><i class="icon ion-ios-navigate"></i></div>

            <div class="form-group"><input class="form-control" type="email" 

 name="email" placeholder="Email"></div>

            <div class="form-group"><input class="form-control" type="password" 

 name="password" placeholder="Password"></div>

            <div class="form-group"><button class="btn btn-primary btn-block"  

type="submit">Log In</button>

</div>

<a class="forgot" href="#">Forgot your email or password?</a></form>

    </div>

    <script src="assets/js/jquery.min.js"></script>

    <script src="assets/bootstrap/js/bootstrap.min.js"></script>

</body>

অবশ্যই body ট্যগের শেষে bootstarp ও jquery ফাইল দুটি এ্যাড করি।

সম্পূর্ণ কোড একসাথেঃ

index.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, 

shrink-to-fit=no">

    <title>Login Form</title>

    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" href="assets/fonts/ionicons.min.css">

    <link rel="stylesheet" href="assets/css/styles.css">

</head>

<body>

    <div class="login-clean">

        <form method="">

            <h2 class="sr-only">Login Form</h2>

            <div class="illustration"><i class="icon ion-ios-navigate"></i></div>

            <div class="form-group">

            <input class="form-control" type="email" name="email" 

 placeholder="Email"></div>

            <div class="form-group">

            <input class="form-control" type="password" name="password" 

 placeholder="Password"></div>

            <div class="form-group">

<button class="btn btn-primary btn-block" type="submit">Log In</button></div>

            <a class="forgot" href="#">Forgot your email or password?</a>

        </form>

    </div>

    <script src="assets/js/jquery.min.js"></script>

    <script src="assets/bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

styles.css

.login-clean {

    background: #f1f7fc;

    padding: 80px 0;

  }

  .login-clean form {

    max-width: 320px;

    width: 90%;

    margin: 0 auto;

    background-color: #ffffff;

    padding: 40px;

    border-radius: 4px;

    color: #505e6c;

    box-shadow: 1px 1px 5px rgba(0,0,0,0.1);

  }

  .login-clean 

  .illustration {

    text-align: center;

    padding: 0 0 20px;

    font-size: 100px;

    color: rgb(74 68 121)

  }

  .login-clean form 

  .form-control {

    background: #f7f9fc;

    border: none;

    border-bottom: 1px solid #dfe7f1;

    border-radius: 0;

    box-shadow: none;

    outline: none;

    color: inherit;

    text-indent: 8px;

    height: 42px;

  }

  .login-clean 

   form 

  .btn-primary {

    background: rgb(74 68 121);

    border: none;

    border-radius: 4px;

    padding: 11px;

    box-shadow: none;

    margin-top: 26px;

    text-shadow: none;

    outline: none !important;

  }

  .login-clean 

   form 

  .btn-primary:hover, 

  .login-clean form 

  .btn-primary:active {

    background: rgb(74 68 121);

  }

  .login-clean form 

  .btn-primary:active {

    transform: translateY(1px);

  }

  .login-clean form 

  .forgot {

    display: block;

    text-align: center;

    font-size: 12px;

    color: #6f7a85;

    opacity: 0.9;

    text-decoration: none;

  }

  .login-clean form 

  .forgot:hover, 

  .login-clean form 

  .forgot:active {

    opacity: 1;

    text-decoration: none;

  }