হেয় গায়জ হোয়াটসআপ কি অবস্থা আমি ইনাদ ইসলাম। আবার হাজির হয়েছি একটা নতুন পোস্ট নিয়ে।
তো আমি যেমন টা বলেছিলাম আপনাদের প্রব্লেম গুলো কমেন্ট করতে তো ই দুটো কি তিন্টে প্রবলেম পেয়েছিলাম সেগুলো হলো কেও একজন বললেন “ভাই রিস্পোন্সিভ থিম কিভাবে বানাবো” আরেকজনে বলল ভাই পিএইচপি নিয়ে পোস্ট করেন এবং কেও একজন ফ্রি নেট স্ক্রিপ্ট নিয়ে লিখতে বললো।
যারা কমেন্ট করেছেন তাদের বলবো লাখ লাখ ধন্যবাদ ভাই এবং যারা কমেন্ট করেননি তাদের ও ধন্যবাদ। কিন্তু আমি চাইতেছি যে সব ভিডিও একটা চেইন এ আপলোড করবো এক এক ভিডিও তে এক একরকম প্রবলেম এর সলিউশন দিবো ইনশাল্লাহ। আর যারা প্রবলেম জানাতে পারেন্নি তারা এই পোশট এর নিচে প্রবলেম গুলো বলুন ইনশাল্লাহ কখন ভিডিও আপলোড করব জানিয়ে দিবো। ওবং সলিউশন দেয়ার চেষ্টা করবো।
আমার একটা প্রশ্ন ছিলো যারা আমার ইউটিউব চ্যানেল এ ভিডিও দেখেছেন বা যারা দেখেননি তারা নিচ থেকে দেখার অনুরোদ রইলো। তাদের বলছি আপনারা কী প্রত্যেক টির এক্সপ্লেশন চান। মানে বিস্তারিত? কমেনট এ জানান।
তো টাইটেল দেখেই বুঝে গেছেন কিসের কথা বলছি। যারা বুঝেন্নি তাদের বলি আমরা যখন ট্রিকবিডিতে ঢুকি এবং লগিন করি তখন ট্রিকবিডি এর লগিন এর নিচে দুটো অপশন থাকে একটা হলো Home আর notification। এই যে দুটো অপশন এই দুটো কে মিলে বলে ন্যাভ বার। তো আজ আমরা জানবো কিভাবে এটা বানানো যায়। তাহলে চলেন শুরু করি।
তো প্রত্যেক বারের মতোই কোড দিবো আপনারা কপি করে দুটো ফাইল বানাবেন। নিম্মের কোড টুকু Index.html এ রাখবেনঃ-
Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Navigation Bar - Pogamar | The Tech Therapist</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="nav"> <div class='brand'> <h2><span><</span><span>/</span>Pogamar<span>></span></h2> </div> <div class='nav-items'> <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> </div> </div> </body> </html>
রেখে সেইভ দিন। এবং নিম্মের কোড টুকু রাখবেন style.css এঃ-
Example
/* ** A Original Content By Pogamar_YT * The Tech Therapist * Navigation Bar * Subscribe My youtube Channel * */ *{ margin:0; padding:0; } html, body { background: #f2f2f2; height: 100vh; font-family: 'Times New Roman'; } .nav { margin:0; padding:0; top: 0; width: 100%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); background-color: #333; position: fixed; overflow: hidden; } .nav .brand span { color: #e65c00; } .nav .brand h2 { color: #ff0000; } .brand h2 { padding-top: 6px; margin-left: 50px; } .nav .brand { width: 50%; float: left; } .nav .nav-items { width: 50%; float: right; } .nav .nav-items ul { list-style-type: none; } .nav-items ul li {float: left; } .nav-items ul li a { display: block; text-align: center; padding: 14px 16px; color: #fff; text-decoration: none; } .nav-items ul li a:hover:not(.active) { background: #111; } .active { background: #33cc33; }
এবার কোড টা এক্সিকিউট করুন। আপনি ওয়েব সার্ভার সেট করে সেখানেও রান করাতে পারেন। অথবা ক্রোম ওপেন করে এভাবে লিখতে পারেনঃ-
files://sdcard/folder_name
অর্থাৎ আপনার ফোল্ডার এর নাম যদি হয় Navbar তাহলে আপনাকে ইউয়ারএল বক্স এ লিখতে হবেঃ-
files://sdcard/Navbar/index.html
তারপর দেখুন আপনার কোড এক্সিকিউট হচ্ছে। এবার আপনার যেমন ভালো লাগে তেমন মডিফাই করে নিন। দরকার হলে কালার চেঞ্জ করে নিন। সম্পুর্ন আপনার ইচ্ছে
তো যাবার আগে শেষ কথা। আপনারা যারা আগের ভিডিও গুলো দেখেননি এখান থেকে দেখে নিবেন।
How to make a Login Form By html & css
How to make a Registration Form By html & css
আর এই নেভবার বানানোর টিউটোরিয়াল যদি দেখতে চান তাহলে এখান থেকে দেখে নিনঃ-
How to make a Navbar By html and css
আর যারা ওয়েব ডিজাইনিং এবং ডেভেলপমেন্ট শিখতে চান তারা আমার চ্যানেল সাবস্ক্রাইব করে রাখুন কারণ সামনে কিছু চেইন টিউটোরিয়ালের ব্যবস্থা আমি করছি যা আপনার হাজার হাজার টাকা বাচাবে। আমি যেহেতু সম্পুর্ণ ফ্রিতে নিজে কষ্ট করে শিখেছি। তা আপনাদের মধ্যে বিলি করতে আমার এইটুকু কষ্ট হবেনা। আমার আরও আনন্দের সংবাদ।
তো চ্যানেল ভালো লাগলে সাবস্ক্রাইব করবেন। এবং পোস্টের কমেন্টে বলুন আপনাদের প্রব্লেম এবং ভিডিও গুলোতে কি আমি প্রত্যেক লাইন কোড এক্সপ্লেইন করবো কিনা।
আবার আসব আরেক টিউটোরিয়াল নিয়ে। ততদিন সুস্থ থাকুন। Pogamar এর সাথে থাকুন।
আর যাদের এই টিউটোরিয়াল এর কোড গুলো প্রয়োজন তারা এখান থেকে ডাউনলোড করে নিনঃ Download Codes
ধন্যবাদ ভুল ত্রুটি ক্ষমা করবেন
প্লিজ Contributor বানান