হেয় গায়জ হোয়াটসআপ কি অবস্থা আমি ইনাদ ইসলাম। আবার হাজির হয়েছি একটা নতুন পোস্ট নিয়ে।
তো টাইটেল দেখেই বুঝে গেছেন কিসের কথা বলছি। তো গত পোস্টে আমরা দেখেছিলাম কিভাবে একটি ওয়েবসাইটের ল্যান্ডিং পেইজ ডিজাইন করা যায়। আজ আমরা দেখবো একটি পার্সোনাল ওয়েবসাইট৷ কীভাবে ডিজাইন করবো। তাহলে চলেন শুরু করি।
ভিডিও এবং টিউটোরিয়াল দিতে অনেক দেরি হচ্ছে কারণ আপনারা কেও কমেন্ট লরেন্না যে আপনাদের কি লাগবে আপনারা বলেন্না যে কি আপনাদের প্রবলেম তাই আমিও বুঝিনা কি নিয়ে ভিডিও এবং টিউটোরিয়াল বানানো। আপনারা আমাকে সাহায্য করুন তার বদলে সকল কিছুর জন্যে আমার ইনবক্স সবসময় খোলা।
তো প্রত্যেক বারের মতোই কোড দিবো আপনারা কপি করে দুটো ফাইল বানাবেন। নিম্মের কোড টুকু Index.html এ রাখবেনঃ-
Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Personal Website - Pogamar | The Tech Therapist</title> <link rel="stylesheet" href="http://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pacifico&display=swap"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main"> <nav class="nav"> <h2>Poagamr</h2> <ul> <li> <a href="#fb"><i class="fa fa-facebook"></i></a> </li> <li> <a href="#yt"><i class="fa fa-youtube-play"></i></a> </li> <li> <a href="#gh"><i class="fa fa-github"></i></a> </li> </ul> </nav> </div> <div class="content"> <h1>Inad Islam</h1> <span>- Web Developer</span> <p>- I am a Web Developer</p> <p>- But I do love Playing with <strong>HTML & CSS</strong></p> <p>- Cause I Find peace in it.When I lose my Heart</p> <p>- আমি একজন ওয়েব ডেভলপার। </p> <p>- কিন্তু আমি এইচটিএমএল এবং সিএসএস নিয়ে নতুন নতুন ডিজাইন বানাতে ভালোবাসি। </p> <p>- কারন ডিজাইনিং এ আমি শান্তি খুজে পাই বিশেষ করে তখন যখন আমার মন ভেঙ্গে যায়।</p> </div> </body> </html>
রেখে সেইভ দিন। এবং নিম্মের কোড টুকু রাখবেন style.css এঃ-
Example
/*
*
* A Pure Content By Pogamar
* The Tech Therapist
* Personal Website
*
*/
* {
margin:0;
padding:0;
}
html, body {
height: 100vh;
background: #232322;
overflow: hidden;
color: #fff;
}
.main {
width: 100%;
}
.nav h2 {
display: inline;
float: left;
vertical-align: middle;
color: #9898a8;
font-family: 'Pacifico', cursive;
margin-left: 25px;
margin-top: 17px;
}
ul {
float: right;
list-style-type: none;
margin-top: 25px;
margin-right: 20px;
}
ul li {
float: left;
}
ul li a {
display: block;
color: #646476;
font-size: 22px;
text-align: center;
padding: 3px 5px;;
}
ul li a:hover {
color: #ebebee;
}
.content {
display: block;
width: 700px;
height: 400px;
margin: 0 auto;
border-radius: 4px;
background: url(bg.jpg);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.content h1 {
font-family: 'Pacifico', cursive;
font-size: 22px;
margin-bottom: 0 !important;
line-height: 40px;
}
.content h1, p {
margin:20px;
}
strong {
font-family: 'Pacifico', cursive;
}
span {
margin-left: 60px;
margin-top: 0;
color: #b4b4bf;
}
এবার কোড টা এক্সিকিউট করুন। আপনি ওয়েব সার্ভার সেট করে সেখানেও রান করাতে পারেন। অথবা ক্রোম ওপেন করেও রান করাতে পারেন যেটা আমি গত তিন-চার পর্বেও দেখিয়েছিলাম। যারা দেখেননি তাদের জন্যে আজ আবার দেখিয়ে দেয়া হলো-
files://sdcard/folder_name
অর্থাৎ আপনার ফোল্ডার এর নাম যদি হয় Hor-Nav তাহলে আপনাকে ইউয়ারএল বক্স এ লিখতে হবেঃ-
files://sdcard/landing_page/index.html
তারপর দেখুন আপনার কোড এক্সিকিউট হচ্ছে। এবার আপনার যেমন ভালো লাগে তেমন মডিফাই করে নিন। দরকার হলে কালার চেঞ্জ করে নিন। সম্পুর্ন আপনার ইচ্ছে
তো যাবার আগে শেষ কথা। আপনারা যারা আগের ভিডিও গুলো দেখেননি এখান থেকে দেখে নিবেন।
How to make a Login Form By html & css
How to make a Centered Horizontal Nav Bar With logo by Html & css
How to make a Navbar By html & css
How to make a Registration Form By html & css
আর যাদের এই টিউটোরিয়াল টি বুঝতে অথবা কোড বুঝতে সমস্যা হচ্ছে তারা ভিডিও টি দেখুনঃ
আর যারা ওয়েব ডিজাইনিং এবং ডেভেলপমেন্ট শিখতে চান তারা আমার চ্যানেল সাবস্ক্রাইব করে রাখুন কারণ সামনে কিছু চেইন টিউটোরিয়ালের ব্যবস্থা আমি করছি যা আপনার হাজার হাজার টাকা বাচাবে। আমি যেহেতু সম্পুর্ণ ফ্রিতে নিজে কষ্ট করে শিখেছি। তা আপনাদের মধ্যে বিলি করতে আমার এইটুকু কষ্ট হবেনা। আমার আরও আনন্দের সংবাদ।
পোস্টের কমেন্টে বলুন আপনাদের প্রব্লেম এবং ভিডিও গুলোতে কি আমি প্রত্যেক লাইন কোড এক্সপ্লেইন করবো কিনা।
আর দয়া করে কমেন্ট করুন কি নিয়ে ভিডিও দেয়া যায় নিয়ে এতে করে ইন্সপাইরেশন এবং অনেক সাহায্য হয় আমার।
আবার আসব আরেক টিউটোরিয়াল নিয়ে। ততদিন সুস্থ থাকুন। Pogamar এর সাথে থাকুন।
আর যাদের এই টিউটোরিয়াল এর কোড গুলো প্রয়োজন তারা এখান থেকে ডাউনলোড করে নিনঃ Download Codes
আর ভালো লাগলে আমার চ্যানেল টি সাবস্ক্রাইব করুনঃ
ধন্যবাদ ভুল ত্রুটি ক্ষমা করবেন
তবে আপনার ফেসবুক আইডির লিংক তো কাজ করে না মনে হয়।