কিভাবে একটি ল্যান্ডিং পেজ ডিজাইন করা যায় শুধুমাত্র এইচটিএমএল এবং সিএসএস এর মাধ্যমে

Join Our Official Telegram Channel

হেয় গায়জ হোয়াটসআপ কি অবস্থা আমি ইনাদ ইসলাম। আবার হাজির হয়েছি একটা নতুন পোস্ট নিয়ে।

তো টাইটেল দেখেই বুঝে গেছেন কিসের কথা বলছি। তো গত পোস্টে আমরা দেখেছিলাম কিভাবে একটি সেন্টার্ড হরিযন্টাল ন্যাভবার ডিজাইন করা যায়। আজ আমরা দেখবো পুরো একটা ওয়েবসাইটের হোম পেজ অথবা যেটাকে বলা হয় ল্যান্ডিং পেজ৷ সেটা কীভাবে ডিজাইন করবো। তাহলে চলেন শুরু করি।

আর কয়েকজন বলছিলেন লগিন সিস্টেম বানানো নিয়ে টিউটোরিয়াল বানাতে। আপনারা কি সত্যি টিউটোরিয়াল চান তাহলে কমেন্টে যানান। আপনাদের সকল প্রবলেম সলভ করবো ইনশাল্লাহ। এবং সকল আশা কামনা পুরোন করবো ইনশাল্লাহ!!

তো প্রত্যেক বারের মতোই কোড দিবো আপনারা কপি করে দুটো ফাইল বানাবেন। নিম্মের কোড টুকু Index.html এ রাখবেনঃ-

Example

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Landing Page - Pogamar | The Tech Therapist</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="main">
		<div class="section">
			<nav class="nav">
				<div class="brand">
					<h2><span><</span><span>/<span>pogamar<span>></span></h2>
				</div>
			<ul>
					<li><a class="active" href="#home">Home</a></li>
					<li><a href="#news">News</a></li>
					<li><a href="#about">About</a></li>
					<li><a href="#contact">Contact</a></li>
					<li><a href="#dmca">DMCA</a></li>
				</ul>
			</nav>
			<div class="content">
				<div class="text">
					<h1><pre>POGAMAR_YT CREATION'S LANDING PAGE</pre></h1>
					<p>Create a Landing Page not so Easy</p>
				</div>
				<div class="try">
					<form action="">
						<input type="text" name="name" placeholder="Your Name">
						<input type="email" name="email" placeholder="Your Email">
						<input type="password" name="password" placeholder="Choose Password">
						<input type="submit" value="Start Free Trial">
					</form>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

রেখে সেইভ দিন। এবং নিম্মের কোড টুকু রাখবেন style.css এঃ-

Example

* {
	margin:0;
	padding:0;
}
html, body {
	width: 100%;
	height: 100vh;
}






.main {
	width: 100%;
	height: 100%;
	margin: auto;
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),  url(bg.jpg) no-repeat 50% 50%;
	top: 0;
	display: table;
	background-size: cover;
}
.main .section {
	display: table-cell;
	width: 100%;
	max-width: none;
}
.brand {
	float:left;
}
h2 {
	color: #fff;
	margin-top: 20px;
	margin-left: 50px;
}
ul {
	float: right;
	list-style-type: none;
	margin-top: 25px;
	margin-right: 15px;
}
ul li {
	display: inline-block;
}
ul li a {
	text-align: center;
	color: #fff;
	padding: 5px 20px;
	border: 1px solid transparent;
	text-decoration: none;
	border-radius: 4px;
	transition: 0.6s ease;
}
ul li a:hover {
	background: #fff;
	color: #000;
}
.active {
	background: #fff;
	color: #000;
}
.content {
	width: 100%;
	height: auto;
}
.text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.text h1 {
	color: #fff;
	font-size: 32px;
}
.text p {
	color: #fff;
	width: 100%;
	font-weight: 300;
	text-align: center;



	font-size: 20px;
	padding-top: 10px;
	padding-bottom: 15px;
}
.try {
	position: absolute;
	top: 56%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	text-align: center;
}
form {
	background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
	padding: 30px;
	display: inline-block;
}
input {
	display: inline-block;
	margin-right: 10px;
	width: 180px;
	padding: 5px;
}
input[type="submit"] {
	background: #ff0000;
	border: 1px solid #ff0000;
	padding: 8px;
	text-transform: uppercase;
	color: #fff;
	font-weight: bold;
}

এবার কোড টা এক্সিকিউট করুন। আপনি ওয়েব সার্ভার সেট করে সেখানেও রান করাতে পারেন। অথবা ক্রোম ওপেন করেও রান করাতে পারেন যেটা আমি গত দুই পর্বেও দেখিয়েছিলাম। যারা দেখেননি তাদের জন্যে আজ আবার দেখিয়ে দেয়া হলো-

files://sdcard/folder_name

অর্থাৎ আপনার ফোল্ডার এর নাম যদি হয় Hor-Nav তাহলে আপনাকে ইউয়ারএল বক্স এ লিখতে হবেঃ-

files://sdcard/landing_page/index.html

তারপর দেখুন আপনার কোড এক্সিকিউট হচ্ছে। এবার আপনার যেমন ভালো লাগে তেমন মডিফাই করে নিন। দরকার হলে কালার চেঞ্জ করে নিন। সম্পুর্ন আপনার ইচ্ছে

তো যাবার আগে শেষ কথা। আপনারা যারা আগের ভিডিও গুলো দেখেননি এখান থেকে দেখে নিবেন।

How to make a Login Form By html & css

How to make a Centered Horizontal Nav Bar With logo by Html & css

How to make a Navbar By html & css

How to make a Registration Form By html & css

আর যাদের এই টিউটোরিয়াল টি বুঝতে অথবা কোড বুঝতে সমস্যা হচ্ছে তারা ভিডিও টি দেখুনঃ

আর যারা ওয়েব ডিজাইনিং এবং ডেভেলপমেন্ট শিখতে চান তারা আমার চ্যানেল সাবস্ক্রাইব করে রাখুন কারণ সামনে কিছু চেইন টিউটোরিয়ালের ব্যবস্থা আমি করছি যা আপনার হাজার হাজার টাকা বাচাবে। আমি যেহেতু সম্পুর্ণ ফ্রিতে নিজে কষ্ট করে শিখেছি। তা আপনাদের মধ্যে বিলি করতে আমার এইটুকু কষ্ট হবেনা। আমার আরও আনন্দের সংবাদ।

পোস্টের কমেন্টে বলুন আপনাদের প্রব্লেম এবং ভিডিও গুলোতে কি আমি প্রত্যেক লাইন কোড এক্সপ্লেইন করবো কিনা।

আবার আসব আরেক টিউটোরিয়াল নিয়ে। ততদিন সুস্থ থাকুন। Pogamar এর সাথে থাকুন।

আর যাদের এই টিউটোরিয়াল এর কোড গুলো প্রয়োজন তারা এখান থেকে ডাউনলোড করে নিনঃ Download Codes

আর ভালো লাগলে আমার চ্যানেল টি সাবস্ক্রাইব করুনঃ

Pogamar – The Tech Therapist

ধন্যবাদ ভুল ত্রুটি ক্ষমা করবেন

ফেসবুকে আমি:-Inad Islam
আমার ইউটিউব চ্যানেলঃ- POGAMAR

5 years ago (Jun 30, 2019)