Hello Coders! আশা করি ভালো আছেন। notesaid24 ওয়েবসাইটে আপনাকে স্বাগতম। আজকে আপনাদের মাঝে শেয়ার করবো; কিভাবে Sign-up Form HTML এবং CSS এর মাধ্যমে ডিজাইন করা যায় । তাই আজকের এই প্রজেক্টে আশা করি আপনারা অবশ্যই উপকৃত হবেন, তাহলে শুরু করা যাক।
How to Design Sign-up Form with HTML & CSS
প্রজেক্ট
ধারণাঃ
- নামঃ Design Sign-up Form with HTML and CSS
- ভাষাঃ HTML & CSS
- লাইসেন্সঃ ফ্রি
- রেস্পনসিভঃ না
- অথরঃ Notesaid24
প্রজেক্ট করতে যা জানা প্রয়োজনঃ
- বেসিক HTML
- বেসিক CSS
- Margin & Padding ( মার্জিন & প্যাডিং )
- Position ( পজিশন )
- Absolute
- Relative
- Form Input নিয়ে সামান্য ধারনা থাকলে হবে।
- Font Awesome Icon (এই প্রজেক্টে Font Awesome এর ৪.৭ ভার্সন ব্যবহার করা হয়েছে।)
- Display Flex
আশা করি
এসব জানা থাকলে এই প্রোজেক্ট করতে কোন সমস্যা নেই, তবে না জানা থাকলেও সমস্যা নেই প্রোজেক্ট
করার সাথে সাথে ধারনা হয়ে যাবে। চলুন শুরু করা যাক……………
Sign-up ফরম ডিজাইন করার জন্য, প্রথমে আপনাকে দুটি ফাইল তৈরি করতে হবে। একটি হলো index.html আর অন্যটি হলো style.css ( নামের ব্যপারে কোন বাধ্যবাধকতা নেই তবে ডট নোটেশনের পর .html এবং .css এগুলো ঠিক রাখতে হবে) । নিন্মে index.html এবং
style.css ফাইল দেওয়া হয়েছে। অথবা সোর্স কোড ডাইনলোড করে ব্যবহার করতে পারেন।
প্রথমত, আপনি একটা HTML ফাইল (index.html) তৈরি করে নিন,
নিচের ব্লকে দেওয়া কোডটি Copy করে আপনার এইচটিএমএল (HTML) ফাইলে Paste করে নিন। মনে রাখবেন (.html) এক্সটেনশন যেন ঠিক থাকে।
HTML কোড ব্লকঃ
<body>
<div class="container">
<div class="outerWrapper">
<h1>Register</h1>
<div class="innerWrapper">
<div class="sclWrapper">
<ul>
<li>
<a href="#"><i class="fa fa-facebook"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-linkedin"></i></a>
</li>
</ul>
</div>
<div class="formWrapper">
<form action="">
<div class="inputBox">
<label for="name">Your Name</label>
<input type="text" required />
</div>
<div class="inputBox">
<label for="email">Your Email</label>
<input type="email" required />
</div>
<div class="inputBox">
<label for="password">Your Password</label>
<input type="password" required />
</div>
<input type="submit" value="Register Account" />
</form>
</div>
</div>
<div class="formFooter">
<p>Already have an account? <a href="#">Signin</a></p>
</div>
</div>
</div>
</body>
দ্বিতীয়ত, আপনি একটা CSS ফাইল (style.css) তৈরি করে নিন,
নিচের ব্লকে দেওয়া কোডটি Copy করে আপনার সিএসএস
(CSS) ফাইলে Paste করে নিন। মনে রাখবেন
(.css) এক্সটেনশন যেন ঠিক থাকে।
CSS কোড ব্লকঃ
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.outerWrapper {
width: 380px;
box-shadow: 0 0 20px #818181;
background-color: rgba(17, 17, 17, 0.74);
border-radius: 5px;
padding: 20px;
}
.outerWrapper h1 {
text-align: center;
margin-top: 0;
margin-bottom: 40px;
font-size: 32px;
font-variant: small-caps;
color: #fff;
}
.innerWrapper {
background-color: #fff;
padding: 20px;
box-shadow: 0 0 20px rgb(77, 77, 77);
border-radius: 5px;
position: relative;
}
.sclWrapper {
background-color: #ff6347;
width: 150px;
height: 50px;
position: absolute;
top: -9%;
left: 33%;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.sclWrapper ul {
list-style-type: none;
padding: 0;
}
.sclWrapper ul li {
display: inline-block;
margin-left: 5px;
}
.sclWrapper ul li a i {
width: 28px;
height: 22px;
border: none;
border-radius: 100px;
padding-top: 6px;
text-align: center;
transition: all 0.3s ease-in-out;
background-color: #ffffff;
cursor: pointer;
}
.sclWrapper ul li a {
color: #363636;
text-decoration: none;
}
.sclWrapper ul li i.fa-facebook {
color: #3a5693;
}
.sclWrapper ul li i.fa-twitter {
color: #00a7e6;
}
.sclWrapper ul li i.fa-linkedin {
color: #0270ad;
}
.sclWrapper ul li i.fa-facebook:hover {
background: #3a5693;
color: #ffffff;
}
.sclWrapper ul li i.fa-twitter:hover {
background: #00a7e6;
color: #ffffff;
}
.sclWrapper ul li i.fa-linkedin:hover {
background: #0270ad;
color: #ffffff;
}
.formWrapper {
margin-top: 30px;
}
.inputBox {
width: 100%;
height: 100%;
position: relative;
}
.inputBox input {
box-sizing: border-box;
width: 100%;
height: 40px;
margin-bottom: 15px;
border: none;
outline: none;
background-color: rgb(255, 246, 245);
border-radius: 5px;
font-size: 16px;
color: #ff6347;
padding-left: 5px;
transition: 0.5ms ease-in-out;
}
.inputBox input[type="text"]:focus,
.inputBox input[type="text"]:valid,
.inputBox input[type="email"]:focus,
.inputBox input[type="email"]:valid,
.inputBox input[type="password"]:focus {
border: 1px dashed rgb(255, 154, 137);
}
.inputBox label {
font-size: 16px;
color: #ff8b76;
font-variant: small-caps;
}
.formWrapper input[type="submit"] {
display: block;
margin: 0 auto;
border: 1px solid #ff8b76;
color: #ff8b76;
width: 180px;
height: 50px;
background-color: transparent;
font-size: 16px;
border-radius: 10px;
cursor: pointer;
font-variant: small-caps;
}
.formWrapper input[type="submit"]:focus {
background-color: #ff6347;
border: none;
color: #fff;
}
.formFooter {
text-align: center;
color: #fff;
font-size: 18px;
}
.formFooter p a {
color: #ff8b76;
text-decoration: none;
}
আশা করি আপনি কোড টি সফলভাবে রান করাতে পেরেছেন। প্রোজেক্ট টি কেমন লেগেছে অবশ্যই কমেন্ট করে জানাবেন, আর যদি কোন ভূল হয়ে থাকে তাহলে ক্ষমা সুন্দর দৃষ্টিতে দেখবেন এবং কোথায় ভূল হয়েছে কমেন্ট করে জানাবেন। আর আপনাদের কেমন ধরনের প্রোজেক্ট লাগবে তাও জানাবেন , ইনশাআল্লাহ তা দেওয়ার চেষ্টা করবো। আর ওয়েবসাইটটি বন্ধুদের মাঝে শেয়ার করবেন। আজকের মতই এখানেই বিদায় নিলাম, ইনশাআল্লাহ দেখা হবে অন্য কোন প্রোজেক্ট এ। ভালো থাকবেন সুস্থ থাকবেন। আল্লাহ হাফেয।
