Responsive Sign in Form Design HTML And CSS

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

(Responsive Sign-in Form Design HTML And CSS)

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

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

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

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

Absolute
Relative

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

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

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 name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sign in Form Design By Notesaid24</title>
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
  </head>
  <body>
    <div class="container">
      <div class="input_area">
        <div class="input_items">
          <div class="v_align"><span>Or</span></div>
          <form action="">
            <h1>Sign In</h1>
            <div class="input_box">
              <input type="text" placeholder="Username" required />
              <span><i class="fa fa-user"></i></span>
            </div>
            <div class="input_box">
              <input type="password" placeholder="Password" />
              <span><i class="fa fa-lock"></i></span>
            </div>
            <div class="input_box"><input type="submit" value="Sign in" /></div>
            <div class="txt"><a href="#">Forgot Your Password?</a></div>
          </form>
        </div>
        <div class="social_area">
          <div class="scl_txt">
            <h2>Are You New User?</h2>
            <button type="submit">Create Your Account</button>
          </div>
          <div class="scl_link">
            <p>Or Use one of your existing social media account</p>
            <ul>
              <li>
                <a href="#"><i class="fa fa-facebook"></i></a>
              </li>
              <li>
                <a href="#"><i class="fa fa-twitter"></i></a>
              </li>
              <li>
                <a href="#"><i class="fa fa-linkedin"></i></a>
              </li>
              <li>
                <a href="#"><i class="fa fa-dribbble"></i></a>
              </li>
              <li>
                <a href="#"><i class="fa fa-pinterest"></i></a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

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

CSS কোড ব্লকঃ

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  background-image: url("img/design.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.input_area {
  width: 820px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 15px 5px #b5e5ff;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.input_items {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  padding: 20px;
}
.v_align {
  position: absolute;
  border: 1px solid #029ce6;
  height: 250px;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%);
}
.v_align span {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 1px solid #029ce6;
  border-radius: 50%;
  text-align: center;
  padding: 5px;
  background-color: #029ce6;
  color: #fff;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}
.input_items h1 {
  font-size: 32px;
  font-weight: normal;
  margin: 0;
  margin-bottom: -20px;
  color: #029ce6;
}
.input_items form {
  width: 100%;
}
.input_box {
  width: 100%;
  margin-top: 20px;
  position: relative;
  overflow: hidden;
}
.input_box input {
  position: relative;
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  padding-left: 25px;
  border: none;
  outline: none;
  background: transparent;
  border-bottom: 1px solid #a3a3a3;
  font-size: 17px;
  color: #363636;
}
.input_box span i {
  position: absolute;
  top: 50%;
  left: 3%;
  transform: translate(-50%, -50%);
  font-size: 17px;
  color: rgb(54, 53, 53);
}
.input_box input[type="submit"] {
  background: #029ce6;
  font-size: 22px;
  color: #fff;
  border-radius: 5px;
  transition: 0.5s;
  cursor: pointer;
}
.input_box input[type="submit"]:hover {
  background-color: #fa424e;
}
.input_box input[type="text"]:focus,
.input_box input[type="text"]:valid,
.input_box input[type="password"]:focus,
.input_box input[type="password"]:valid {
  border-bottom-color: #029ce6;
  color: #029ce6;
}
.txt {
  margin-top: 15px;
  text-align: center;
}
.txt a {
  text-decoration: none;
  font-size: 18px;
  color: #fa424e;
  transition: 0.5s;
}
.txt a:hover {
  color: #029ce6;
  border-bottom: 1px solid #029ce6;
}
.social_area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  overflow: hidden;
  position: relative;
}
.scl_txt h2 {
  font-size: 28px;
  font-weight: normal;
  color: #363636;
  margin: 5px;
}
.scl_txt button {
  width: 100%;
  height: 50px;
  border: none;
  outline: none;
  border-radius: 10px;
  background-color: #029ce6;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: 0.5s ease-in-out;
}
.scl_txt button:hover {
  background-color: #fa424e;
}
.scl_link {
  text-align: center;
  margin-top: 10px;
}
.scl_link p {
  font-size: 18px;
  color: #363636;
  margin: 10px 0;
}
.scl_link ul {
  padding: 0;
  list-style: none;
}
.scl_link ul li {
  display: inline-block;
  margin-right: 10px;
}
.scl_link ul li a {
  text-decoration: none;
}
.scl_link ul li i {
  display: block;
  width: 32px;
  height: 30px;
  font-size: 17px;
  border: 0;
  outline: 0;
  border-radius: 100%;
  padding-top: 6px;
  text-align: center;
  background-color: #fa424e;
  color: #fff;
  transition: all 0.3s ease-in-out;
}
.scl_link ul li i.fa-facebook:hover {
  background: #3a5693;
  color: #ffffff;
}
.scl_link ul li i.fa-twitter:hover {
  background: #00a7e6;
  color: #ffffff;
}
.scl_link ul li i.fa-linkedin:hover {
  background: #0270ad;
  color: #ffffff;
}
.scl_link ul li i.fa-dribbble:hover {
  background-color: #e9508e;
  color: #fff;
}
.scl_link ul li i.fa-pinterest:hover {
  background-color: #c31d24;
  color: #fff;
}
@media (max-width: 650px) {
  .container {
    padding: 30px;
  }
  .input_area {
    grid-template-columns: repeat(1, 1fr);
  }
  .input_items {
    padding: 20px 40px;
  }
  .input_items h1 {
    text-align: center;
  }
  .v_align {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 60%;
    height: 0;
    margin-top: 10px;
  }
  .v_align span {
    left: 50%;
  }
}

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

Notesaid24 | Free Online Notes & Resources for Students

Responsive Sign in Form Design HTML And CSS

(Responsive Sign-in Form Design 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