Hello Coders! আশা করি ভালো আছেন। notesaid24 ওয়েবসাইটে আপনাকে স্বাগতম। আজকে আপনাদের মাঝে শেয়ার করবো; কিভাবে Signup Form HTML এবং CSS এর মাধ্যমে ডিজাইন করা যায় । তাই আজকের এই প্রজেক্টে আশা করি আপনারা অবশ্যই উপকৃত হবেন, তাহলে শুরু করা যাক।
প্রজেক্ট ধারণাঃ
- নামঃ Design
Signup Form with HTML and CSS
- ভাষাঃ HTML & CSS
- লাইসেন্সঃ ফ্রি
- রেস্পনসিভঃ না
- অথরঃ Notesaid24
প্রজেক্ট করতে যা জানা প্রয়োজনঃ
- বেসিক HTML
- বেসিক CSS
- Margin & Padding (মার্জিন & প্যাডিং)
- Position (পজিশন)
- Absolute
- Relative
- Form Input নিয়ে সামান্য ধারনা থাকলে হবে।
- Font Awesome Icon (এই প্রজেক্টে Font Awesome এর ৪.৭ ভার্সন ব্যবহার করা হয়েছে।)
- Display Flex
Signup ফরম ডিজাইন করার জন্য,
প্রথমে আপনাকে দুটি ফাইল তৈরি করতে হবে। একটি হলো index.html আর অন্যটি হলো style.css (নামের ব্যপারে কোন বাধ্যবাধকতা নেই তবে ডট নোটেশনের পর
.html এবং .css এগুলো ঠিক রাখতে হবে)
। নিন্মে index.html এবং
style.css ফাইল দেওয়া হয়েছে। অথবা সোর্স কোড ডাইনলোড করে ব্যবহার করতে পারেন।
প্রথমত, আপনি একটা 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>Signup Page Design_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="outerWrapper">
<div class="innerWrapper">
<form action="">
<div class="formHeader">
<h1>Sign Up</h1>
<p>Already Registered!</p>
</div>
<div class="innerForm">
<div class="inputBox">
<input type="text" name="" id="" placeholder="Full Name" />
<span
><i class="fa fa-user-circle" aria-hidden="true"></i
></span>
</div>
<div class="inputBox">
<input type="email" name="" id="" placeholder="Email" />
<span><i class="fa fa-envelope" aria-hidden="true"></i> </span>
</div>
<div class="inputBox">
<input type="password" name="" id="" placeholder="Password" />
<span><i class="fa fa-lock" aria-hidden="true"></i> </span>
</div>
<div class="submitBtn">
<input type="submit" value="Sign Up" />
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
দ্বিতীয়ত, আপনি একটা CSS ফাইল (style.css) তৈরি করে নিন,
নিচের ব্লকে দেওয়া কোডটি Copy করে আপনার সিএসএস
(CSS) ফাইলে Paste করে নিন। মনে রাখবেন
(.css) এক্সটেনশন যেন ঠিক থাকে।
CSS কোড ব্লকঃ
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Playfair Display", serif;
color: #363636;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.outerWrapper {
box-shadow: 0 5px 10px #8d8d8d;
border-radius: 5px;
padding: 20px;
width: 350px;
height: auto;
}
.formHeader {
display: flex;
align-items: center;
justify-content: space-between;
}
.formHeader h1 {
font-size: 24px;
text-transform: uppercase;
}
.formHeader p {
font-size: 14px;
text-transform: uppercase;
}
.innerForm {
display: block;
overflow: hidden;
}
.inputBox {
width: 100%;
height: 100%;
box-sizing: border-box;
position: relative;
}
.inputBox input {
width: 100%;
height: 40px;
margin-top: 20px;
outline: none;
border: 1px solid #b3b3b3;
border-radius: 3px;
padding-left: 30px;
font-size: 16px;
}
.inputBox span {
position: absolute;
content: "";
top: 45%;
left: 2%;
}
.inputBox span i {
color: #4e4e4e;
font-size: 16px;
}
.submitBtn input {
margin-top: 20px;
width: 100%;
height: 40px;
background-color: #ee5d43;
border: none;
outline: none;
border-radius: 3px;
font-size: 16px;
text-transform: uppercase;
color: #fff;
cursor: pointer;
}
আশা করি আপনি কোড টি সফলভাবে রান করাতে পেরেছেন। প্রোজেক্ট টি কেমন লেগেছে অবশ্যই কমেন্ট করে জানাবেন, আর যদি কোন ভূল হয়ে থাকে তাহলে ক্ষমা সুন্দর দৃষ্টিতে দেখবেন এবং কোথায় ভূল হয়েছে কমেন্ট করে জানাবেন। আর আপনাদের কেমন ধরনের প্রোজেক্ট লাগবে তাও জানাবেন , ইনশাআল্লাহ তা দেওয়ার চেষ্টা করবো। আর ওয়েবসাইটটি বন্ধুদের মাঝে শেয়ার করবেন। আজকের মতই এখানেই বিদায় নিলাম, ইনশাআল্লাহ দেখা হবে অন্য কোন প্রোজেক্ট এ। ভালো থাকবেন সুস্থ থাকবেন। আল্লাহ হাফেয।
