How To Design Sign In Form HTML And CSS

Hello Coders! আশা করি ভালো আছেন। Notesaid24 ওয়েবসাইটে আপনাকে স্বাগতম। আজকে আপনাদের মাঝে শেয়ার করবো; কিভাবে Sign in ফরম HTML এবং CSS এর মাধ্যমে ডিজাইন করা যায় । তাই আজকের এই প্রজেক্টে আশা করি আপনারা অবশ্যই উপকৃত হবেন, তাহলে শুরু করা যাক। (How To Design Sign in Form in HTML And CSS)

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

নামঃ Design Sign in Form in HTML And CSS
ভাষাঃ HTML & CSS
লাইসেন্সঃ ফ্রি
রেস্পনসিভঃ না
অথরঃ Notesaid24

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

বেসিক HTML
বেসিক CSS
Margin & Padding ( মার্জিন & প্যাডিং )
Position ( পজিশন )

Absolute
Relative

Form Input নিয়ে সামান্য ধারনা থাকলে হবে।
Font Awesome Icon (এই প্রজেক্টে Font Awesome এর ৪.৭ ভার্সন ব্যবহার করা হয়েছে।)
Display Flex

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

Sign in ফরম ডিজাইন করার জন্য, প্রথমে আপনাকে দুটি ফাইল তৈরি করতে হবে। একটি হলো 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 http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login Form Design _ Notesaid24</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="input_area">
        <form action="">
          <div class="input_items">
            <input type="email" placeholder="Email" required />
            <div class="icon"><i class="fa fa-user"></i></div>
          </div>
          <div class="input_items">
            <input type="password" placeholder="Password" />
            <div class="icon"><i class="fa fa-lock"></i></div>
          </div>
          <div class="input_items"><input type="submit" value="Sign in" /></div>
        </form>
        <div class="outer_area">
          <p>Or Connect With</p>
          <div class="icons">
            <a href=""><i class="fa fa-facebook"> Facebook</i></a>
            <a href=""><i class="fa fa-twitter"> Twitter</i></a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

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

CSS কোড ব্লকঃ

* {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #1883c4;
}
.input_area {
  width: 320px;
  background: #fff;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0 4px 8px;
}
.input_items {
  width: 100%;
  height: 50px;
  margin-top: 15px;
  position: relative;
}
.input_items input[type="email"],
input[type="password"] {
  width: 100%;
  height: 40px;
  border: none;
  border-bottom: 1px solid lightgray;
  outline: none;
  padding-left: 25px;
  box-sizing: border-box;
  font-size: 17px;
  color: #073b3b;
}
.input_items input:focus {
  border-bottom-color: #f38258;
}
.input_items .icon {
  position: absolute;
  top: 40%;
  left: 10px;
  transform: translate(-50%, -50%);
  font-size: 17px;
  color: #073b3b;
}
.input_items input[type="submit"] {
  width: 100%;
  height: 50px;
  border: none;
  background: #076caa;
  color: #fff;
  font-size: 15px;
  text-transform: uppercase;
  border-radius: 5px;
  transition: 0.5s ease;
}
.input_items input[type="submit"]:hover {
  background: #1883c4;
}
.outer_area {
  margin-top: 20px;
}
.outer_area p {
  text-align: center;
  font-size: 17px;
  color: #525252;
}
.outer_area .icons {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  margin-top: 10px;
}
.outer_area .icons a {
  text-decoration: none;
  color: #000000;
}
.outer_area .icons i.fa-facebook {
  color: #3a5693;
  font-weight: 400;
  transition: 0.3s;
}
.outer_area .icons i.fa-twitter {
  color: #00a7e6;
  font-weight: 400;
  transition: 0.3s;
}

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

Notesaid24 | Free Online Notes & Resources for Students

How To Design Sign In Form HTML And CSS

About the author

Post a Comment

বনভোজন সম্পর্কে বর্ণনা দিয়ে বন্ধুকে একটি পত্র লেখ

ছাত্রাবাস জীবন সম্পর্কে জানিয়ে তোমার পিতার নিকট একটি পত্র লেখ

Relative Pronoun কাকে বলে ? এবং কত প্রকার ও কি কি ? উদাহরণসহ বর্ণনা।

Degree এর ব্যবহার উদাহরণসহ বর্ণনা

Weak Verb বা Regular Verb কাকে বলে ? উদাহরণসহ বর্ণনা।

Paragraph On Our Madrasah Library

Demonstrative Pronoun কাকে বলে ? এবং কত প্রকার ও কি কি ? উদাহরণসহ বর্ণনা।

ইংরেজি শেখার গুরুত্ব সম্পর্কে জানিয়ে তোমার ছোট ভাইকে একটি পত্র লেখ

Personal Pronoun কাকে বলে এবং কত প্রকার ও কি কি উদাহরণসহ বর্ণনা ?

Distributive Pronoun কাকে বলে ? এবং কত প্রকার ও কি কি ? উদাহরণসহ বর্ণনা।

Notesaid24 | Free Online Notes & Resources for Students