How To Design Signup Form in HTML And CSS
প্রোজেক্ট ধারণাঃ
- নামঃ Design Signup Form in HTML and CSS
- ভাষাঃ HTML
& CSS - লাইসেন্সঃ ফ্রি
- রেস্পনসিভঃ না
- অথরঃ Notesaid24
প্রোজেক্ট করতে যা জানা প্রয়োজনঃ
- বেসিক HTML
- বেসিক CSS
- Margin & Padding ( মার্জিন & প্যাডিং )
- Position ( পজিশন )
- Absolute
- Relative
- Form Input নিয়ে সামান্য ধারনা থাকলে হবে।
- 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 Form _ By Notesaid24</title>
<link rel="stylesheet" href="app.css" />
<!-- For More Visit: https://notesaid24.com -->
</head>
<body>
<main>
<div class="container">
<div class="innerContainer">
<div class="innerWrapper">
<div class="leftWrapper">
<h1>Opportunity is Everywhere</h1>
<p>
Make the most of your time on the road on the platform with the
target network of active riders.
</p>
<div class="innerImage">
<img src="./image/image.png" alt="" />
</div>
</div>
<div class="rightWrapper">
<div class="innerrightWrapper">
<h1>Become a Driver</h1>
<form action="">
<div class="inputRadio">
<div class="innerRadio">
<input
type="checkbox"
name="haveCar"
id="haveCar"
checked
/>
<label for="haveCar">I have a car</label>
</div>
<div class="innerRadio">
<input type="checkbox" name="needCar" id="needCar" />
<label for="needCar">I need a car</label>
</div>
</div>
<div class="inputBox">
<label for="">First Name</label>
<input type="text" name="" id="" />
</div>
<div class="inputBox">
<label for="">Last Name</label>
<input type="text" name="" id="" />
</div>
<div class="inputBox">
<label for="">Email</label>
<input type="email" name="" id="" />
</div>
<div class="inputBox">
<label for="">Password</label>
<input type="password" name="" id="" />
</div>
<div class="inputBox">
<label for="">Phone Number</label>
<input type="tel" name="" id="" />
</div>
<div class="inputBox">
<label for="">City You'll Drive in</label>
<input type="text" name="" id="" />
</div>
<div class="inputBox">
<label for="">Referral Code (Optional)</label>
<input type="text" name="" id="" />
</div>
<div class="inputFooter">
<p>
By Providing I agree to User's
<a href="#">Terms of use</a> and acknowledge that I have
read the <a href="#">Privacy Policy</a>
</p>
</div>
<div class="inputBox">
<input type="submit" value="Signup to Drive" />
</div>
<p class="haveAccount">
Already have an account?<a href="#">Sign in</a>
</p>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
দ্বিতীয়ত, আপনি একটা CSS ফাইল (style.css) তৈরি করে নিন, নিচের ব্লকে দেওয়া কোডটি Copy করে আপনার সিএসএস (CSS) ফাইলে Paste করে নিন। মনে রাখবেন
(.css) এক্সটেনশন যেন ঠিক থাকে।
CSS কোড ব্লকঃ
* {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
color: #363636;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.innerContainer {
width: 920px;
background-color: rgb(222, 252, 237);
padding-left: 30px;
padding-right: 90px;
padding-bottom: 40px;
}
.innerWrapper {
display: flex;
justify-content: space-around;
}
.leftWrapper {
display: flex;
flex: 1;
flex-direction: column;
position: relative;
}
.innerImage img {
position: absolute;
width: 380px;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
}
.innerImage::after {
position: absolute;
content: "Notesaid24";
top: 63%;
left: 61%;
font-size: 14px;
font-weight: bold;
color: #a1a1a1;
font-style: italic;
}
.leftWrapper h1 {
font-size: 48px;
margin-top: 20px;
}
.leftWrapper p {
font-size: 16px;
margin-top: 30px;
padding-right: 20px;
}
.rightWrapper {
display: flex;
flex: 1;
}
.innerrightWrapper {
background-color: #fff;
padding: 20px;
}
.innerrightWrapper h1 {
font-size: 32px;
margin-bottom: 20px;
}
.inputRadio {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.inputBox {
display: block;
width: 100%;
height: 100%;
position: relative;
}
.inputBox input:not([type="submit"]) {
width: 100%;
height: 30px;
margin-bottom: 10px;
background-color: #e9e9e9;
border: none;
outline: none;
padding-left: 5px;
font-size: 16px;
}
.inputBox label {
font-weight: bold;
}
.inputFooter p {
font-size: 14px;
text-align: justify;
}
.inputFooter p a {
color: tomato;
font-weight: bold;
}
.inputBox input[type="submit"] {
margin-top: 15px;
margin-bottom: 10px;
width: 150px;
height: 50px;
border: none;
background-color: #ff6347;
color: #fff;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
.haveAccount {
text-align: center;
font-size: 16px;
color: #505050;
}
.haveAccount a {
color: #ff6347;
font-weight: bold;
}
আশা করি আপনি কোড টি সফলভাবে রান করাতে পেরেছেন। প্রোজেক্ট টি কেমন লেগেছে অবশ্যই কমেন্ট করে জানাবেন, আর যদি কোন ভূল হয়ে থাকে তাহলে ক্ষমা সুন্দর দৃষ্টিতে দেখবেন এবং কোথায় ভূল হয়েছে কমেন্ট করে জানাবেন। আর আপনাদের কেমন ধরনের প্রোজেক্ট লাগবে তাও জানাবেন , ইনশাআল্লাহ তা দেওয়ার চেষ্টা করবো। আর ওয়েবসাইটটি বন্ধুদের মাঝে শেয়ার করবেন। আজকের মতই এখানেই বিদায় নিলাম, ইনশাআল্লাহ দেখা হবে অন্য কোন প্রোজেক্ট এ। ভালো থাকবেন সুস্থ থাকবেন। আল্লাহ হাফেয।
