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