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

Web Development

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

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

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

তো প্রত্যেক বারের মতোই কোড দিবো আপনারা কপি করে দুটো ফাইল বানাবেন। নিম্মের কোড টুকু 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

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

Leave a Reply

Your email address will not be published. Required fields are marked *