হেয় গায়জ হোয়াটসআপ কি অবস্থা আমি ইনাদ ইসলাম। আবার হাজির হয়েছি একটা নতুন পোস্ট নিয়ে।
আমার একটা প্রশ্ন ছিলো যারা আমার ইউটিউব চ্যানেল এ ভিডিও দেখেছেন বা যারা দেখেননি তারা নিচ থেকে দেখার অনুরোদ রইলো। তাদের বলছি আপনারা কী প্রত্যেক টির এক্সপ্লেশন চান। মানে বিস্তারিত? কমেনট এ জানান।
তো টাইটেল দেখেই বুঝে গেছেন কিসের কথা বলছি। তো গত পোস্টে আমি বলেছিলাম ন্যাভবার কাকে বলে। এবং দেখিয়েছিলাম কীভাবে একটা ন্যাভবার ডিজাইন করতে হয়। তো আজও আমরা একটা ন্যাভবার বানাবো কিন্তু এই ন্যাভবারে আমাদের সাইটের লোগো মাঝখানে থাকবে। তাহলে চলেন শুরু করি।
তো প্রত্যেক বারের মতোই কোড দিবো আপনারা কপি করে দুটো ফাইল বানাবেন। নিম্মের কোড টুকু 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 এর মাধ্যমে ভিডিও ইম্বিড বন্ধ করে দিয়েছে। না হয় অনেক বার ট্রাই করলাম রিস্পোন্সিভ ইম্বিড দিতে বাট ব্যর্থ হলাম
ধন্যবাদ ভুল ত্রুটি ক্ষমা করবেন