Str website v-1.4(include dark mode)
Important link https://blog.eduonix.com/web-programming-tutorials/build-responsive-website-footer-using-html-css/
<!DOCTYPE html>
<html lang="en">
<head>
<button onclick="myFunction()"><i class="fa-light fa-lightbulb-exclamation"></i>dark mode</button>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="footer, address, phone, icons" />
<title>Responsive Footer</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
<style>
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
body {
font-family: Arial;
margin: 0;
}
* {
box-sizing: border-box;
}
img {
vertical-align: middle;
}
/* Position the image container (needed to position the left and right arrows) */
.container {
position: relative;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Container for image text */
.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Six columns side by side */
.column {
float: left;
width: 16.66%;
}
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
/* UTILITIES */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: cursive;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
/* NAVBAR STYLING STARTS */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background-color: teal;
color: #fff;
}
.nav-links a {
color: #fff;
}
/* LOGO */
.logo {
font-size: 32px;
}
/* NAVBAR MENU */
.menu {
display: flex;
gap: 1em;
font-size: 18px;
}
.menu li:hover {
background-color: #4c9e9e;
border-radius: 5px;
transition: 0.3s ease;
}
.menu li {
padding: 5px 14px;
}
/* DROPDOWN MENU */
.services {
position: relative;
}
.dropdown {
background-color: rgb(1, 139, 139);
padding: 1em 0;
position: absolute; /*WITH RESPECT TO PARENT*/
display: none;
border-radius: 8px;
top: 35px;
}
.dropdown li + li {
margin-top: 10px;
}
.dropdown li {
padding: 0.5em 1em;
width: 8em;
text-align: center;
}
.dropdown li:hover {
background-color: #4c9e9e;
}
.services:hover .dropdown {
display: block;
}
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: rgb(82,51,121);
padding: 20px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
.header-right {
float: right;
}
@media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
* {
box-sizing: border-box;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
.button {
display: inline-block;
border-radius: 2px;
background-color: #f4511e;
border:color:red;
color: #FFFFFF;
text-align: center;
font-size: 18px;
padding: 20px;
width: 350px;
transition: all 0.5s;
cursor: pointer;
margin: 10px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 1.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
h1 {color: red;}
@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,700');
*{
padding:0;
margin:0;
}
html{
background-color: #eaf0f2;
}
body{
font:16px/1.6 Arial, sans-serif;
}
header{
text-align: center;
padding-top: 100px;
margin-bottom:190px;
}
header h1{
font: normal 32px/1.5 'Open Sans', sans-serif;
color: #3F71AE;
padding-bottom: 16px;
}
header h2{
color: #F05283;
}
header span{
color: #3F71EA;
}
/* The footer is fixed to the bottom of the page */
footer{
position: fixed;
bottom: 0;
}
@media (max-height:800px){
footer { position: static; }
header { padding-top:40px; }
}
.footer-distributed{
background-color: #2c292f;
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px sans-serif;
padding: 50px 50px 60px 50px;
margin-top: 80px;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: inline-block;
vertical-align: top;
}
/* Footer left */
.footer-distributed .footer-left{
width: 30%;
}
.footer-distributed h3{
color: #ffffff;
font: normal 36px 'Cookie', cursive;
margin: 0;
}
/* The company logo */
.footer-distributed .footer-left img{
width: 30%;
}
.footer-distributed h3 span{
color: #e0ac1c;
}
/* Footer links */
.footer-distributed .footer-links{
color: #ffffff;
margin: 20px 0 12px;
}
.footer-distributed .footer-links a{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}
.footer-distributed .footer-company-name{
color: #8f9296;
font-size: 14px;
font-weight: normal;
margin: 0;
}
/* Footer Center */
.footer-distributed .footer-center{
width: 35%;
}
.footer-distributed .footer-center i{
background-color: #33383b;
color: #ffffff;
font-size: 25px;
width: 38px;
height: 38px;
border-radius: 50%;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}
.footer-distributed .footer-center i.fa-envelope{
font-size: 17px;
line-height: 38px;
}
.footer-distributed .footer-center p{
display: inline-block;
color: #ffffff;
vertical-align: middle;
margin:0;
}
.footer-distributed .footer-center p span{
display:block;
font-weight: normal;
font-size:14px;
line-height:2;
}
.footer-distributed .footer-center p a{
color: #e0ac1c;
text-decoration: none;;
}
/* Footer Right */
.footer-distributed .footer-right{
width: 30%;
}
.footer-distributed .footer-company-about{
line-height: 20px;
color: #92999f;
font-size: 13px;
font-weight: normal;
margin: 0;
}
.footer-distributed .footer-company-about span{
display: block;
color: #ffffff;
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
}
.footer-distributed .footer-icons{
margin-top: 25px;
}
.footer-distributed .footer-icons a{
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #33383b;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-right: 3px;
margin-bottom: 5px;
}
/* Here is the code for Responsive Footer */
/* You can remove below code if you don't want Footer to be responsive */
@media (max-width: 880px) {
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: block;
width: 100%;
margin-bottom: 40px;
text-align: center;
}
.footer-distributed .footer-center i{
margin-left: 0;
}
}
</style>
</head>
<body>
<nav class="navbar">
<!-- LOGO -->
<div class="logo">STR</div>
<!-- NAVIGATION MENU -->
<ul class="nav-links">
<!-- USING CHECKBOX HACK -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<!-- NAVIGATION MENUS -->
<div class="menu">
<li><a href="/">Home</a></li>
<li><a href="/">About</a></li>
<li class="services">
<a href="/">Services</a>
<!-- DROPDOWN MENU -->
<ul class="dropdown">
<li><a href="/">Dropdown 1 </a></li>
<li><a href="/">Dropdown 2</a></li>
<li><a href="/">Dropdown 2</a></li>
<li><a href="/">Dropdown 3</a></li>
<li><a href="/">Dropdown 4</a></li>
</ul>
</li>
<li><a href="/">Pricing</a></li>
<li><a href="/">Contact</a></li>
</div>
</ul>
</nav>
<h3> <div style="color:green">আসসালামু আলাইকুম </div></h3> <span style="color: rgb(28,82,104)">
সবাই কেমন আছেন | আশা করি </span> সবাই <mark> আল্লাহ রহমতে ভালো আছেন |</mark>
আপনাদের সবাইকে <abbr title="siddikur Rahman
Rayhan Website "> আমার ওয়েবসাইটে </abbr> স্বাগতম | <strong> আমি </strong> ২০২২ সালে এই কলেজ <font size="4" color="gray" face="cursive">
বিএফ শাহীন কলেজ, কুর্মিটোলায় </font> ভর্তি হয়েছি |
<h3>আমার পছন্দের সাবজেক্টসমূহ </h3>
<ol type = "a">
<li> MATH </li>
<li>CHEMISTRY </li>
<li> ISLAM </li>
</ol>
</li>
<h2> আমার পছন্দের ব্যাক্তিসমূহ </h2>
<ul style="list-style-type:disk">
<li> হযরত মুহাম্মদ সাঃ </li>
<li>আমার বাবা</li>
<li>আমার মা </li>
</ul>
<b>আপনাদেরকে একটা হাদিস বলছি </b>
<q>রাসুল (সা.) বলেন, ‘তোমাদের কেউ ততক্ষণ
পর্যন্ত ঈমানদার হতে
পারবে না, যতক্ষণ না তার
কাছে আমি তার পিতামাতার চেয়ে,
সন্তানাদির চেয়ে এবং সমস্
ত মানুষের চেয়ে প্রিয় না হব।’ <mark>(বুখারি, হাদিস : ১৫)</mark></q><br><br><hr>
<strong>চলুন কিছু ❓প্রশ্ন করি উত্তর দিন </strong> <br>
<input type="checkbox" name="vehicle" value="Read" checked> আমি কুরয়ান পড়ি 💗<br>
<input type="checkbox" name="vehicle" value="Learn" checked>আমি অর্থসহ এবং ব্যাখ্যা সহকারে কুরয়ান পড়ার চেষ্টা করি 💥 <br>
<input type="checkbox" name="vehicle" value="hadis " >আমার বাসায় ইবনে কাশির আছে ♥
</form><br><br>
<span style="color:orange"><big>আপনি চাইলে নিচের ফর্ম টি ফিলয়াপ করতে পারেন </big></span>
<h2>ফর্ম ফিলয়াপ করুন</h2>
<p>নিচের ফর্ম টি ফিলয়াপ করার পর সাবমিট বাটনে ক্লিক করুন </p>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="country">Country</label>
</div>
<div class="col-75">
<select id="country" name="country">
<option value="Bangladesh 🇧🇩">Bangladesh 🇧🇩</option>
<option value="Afghanistan ">Islamic Emirates Of Afghanistan 🇦🇫</option>
<option value="Saudi Arab">Saudi Arab 🇸🇦</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="subject">Subject</label>
</div>
<div class="col-75">
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
</div>
</div>
<br>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>
<button class="button" style="vertical-align:middle"><span><a href="fb.com/str.bhola" ><font size="7" color="black" face="cursive"><i class="fa fa-facebook" style="font-size:40px;color:blue;"></i>My Facebook Account</span></button></font>
<h1 style="color:black">Education Qualification </h1>
<div style="color:purpel">
<table border="3">
<tr style="color:red">
<td><b>Exam Name</b></td>
<td><b>Board<b></td>
<td><b>GPA</b></td>
</tr>
<tr>
<td>PSC</td>
<td>Barishal</td>
<td>5.00</td>
</tr>
<tr>
<td>JSC</td>
<td>Dhaka</td>
<td>4.86</td>
</tr>
<tr>
<td>SSC</td>
<td>Dahaka</td>
<td>5.00</td>
</tr>
</table></div>
<h2 style="text-align:center">Slideshow Gallery</h2>
<div class="container">
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="img_woods_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="img_5terre_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img src="img_lights_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="img_snow_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="img_woods.jpg" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
</div>
<div class="column">
<img class="demo cursor" src="img_5terre.jpg" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
</div>
<div class="column">
<img class="demo cursor" src="img_mountains.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="img_lights.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
<div class="column">
<img class="demo cursor" src="img_nature.jpg" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="img_snow.jpg" style="width:100%" onclick="currentSlide(6)" alt="Snowy Mountains">
</div>
</div>
</div>
<script>
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("demo");
let captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
<select name ="dropdown">
<option>HTML</option>
<option>CSS</option>
</select>
<textarea rows="4" cols="50">
I ,The son of Md Rafiqul Islam . From Bhola Bangladesh . I love to make blog post</textarea>
<h2 color="rgb(98,65,43)">Audio and video using html</h2>
<audio controls>
<source src="STR.mp3" type=audio/mpeg>
</audio>
<video width="330" height="240" controls>
<source src="str.mp4" type="video/mpeg">
</video>
<h2> <big style=color="rgb(92,29,117)">নিচের তথ্যগুলো আপনাদের কাজে লাগতে পারে </big></h2><br><hr><br>
<details>
<summary> <h1 color="rgb(13,21,231)">ভোলা জেলা </h1></summary>
<p>ভোলা জেলার পূর্ব নাম দক্ষিন শাহবাজপুর । </p>
<em> জে.সি. জ্যাক তার "বাকেরগঞ্জ গেজেটিয়ার"-এ
বলেছেন যে দ্বীপটি ১২৩৫ সালে তৈরি
হওয়া শুরু হয়েছিল এবং এই
এলাকায় চাষাবাদ
শুরু হয়েছিল ১৩০০ সালে।</em>
<br> <hr><br><
<small> ১৫০০ সালে
পর্তুগিজ এবং মগ জলদস্যুরা এই দ্বীপে তাদের ঘাঁটি স্থাপন করে। শাহবাজপুরের দক্ষিণাঞ্চলেও আরাকান ও মগ জলদস্যুরা তাদের ঘাঁটি স্থাপন করে। </small>
<br>
<base>
শাহবাজপুর ১৮২২ সাল </base>পর্যন্ত <pre>বাকেরগঞ্জ </pre>জেলার একটি <del>অংশ ছিল। ১৯</del> শতকের শুরুতে, <ins>মেঘনা নদীর সম্প্রসারণের কারণে জেলা সদর থেকে দক্ষিণ শাহজাদপুরের সাথে সংযোগ করা কঠিন হয়ে পড়ে। এরপর সরকার দক্ষিণ শাহবাজপুর ও হাতিয়াকে নোয়াখালী জেলার অন্তর্ভুক্ত করার সিদ্ধান্ত নেয়। ভোলা ১৮৬৯ সাল পর্যন্ত নোয়াখালীর অন্তর্ভুক্ত ছিল। ১৮৬৯ সালে, এটি একটি মহকুমা হিসেবে বরিশাল জেলার অন্তর্ভুক্ত ছিল। ১৮৭৬ সালে প্রশাসনিক সদর দফতর দৌলতখান থেকে ভোলায় স্থানান্তরিত করা হয়। ১৯৮৪ সালে, এটি একটি জেলা হিসাবে প্রতিষ্ঠিত হয়।
</ins></details>
<details>
<summary> <h2><big>সুলতান গিয়াস উদ্দিন আজম শাহঃ</big></h2></summary>
গিয়াসউদ্দিন আজম শাহ (শাসনকাল ১৩৮৯-১৪১০) ছিলেন প্রথম ইলিয়াস শাহি রাজবংশের তৃতীয় সুলতান।[১] তিনি তৎকালীন বাংলার সুপরিচিত সুলতানদের অন্যতম ছিলেন। তার প্রকৃত নাম আজম শাহ। সিংহাসন আরোহণের পর তিনি গিয়াস উদ্দিন আজম শাহ নাম ধারণ করেন।
গিয়াসউদ্দিন আজম শাহ
বাংলার সুলতান
রাজত্ব
১৩৮৯–১৪১০
পূর্বসূরি
সিকান্দার শাহ
উত্তরসূরি
সাইফউদ্দিন হামজা শাহ
বংশধর
সিকান্দার শাহ
প্রাসাদ
ইলিয়াস শাহি রাজবংশ
গিয়াসউদ্দিন আজম শাহর মাজার, নারায়ণগঞ্জ, বাংলাদেশ।
বৈদেশিক সম্পর্ক
সম্পাদনা
তিনি যুদ্ধর চেয়ে মিত্রতা ও কূটনীতির মাধ্যমে রাজ্যকে সমৃদ্ধ করতে বেশি আগ্রহী ছিলেন। তিনি চীনের মিং সাম্রাজ্যের সাথে কূটনৈতিক সম্পর্ক স্থাপন করেছিলেন, পারস্যের শীর্ষস্থানীয় চিন্তাবিদদের সাথে সাংস্কৃতিক যোগাযোগ স্থাপন করেছিলেন এবং আসামকে জয় করেছিলেন।[২] শাসনের প্রাথমিক পর্যায়ে তিনি কামরূপের বিরুদ্ধে একটি সামরিক অভিযান পরিচালনা করেন। তবে অঞ্চল জয়ের চেয়ে শাসন সুসংহত করার প্রতি তার মনোনিবেশ বেশি ছিল। জৌনপুরের খাজা জাহানের নিকট তিনি দূত ও উপহার প্রেরণ করেন।[৩] সমকালীন চৈনিক সম্রাট ইয়ং লির সাথে তার সুসম্পর্ক ছিল। ১৪০৫, ১৪০৮ ও ১৪০৯ সালে তিনি চীনে দূত প্রেরণ করেন।[৩] ইয়ং লিও তার কাছে দূত ও উপহার পাঠান। গিয়াসউদ্দিন আজম শাহ মক্কা ও মদিনায়ও দূত প্রেরণ করেন।[৪] এই দুই স্থানে গিয়াসিয়া মাদ্রাসা নামক দুটি মাদ্রাসা নির্মাণে তিনি আর্থিক সাহায্য প্রদান করেন।[৩] তার শাসনামলে জমিদার রাজা গণেশ নিজের ক্ষমতা বৃদ্ধি করেন।[৩]
সাহিত্যে আগ্রহ
সম্পাদনা
গিয়াসউদ্দিন আজম শাহ পণ্ডিত ও কবিদের সমাদর করতেন। পারস্যের কবি হাফিজের সাথে তার পত্রবিনিময় হত। বাঙালি মুসলিম কবি শাহ মুহম্মদ সগীর তার বিখ্যাত রচনা ইউসুফ জুলেখা এ সময়ে সম্পন্ন করেন। এসময় কৃত্তিবাসের রামায়ণ বাংলায় অনুবাদ করা হয়।[৩]
কবি হাফিজকে বাংলায় নিমন্ত্রন করার জবাবে তিনি সুলতানকে একটি গজল রচনা করে পাঠান।
<main>
"শক্কর শিকন শওন্দ হমাঃ তূতিয়ানে হিন্দ।
যী কন্দে ফারসী কেঃ ব-বঙ্গালাঃ মী রওদ॥
হাফিয যে শওকে মজ্লিসে সুলতানে গিয়াস্দীন।
গাফিল ম-শও কেঃ কারে তূ আয নালাঃ মী রওদ॥"
ভারতের তোতা হবে মিষ্টি-মুখো সকল-ই,
ফারসীর মিছরী যবে বাঙ্গালায় চলিছে।
হে হাফিয! গিয়াসুদ্দীন শাহের সভার বাসনা
ছেড়ো না, কাজ তোমারি কাঁদা-কাটায় চলিছে।</main></details>
<hr>
<header>
<h1> Responsive Footer </h1>
<h2>Have a look</h2>
<h2><span>On Below Footer</span></h2>
</header>
<!-- The content of your page would go here. -->
<footer class="footer-distributed">
<div class="footer-left">
<img src="img/logo.png">
<h3>About<span>Me</span></h3>
<p class="footer-links">
<a href="#">Home</a>
|
<a href="#">Blog</a>
|
<a href="#">About</a>
|
<a href="#">Contact</a>
</p>
<p class="footer-company-name">© 2022 Str Rayhan Pvt. Ltd.</p>
</div>
<div class="footer-center">
<div>
<i class="fa fa-map-marker"></i>
<p><span><adress>Jamadar Family House,Lord Hardinge
Lalmohan, Bhola</span></adress>
Siddikur Rahman Apartment -3502 </p>
</div>
<div>
<i class="fa fa-phone"></i>
<p>+880 1778869537</p>
</div>
<div>
<i class="fa fa-phone"></i>
<p>+880 1747 348 016</p>
</div>
<div>
<i class="fa fa-envelope"></i>
<p><a href="mailto:mdsiddikurrahman168813@gmail.com">support@inbox me </a></p>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">
<span>About The Website </span>
We offer training and skill building courses across Technology, Design, Management, Science and Humanities.</p>
<div class="footer-icons">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-youtube"></i></a>
</div>
</div>
</footer>
<marquee width="100%" direction="left" height="60%" bgcolor="#2c292f"><h1>এই ওয়েবসাইট টি ডেভেলোপ করেছেন <a href="fb.com/siddikurbhola" target="_blank"> © STR Rayhan </a></h1></marquee>
<hr>
<br>
<hr>
<br><span style="bgcolor:gray" bgcolor="#2c292f" face="cursive">এই ওয়েবসাইট টি রাত <time> ৮ টা ৩৪ মিনিট এ শেষ করেছিলাম | <time datetime="2022-09-01 20:36"></time>
<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
</body>
</html>
0 Comments: