How to Design Subscribe Form with HTML & CSS
Hello Coders! আশা করি ভালো আছেন। notesaid24 ওয়েবসাইটে আপনাকে স্বাগতম। আজকে আপনাদের মাঝে শেয়ার করবো; কিভাবে Subscribe Form HTML এবং CSS এর মাধ্যমে ডিজাইন করা যায় । তাই আজকের এই প্রজেক্টে আশা করি আপনারা অবশ্যই উপকৃত হবেন, তাহলে শুরু করা যাক।
How to Design Subscribe Form with HTML & CSS
প্রজেক্ট
ধারণাঃ
- নামঃ Design Subscribe Form with HTML and CSS
- ভাষাঃ HTML & CSS
- লাইসেন্সঃ ফ্রি
- রেস্পনসিভঃ না
- অথরঃ Notesaid24
প্রজেক্ট করতে যা জানা প্রয়োজনঃ
- বেসিক HTML
- বেসিক CSS
- Margin & Padding ( মার্জিন & প্যাডিং )
- Position ( পজিশন )
- Absolute
- Relative
- Form Input নিয়ে সামান্য ধারনা থাকলে হবে।
- Display Flex
আশা করি
এসব জানা থাকলে এই প্রোজেক্ট করতে কোন সমস্যা নেই, তবে না জানা থাকলেও সমস্যা নেই প্রোজেক্ট
করার সাথে সাথে ধারনা হয়ে যাবে। চলুন শুরু করা যাক……………
Subscribe ফরম ডিজাইন করার জন্য, প্রথমে আপনাকে দুটি ফাইল তৈরি করতে হবে। একটি হলো 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="bgColor">
<div class="innerWrapper">
<h1>Subscribe</h1>
<p>coming soon to your inbox</p>
<img src="./image/email.png" alt="Email" />
</div>
<div class="innerInput">
<form action="">
<input type="text" placeholder="Enter Your Email" />
<button type="submit">Submit</button>
</form>
</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");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
color: #707070;
}
.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;
}
.bgColor {
background-color: #fff;
width: 380px;
}
.innerWraper {
padding: 20px;
}
.innerWraper h1 {
font-size: 36px;
text-transform: uppercase;
font-weight: normal;
margin-bottom: 0;
letter-spacing: 6px;
text-align: center;
}
.innerWraper p {
margin-top: 0;
line-height: 5px;
font-size: 15px;
text-align: center;
margin-bottom: 30px;
}
.innerWraper img {
width: 80px;
margin: 0 auto;
display: block;
}
.innerInput {
width: 100%;
height: 100%;
margin-top: 30px;
}
.innerInput input {
display: inline-block;
width: 78%;
height: 50px;
border: none;
outline: none;
background-color: #dfdfdf;
padding-left: 15px;
font-size: 16px;
color: #707070;
font-weight: normal;
text-align: center;
position: relative;
}
::placeholder {
text-transform: uppercase;
letter-spacing: 3px;
}
.innerInput button {
position: absolute;
width: 85px;
height: 50px;
border: none;
background-color: #1e88e5;
font-size: 16px;
text-transform: uppercase;
color: #fff;
letter-spacing: 2px;
cursor: pointer;
}
আশা করি আপনি কোড টি সফলভাবে রান করাতে পেরেছেন। প্রোজেক্ট টি কেমন লেগেছে
অবশ্যই কমেন্ট করে জানাবেন, আর যদি কোন ভূল
হয়ে থাকে তাহলে ক্ষমা সুন্দর দৃষ্টিতে দেখবেন এবং কোথায় ভূল হয়েছে কমেন্ট করে জানাবেন।
আর আপনাদের কেমন ধরনের প্রোজেক্ট লাগবে তাও জানাবেন , ইনশাআল্লাহ তা দেওয়ার চেষ্টা
করবো। আর ওয়েবসাইটটি বন্ধুদের মাঝে শেয়ার করবেন। আজকের মতই এখানেই বিদায় নিলাম, ইনশাআল্লাহ দেখা হবে অন্য কোন প্রোজেক্ট এ। ভালো থাকবেন সুস্থ
থাকবেন। আল্লাহ হাফেয।
COMMENTS