Hello Coders! আশা করি ভালো আছেন। notesaid24 ওয়েবসাইটে আপনাকে স্বাগতম। আজকে আপনাদের মাঝে শেয়ার করবো; কিভাবে Login Form HTML এবং CSS এর মাধ্য...
Hello Coders! আশা করি ভালো আছেন। notesaid24 ওয়েবসাইটে আপনাকে স্বাগতম। আজকে আপনাদের মাঝে শেয়ার করবো; কিভাবে Login Form HTML এবং CSS এর মাধ্যমে ডিজাইন করা যায় । তাই আজকের এই প্রজেক্টে আশা করি আপনারা অবশ্যই উপকৃত হবেন, তাহলে শুরু করা যাক।
How to Design Login Form with HTML & CSS
প্রজেক্ট
ধারণাঃ
- নামঃ Design Login Form with HTML and CSS
- ভাষাঃ HTML & CSS
- লাইসেন্সঃ ফ্রি
- রেস্পনসিভঃ না
- অথরঃ Notesaid24
প্রজেক্ট করতে যা জানা প্রয়োজনঃ
- বেসিক HTML
- বেসিক CSS
- Margin & Padding ( মার্জিন & প্যাডিং )
- Form Input নিয়ে সামান্য ধারনা থাকলে হবে।
- Font Awesome Icon (এই প্রজেক্টে Font Awesome এর ৪.৭ ভার্সন ব্যবহার করা হয়েছে।)
- Display Flex
- Display Grid
আশা করি
এসব জানা থাকলে এই প্রোজেক্ট করতে কোন সমস্যা নেই, তবে না জানা থাকলেও সমস্যা নেই প্রোজেক্ট
করার সাথে সাথে ধারনা হয়ে যাবে। চলুন শুরু করা যাক……………
Login ফরম ডিজাইন করার জন্য, প্রথমে আপনাকে দুটি ফাইল তৈরি করতে হবে। একটি হলো index.html আর অন্যটি হলো style.css ( নামের ব্যপারে কোন বাধ্যবাধকতা নেই তবে ডট নোটেশনের পর .html এবং .css এগুলো ঠিক রাখতে হবে) । নিন্মে index.html এবং style.css ফাইল দেওয়া হয়েছে। অথবা সোর্স কোড ডাইনলোড করে ব্যবহার করতে পারেন।
প্রথমত, আপনি একটা HTML ফাইল (index.html) তৈরি করে নিন,
নিচের ব্লকে দেওয়া কোডটি Copy করে আপনার এইচটিএমএল (HTML) ফাইলে Paste করে নিন। মনে রাখবেন (.html) এক্সটেনশন যেন ঠিক থাকে।
HTML কোড ব্লকঃ
<body>
<div class="container">
<div class="outerContainer">
<div class="innerContainer">
<div class="leftSide">
<h1>Notesaid24</h1>
<p>Login using social site to get quick access.</p>
<ul>
<li class="fbBtn">
<i class="fa fa-facebook" aria-hidden="true"></i>Facebook
</li>
<li class="twBtn">
<i class="fa fa-twitter" aria-hidden="true"></i>Twitter
</li>
<li class="giBtn">
<i class="fa fa-github" aria-hidden="true"></i>Github
</li>
</ul>
</div>
<div class="rightSide">
<h1>Login your account</h1>
<div class="formContainer">
<form action="">
<input type="email" placeholder="Enter Email" name="" id="" />
<input
type="password"
placeholder="Enter Password"
name=""
id=""
/>
<button type="submit">Login</button>
</form>
<p><a href="#">Forgot Password?</a></p>
</div>
</div>
</div>
</div>
</div>
</body>
দ্বিতীয়ত, আপনি একটা CSS ফাইল (style.css) তৈরি করে নিন,
নিচের ব্লকে দেওয়া কোডটি Copy করে আপনার সিএসএস
(CSS) ফাইলে Paste করে নিন। মনে রাখবেন
(.css) এক্সটেনশন যেন ঠিক থাকে।
CSS কোড ব্লকঃ
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;1,400&display=swap");
body {
background-image: url(../img/bg.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
padding: 0;
height: 100vh;
font-family: "Poppins", sans-serif;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.outerContainer {
background-color: aliceblue;
width: 620px;
padding: 10px;
border-radius: 5px;
}
.innerContainer {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
.leftSide h1,
.rightSide h1 {
font-size: 22px;
font-weight: normal;
text-align: center;
color: #363636;
margin: 0;
margin-top: 20px;
}
.leftSide p {
font-size: 14px;
text-align: center;
margin-top: 0;
padding: 0 5px;
}
.leftSide ul {
display: block;
overflow: hidden;
padding-left: 20px;
padding-bottom: 20px;
padding-right: 20px;
padding-top: 0;
}
.leftSide ul li {
list-style: none;
margin-top: 10px;
font-size: 16px;
padding: 6px;
color: #fff;
border-radius: 5px;
cursor: pointer;
transition: 0.3s ease-in-out;
}
.leftSide ul li i {
margin-right: 5px;
font-size: 16px;
}
.leftSide ul .fbBtn {
background-color: #3b5a99;
}
.leftSide ul .twBtn {
background-color: #0290c4;
}
.leftSide ul .giBtn {
background-color: #2a2f35;
}
.leftSide ul .fbBtn:hover {
background-color: #2d477c;
}
.leftSide ul .twBtn:hover {
background-color: #0278a3;
}
.leftSide ul .giBtn:hover {
background-color: #1a1d20;
}
.formContainer {
padding: 20px;
}
.formContainer form {
width: 100%;
height: 100%;
}
.formContainer input {
width: 100%;
height: 40px;
margin-bottom: 10px;
border: 1px solid #d1d1d1;
background-color: transparent;
padding-left: 5px;
border-radius: 5px;
outline: none;
color: #0290c4;
}
.formContainer button {
width: 90px;
height: 35px;
border: none;
outline: none;
background-color: #0290c4;
font-size: 16px;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.formContainer p {
text-align: right;
font-size: 16px;
}
.formContainer p a {
text-decoration: none;
color: tomato;
cursor: pointer;
}
.formContainer p a:hover {
color: #0290c4;
}
আশা করি আপনি কোড টি সফলভাবে রান করাতে পেরেছেন। প্রোজেক্ট টি কেমন লেগেছে
অবশ্যই কমেন্ট করে জানাবেন, আর যদি কোন ভূল
হয়ে থাকে তাহলে ক্ষমা সুন্দর দৃষ্টিতে দেখবেন এবং কোথায় ভূল হয়েছে কমেন্ট করে জানাবেন।
আর আপনাদের কেমন ধরনের প্রোজেক্ট লাগবে তাও জানাবেন , ইনশাআল্লাহ তা দেওয়ার চেষ্টা
করবো। আর ওয়েবসাইটটি বন্ধুদের মাঝে শেয়ার করবেন। আজকের মতই এখানেই বিদায় নিলাম, ইনশাআল্লাহ দেখা হবে অন্য কোন প্রোজেক্ট এ। ভালো থাকবেন সুস্থ
থাকবেন। আল্লাহ হাফেয।
COMMENTS