হেয় গাইজ হোয়াটসঅ্যাপ কি অবস্থা আমি ইনাদ ইসলাম আবার আপনাদের নাঝে হাজির হয়েছি অনেক দিন পর একটা ছোট্ট প্রজেক্ট নিয়ে। যেটা হলো একটা লগিন ফর্ম কীভাবে বানাবেন শুধু মাত্র এইচটিএমএল এবং সিএসএস দিয়ে। এটা কি আসলেই কোন প্রজেক্ট? ?? হোয়াটেভার চলেন দেখি কিভাবে বানানো যায়।
তো বেশি কিছু করতে হবেনা শুধু আমার লিখা এইচটিএমএল আর আর সিএসএস গুলা কোন এডিটর বা ভিম দিয়ে সেভ করে নিলেই হবে। অথবা কপি করে কোন .html এবং .সিএসএস ফাইলে রাখলেই হবে। আমি বলে দিবো কোন্টার কি নাম দিতে হবে।
প্রথমে একটা ফাইল ম্যানেজার এ জান আর একটা ফোলডার বানান Login নামে অথবা যেকোন নাম দিয়ে যেটা আপনার ভালো লাগে তারপর সেই ফোল্ডার এ যান গিয়ে নিম্মের নামে দুটো ফোল্ডার বানান।
Example
- index.html
- style.css
বানানো শেষ? বানানো শেষ হলে এবার প্রথম ফাইল্টি অর্থাৎ index.html ফাইল টি কোন এডিটর দিয়ে ওপেন করুন। এবার নিচের কোডটি কপি করে পেস্ট করে সেভ করুনঃ
Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login - Pogamar | The Tech Therapist</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="login"> <h1>Login Form</h1> <p><i>To Your Account</i></p> <form action=""> <input type="text" placeholder="Username"> <input type="password" placeholder="Password"> <input type="submit" value="LOG IN"> </form> <p class="more"> <a href="#signup">Register</a> | <a href="#fpassword">Forgot Password?</a> </p> </div> </body> </html>
সেভ করা শেষ? এবার একই ভাবে দ্বিতীয় ফাইল্টি ওপেন করুন একটি এডিটর দিয়ে এবং নিচের কোডটুকু কপি করে পেস্ট করে করে সেভ দিনঃ
Example
/*
*
* A Pure Content By Pogamar
* The Tech Therapist
* Login Form
*
*/
body {
width: 100%;
height: 100vh;
font-family: "Times New Roman";
background: #607991;
}
.login {
width: 500px;
height: 450px;
margin: 7% auto;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.login div {
display: inline-block;
border: none;
}
.login h1 {
text-align: center;
padding-top: 110px;
padding-bottom: 0;
margin:0;
}
.login p {
text-align: center;
padding-bottom:10px;
margin:0;
color: grey;
}
.login form {
text-align: center;
}
.login form input {
width: 70%;
height: 35px;
margin-bottom: 10px;
border: 1px solid #ededed;
border-radius: 25px;
text-align: center;
color: #000;
}
.login form input:focus {
outline: none;
}
::-webkit-input-placeholder {
line-spacing: 1px;
color: grey;
}
.login input[type="submit"] {
color: #fff;
background: #FFBF37;
font-weight: bold;
}
.login .more {
margin:0;
padding:0;
font-size: 12px;
}
.login .more a {
display: inline-block;
text-align: center;
}
এবার ব্রাউজার দিয়ে ন্রাউজ করে দেখুন। আমার মিনে হয় আমার আগের পর্বে আমি দেখিয়েছি কিভাবে সার্ভার সেট আপ দিতে হয় লাইভ টাইম সার্ভার। সেভাবে করবেন এবং রান করে দেখুন আশা করি ভালো লাগবে।
আর যেই ভাইদের মনে হবে যে না আমি এতো কপি পেস্ট করতে পারবোনা তারা আমার গিটহাব থেকে গিট ডাউনলোডকরেও ইউজ করতে পারেন। কিন্তু আমি বলবো আপনি কপি না করে একটা এক্টা লাইন দেখে দেখে লিখুন এতে করে আপনি কিছু শিখতে পারবেন।
আমার গিটহাব লিংকঃ Github
আর যদি এরকম আরও সুন্দর ডিজাইন চান তবে আমার ইউটউব চ্যানেল এ ঘুরে আসবেন। আর সকল ধরনের ওয়েব ডেভলপিং ভিডিও পাবেন। আর ওয়েব ডেভলপিং যারা শিখতে চান তারা একটা গ্রুপ বানিয়ে আমাকে এড করে দিবেন ইনশাল্লাহ না পারি সাহায্য করতে পারবো। এবং এই কমেন্টে জানান যে আপনাদের আর কেমন পোস্ট চাই সেটা যেকোন কিছু নিয়ে হতে পারে এবং কেমন ভিডিও চাই সেটা এই পোস্ট এর ভিডিও তে জানান। আর যেকোন প্রব্লেম নিয়ে আসতে পারেন আমার কাছে।
কিছু বুঝে না থাকলে ভিডিও টি দেখার অনুরোধ রইলোঃ Login Form Making Video
আর ভিডিও কমেন্টে জানান আপনাদের চাহিদা। অথবা এখানেও জানাতে পারেন
ধন্যবাদ ভুল ত্রুটি ক্ষমা করবেন