How To Design Sign in Form HTML And CSS With Icons

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

How To Design Sign in  Form HTML And CSS With Icons

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  ( পজিশন )
    • 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 কোড ব্লকঃ



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

CSS কোড ব্লকঃ



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



About the author

AHSHAN HABIB
Hello! I am Ahshan Habib. Blogging is My Hobby and I Would Like to Share my Knowledge With Everyone. Here I Will Share Every Day About Education, Technology, and Programming. So Stay With us And Share my Page on Your Social Platform.

Post a Comment