Hello Coders! আশা করি ভালো আছেন। notesaid24 ওয়েবসাইটে আপনাকে স্বাগতম। আজকে আপনাদের মাঝে শেয়ার করবো; কিভাবে Sign-in Form HTML এবং CSS এর মাধ্যমে ডিজাইন করা যায় । তাই আজকের এই প্রজেক্টে আশা করি আপনারা অবশ্যই উপকৃত হবেন, তাহলে শুরু করা যাক।
How to Design Sign-in Form with HTML & CSS
প্রজেক্ট
ধারণাঃ
- নামঃ Design Sign-in Form with HTML and CSS
- ভাষাঃ HTML & CSS
- লাইসেন্সঃ ফ্রি
- রেস্পনসিভঃ না
- অথরঃ Notesaid24
প্রজেক্ট করতে যা জানা প্রয়োজনঃ
- বেসিক HTML
- বেসিক CSS
- Margin & Padding ( মার্জিন & প্যাডিং )
- Form Input নিয়ে সামান্য ধারনা থাকলে হবে।
- Display Flex
- Display Grid
- Google Fonts ব্যবহার করার ধারনা
আশা করি
এসব জানা থাকলে এই প্রোজেক্ট করতে কোন সমস্যা নেই, তবে না জানা থাকলেও সমস্যা নেই প্রজেক্ট
করার সাথে সাথে ধারনা হয়ে যাবে। চলুন শুরু করা যাক……………
সাইন-ইন ফরম ডিজাইন করার জন্য, প্রথমে আপনাকে দুটি ফাইল তৈরি করতে হবে। একটি হলো index.html আর অন্যটি হলো style.css ( নামের ব্যপারে কোন বাধ্যবাধকতা নেই তবে ডট নোটেশনের পর .html এবং .css এগুলো ঠিক রাখতে হবে) । নিন্মে index.html এবং
style.css ফাইল দেওয়া হয়েছে। অথবা সোর্স কোড ডাইনলোড করে ব্যবহার করতে পারেন।
প্রথমত, আপনি একটা HTML ফাইল (index.html) তৈরি করে নিন,
নিচের ব্লকে দেওয়া কোডটি Copy করে আপনার এইচটিএমএল (HTML) ফাইলে Paste করে নিন। মনে রাখবেন (.html) এক্সটেনশন যেন ঠিক থাকে।
HTML কোড ব্লকঃ
<body>
<div class="container">
<div class="innerContainer">
<div class="outerWrapper">
<div class="innerWrapper">
<div class="leftSide">
<h1 class="firstLine">Blockchain</h1>
<h1 class="secondLine">
Revolution <br />
in Advertising
</h1>
<p>Your Logo</p>
</div>
<div class="rightSide">
<h1>Hello!</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita
vitae molestiae atque in non error.
</p>
<div class="outerForm">
<form action="">
<div class="inputDiv">
<label for="email">Email Address</label>
<input type="email" name="email" id="email" required />
</div>
<div class="inputDiv">
<label for="password">Password</label>
<input
type="password"
name="password"
id="password"
required
/>
</div>
<div class="inputInfo">
<div class="checkDiv">
<input type="checkbox" />
<label>Remember me</label>
</div>
<p>
<a href="#">Forgot Password?</a>
</p>
</div>
<div class="inputDiv">
<input type="submit" value="Sign In" />
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
দ্বিতীয়ত, আপনি একটা CSS ফাইল (style.css) তৈরি করে নিন,
নিচের ব্লকে দেওয়া কোডটি Copy করে আপনার সিএসএস
(CSS) ফাইলে Paste করে নিন। মনে রাখবেন
(.css) এক্সটেনশন যেন ঠিক থাকে।
CSS কোড ব্লকঃ
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");
/*For More Visit - notesaid24.com*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.container {
background-image: url(./image/bg.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}
.innerContainer {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.outerWrapper {
width: 820px;
box-shadow: 0 0 -25px;
}
.innerWrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.leftSide {
background-color: rgba(44, 44, 44, 0.75);
padding: 30px;
}
.leftSide .firstLine {
font-size: 46px;
color: #474246;
margin: 0;
}
.leftSide .secondLine {
font-size: 40px;
color: #fff;
margin: 0;
line-height: 45px;
}
.leftSide p {
margin-top: 180px;
color: #b4b4b4;
font-size: 26px;
font-variant: small-caps;
text-shadow: 1px 1px #fff;
}
.rightSide {
background-color: #fff;
padding: 30px;
}
.rightSide h1 {
font-size: 32px;
color: #363636;
}
.rightSide p {
font-size: 16px;
color: #5f5f5f;
margin-bottom: 10px;
}
.outerForm {
width: 100%;
height: 100%;
}
.inputDiv input:not([type="submit"]) {
width: 100%;
height: 35px;
margin-bottom: 15px;
border: none;
outline: none;
background-color: #faeff8;
padding-left: 5px;
font-size: 16px;
color: #363636;
border-radius: 5px;
}
.inputDiv input[type="email"]:focus,
.inputDiv input[type="email"]:valid,
.inputDiv input[type="password"]:focus,
.inputDiv input[type="password"]:valid {
border: 1px dashed #190c4e;
}
.inputDiv label {
font-size: 16px;
font-variant: small-caps;
color: #5f5f5f;
}
.inputInfo {
display: flex;
align-items: center;
justify-content: space-between;
}
.inputInfo .checkDiv label {
font-size: 16px;
font-weight: 600;
}
.inputInfo p a {
text-decoration: none;
color: #363636;
font-size: 16px;
}
.inputDiv input[type="submit"] {
margin-top: 15px;
width: 120px;
height: 45px;
border: none;
background-color: #190c4e;
font-size: 16px;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
আশা করি আপনি কোড টি সফলভাবে রান করাতে পেরেছেন। প্রোজেক্ট টি কেমন লেগেছে অবশ্যই কমেন্ট করে জানাবেন, আর যদি কোন ভূল হয়ে থাকে তাহলে ক্ষমা সুন্দর দৃষ্টিতে দেখবেন এবং কোথায় ভূল হয়েছে কমেন্ট করে জানাবেন। আর আপনাদের কেমন ধরনের প্রোজেক্ট লাগবে তাও জানাবেন , ইনশাআল্লাহ তা দেওয়ার চেষ্টা করবো। আর ওয়েবসাইটটি বন্ধুদের মাঝে শেয়ার করবেন। আজকের মতই এখানেই বিদায় নিলাম, ইনশাআল্লাহ দেখা হবে অন্য কোন প্রোজেক্ট এ। ভালো থাকবেন সুস্থ থাকবেন। আল্লাহ হাফেয।
