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

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

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

Example

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<title>Horizontal Nav Bar - Pogamar | The Tech Therapist</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="main">
		<div class="logo">
			<h1>POGAMAR</h1>
			<p>Do Something Techy</p>
		</div>		
		<nav class="navbar">
			<a href="#home">Home</a>
			<a href="#html">Web Design</a>
			<a href="#css">Golang</a>
			<a href="#php">Python</a>
			<a href="#js">ui/ux</a>
		</nav>
	</div>
</body>
</html>

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

Example

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
* {
	margin:0;
	padding:0;
}
body {
	width: 100%;
	height: 100vh;
	font-family: 'Roboto', sans-serif;
}
.main {
	background-image: linear-gradient(141deg, #9fb8ed 0%, #1fc8db  51%, #2cb5e8 75%);
}
.logo h1 {
	margin:0;
	font-size: 18px;
	font-weight: 520;
	text-transform: uppercase;
	text-align: center;
	padding-top: 10px;
}
.logo p {
	font-weight: 550;
	text-align: center;
	padding-bottom: 5px;
	padding-top: 5px;
	font-size: 14px;
}
.navbar {
	padding: 10px;
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: none;
}
.navbar a {
	display: inline-block;
	padding: 5px 10px;
	padding-left: 4px;;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
font-weight: 53000; font-size: 13px; } .navbar a:hover { border-bottom: 2px solid #fff; }

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

files://sdcard/folder_name

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

files://sdcard/Hor-Nav/index.html

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

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

How to make a Login Form 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

note: ট্রিকবিডিতে হয়ত সিকিউরিটি পারপাস অর্থাৎ কেও যাতে কোড ইঞ্জেক্ট করতে না পারে তাই হয়তো Iframe এর মাধ্যমে ভিডিও ইম্বিড বন্ধ করে দিয়েছে। না হয় অনেক বার ট্রাই করলাম রিস্পোন্সিভ ইম্বিড দিতে বাট ব্যর্থ হলাম

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

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

10 thoughts on "কীভাবে সেন্টার্ড হরিযন্টাল ন্যাভবার ডিজাইন করবেন শুধুমাত্র এইচটিএমএল এবং সিএসএস দিয়ে।"

  1. Arham Araf Arham Araf Author says:
    ভাই,
    ডিজাইন তো করা হলো; কিন্তু এই যে form fill-up, registration, ইত্যাদি page ইউস করে পাবিক যখন ডাটা submit করবে, সেই data গুলি কোথায় জমা হবে?
    🤔


    1. Pogamar - The Tech Therapist Pogamar - The Tech Therapist Author Post Creator says:
      Database e jabe
  2. Arham Araf Arham Araf Author says:
    ভাই,
    ডিজাইন তো করা হলো; কিন্তু এই যে form fill-up, registration, ইত্যাদি page ইউস করে পাবলিক যখন ডাটা submit করবে, সেই data গুলি কোথায় জমা হবে? আর log-in page কিভাবে already registered user দেরকে verify করবে? এই কাজ গুলো কিভাবে হবে?
    🤔
    1. Pogamar - The Tech Therapist Pogamar - The Tech Therapist Author Post Creator says:
      jokhon apni username diye registration korte jaben ar username diben tokhon condition diye check kora hobe je database oi ekoi username e kono row ache kina jodi thake true return korbe ar na thakle false return korbe
  3. Arham Araf Arham Araf Author says:
    ভাই,
    ডিজাইন তো করা হলো; কিন্তু এই যে form fill-up, registration, ইত্যাদি page ইউস করে পাবলিক যখন ডাটা submit করবে, সেই data গুলি কোথায় জমা হবে? আর log-in page কিভাবে already registered user দেরকে verify করবে? এই কাজ গুলো কিভাবে হবে? I mean, site-টি dynamic বা user interactive কিভাবে করা সম্ভব?
    🤔
    1. Pogamar - The Tech Therapist Pogamar - The Tech Therapist Author Post Creator says:
      okay apni jokhon bolei felsen next video and post login and registration er backend programming niyai hobe
  4. Pogamar - The Tech Therapist Pogamar - The Tech Therapist Author Post Creator says:
    Ami amar shobkichui apnader sharthe diye dibo tar bodole amar shudhu apnader support ar valobasha cai amar kajer proti(youtube) inshallah shob paben
  5. Arham Araf Arham Araf Author says:
    ভাই data-base এর সাথে conncet করা এবং code-এ ডাটা বসানোর জন্য তো MySQL করা লাগবে? আর data-base এর security, encription এগুলি?
    1. Pogamar - The Tech Therapist Pogamar - The Tech Therapist Author Post Creator says:
      Jokhon table create korben tokhon table er type md5 kore diben ar na hoy data database e transfer ba insert er shomoy php er md5(); function use kore insert korben taholei hobe
  6. Arham Araf Arham Araf Author says:
    থ্যাংস ভাই! 🙂

Leave a Reply