১৮-১০ : লগ-ইন ও রেজিস্ট্রেশন পেজ ডিজাইন

লগ-ইন পেজের জন্য login.html ফাইল ক্রিয়েট করে তার জন্য HTML লিখে ফেলি-

Code:: 18.10.1 login.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="..."
    />
    <link
      href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/css/swiffy-slider.min.css"
      rel="stylesheet"
      crossorigin="anonymous"
    />

    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="login.css" />
  </head>
  <body>
    <nav class="d-flex justify-content-around align-items-center p-4">
      <div class="logo-container d-flex align-items-center gap-2">
        <img src="./Images/stethoscope 1.png" alt="" />
        <h3>SmartCare</h3>
      </div>
      <div class="menu-container d-flex gap-3">
        <li class="menu"><a href="index.html"></a></li>
        <li class="menu">Services</li>
        <li class="menu">Contact us</li>
        <li class="menu"><a target="_blank" href="login.html">Login</a></li>
      </div>
    </nav>

    <div class="login-container">
      <div class="col-md-6">
        <h1 class="title mt-5">Please Login</h1>
        <form action="">
          <input
            value="rahim"
            id="login-username"
            type="text"
            class="input"
            placeholder="username"
            required
          />
          <input
            id="login-password"
            type="password"
            class="input"
            placeholder="password"
            required
            value="abcd1234%"
          />
          <button onclick="handleLogin(event)" class="submit-btn">Login</button>
          <p><a href="registration.html">go to Registration page</a></p>
        </form>
      </div>
      <div class="col-md-6">
        <img class="w-100" src="./Images/reg.png" alt="" />
      </div>
    </div>

    <footer class="p-5">
      <div class="container w-75 m-auto row p-5">
        <div class="col-md-6">
          <p><small>Copyright © Smartcare. All Rights Reserved</small></p>
          <h5>Follow US</h5>
          <div class="icons">
            <img class="icon" src="./Images/LinkedIn.png" alt="" />
            <img class="icon" src="./Images/YouTube.png" alt="" />
            <img class="icon" src="./Images/LinkedIn.png" alt="" />
          </div>
        </div>
        <div class="col-md-3">
          <h5>Company</h5>
          <li>ABout</li>
          <li>Contact us</li>
          <li>Culture</li>
          <li>Blog</li>
        </div>
        <div class="col-md-3">
          <h5>Company</h5>
          <li>ABout</li>
          <li>Contact us</li>
          <li>Culture</li>
          <li>Blog</li>
        </div>
      </div>
      <hr />
      <p class="text-center mt-3">
        <small>Copyright © Smartcare. All Rights Reserved</small>
      </p>
    </footer>
    <!-- script tag from here  -->
    <script src="./app.js"></script>
    <script src="./auth.js"></script>
    <script src="./docDetails.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"
      integrity="..."
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/js/swiffy-slider.min.js"
      crossorigin="anonymous"
      defer
    ></script>
  </body>
</html>

login.html এর জন্য login.css ফাইল ক্রিয়েট করে CSS লিখি-

Code:: 18.10.2 login.css

body{
    background-color:white;
}
.login-container{
    height:100vh;
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items:center;
    width:75%;
    margin: auto;
}
.input{
    padding: 15px 25px;
    border: none;
    margin: 10px;
    box-shadow: 4px 4px 8px gray;
    border-radius: 5px;
}
.submit-btn{
    padding: 15px 25px;
    width:85%;
    margin: auto;
    border: none;
    background-color: rgb(43, 121, 121);
    color: white;
    font-size: 20px;
    border-radius: 10px;
}

এখন লগ-ইন পেজটি ব্রাউজারে এরকম দেখাবে-

দেখা যাচ্ছে, লগ-ইন পেজে রেজিস্ট্রেশনের লিঙ্ক রয়েছে। অতএব registartion.html ফাইল ক্রিয়েট করে ফেলি -

Code:: 18.1.3 registration.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Registration</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="..."
    />
    <link
      href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/css/swiffy-slider.min.css"
      rel="stylesheet"
      crossorigin="anonymous"
    />

    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="login.css" />
  </head>
  <body>
    <nav class="d-flex justify-content-around align-items-center p-4">
      <div class="logo-container d-flex align-items-center gap-2">
        <img src="./Images/stethoscope 1.png" alt="" />
        <h3>SmartCare</h3>
      </div>
      <div class="menu-container d-flex gap-3">
        <li class="menu"><a href="index.html"></a></li>
        <li class="menu">Services</li>
        <li class="menu">Contact us</li>
        <li class="menu"><a target="_blank" href="login.html">Login</a></li>
      </div>
    </nav>

    <div class="login-container">
      <div class="col-md-6">
        <h1 class="title mt-5">Please Registration</h1>
        <form action="" onsubmit="handleRegistration(event)">
          <p id="error" class="text-danger"></p>
          <input
            id="username"
            type="text"
            class="input"
            placeholder="username"
            required
          />
          <input
            id="first_name"
            type="text"
            class="input"
            placeholder="First Name"
            required
          />
          <input
            id="last_name"
            type="text"
            class="input"
            placeholder="last Name"
            required
          />

          <input
            id="email"
            type="email"
            class="input"
            placeholder="Email"
            required
          />
          <input
            id="password"
            type="password"
            class="input"
            placeholder="password"
            required
          />
          <input
            id="confirm_password"
            type="password"
            class="input"
            placeholder="Confirm password"
            required
          />
          <input type="submit" class="submit-btn" value="Registration" />
          <p><a href="login.html">go to login page</a></p>
        </form>
      </div>
      <div class="col-md-6">
        <img class="w-100" src="./Images/login.png" alt="" />
      </div>
    </div>

    <footer class="p-5">
      <div class="container w-75 m-auto row p-5">
        <div class="col-md-6">
          <p><small>Copyright © Smartcare. All Rights Reserved</small></p>
          <h5>Follow US</h5>
          <div class="icons">
            <img class="icon" src="./Images/LinkedIn.png" alt="" />
            <img class="icon" src="./Images/YouTube.png" alt="" />
            <img class="icon" src="./Images/LinkedIn.png" alt="" />
          </div>
        </div>
        <div class="col-md-3">
          <h5>Company</h5>
          <li>ABout</li>
          <li>Contact us</li>
          <li>Culture</li>
          <li>Blog</li>
        </div>
        <div class="col-md-3">
          <h5>Company</h5>
          <li>ABout</li>
          <li>Contact us</li>
          <li>Culture</li>
          <li>Blog</li>
        </div>
      </div>
      <hr />
      <p class="text-center mt-3">
        <small>Copyright © Smartcare. All Rights Reserved</small>
      </p>
    </footer>
    <!-- script tag from here  -->
    <script src="./app.js"></script>
    <script src="./auth.js"></script>
    <script src="./docDetails.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"
      integrity="..."
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/js/swiffy-slider.min.js"
      crossorigin="anonymous"
      defer
    ></script>
  </body>
</html>

রেজিস্ট্রেশন পেজটি ব্রাউজারে এরকম দেখা যাচ্ছে-

.

Previous১৮-৯ : এপয়নমেন্টNextমডিউল ১৯ঃ হসপিটাল ম্যানেজমেন্ট ফ্রন্ট-এন্ড, পার্ট-৩

Last updated