হেয় গাইজ হোয়াটসঅ্যাপ কি অবস্থা আমি ইনাদ ইসলাম।
আবার আপনাদের নাঝে হাজির হয়েছি আর ও একটা ছোট্ট প্রজেক্ট নিয়ে। কাল আমরা লগিন পেজ কীভাবে বানাতে হয়ে শিখেছি। আজ শিখব রেজিষ্ট্রেশন ফর্ম কীভাবে বানাবেন শুধু মাত্র এইচটিএমএল এবং সিএসএস দিয়ে। এটা কি আসলেই কোন প্রজেক্ট? ?? হোয়াটেভার চলেন দেখি কিভাবে বানানো যায়।
আপনি যদি কীভাবে লগিন পেজ বানাতে হয় সেটা না দেখে থাকেন তাহলে এক্ষুনি দেখে নিন এতে করে এই পোস্ট টি আপনার কাছে সোজা মনে হবে। এখান থেকে
তো বেশি কিছু করতে হবেনা শুধু আমার লিখা এইচটিএমএল আর আর সিএসএস গুলা কোন এডিটর বা ভিম দিয়ে সেভ করে নিলেই হবে। অথবা গতকালের মতো কপি করে কোন .html এবং .সিএসএস ফাইলে রাখলেই হবে। আমি বলে দিবো কোনটার কি নাম দিতে হবে।
প্রথমে একটা ফাইল ম্যানেজার এ জান আর একটা ফোলডার বানান Registration নামে অথবা যেকোন নাম দিয়ে যেটা আপনার ভালো লাগে তারপর সেই ফোল্ডার এ যান এবং গতকালের মত নিম্মের নামে দুটো ফোল্ডার বানান।
Example
- index.html
- style.css
বানানো শেষ? বানানো শেষ হলে এবার গতকালের মতো প্রথম ফাইল্টি অর্থাৎ index.html ফাইল টি কোন এডিটর দিয়ে ওপেন করুন। এবার নিচের কোডটি কপি করে পেস্ট করে সেভ করুনঃ
Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Registration Form - Pogamar | The Tech Therapist</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main"> <h1>Registration Form</h1> <form action=""> <input type="text" name="fname" placeholder="First Name"> <br> <input type="text" name="lname" placeholder="Last Name"> <br> <input type="text" name="username" placeholder="Username"> <br> <input type="email" name="email" placeholder="Email"> <br> <input type="password" name="password" placeholder ="Password"> <br> <input type="submit" name="submit" value="SIGN UP"> </form> <p class="more"> <a href="#login">Already have a account? Login here</a> | <a href="#fpassword">Forget Password?</a> </p> </div> </body></html>
সেভ করা শেষ? এবার একই ভাবে দ্বিতীয় ফাইল্টি ওপেন করুন একটি এডিটর দিয়ে এবং নিচের কোডটুকু কপি করে পেস্ট করে করে সেভ দিনঃ
Example
/*
*
* A original Content By Pogamar
* The Tech Therapist
* Registration Form
*
*/
html, body, .main, h1, div, input, form {
margin:0;
padding:0;
}
html, body {
height: 100%;
background: linear-gradient(to right, #43c6ac, #f8ffae);
font-family: 'sans serif';
}
.main {
width: 500px;
margin: 7% auto;
background: linear-gradient(to bottom, #00183b, #002452, #00306b, #003d85, #004a9f);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
height: 520px;
}
.main h1 {
padding-top: 80px;
padding-bottom: 25px;
color: #fff;
text-align: center;
}
.main form {
text-align: center;
}
.main form input {
width: 75%;
height: 35px;
margin-bottom: 10px;
border: 1px solid #ededed;
border-radius: 25px;
text-align: center;
color: grey;
}
.main form input:focus {
outline: none;
}
.main form input:hover {
border: 2px solid #4d4dff;
i}
::-webkit-input-placeholder {
line-spacing: 1px;
color: grey;
}
.main input[type="submit"] {
color: #fff;
background: #FFBF37;
font-weight: bold;
}
.more {
margin:0;
padding:0;
font-size: 12px;
text-align: center;
color: #fff;
}
.more a {
display: inline-block;
padding: 8px;
color: #fff;
text-decoration: none;
}
এবার ব্রাউজার দিয়ে গতকালের মতো ব্রাউজ করে দেখুন। আমার মনে হয় আমার আগের পর্বে আমি দেখিয়েছি কিভাবে সার্ভার সেট আপ দিতে হয় লাইভ টাইম সার্ভার। সেভাবে করবেন এবং রান করে দেখুন আশা করি ভালো লাগবে।
আর যেই ভাইদের মনে হবে যে না আমি এতো কপি পেস্ট করতে পারবোনা তারা আমার গিটহাব থেকে গিট ডাউনলোড করেও ইউজ করতে পারেন। কিন্তু আমি বলবো আপনি কপি না করে একটা এক্টা লাইন দেখে দেখে লিখুন এতে করে আপনি কিছু শিখতে পারবেন।
আমার গিটহাব লিংকঃ Github
আর যদি এরকম আরও সুন্দর ডিজাইন চান তবে আমার ইউটউব চ্যানেল এ ঘুরে আসবেন। আর সকল ধরনের ওয়েব ডেভলপিং ভিডিও পাবেন। আর ওয়েব ডেভলপিং যারা শিখতে চান তারা একটা গ্রুপ বানিয়ে আমাকে এড করে দিবেন ইনশাল্লাহ না পারি সাহায্য করতে পারবো। এবং এই কমেন্টে জানান যে আপনাদের আর কেমন পোস্ট চাই সেটা যেকোন কিছু নিয়ে হতে পারে এবং কেমন ভিডিও চাই সেটা এই পোস্ট এর ভিডিও তে জানান। আর যেকোন প্রব্লেম নিয়ে আসতে পারেন আমার কাছে।
কিছু বুঝে না থাকলে ভিডিও টি দেখার অনুরোধ রইলোঃ
How to Make Login Form by html and css
How to Make Registration Form by html and css
আর ভিডিও কমেন্টে জানান আপনাদের চাহিদা। অথবা এখানেও জানাতে পারেন
ধন্যবাদ ভুল ত্রুটি ক্ষমা করবেন