হ্যালো ভিউয়ারস, আশা করি ভালো আছেন। Notesaid24 ওয়েবসাইটে আপনাকে স্বাগতম। আজকে আপনাদের মাঝে শেয়ার করবো; কিভাবে Newsletter ফরম HTML এবং CSS এর মাধ্যমে ডিজাইন করা যায় ।
How to Design Newsletter Form in HTML and CSS
প্রোজেক্ট ধারণাঃ
- নামঃ Design Newsletter Form in HTML and CSS
- ভাষাঃ HTML & CSS
- লাইসেন্সঃ ফ্রি
- রেস্পনসিভঃ না
- অথরঃ Codingsrc24
প্রোজেক্ট করতে যা জানা প্রয়োজনঃ
- বেসিক HTML
- বেসিক CSS
- Margin & Padding ( মার্জিন & প্যাডিং )
- Display Flex
- প্রজেক্টে এ কীভাবে Google Fonts ব্যবহার করতে হয় তা সম্পর্কে ধারণা রাখতে হবে।
আশা করি এসব জানা থাকলে এই প্রোজেক্ট করতে কোন সমস্যা নেই, তবে না জানা থাকলেও সমস্যা নেই প্রোজেক্ট করার সাথে সাথে ধারনা হয়ে যাবে। চলুন শুরু করা যাক……………
Newsletter ফরম ডিজাইন করার জন্য, প্রথমে আপনাকে দুটি ফাইল তৈরি করতে হবে। একটি হলো 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">
<div class="innerWrapper">
<div class="newsLetterIcon">
<img src="./image/mail-box.png" alt="" />
</div>
<div class="newsLetterInfo">
<h1>Join Us</h1>
<p>Subscribe our newsletter and stay up to date about us!</p>
</div>
</div>
<form action="">
<div class="inputform">
<input
type="email"
name="email"
placeholder="Enter Your Email"
id="email"
required
/>
<input type="submit" value="Subscribe Now" />
</div>
</form>
</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;0,700;1,400;1,600;1,700&display=swap");
body {
max-width: 920px;
width: 96%;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
color: #363636;
font-family: "Poppins", sans-serif;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
flex-direction: column;
}
.outerWrapper {
box-shadow: 0 0 10px hsl(0, 0%, 35%);
padding: 40px;
position: relative;
border-radius: 10px;
}
.outerWrapper::after {
position: absolute;
content: "X";
top: 5%;
right: 5%;
font-weight: 700;
font-size: 18px;
color: rgb(109, 109, 109);
cursor: pointer;
}
.innerWrapper {
display: flex;
align-items: center;
justify-content: space-between;
}
.newsLetterIcon {
display: flex;
flex: 1;
}
.newsLetterIcon img {
width: 250px;
}
.newsLetterInfo {
display: flex;
flex: 1;
flex-direction: column;
}
.newsLetterInfo h1 {
font-size: 48px;
font-weight: 700;
font-variant: small-caps;
margin-bottom: 0;
}
.newsLetterInfo p {
font-size: 16px;
margin-top: 0;
}
.inputform {
display: flex;
align-items: center;
justify-content: center;
margin-top: 30px;
}
.inputform input:not([type="submit"]) {
display: block;
width: 50%;
height: 40px;
border: 1px solid #c7c7c7;
outline: none;
padding-left: 10px;
font-size: 16px;
color: #363636;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.inputform input[type="email"]:focus {
border: 1px solid #fb4a59;
}
.inputform input[type="submit"] {
width: 140px;
height: 44px;
font-size: 16px;
border: none;
background-color: #fb4a59;
color: #fff;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
}
আশা করি আপনি কোড টি সফলভাবে রান করাতে পেরেছেন। প্রোজেক্ট টি কেমন লেগেছে অবশ্যই কমেন্ট করে জানাবেন, আর যদি কোন ভূল হয়ে থাকে তাহলে ক্ষমা সুন্দর দৃষ্টিতে দেখবেন এবং কোথায় ভূল হয়েছে কমেন্ট করে জানাবেন। আর আপনাদের কেমন ধরনের প্রোজেক্ট লাগবে তাও জানাবেন , ইনশাআল্লাহ তা দেওয়ার চেষ্টা করবো। আর ওয়েবসাইটটি বন্ধুদের মাঝে শেয়ার করবেন। আজকের মতই এখানেই বিদায় নিলাম, ইনশাআল্লাহ দেখা হবে অন্য কোন প্রোজেক্ট এ। ভালো থাকবেন সুস্থ থাকবেন। আল্লাহ হাফেয।
