হ্যালো ভিউয়ারস, আশা করি ভালো আছেন। Notesaid24 ওয়েবসাইটে আপনাকে স্বাগতম। আজকে আপনাদের মাঝে শেয়ার করবো; কিভাবে Contact Us ফরম HTML এবং CSS এর মাধ্যমে ডিজাইন করা যায় । (How To Design Contact Us Form in HTML And CSS With Social Icons)
প্রোজেক্ট ধারণাঃ
- নামঃ Design Contact Us Form in HTML And CSS With Social Icons
- ভাষাঃ HTML & CSS
- লাইসেন্সঃ ফ্রি
- রেস্পনসিভঃ না
- অথরঃ Notesaid24
প্রোজেক্ট করতে যা জানা প্রয়োজনঃ
- বেসিক HTML
- বেসিক CSS
- Margin & Padding ( মার্জিন & প্যাডিং )
- Position ( পজিশন )
- Absolute
- Relative
- Font Awesome Icon (এই প্রোজেক্ট এ Font Awesome এর 4.7.0 ভার্সন ব্যবহার করা হয়েছে। )
- Form Input নিয়ে সামান্য ধারনা থাকলে হবে।
- Display Flex
আশা করি এসব জানা থাকলে এই প্রোজেক্ট করতে কোন সমস্যা নেই, তবে না জানা থাকলেও সমস্যা নেই প্রোজেক্ট করার সাথে সাথে ধারনা হয়ে যাবে। চলুন শুরু করা যাক……………
Contact Us ফরম ডিজাইন করার জন্য, প্রথমে আপনাকে দুটি ফাইল তৈরি করতে হবে। একটি হলো index.html আর অন্যটি হলো style.css ( নামের ব্যপারে কোন বাধ্যবাধকতা নেই তবে ডট নোটেশনের পর .html এবং .css এগুলো ঠিক রাখতে হবে) । নিন্মে index.html এবং style.css ফাইল দেওয়া হয়েছে।
প্রথমত, আপনি একটা HTML ফাইল (index.html) তৈরি করে নিন, নিচের ব্লকে দেওয়া কোডটি Copy করে আপনার এইচটিএমএল (HTML) ফাইলে Paste করে নিন। মনে রাখবেন
(.html) এক্সটেনশন যেন ঠিক থাকে।
HTML কোড ব্লকঃ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Us _ By Notesaid24</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<div class="container">
<div class="mainContainer">
<div class="leftContainer">
<h1>Contact Us</h1>
<h2>Get in touch we're happy to hear you!</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae
a omnis, fugit saepe laborum distinctio!
</p>
<div class="innerAddress">
<p>Notesaid24</p>
<p>Dhaka, Bangladesh</p>
<p>+880XXXXXXXXXX</p>
</div>
<div class="innerSocial">
<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>
<li>
<a href="#"><i class="fa fa-quora"></i></a>
</li>
</ul>
</div>
</div>
<div class="rightContainer">
<h1>Send Us a message</h1>
<div class="formContainer">
<form action="">
<input type="text" placeholder="Name" required />
<input type="email" placeholder="Email" required />
<textarea placeholder="Message"></textarea>
<input type="button" value="Submit" />
</form>
</div>
</div>
</div>
</div>
</body>
</html>
দ্বিতীয়ত, আপনি একটা CSS ফাইল (style.css) তৈরি করে নিন, নিচের ব্লকে দেওয়া কোডটি Copy করে আপনার সিএসএস (CSS) ফাইলে Paste করে নিন। মনে রাখবেন
(.css) এক্সটেনশন যেন ঠিক থাকে।
CSS কোড ব্লকঃ
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.mainContainer {
display: flex;
width: 820px;
border: 1px solid #c3c3c3;
border-radius: 10px;
}
.leftContainer {
display: flex;
flex: 1;
flex-direction: column;
padding: 20px;
}
.rightContainer {
display: flex;
flex: 1;
background: #00b4db;
background: -webkit-linear-gradient(to top, #0083b0, #00b4db);
background: linear-gradient(to top, #0083b0, #00b4db);
padding: 20px;
flex-direction: column;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.leftContainer h1 {
font-size: 38px;
color: #363636;
position: relative;
}
.leftContainer h1::after {
position: absolute;
content: "";
border: 2px solid #4b79a1;
left: 0;
bottom: -10px;
width: 120px;
}
.leftContainer h2 {
font-size: 25px;
color: #363636;
}
.leftContainer p {
font-size: 16px;
color: #283e51;
}
.innerAddress p {
font-size: 16px;
color: #283e51;
margin: 5px;
}
.innerSocial ul {
text-align: left;
padding-left: 5px;
margin-top: 20px;
}
.innerSocial ul li {
display: inline-block;
margin-right: 10px;
}
.innerSocial ul li a i {
width: 28px;
height: 22px;
border: 1px solid #c3c3c3;
border-radius: 100px;
padding-top: 6px;
text-align: center;
transition: all 0.3s ease-in-out;
background-color: #ffffff;
cursor: pointer;
}
.innerSocial ul li a {
color: #363636;
text-decoration: none;
}
.innerSocial ul li i.fa-facebook {
color: #3a5693;
}
.innerSocial ul li i.fa-twitter {
color: #00a7e6;
}
.innerSocial ul li i.fa-linkedin {
color: #0270ad;
}
.innerSocial ul li i.fa-quora {
color: #e54a43;
}
.innerSocial ul li i.fa-facebook:hover {
background: #3a5693;
color: #ffffff;
}
.innerSocial ul li i.fa-twitter:hover {
background: #00a7e6;
color: #ffffff;
}
.innerSocial ul li i.fa-linkedin:hover {
background: #0270ad;
color: #ffffff;
}
.innerSocial ul li i.fa-quora:hover {
background-color: #e54a43;
color: #fff;
}
.rightContainer h1 {
font-size: 38px;
color: #ffffff;
}
.formContainer {
display: block;
overflow: none;
}
.formContainer form {
width: 100%;
height: 100%;
display: block;
}
.formContainer input:not([type="button"]),
textarea {
width: 100%;
height: 40px;
margin-bottom: 15px;
background-color: transparent;
border: 0;
outline: none;
border-bottom: 1px solid #c3c3c3;
padding-left: 5px;
font-size: 18px;
color: #ffffff;
font-weight: normal;
resize: none;
}
::placeholder {
color: #c3c3c3;
font-size: 15px;
}
.formContainer input[type="button"] {
margin-top: 30px;
width: 150px;
height: 45px;
border-radius: 10px;
border: none;
outline: none;
font-size: 16px;
color: #363636;
cursor: pointer;
transition: 0.2s ease;
}
.formContainer input[type="button"]:hover {
background-color: transparent;
border: 1px solid #c3c3c3;
color: #ffffff;
}
আশা করি আপনি কোড টি সফলভাবে রান করাতে পেরেছেন। প্রোজেক্ট টি কেমন লেগেছে অবশ্যই কমেন্ট করে জানাবেন, আর যদি কোন ভূল হয়ে থাকে তাহলে ক্ষমা সুন্দর দৃষ্টিতে দেখবেন এবং কোথায় ভূল হয়েছে কমেন্ট করে জানাবেন। আর আপনাদের কেমন ধরনের প্রোজেক্ট লাগবে তাও জানাবেন , ইনশাআল্লাহ তা দেওয়ার চেষ্টা করবো। আর ওয়েবসাইটটি বন্ধুদের মাঝে শেয়ার করবেন। আজকের মতই এখানেই বিদায় নিলাম, ইনশাআল্লাহ দেখা হবে অন্য কোন প্রোজেক্ট এ। ভালো থাকবেন সুস্থ থাকবেন। আল্লাহ হাফেয।
