Home
Programming Project

Design Login Form with HTML & CSS

Hello Coders! আশা করি ভালো আছেন। notesaid24 ওয়েবসাইটে আপনাকে স্বাগতম। আজকে আপনাদের মাঝে শেয়ার করবো; কিভাবে Login Form HTML এবং CSS এর মাধ্যমে ডিজাইন করা যায় । তাই আজকের এই প্রজেক্টে আশা করি আপনারা অবশ্যই উপকৃত হবেন, তাহলে শুরু করা যাক।

How to Design Login Form with HTML & CSS

How to Design Login Form with HTML & CSS


প্রজেক্ট ধারণাঃ

  • নামঃ Design Login Form with HTML and CSS
  • ভাষাঃ HTML & CSS
  • লাইসেন্সঃ ফ্রি
  • রেস্পনসিভঃ না   
  • অথরঃ Notesaid24

 

প্রজেক্ট করতে যা জানা প্রয়োজনঃ

  • বেসিক HTML
  • বেসিক CSS
  • Margin & Padding ( মার্জিন & প্যাডিং )
  • Form Input নিয়ে সামান্য ধারনা থাকলে হবে।
  • Display Flex
  • Display Grid

 

আশা করি এসব জানা থাকলে এই প্রোজেক্ট করতে কোন সমস্যা নেই, তবে না জানা থাকলেও সমস্যা নেই প্রোজেক্ট করার সাথে সাথে ধারনা হয়ে যাবে। চলুন শুরু করা যাক……………

 

Login ফরম ডিজাইন করার জন্য, প্রথমে আপনাকে দুটি ফাইল তৈরি করতে হবে। একটি হলো index.html আর অন্যটি হলো style.css ( নামের ব্যপারে কোন বাধ্যবাধকতা নেই তবে ডট নোটেশনের পর .html এবং .css এগুলো ঠিক রাখতে হবে) । নিন্মে index.html এবং style.css ফাইল দেওয়া হয়েছে। অথবা সোর্স কোড ডাইনলোড করে ব্যবহার করতে পারেন।

 

Source Code

 

প্রথমত, আপনি একটা HTML ফাইল (index.html) তৈরি করে নিন, নিচের ব্লকে দেওয়া কোডটি Copy করে আপনার এইচটিএমএল (HTML) ফাইলে Paste করে নিন। মনে রাখবেন (.html) এক্সটেনশন যেন ঠিক থাকে।

HTML কোড ব্লকঃ


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login Form Design _ Notesaid24.com</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <div class="container">
      <div class="outerContainer">
        <div class="innerContainer">
          <div class="leftContainer">
            <img src="./img/sideImg.png" alt="" />
          </div>
          <div class="rightContainer">
            <div class="infoContainer">
              <p>Dont Have an Account? <a href="#">Signup</a></p>
            </div>
            <div class="formContainer">
              <h1>Login | <span>Notesaid24</span></h1>
              <form action="">
                <input
                  type="email"
                  name="email"
                  placeholder="Enter Your Email"
                  required
                />
                <input
                  type="password"
                  name="password"
                  placeholder="Enter Your Password"
                  required
                />
                <button type="submit">Login</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

 

দ্বিতীয়ত, আপনি একটা CSS ফাইল (style.css) তৈরি করে নিন, নিচের ব্লকে দেওয়া কোডটি Copy করে আপনার সিএসএস (CSS) ফাইলে Paste করে নিন। মনে রাখবেন (.css) এক্সটেনশন যেন ঠিক থাকে।

CSS কোড ব্লকঃ


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #363636;
}

body {
  background-color: #709bec;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.innerContainer {
  display: flex;
  width: 680px;
}

.leftContainer {
  display: flex;
  flex: 1;
  background-color: #b4ceff;
  padding: 40px;
}

.leftContainer img {
  width: 300px;
}

.rightContainer {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 30px 15px;
  background-color: #fff;
}

.infoContainer p {
  text-align: right;
  font-size: 16px;
  margin-bottom: 15px;
}

.infoContainer p a {
  text-decoration: none;
  color: #ff6347;
  cursor: pointer;
}

.formContainer h1 {
  font-size: 26px;
  margin: 20px 0;
}

.formContainer h1 span {
  color: #ff6347;
}

.rightContainer form {
  display: block;
  width: 100%;
  height: 100%;
}

.rightContainer form input {
  width: 100%;
  height: 40px;
  margin-bottom: 15px;
  border: 1px solid #e4e4e4;
  border-radius: 5px;
  outline: none;
  font-size: 14px;
  padding-left: 5px;
}

::placeholder {
  color: #bdbdbd;
}

.rightContainer button {
  text-align: center;
  width: 100px;
  height: 40px;
  border: none;
  outline: none;
  background-color: #ff6347;
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
}

আশা করি আপনি কোড টি সফলভাবে রান করাতে পেরেছেন। প্রোজেক্ট টি কেমন লেগেছে অবশ্যই  কমেন্ট করে জানাবেন, আর যদি কোন ভূল হয়ে থাকে তাহলে ক্ষমা সুন্দর দৃষ্টিতে দেখবেন এবং কোথায় ভূল হয়েছে কমেন্ট করে জানাবেন। আর আপনাদের কেমন ধরনের প্রোজেক্ট লাগবে তাও জানাবেন , ইনশাআল্লাহ তা দেওয়ার চেষ্টা করবো। আর ওয়েবসাইটটি বন্ধুদের মাঝে শেয়ার করবেন। আজকের মতই এখানেই বিদায় নিলাম, ইনশাআল্লাহ  দেখা হবে অন্য কোন প্রোজেক্ট এ। ভালো থাকবেন সুস্থ থাকবেন। আল্লাহ হাফেয। 

Post a Comment

Support Us

Support Us